1943 files changed, 110326 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-writing-modes/META.yml b/testing/web-platform/tests/css/css-writing-modes/META.yml
new file mode 100644
index 0000000000..c11da73b6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/META.yml
@@ -0,0 +1,7 @@
+spec: https://drafts.csswg.org/css-writing-modes/
+suggested_reviewers:
+  - kojiishi
+  - fantasai
+  - r12a
+  - plinss
+  - upsuper
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-001-ref.html
new file mode 100644
index 0000000000..18a54a41b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-001-ref.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<style>
+  body { margin: 0; }
+  .cb {
+    position: relative;
+    inline-size: 45px;
+    block-size: 40px;
+    background: lightblue;
+    border: solid gray;
+    border-width: 1px 2px 3px 4px;
+    float: left;
+    margin-right: 5px;
+  }
+  .parent {
+    inline-size: 35px;
+    block-size: 30px;
+    background: orange;
+  }
+  .abspos {
+    inline-size: 20px;
+    block-size: 15px;
+    background: pink;
+  }
+
+  .vrl {
+    writing-mode: vertical-rl;
+  }
+  .vlr {
+    writing-mode: vertical-lr;
+  }
+  .htb {
+    writing-mode: horizontal-tb;
+  }
+
+  .ltr {
+    direction: ltr;
+  }
+  .rtl {
+    direction: rtl;
+  }
+
+  .sep {
+    clear: both;
+    display: block;
+    height: 5px;
+  }
+</style>
+<body>
+  <div class="cb htb ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb htb rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-001.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-001.html
new file mode 100644
index 0000000000..f7b7375bdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-001.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta name="assert"
+  content="This test checks that absolutely positioned elements are offset correctly in a bordered containing block, in different combinations of writing modes and directions." />
+<link rel="match" href="abs-pos-border-offset-001-ref.html">
+<style>
+  body { margin: 0; }
+  .cb {
+    position: relative;
+    inline-size: 45px;
+    block-size: 40px;
+    background: lightblue;
+    border: solid gray;
+    border-width: 1px 2px 3px 4px;
+    float: left;
+    margin-right: 5px;
+  }
+  .parent {
+    inline-size: 35px;
+    block-size: 30px;
+    background: orange;
+  }
+  .abspos {
+    position: absolute;
+    inline-size: 20px;
+    block-size: 15px;
+    background: pink;
+  }
+
+  .vrl {
+    writing-mode: vertical-rl;
+  }
+  .vlr {
+    writing-mode: vertical-lr;
+  }
+  .htb {
+    writing-mode: horizontal-tb;
+  }
+
+  .ltr {
+    direction: ltr;
+  }
+  .rtl {
+    direction: rtl;
+  }
+
+  .sep {
+    clear: both;
+    display: block;
+    height: 5px;
+  }
+</style>
+<body>
+  <div class="cb htb ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb htb rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-002-ref.html
new file mode 100644
index 0000000000..98ec0d0c70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-002-ref.html
@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<style>
+  body { margin: 0; }
+  .cb {
+    position: relative;
+    inline-size: 45px;
+    block-size: 40px;
+    background: lightblue;
+    border: solid gray;
+    border-width: 1px 2px 3px 4px;
+    float: left;
+    margin-right: 5px;
+  }
+  .parent {
+    inline-size: 35px;
+    block-size: 30px;
+    background: orange;
+  }
+  .abspos {
+    inline-size: 20px;
+    block-size: 15px;
+    background: pink;
+  }
+
+  .vrl {
+    writing-mode: vertical-rl;
+  }
+  .vlr {
+    writing-mode: vertical-lr;
+  }
+  .srl {
+    writing-mode: sideways-rl;
+  }
+  .slr {
+    writing-mode: sideways-lr;
+  }
+  .htb {
+    writing-mode: horizontal-tb;
+  }
+
+  .ltr {
+    direction: ltr;
+  }
+  .rtl {
+    direction: rtl;
+  }
+
+  .sep {
+    clear: both;
+    display: block;
+    height: 5px;
+  }
+</style>
+<body>
+  <div class="cb htb ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb htb rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb slr ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb slr rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb srl ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb srl rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-002.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-002.html
new file mode 100644
index 0000000000..a954a56733
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-002.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta name="assert" content="This test checks that absolutely positioned elements are offset correctly in a bordered containing block, in different combinations of sideways writing modes and directions." />
+<link rel="match" href="abs-pos-border-offset-002-ref.html">
+<style>
+  body { margin: 0; }
+  .cb {
+    position: relative;
+    inline-size: 45px;
+    block-size: 40px;
+    background: lightblue;
+    border: solid gray;
+    border-width: 1px 2px 3px 4px;
+    float: left;
+    margin-right: 5px;
+  }
+  .parent {
+    inline-size: 35px;
+    block-size: 30px;
+    background: orange;
+  }
+  .abspos {
+    position: absolute;
+    inline-size: 20px;
+    block-size: 15px;
+    background: pink;
+  }
+
+  .srl {
+    writing-mode: sideways-rl;
+  }
+  .slr {
+    writing-mode: sideways-lr;
+  }
+  .vrl {
+    writing-mode: vertical-rl;
+  }
+  .vlr {
+    writing-mode: vertical-lr;
+  }
+  .htb {
+    writing-mode: horizontal-tb;
+  }
+
+  .ltr {
+    direction: ltr;
+  }
+  .rtl {
+    direction: rtl;
+  }
+
+  .sep {
+    clear: both;
+    display: block;
+    height: 5px;
+  }
+</style>
+<body>
+  <div class="cb htb ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb htb rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb htb rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vlr rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vlr rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb vrl rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb vrl rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb slr ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb slr rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb slr rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb srl ltr">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl ltr">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+
+  <div class="cb srl rtl">
+    <div class="parent htb ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent htb rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vlr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vlr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vrl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent vrl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent slr ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent slr rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent srl ltr">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="cb srl rtl">
+    <div class="parent srl rtl">
+      <div class="abspos"></div>
+    </div>
+  </div>
+  <div class="sep"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-003.xht
new file mode 100644
index 0000000000..dea0f93355
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-003.xht
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left: auto', 'width: auto' and 'right: auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'left' to the static position. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: ltr;
+    }
+
+  div#green-overlapping-test
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+  (...)
+  3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+            8px : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-005.xht
new file mode 100644
index 0000000000..2d18cea21f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-005.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left: auto', 'width: auto' and 'right: auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'right' to the static position. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  div#green-overlapping-test
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+  (...)
+  1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          solve : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+            8px : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-007.xht
new file mode 100644
index 0000000000..729c9bf4a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-007.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'width' are 'auto' and 'right' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: auto;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-007.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-009.xht
new file mode 100644
index 0000000000..a6fb6ab351
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-009.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' and 'width' are 'auto' and 'right' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-009.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-011.xht
new file mode 100644
index 0000000000..b9329475c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-011.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left' and 'right' are 'auto' and 'width' is not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'right' are 'auto' and 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'ltr' must set left to static position and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: ltr;
+    }
+
+  div#green-overlapping-test
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 50px;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position (...) Then solve for (...) 'right' (if 'direction' is 'ltr').
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+            8px : left (set to static position)
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-013.xht
new file mode 100644
index 0000000000..9ad8ff8138
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-013.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left' and 'right' are 'auto', 'width' is not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' and 'right' are 'auto', 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'rtl' must set right to static position and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  div#green-overlapping-test
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 50px;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'rtl' set 'right' to the static position (...) Then solve for 'left' (if 'direction is 'rtl').
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right (set to static position)
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          solve : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+            8px : right (static position)
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-015.xht
new file mode 100644
index 0000000000..95a7ebab12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-015.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'width' and 'right' are 'auto' and 'left' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 60% of 500px == 300px (offset of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-015.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-017.xht
new file mode 100644
index 0000000000..4259566708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-017.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'width' and 'right' are 'auto' and 'left' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 60% of 500px == 300px (offset of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-017.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-019.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-019.xht
new file mode 100644
index 0000000000..745e405eab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-019.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: auto;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-019.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-021.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-021.xht
new file mode 100644
index 0000000000..94e3bf183f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-021.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: auto;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-021.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-023.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-023.xht
new file mode 100644
index 0000000000..9665cbda85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-023.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'width' is 'auto', 'left' and 'right' are not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'width' is 'auto', 'left' and 'right' are not 'auto') whose containing block is the initial containing block must solve 'width'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-023.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-025.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-025.xht
new file mode 100644
index 0000000000..1f1b219b27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-025.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'width' is 'auto', 'left' and 'right' are not 'auto' with direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'width' is 'auto', 'left' and 'right' are not 'auto') whose containing block is the initial containing block must solve 'width'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-025.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-027.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-027.xht
new file mode 100644
index 0000000000..5b44fac68d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-027.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'right' is 'auto', 'left' and 'width' are not 'auto') whose containing block is the initial containing block must solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-027.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-029.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-029.xht
new file mode 100644
index 0000000000..9b58a70d2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-029.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'right' is 'auto', 'left' and 'width' are not 'auto') whose containing block is the initial containing block must solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-029.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-031.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-031.xht
new file mode 100644
index 0000000000..3010cb5872
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-031.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - overconstrained values with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with overconstrained 'left', 'width' and 'right' values) whose containing block is the initial containing block must ignore the value for 'right' and solve for that value. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-031.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-033.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-033.xht
new file mode 100644
index 0000000000..113c4762d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-033.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - overconstrained values with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with overconstrained 'left', 'width' and 'right' values) whose containing block is the initial containing block must ignore the value for 'left' and solve for that value. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vlr-033.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-002.xht
new file mode 100644
index 0000000000..86501a1a00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-002.xht
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left: auto', 'width: auto' and 'right: auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'left' to the static position. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: ltr;
+    }
+
+  div#green-overlapping-test
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+  (...)
+  3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+            8px : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-004-ref.xht
new file mode 100644
index 0000000000..8153a72aff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-004-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      top: 16px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><br /><img id="green-square" src="support/swatch-green.png" width="100" height="100" alt="Image download support must be enabled" /></p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-004.xht
new file mode 100644
index 0000000000..8e10a2220b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-004.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left: auto', 'width: auto' and 'right: auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'right' to the static position. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  div#green-overlapping-test
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+  (...)
+  1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          solve : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+            8px : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-006.xht
new file mode 100644
index 0000000000..7f19de2d15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-006.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'width' are 'auto' and 'right' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: auto;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-006.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-008-ref.xht
new file mode 100644
index 0000000000..47837c03a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-008-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: green;
+      height: 100px;
+      margin-left: 300px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-008.xht
new file mode 100644
index 0000000000..6589bce28e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-008.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' and 'width' are 'auto' and 'right' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-008.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-010.xht
new file mode 100644
index 0000000000..492d10b83e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-010.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left' and 'right' are 'auto', 'width' is not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'right' are 'auto', 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'ltr' must set left to static position and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: ltr;
+    }
+
+  div#green-overlapping-test
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 50px;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position (...) Then solve for (...) 'right' (if 'direction' is 'ltr').
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+            8px : left (set to static position)
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-012.xht
new file mode 100644
index 0000000000..60275c210c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-012.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left' and 'right' are 'auto', 'width' is not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' and 'right' are 'auto', 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'rtl' must set right to static position and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  div#green-overlapping-test
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 50px;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'rtl' set 'right' to the static position (...) Then solve for 'left' (if 'direction is 'rtl').
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right (set to static position)
+        ====================
+                : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          solve : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+            8px : right (static position)
+        ====================
+                : width of containing block (width of Initial Containing Block)
+  */
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div id="green-overlapping-test"></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-014.xht
new file mode 100644
index 0000000000..53764a3563
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-014.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'width' and 'right' are 'auto' and 'left' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 60% of 500px == 300px (offset of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-014.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-016.xht
new file mode 100644
index 0000000000..56ce10e84e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-016.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'width' and 'right' are 'auto' and 'left' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 60% of 500px == 300px (offset of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-016.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-018.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-018.xht
new file mode 100644
index 0000000000..16a731162d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-018.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: auto;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-018.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-020.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-020.xht
new file mode 100644
index 0000000000..2c471942a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-020.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px; /* 500px divided by 5 == 100px (width of green square) */
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: auto;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-020.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-022.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-022.xht
new file mode 100644
index 0000000000..4cefa96e61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-022.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'width' is 'auto', 'left' and 'right' are not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'width' is 'auto', 'left' and 'right' are not 'auto') whose containing block is the initial containing block must solve 'width'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-022.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-024.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-024.xht
new file mode 100644
index 0000000000..a8c2386b2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-024.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'width' is 'auto', 'left' and 'right' are not 'auto' with direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'width' is 'auto', 'left' and 'right' are not 'auto') whose containing block is the initial containing block must solve 'width'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-024.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-026.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-026.xht
new file mode 100644
index 0000000000..12dcc60130
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-026.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'right' is 'auto', 'left' and 'width' are not 'auto') whose containing block is the initial containing block must solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-026.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-028.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-028.xht
new file mode 100644
index 0000000000..fc5b1a344a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-028.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'right' is 'auto', 'left' and 'width' are not 'auto') whose containing block is the initial containing block must solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-028.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-030.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-030.xht
new file mode 100644
index 0000000000..3babcc291b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-030.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - overconstrained values with 'direction: ltr' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with overconstrained 'left', 'width' and 'right' values) whose containing block is the initial containing block must ignore the value for 'right' and solve for that value. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-030.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-032.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-032.xht
new file mode 100644
index 0000000000..f4a8c932ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-icb-vrl-032.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - overconstrained values with 'direction: rtl' in initial containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with overconstrained 'left', 'width' and 'right' values) whose containing block is the initial containing block must ignore the value for 'left' and solve for that value. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  object#overlapping-green
+    {
+      height: 116px;
+      width: 500px;
+      vertical-align: top;
+    }
+
+  div#red-overlapped-reference
+    {
+      background-color: red;
+      bottom: 116px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-032.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML &lt;object&gt; element.</object></div>
+
+  <div id="red-overlapped-reference"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-003-ref.xht
new file mode 100644
index 0000000000..2c269fa096
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-003-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      left: 80px;
+      position: relative;
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-003.xht
new file mode 100644
index 0000000000..75f84ff8e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-003.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-005.xht
new file mode 100644
index 0000000000..3fb6af1adf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-005.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto', then set 'left' to the static position, the width becomes shrink-to-fit and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-007-ref.xht
new file mode 100644
index 0000000000..9fe444cfc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-007-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      left: 96px; /* 80px + p's margin-left (1em) */
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-007.xht
new file mode 100644
index 0000000000..393e4d27ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-007.xht
@@ -0,0 +1,121 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-009-ref.xht
new file mode 100644
index 0000000000..e5a7086156
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-009-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      left: 80px;
+      position: relative;
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-009.xht
new file mode 100644
index 0000000000..19a28dc182
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-009.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then set 'bottom' to the static position, the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-011.xht
new file mode 100644
index 0000000000..d4a910aa2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-011.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto', then set 'right' to the static position, the width becomes shrink-to-fit and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right: auto: set to static position
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-013-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-013-ref.xht
new file mode 100644
index 0000000000..299aff3fae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-013-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      left: 96px; /* 80px + p's margin-left (1em) */
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-013.xht
new file mode 100644
index 0000000000..e5004c99b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-013.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then set 'bottom' to the static position, the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-015.xht
new file mode 100644
index 0000000000..c9ae65c856
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-015.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' are 'auto' and bottom is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' are 'auto' and bottom is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-017.xht
new file mode 100644
index 0000000000..262626b239
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-017.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-019.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-019.xht
new file mode 100644
index 0000000000..0f17d375e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-019.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-021.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-021.xht
new file mode 100644
index 0000000000..7372f0123f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-021.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-023.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-023.xht
new file mode 100644
index 0000000000..fed2e6c453
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-023.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     160px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-025.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-025.xht
new file mode 100644
index 0000000000..6adfb0eaa8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-025.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' are 'auto' and bottom is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-027.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-027.xht
new file mode 100644
index 0000000000..0524fa9d51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-027.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+   (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-029.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-029.xht
new file mode 100644
index 0000000000..6c1628bef3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-029.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-031.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-031.xht
new file mode 100644
index 0000000000..1e85ef0279
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-031.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-033.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-033.xht
new file mode 100644
index 0000000000..e357af7860
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-033.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-035.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-035.xht
new file mode 100644
index 0000000000..ddac802a41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-035.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-037.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-037.xht
new file mode 100644
index 0000000000..5ac8d34728
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-037.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-039.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-039.xht
new file mode 100644
index 0000000000..3c978623d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-039.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-041.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-041.xht
new file mode 100644
index 0000000000..1ffcfad3c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-041.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-043.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-043.xht
new file mode 100644
index 0000000000..f049cac796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-043.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+   (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-045.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-045.xht
new file mode 100644
index 0000000000..5844e94178
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-045.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-047.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-047.xht
new file mode 100644
index 0000000000..41886d4dff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-047.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-049.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-049.xht
new file mode 100644
index 0000000000..b4ed9e6dfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-049.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-051.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-051.xht
new file mode 100644
index 0000000000..2ccef67c82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-051.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-053.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-053.xht
new file mode 100644
index 0000000000..a57d307b15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-053.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-055.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-055.xht
new file mode 100644
index 0000000000..79a23bf404
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-055.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-057.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-057.xht
new file mode 100644
index 0000000000..86adfda202
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-057.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-059.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-059.xht
new file mode 100644
index 0000000000..4e09410600
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-059.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+4.'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-061.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-061.xht
new file mode 100644
index 0000000000..6ada389cf4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-061.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-063.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-063.xht
new file mode 100644
index 0000000000..f4546d0b23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-063.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-065.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-065.xht
new file mode 100644
index 0000000000..88a6cf1b88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-065.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and  'width' is 'auto', 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 2em;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (solve) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-067.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-067.xht
new file mode 100644
index 0000000000..84dcaf74ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-067.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-069.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-069.xht
new file mode 100644
index 0000000000..db9b25b0d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-069.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-071.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-071.xht
new file mode 100644
index 0000000000..e180caf734
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-071.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 2em;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (solve) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-073.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-073.xht
new file mode 100644
index 0000000000..74e6bb1314
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-073.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-075.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-075.xht
new file mode 100644
index 0000000000..7349b31d8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-075.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-077.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-077.xht
new file mode 100644
index 0000000000..9c8d339dd6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-077.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-079.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-079.xht
new file mode 100644
index 0000000000..a2a5aefc53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-079.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-081.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-081.xht
new file mode 100644
index 0000000000..52775fd5ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-081.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-083.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-083.xht
new file mode 100644
index 0000000000..56cda7f053
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-083.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-085.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-085.xht
new file mode 100644
index 0000000000..d355fe8ba0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-085.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-087.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-087.xht
new file mode 100644
index 0000000000..9cf55e038f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-087.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-089.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-089.xht
new file mode 100644
index 0000000000..00bc94aa6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-089.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained), then ignore 'right' and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      margin-left: 0em;
+      margin-right: 0em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-091.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-091.xht
new file mode 100644
index 0000000000..a20317afea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-091.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-093.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-093.xht
new file mode 100644
index 0000000000..4a97488736
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-093.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-095.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-095.xht
new file mode 100644
index 0000000000..7441d40266
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-095.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are not 'auto' and if the values are overconstrained, then ignore 'left' and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      margin-left: 0em;
+      margin-right: 0em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-097.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-097.xht
new file mode 100644
index 0000000000..3f6d8a8d41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-097.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-103.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-103.xht
new file mode 100644
index 0000000000..a2d79fcbcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-103.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position, the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-105.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-105.xht
new file mode 100644
index 0000000000..733d1add67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-105.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height', and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, the height is based on content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-107.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-107.xht
new file mode 100644
index 0000000000..8e6072f99c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-107.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position, the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-109.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-109.xht
new file mode 100644
index 0000000000..4d5ec4b504
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-109.xht
@@ -0,0 +1,117 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position, the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-111.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-111.xht
new file mode 100644
index 0000000000..2c86adaf98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-111.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position, the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-113.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-113.xht
new file mode 100644
index 0000000000..025997de70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-113.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height', and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, the height is based on content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-115.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-115.xht
new file mode 100644
index 0000000000..a2534cc2b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-115.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position, the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-117.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-117.xht
new file mode 100644
index 0000000000..b6a0419765
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-117.xht
@@ -0,0 +1,117 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position, the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-119.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-119.xht
new file mode 100644
index 0000000000..8765b535a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-119.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-121.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-121.xht
new file mode 100644
index 0000000000..b507666f98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-121.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-123.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-123.xht
new file mode 100644
index 0000000000..65f3d46e9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-123.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-125.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-125.xht
new file mode 100644
index 0000000000..31760e3c60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-125.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-127.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-127.xht
new file mode 100644
index 0000000000..fdaeed3226
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-127.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-129.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-129.xht
new file mode 100644
index 0000000000..d8ad0a1a2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-129.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-131.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-131.xht
new file mode 100644
index 0000000000..a3e527e6e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-131.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-133.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-133.xht
new file mode 100644
index 0000000000..0fa5f304f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-133.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-135.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-135.xht
new file mode 100644
index 0000000000..9f248c0357
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-135.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-137.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-137.xht
new file mode 100644
index 0000000000..b88b5fc225
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-137.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: auto;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-139.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-139.xht
new file mode 100644
index 0000000000..bd19569e5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-139.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-141.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-141.xht
new file mode 100644
index 0000000000..fbbef1728c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-141.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-143.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-143.xht
new file mode 100644
index 0000000000..091ad58033
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-143.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-145.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-145.xht
new file mode 100644
index 0000000000..c8307154e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-145.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: auto;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-147.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-147.xht
new file mode 100644
index 0000000000..3c0f2e8f53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-147.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-149.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-149.xht
new file mode 100644
index 0000000000..6585da4888
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-149.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-lr', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-151.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-151.xht
new file mode 100644
index 0000000000..31f0d22134
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-151.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-153.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-153.xht
new file mode 100644
index 0000000000..21def0e75e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-153.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-155-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-155-ref.xht
new file mode 100644
index 0000000000..427963efdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-155-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      left: 176px;
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-155.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-155.xht
new file mode 100644
index 0000000000..ecbbd7a80a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-155.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-155-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-157.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-157.xht
new file mode 100644
index 0000000000..6163dbb684
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-157.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-159.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-159.xht
new file mode 100644
index 0000000000..da3fb332e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-159.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-161.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-161.xht
new file mode 100644
index 0000000000..31da2996c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-161.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto' and 'writing-mode' is 'vertical-lr', then then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-163-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-163-ref.xht
new file mode 100644
index 0000000000..3d98e2147a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-163-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      left: 176px;
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-163.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-163.xht
new file mode 100644
index 0000000000..ea522d771b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-163.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-163-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-165.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-165.xht
new file mode 100644
index 0000000000..76fae70338
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-165.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-lr', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-167.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-167.xht
new file mode 100644
index 0000000000..ef7ebaf0af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-167.xht
@@ -0,0 +1,91 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto', 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-169.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-169.xht
new file mode 100644
index 0000000000..a940c2034a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-169.xht
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto', 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto', 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-171.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-171.xht
new file mode 100644
index 0000000000..549af1dd9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-171.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-173.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-173.xht
new file mode 100644
index 0000000000..3446610630
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-173.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-175.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-175.xht
new file mode 100644
index 0000000000..e8ec198657
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-175.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-177.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-177.xht
new file mode 100644
index 0000000000..820ac35fff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-177.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto', 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto', 'height' and 'bottom' are not 'auto', then then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-179.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-179.xht
new file mode 100644
index 0000000000..002f79adc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-179.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-181.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-181.xht
new file mode 100644
index 0000000000..e986815fae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-181.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-183.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-183.xht
new file mode 100644
index 0000000000..ce794b7b64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-183.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-185.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-185.xht
new file mode 100644
index 0000000000..e3ebb4e0b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-185.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto', 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto', 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height : auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-187.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-187.xht
new file mode 100644
index 0000000000..689cbba955
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-187.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-189.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-189.xht
new file mode 100644
index 0000000000..e3ec432a4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-189.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-191.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-191.xht
new file mode 100644
index 0000000000..a43e27badd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-191.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-193.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-193.xht
new file mode 100644
index 0000000000..55a763e619
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-193.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto', 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto', 'top' and 'bottom' are not 'auto', then then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height : auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-195.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-195.xht
new file mode 100644
index 0000000000..327e25710b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-195.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-197.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-197.xht
new file mode 100644
index 0000000000..1b1323d347
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-197.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-199.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-199.xht
new file mode 100644
index 0000000000..3c92f25ee1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-199.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-201.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-201.xht
new file mode 100644
index 0000000000..80a7a10519
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-201.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto', 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto', 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      position: absolute;
+      top: 1em;
+      height: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-203.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-203.xht
new file mode 100644
index 0000000000..638c2831b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-203.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-155-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-205.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-205.xht
new file mode 100644
index 0000000000..081fbb2575
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-205.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-207.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-207.xht
new file mode 100644
index 0000000000..22d0577d1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-207.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-209.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-209.xht
new file mode 100644
index 0000000000..3a3699546e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-209.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto', 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto', 'top' and 'height' are not 'auto', then then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height : auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-211.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-211.xht
new file mode 100644
index 0000000000..7d7e07b261
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-211.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-163-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-213.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-213.xht
new file mode 100644
index 0000000000..0100a9098f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-213.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-215.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-215.xht
new file mode 100644
index 0000000000..584579ab78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-215.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr' and if the values are over-constrained, then ignore the value for 'right' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+  (solve) : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-217.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-217.xht
new file mode 100644
index 0000000000..fd2c29e201
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-217.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'bottom' and 'height' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'bottom' and 'height' are not 'auto' and if the values are over-constrained, then ignore the value for 'bottom' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 2em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-219.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-219.xht
new file mode 100644
index 0000000000..ee779d438f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-219.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-155-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr' and if the values are over-constrained, then ignore the value for 'right' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+  (solve) : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-221.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-221.xht
new file mode 100644
index 0000000000..2db8cbf058
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-221.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr' and if the values are over-constrained, then ignore the value for 'right' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+  (solve) : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-223.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-223.xht
new file mode 100644
index 0000000000..d458d4dc22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-223.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr' and if the values are over-constrained, then ignore the value for 'right' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+  (solve) : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-225.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-225.xht
new file mode 100644
index 0000000000..e859d2b4cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-225.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'bottom' and 'height' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'bottom' and 'height' are not 'auto' and if the values are over-constrained, then ignore the value for 'bottom' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 2em;
+      writing-mode: vertical-lr;
+    }
+
+/*
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-227.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-227.xht
new file mode 100644
index 0000000000..215bc5ad98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-227.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-163-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr' and if the values are over-constrained, then ignore the value for 'right' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+  (solve) : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-229.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-229.xht
new file mode 100644
index 0000000000..a184b755a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vlr-229.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-lr' and if the values are over-constrained, then ignore the value for 'right' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *left properties and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+  (solve) : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-002-ref.xht
new file mode 100644
index 0000000000..1b0afddb3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-002-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      left: 160px;
+      position: relative;
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-002.xht
new file mode 100644
index 0000000000..0fd85db8f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-002.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-004-ref.xht
new file mode 100644
index 0000000000..2937fb22bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-004-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      left: 160px;
+      position: relative;
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-004.xht
new file mode 100644
index 0000000000..56ef882754
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-004.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto', then set 'left' to the static position, the width becomes shrink-to-fit and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-006-ref.xht
new file mode 100644
index 0000000000..344ecda55b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-006-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      right: 96px; /* 80px + p's margin-left (1em) */
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-006.xht
new file mode 100644
index 0000000000..a4ebdbdd7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-006.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-008.xht
new file mode 100644
index 0000000000..4046dfacbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-008.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then set 'bottom' to the static position, the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-010.xht
new file mode 100644
index 0000000000..5e432a2ecf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-010.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto', then set 'right' to the static position, the width becomes shrink-to-fit and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right: auto: set to static position
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-012-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-012-ref.xht
new file mode 100644
index 0000000000..a5b83e4bfc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-012-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      right: 96px; /* 80px + p's margin-left (1em) */
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-012.xht
new file mode 100644
index 0000000000..6baf1f97cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-012.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then set 'bottom' to the static position, the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
+
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-014.xht
new file mode 100644
index 0000000000..57541b5981
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-014.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' are 'auto' and bottom is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-016.xht
new file mode 100644
index 0000000000..ceeb90b0f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-016.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-018.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-018.xht
new file mode 100644
index 0000000000..6b3ba71eee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-018.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-020.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-020.xht
new file mode 100644
index 0000000000..4243443342
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-020.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-022.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-022.xht
new file mode 100644
index 0000000000..de39c12aca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-022.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-024.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-024.xht
new file mode 100644
index 0000000000..3da1bbb491
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-024.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-026.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-026.xht
new file mode 100644
index 0000000000..30d6dae934
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-026.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-028.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-028.xht
new file mode 100644
index 0000000000..82fd5a8f1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-028.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'left' to the static position and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+    160px : left: auto: set to static position
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-030.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-030.xht
new file mode 100644
index 0000000000..a55b68cb02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-030.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-032.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-032.xht
new file mode 100644
index 0000000000..c060205edf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-032.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-034.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-034.xht
new file mode 100644
index 0000000000..ab6c6331f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-034.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right: auto: set to static position
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-036.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-036.xht
new file mode 100644
index 0000000000..9ed00d76cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-036.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to static position and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom: auto: set to static position
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-038.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-038.xht
new file mode 100644
index 0000000000..4137f3c6b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-038.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-040.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-040.xht
new file mode 100644
index 0000000000..658c8deaf5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-040.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-042.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-042.xht
new file mode 100644
index 0000000000..2dbe429fd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-042.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-044.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-044.xht
new file mode 100644
index 0000000000..fbe8af38f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-044.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-046.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-046.xht
new file mode 100644
index 0000000000..2b7e896453
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-046.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : (shrink-to-fit) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-048.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-048.xht
new file mode 100644
index 0000000000..1daeaa3ad1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-048.xht
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on the content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-050.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-050.xht
new file mode 100644
index 0000000000..1220dcfa89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-050.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-052.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-052.xht
new file mode 100644
index 0000000000..e78716a302
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-052.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-054.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-054.xht
new file mode 100644
index 0000000000..91cbed69f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-054.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-056.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-056.xht
new file mode 100644
index 0000000000..598d2ef13d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-056.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-058.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-058.xht
new file mode 100644
index 0000000000..90e9128cfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-058.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+4.'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : left: auto
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-060.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-060.xht
new file mode 100644
index 0000000000..1344aca215
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-060.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-062.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-062.xht
new file mode 100644
index 0000000000..680b0a4e3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-062.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-064.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-064.xht
new file mode 100644
index 0000000000..139b9dce55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-064.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and  'width' is 'auto', 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 2em;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (solve) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-066.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-066.xht
new file mode 100644
index 0000000000..1d99ec1d69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-066.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-068.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-068.xht
new file mode 100644
index 0000000000..05166bfdd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-068.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-070.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-070.xht
new file mode 100644
index 0000000000..3712360287
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-070.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 2em;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+  (solve) : width: auto
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+     80px : right
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-072.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-072.xht
new file mode 100644
index 0000000000..e1fe004ba7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-072.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-074.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-074.xht
new file mode 100644
index 0000000000..06bc44d172
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-074.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-076.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-076.xht
new file mode 100644
index 0000000000..08cb6f4d9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-076.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-078.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-078.xht
new file mode 100644
index 0000000000..ec97755e52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-078.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-080.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-080.xht
new file mode 100644
index 0000000000..6861dcdebf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-080.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-082.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-082.xht
new file mode 100644
index 0000000000..9644363e6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-082.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-084.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-084.xht
new file mode 100644
index 0000000000..29a68a2d3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-084.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-086.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-086.xht
new file mode 100644
index 0000000000..2c0bdb7b09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-086.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-088.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-088.xht
new file mode 100644
index 0000000000..7d3e7f78ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-088.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained), then ignore 'right' and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      margin-left: 0em;
+      margin-right: 0em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-left-width
+  +
+      0px : padding-left
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+  (solve) : right
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-090.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-090.xht
new file mode 100644
index 0000000000..65cb4cbaf5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-090.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-092.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-092.xht
new file mode 100644
index 0000000000..764858f86f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-092.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-094.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-094.xht
new file mode 100644
index 0000000000..da29ddbe15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-094.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are not 'auto' and if the values are overconstrained, then ignore 'left' and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      margin-left: 0em;
+      margin-right: 0em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : left
+  +
+      0px : margin-left
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : left
+  +
+      0px : margin-left
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : width
+  +
+      0px : padding-right
+  +
+      0px : border-right-width
+  +
+      0px : margin-right
+  +
+    160px : right
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-096.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-096.xht
new file mode 100644
index 0000000000..22f7e821a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-096.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      margin-bottom: 0em;
+      margin-top: 0em;
+      position: absolute;
+      top: 2em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.7 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+"
+If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-102.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-102.xht
new file mode 100644
index 0000000000..c8a3ca9cb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-102.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position, the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-104.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-104.xht
new file mode 100644
index 0000000000..6ae59ce46d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-104.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height', and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, the height is based on content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-106.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-106.xht
new file mode 100644
index 0000000000..75b5a3274f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-106.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position, the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-108.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-108.xht
new file mode 100644
index 0000000000..654acb75a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-108.xht
@@ -0,0 +1,117 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position, the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-110.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-110.xht
new file mode 100644
index 0000000000..35c24bfbff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-110.xht
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position, the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-112.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-112.xht
new file mode 100644
index 0000000000..55da1d1396
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-112.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height', and 'bottom' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then set 'top' to the static position, the height is based on content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (shrink-to-fit) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-114.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-114.xht
new file mode 100644
index 0000000000..a8a73094b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-114.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position, the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-116.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-116.xht
new file mode 100644
index 0000000000..ebf9e1e7d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-116.xht
@@ -0,0 +1,117 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position, the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
+
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-118.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-118.xht
new file mode 100644
index 0000000000..12f12e13bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-118.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-120.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-120.xht
new file mode 100644
index 0000000000..13849646ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-120.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom: auto
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-122-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-122-ref.xht
new file mode 100644
index 0000000000..251a183982
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-122-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      right: 176px;
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-122.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-122.xht
new file mode 100644
index 0000000000..788faa3f71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-122.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-122-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-124.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-124.xht
new file mode 100644
index 0000000000..401b109064
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-124.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-126.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-126.xht
new file mode 100644
index 0000000000..508a0955a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-126.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-128.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-128.xht
new file mode 100644
index 0000000000..dcae13096e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-128.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on content and then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 1em;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: auto;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+gives us:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-130-ref.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-130-ref.xht
new file mode 100644
index 0000000000..6dae429b24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-130-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 0.5em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      right: 176px;
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-130.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-130.xht
new file mode 100644
index 0000000000..6610dbde3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-130.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-130-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-132.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-132.xht
new file mode 100644
index 0000000000..ba28a2bef8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-132.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+gives us:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-134.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-134.xht
new file mode 100644
index 0000000000..acc2d46365
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-134.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-136.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-136.xht
new file mode 100644
index 0000000000..b0cb071e69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-136.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: auto;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-138.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-138.xht
new file mode 100644
index 0000000000..787af262ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-138.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-140.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-140.xht
new file mode 100644
index 0000000000..b2b6462b9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-140.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-142.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-142.xht
new file mode 100644
index 0000000000..dbcd483105
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-142.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-144.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-144.xht
new file mode 100644
index 0000000000..15e3d5002f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-144.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: auto;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top: auto: set to static position
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-146.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-146.xht
new file mode 100644
index 0000000000..df2cc36882
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-146.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-148.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-148.xht
new file mode 100644
index 0000000000..5b716fc219
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-148.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-rl', then set 'right' to the static position and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right: auto: set to static position
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-150.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-150.xht
new file mode 100644
index 0000000000..6a7a6324a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-150.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-152.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-152.xht
new file mode 100644
index 0000000000..491754583d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-152.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-154.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-154.xht
new file mode 100644
index 0000000000..d83c0a34b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-154.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-156.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-156.xht
new file mode 100644
index 0000000000..b435096b50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-156.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-158.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-158.xht
new file mode 100644
index 0000000000..701159f19d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-158.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-160.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-160.xht
new file mode 100644
index 0000000000..f6822d4760
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-160.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto' and 'writing-mode' is 'vertical-rl', then then the height is based on the content and then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: auto;
+      position: absolute;
+      top: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : (based on content) : height: auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-162.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-162.xht
new file mode 100644
index 0000000000..32c2c9bd3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-162.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-164.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-164.xht
new file mode 100644
index 0000000000..44c741c15e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-164.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto' and 'writing-mode' is 'vertical-rl', then the width is based on the content and then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : (based on the content) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-166.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-166.xht
new file mode 100644
index 0000000000..b01972baed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-166.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto', 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'right'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-168.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-168.xht
new file mode 100644
index 0000000000..a07b0ec64d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-168.xht
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto', 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto', 'height' and 'bottom' are not 'auto', then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-170.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-170.xht
new file mode 100644
index 0000000000..ed82d648f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-170.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-122-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-172.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-172.xht
new file mode 100644
index 0000000000..8c20f14bad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-172.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-174.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-174.xht
new file mode 100644
index 0000000000..0f8e3db0e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-174.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-176.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-176.xht
new file mode 100644
index 0000000000..54f12dccd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-176.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto', 'height' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto', 'height' and 'bottom' are not 'auto', then then solve for 'top'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: 1em;
+      position: absolute;
+      top: auto;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+  (solve) : top: auto
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed top value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-178.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-178.xht
new file mode 100644
index 0000000000..1a6d0b3a68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-178.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-130-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-180.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-180.xht
new file mode 100644
index 0000000000..319c43eea9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-180.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto' and 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: auto;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+4. 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+  (solve) : right: auto
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed right value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-182.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-182.xht
new file mode 100644
index 0000000000..3c729e9ff4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-182.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'width' and 'left' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-184.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-184.xht
new file mode 100644
index 0000000000..e63eee1f76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-184.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto', 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto', 'top' and 'bottom' are not 'auto', then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height : auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-186.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-186.xht
new file mode 100644
index 0000000000..98a6c4bf25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-186.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-122-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-188.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-188.xht
new file mode 100644
index 0000000000..9915e1cb7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-188.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-190.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-190.xht
new file mode 100644
index 0000000000..e4a398dff6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-190.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-192.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-192.xht
new file mode 100644
index 0000000000..c38ba88164
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-192.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto', 'top' and 'bottom' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto', 'top' and 'bottom' are not 'auto', then then solve for 'height'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      bottom: 1em;
+      height: auto;
+      position: absolute;
+      top: 2em;
+      width: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+  (solve) : height : auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+     80px : bottom
+    =====================
+    320px : height of containing block
+
+And so computed height value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-194.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-194.xht
new file mode 100644
index 0000000000..5cdd83f80e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-194.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-130-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-196.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-196.xht
new file mode 100644
index 0000000000..54dbd4f599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-196.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'width'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: green;
+      height: 1em;
+      left: 1em;
+      position: absolute;
+      right: 2em;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+  (solve) : width: auto
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+     80px : left
+    =====================
+    320px : width of containing block
+
+And so computed width value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-198.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-198.xht
new file mode 100644
index 0000000000..6b6ad67ff2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-198.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-200.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-200.xht
new file mode 100644
index 0000000000..db7044e831
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-200.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto', 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto', 'top' and 'height' are not 'auto', then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      position: absolute;
+      top: 1em;
+      height: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom: auto
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-202.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-202.xht
new file mode 100644
index 0000000000..9aa73d7025
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-202.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-204.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-204.xht
new file mode 100644
index 0000000000..4b436eff2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-204.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      height: 1em;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-206.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-206.xht
new file mode 100644
index 0000000000..40526469f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-206.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-208.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-208.xht
new file mode 100644
index 0000000000..829623371e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-208.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto', 'top' and 'height' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto', 'top' and 'height' are not 'auto', then then solve for 'bottom'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: auto;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 1em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+     80px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height : auto
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-210.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-210.xht
new file mode 100644
index 0000000000..ddb3d59f02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-210.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-212.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-212.xht
new file mode 100644
index 0000000000..a3e3e90a0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-212.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto' and 'left' and 'right' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: auto;
+      position: absolute;
+      right: 1em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+     80px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left: auto
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 160px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-214.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-214.xht
new file mode 100644
index 0000000000..2495432ed4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-214.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl' and if the values are over-constrained, then ignore the value for 'left' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-216.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-216.xht
new file mode 100644
index 0000000000..9c58d0c569
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-216.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'bottom' and 'height' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'bottom' and 'height' are not 'auto' and if the values are over-constrained, then ignore the value for 'bottom' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-3col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 2em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-218.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-218.xht
new file mode 100644
index 0000000000..6a32fe3d36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-218.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-122-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl' and if the values are over-constrained, then ignore the value for 'left' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-220.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-220.xht
new file mode 100644
index 0000000000..d95fda337f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-220.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'ltr' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl' and if the values are over-constrained, then ignore the value for 'left' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: ltr;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-222.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-222.xht
new file mode 100644
index 0000000000..8597326294
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-222.xht
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl' and if the values are over-constrained, then ignore the value for 'left' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-224.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-224.xht
new file mode 100644
index 0000000000..02da28497d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-224.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'bottom' and 'height' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-003-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'top', 'bottom' and 'height' are not 'auto' and if the values are over-constrained, then ignore the value for 'bottom' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-3row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      bottom: 2em;
+      color: green;
+      height: 1em;
+      position: absolute;
+      top: 2em;
+      writing-mode: vertical-rl;
+    }
+
+/*
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
+
+So:
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+    160px : bottom
+    =====================
+    320px : height of containing block
+
+gives us
+
+    160px : top
+  +
+      0px : margin-top
+  +
+      0px : border-top-width
+  +
+      0px : padding-top
+  +
+     80px : height
+  +
+      0px : padding-bottom
+  +
+      0px : border-bottom-width
+  +
+      0px : margin-bottom
+  +
+  (solve) : bottom
+    =====================
+    320px : height of containing block
+
+And so computed bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-226.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-226.xht
new file mode 100644
index 0000000000..a5a9548391
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-226.xht
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-130-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl' and if the values are over-constrained, then ignore the value for 'left' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-228.xht b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-228.xht
new file mode 100644
index 0000000000..c7f8272873
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-non-replaced-vrl-228.xht
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'right' and 'width' are not 'auto' (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="When 'direction' is 'rtl' and 'left', 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl' and if the values are over-constrained, then ignore the value for 'left' and solve for that value." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      background: red url("support/bg-red-2col-2row-320x320.png");
+      color: transparent;
+      direction: rtl;
+      font: 80px/1 Ahem;
+      height: 320px;
+      position: relative;
+      width: 320px;
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block > span
+    {
+      background-color: red;
+      color: green;
+      left: 2em;
+      position: absolute;
+      right: 2em;
+      width: 1em;
+      writing-mode: horizontal-tb;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules.
+
+"
+If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
+"
+
+'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
+
+So:
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+    160px : left
+    =====================
+    320px : width of containing block
+
+give us
+
+    160px : right
+  +
+      0px : margin-right
+  +
+      0px : border-right-width
+  +
+      0px : padding-right
+  +
+     80px : width
+  +
+      0px : padding-left
+  +
+      0px : border-left-width
+  +
+      0px : margin-left
+  +
+  (solve) : left
+    =====================
+    320px : width of containing block
+
+And so computed left value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">1 2 34<span>X</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-replaced-vrl-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-replaced-vrl-001-ref.html
new file mode 100644
index 0000000000..35f8d909c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-replaced-vrl-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<style>
+  .cb {
+    position: relative;
+  }
+  audio, video, canvas, iframe, svg {
+    border: 1px solid blue;
+    position: absolute;
+    /* This value corresponds to the difference between wrapper
+       divs' width in the testcase. It causes the elements to
+       be shifted right to prevent the test from spuriously
+       passing by just placing them on the leftmost side. */
+    left: 100px;
+  }
+</style>
+<body>
+  <div class="cb">
+    <audio controls></audio>
+    <video controls style="top: 50px;"></video>
+    <canvas style="top: 210px;"></canvas>
+    <iframe style="top: 370px;"></iframe>
+    <svg style="top: 530px;" width="300" height="20"></svg>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-replaced-vrl-001.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-replaced-vrl-001.html
new file mode 100644
index 0000000000..54838a0e0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-replaced-vrl-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta name="assert" content="This test checks that absolutely positioned elements are positioned correctly, when their writing mode is different from that of their containing block." />
+<link rel="match" href="abs-pos-replaced-vrl-001-ref.html">
+<style>
+  .vert-cb {
+    position: relative;
+    width: 250px;
+    writing-mode: vertical-rl;
+  }
+  .horiz-parent {
+    width: 150px;
+    writing-mode: horizontal-tb;
+  }
+  audio, video, canvas, iframe, svg {
+    position: absolute;
+    border: 1px solid blue;
+  }
+</style>
+<body>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <audio controls></audio>
+      <video controls style="top: 50px;"></video>
+      <canvas style="top: 210px;"></canvas>
+      <iframe style="top: 370px;"></iframe>
+      <!-- Note: Including width/height attrs in order to test SVG without
+           hitting https://bugzilla.mozilla.org/show_bug.cgi?id=1766304 -->
+      <svg style="top: 530px;" width="300" height="20"></svg>
+    </div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-border-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-border-001-ref.html
new file mode 100644
index 0000000000..e4098f1dd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-border-001-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<style>
+  body { margin: 0; }
+  .vert-cb {
+    position: relative;
+    width: 150px;
+    height: 60px;
+    writing-mode: vertical-lr;
+    direction: rtl;
+    background: lightblue;
+    border: solid gray;
+    border-width: 1px 2px 3px 4px;
+    margin-bottom: 2px;
+  }
+  .horiz-parent {
+    width: 120px;
+    height: 100%;
+    box-sizing: border-box;
+    border: solid orange;
+    border-width: 4px 3px 2px 1px;
+    writing-mode: horizontal-tb;
+  }
+  .abspos-equivalent {
+    height: 40px;
+    background: pink;
+    border: solid black;
+    border-width: 2px 1px 4px 3px;
+  }
+</style>
+<body>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos-equivalent" style="width: max-content">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos-equivalent" style="width: 100px">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <canvas class="abspos-equivalent" height="40px" width="100px"></canvas>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <img src="broken" class="abspos-equivalent" height="40px" width="100px">
+    </div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-border-001.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-border-001.html
new file mode 100644
index 0000000000..795bd972d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-border-001.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta name="assert" content="This test checks that absolutely positioned elements are offset correctly in a containing block with an orthogonal writing mode and that has a border." />
+<link rel="match" href="abs-pos-vlr-border-001-ref.html">
+<style>
+  body { margin: 0; }
+  .vert-cb {
+    position: relative;
+    width: 150px;
+    height: 60px;
+    writing-mode: vertical-lr;
+    direction: rtl;
+    background: lightblue;
+    border: solid gray;
+    border-width: 1px 2px 3px 4px;
+    margin-bottom: 2px;
+  }
+  .horiz-parent {
+    width: 120px;
+    height: 100%;
+    box-sizing: border-box;
+    border: solid orange;
+    border-width: 4px 3px 2px 1px;
+    writing-mode: horizontal-tb;
+  }
+  .abspos {
+    position: absolute;
+    /* Specify a height to work around https://bugzilla.mozilla.org/1769102 */
+    height: 40px;
+    background: pink;
+    border: solid black;
+    border-width: 2px 1px 4px 3px;
+  }
+</style>
+<body>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos" style="width: max-content">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos" style="width: 100px">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <canvas class="abspos" height="40px" width="100px"></canvas>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <img src="broken" class="abspos" height="40px" width="100px">
+    </div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-padding-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-padding-001-ref.html
new file mode 100644
index 0000000000..6a941ff640
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-padding-001-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<style>
+  body { margin: 0; }
+  .vert-cb {
+    position: relative;
+    width: 150px;
+    height: 60px;
+    writing-mode: vertical-lr;
+    direction: rtl;
+    background: lightblue;
+    padding: 1px 2px 3px 4px;
+    margin-bottom: 2px;
+  }
+  .horiz-parent {
+    width: 120px;
+    height: 100%;
+    box-sizing: border-box;
+    border: solid orange;
+    border-width: 4px 3px 2px 1px;
+    writing-mode: horizontal-tb;
+  }
+  .abspos-equivalent {
+    height: 40px;
+    background: pink;
+    border: solid black;
+    border-width: 2px 1px 4px 3px;
+  }
+</style>
+<body>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos-equivalent" style="width: max-content">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos-equivalent" style="width: 100px">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <canvas class="abspos-equivalent" height="40px" width="100px"></canvas>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <img src="broken" class="abspos-equivalent" height="40px" width="100px">
+    </div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-padding-001.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-padding-001.html
new file mode 100644
index 0000000000..209cce14d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-vlr-padding-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta name="assert" content="This test checks that absolutely positioned elements are offset correctly in a containing block with a different writing mode and that has padding." />
+<link rel="match" href="abs-pos-vlr-padding-001-ref.html">
+<style>
+  body { margin: 0; }
+  .vert-cb {
+    position: relative;
+    width: 150px;
+    height: 60px;
+    writing-mode: vertical-lr;
+    direction: rtl;
+    background: lightblue;
+    padding: 1px 2px 3px 4px;
+    margin-bottom: 2px;
+  }
+  .horiz-parent {
+    width: 120px;
+    height: 100%;
+    box-sizing: border-box;
+    border: solid orange;
+    border-width: 4px 3px 2px 1px;
+    writing-mode: horizontal-tb;
+  }
+  .abspos {
+    position: absolute;
+    /* Specify a height to work around https://bugzilla.mozilla.org/1769102 */
+    height: 40px;
+    background: pink;
+    border: solid black;
+    border-width: 2px 1px 4px 3px;
+  }
+</style>
+<body>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos" style="width: max-content">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <div class="abspos" style="width: 100px">Hello</div>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <canvas class="abspos" height="40px" width="100px"></canvas>
+    </div>
+  </div>
+  <div class="vert-cb">
+    <div class="horiz-parent">
+      <img src="broken" class="abspos" height="40px" width="100px">
+    </div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/abs-pos-with-replaced-child.html b/testing/web-platform/tests/css/css-writing-modes/abs-pos-with-replaced-child.html
new file mode 100644
index 0000000000..c68de4fb57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/abs-pos-with-replaced-child.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/">
+<meta name="assert" content="This test checks that the intrinsic size of an absolute positioned element is calculated correctly, with a replaced child that has a percentage block-size." />
+<p>Test passes if there is a filled green square.</p>
+<div style="position: relative; width: 200px; height: 100px;">
+  <div style="position: absolute; background: green; writing-mode: vertical-rl; width: 50%;">
+    <canvas style="width: 100%;" width=1 height=1></canvas>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/alt-display-vertical-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/alt-display-vertical-001-manual.html
new file mode 100644
index 0000000000..2e9de77ccb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/alt-display-vertical-001-manual.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: alternate text should display in the writing mode of associated element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
+
+  <meta content="should" name="flags">
+
+  <style>
+  .vrl
+    {
+      float: right;
+      writing-mode: vertical-rl;
+    }
+
+  .vlr
+    {
+      float: left;
+      writing-mode: vertical-lr;
+    }
+  </style>
+
+  <h3><img class="vrl" src="support/does-not-exist.png" alt="Test passes if this text is rotated 90°"></h3>
+
+  <h3><img class="vlr" src="support/does-not-exist.png" alt="Test passes if this text is rotated 90°"></h3>
+
+  <h3 class="vrl"><img src="support/does-not-exist.png" alt="Test passes if this text is rotated 90°"></h3>
+
+  <h3 class="vlr"><img src="support/does-not-exist.png" alt="Test passes if this text is rotated 90°"></h3>
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam-anti-ref.html b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam-anti-ref.html
new file mode 100644
index 0000000000..db4c2fdfea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam-anti-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Adlam</title>
+    <link href="support/adlam.css" rel="stylesheet">
+    <link href="adlam.html" rel="mismatch">
+</head>
+<body>
+<p><bdo dir="ltr">𞤀𞤁𞤂𞤁𞤄</bdo></p>
+<p>U+1E900 U+1E901 U+1E902 U+1E901 U+1E904</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam-ref.html b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam-ref.html
new file mode 100644
index 0000000000..d039127044
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Adlam</title>
+    <link href="support/adlam.css" rel="stylesheet">
+</head>
+<body>
+<p><bdo dir="rtl">𞤀𞤁𞤂𞤁𞤄</bdo></p>
+<p>U+1E900 U+1E901 U+1E902 U+1E901 U+1E904</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam.html b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam.html
new file mode 100644
index 0000000000..8b3ba71c25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/adlam.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Adlam</title>
+    <link href="support/adlam.css" rel="stylesheet">
+    <link href="adlam-ref.html" rel="match">
+    <link href="https://www.unicode.org/roadmaps/smp/" rel="help">
+    <link href="https://www.w3.org/TR/css-writing-modes/#bidi-algo" rel="help">
+    <meta name="assert" content="Upper astral RTL range is treated as RTL.">
+</head>
+<body>
+<p>𞤀𞤁𞤂𞤁𞤄</p>
+<p>U+1E900 U+1E901 U+1E902 U+1E901 U+1E904</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot-anti-ref.html b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot-anti-ref.html
new file mode 100644
index 0000000000..66ffc08275
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot-anti-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Cypriot</title>
+    <link href="support/cypriot.css" rel="stylesheet">
+    <link href="cypriot.html" rel="mismatch">
+</head>
+<body>
+<p><bdo dir="ltr">𐠀𐠰𐠦𐠡𐠩</bdo></p>
+<p>U+10800 U+10830 U+10826 U+10821 U+10829</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot-ref.html b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot-ref.html
new file mode 100644
index 0000000000..ad8accd3a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Cypriot</title>
+    <link href="support/cypriot.css" rel="stylesheet">
+</head>
+<body>
+<p><bdo dir="rtl">𐠀𐠰𐠦𐠡𐠩</bdo></p>
+<p>U+10800 U+10830 U+10826 U+10821 U+10829</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot.html b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot.html
new file mode 100644
index 0000000000..0967eec576
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/cypriot.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Cypriot</title>
+    <link href="support/cypriot.css" rel="stylesheet">
+    <link href="cypriot-ref.html" rel="match">
+    <link href="https://www.unicode.org/roadmaps/smp/" rel="help">
+    <link href="https://www.w3.org/TR/css-writing-modes/#bidi-algo" rel="help">
+    <meta name="assert" content="Lower astral RTL range is treated as RTL.">
+</head>
+<body>
+<p>𐠀𐠰𐠦𐠡𐠩</p>
+<p>U+10800 U+10830 U+10826 U+10821 U+10829</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/support/adlam.css b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/support/adlam.css
new file mode 100644
index 0000000000..89e0db1949
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/support/adlam.css
@@ -0,0 +1,9 @@
+@font-face {
+    font-family: "Noto Sans Adlam";
+    font-weight: normal;
+    font-style: normal;
+    src: url("/fonts/noto/NotoSansAdlam-hinted/NotoSansAdlam-Regular.ttf") format("truetype");
+}
+p {
+    font-family: "Noto Sans Adlam";
+}
diff --git a/testing/web-platform/tests/css/css-writing-modes/astral-bidi/support/cypriot.css b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/support/cypriot.css
new file mode 100644
index 0000000000..d739821b1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/astral-bidi/support/cypriot.css
@@ -0,0 +1,9 @@
+@font-face {
+    font-family: "Noto Sans Cypriot";
+    font-weight: normal;
+    font-style: normal;
+    src: url("/fonts/noto/NotoSansCypriot-hinted/NotoSansCypriot-Regular.ttf") format("truetype");
+}
+p {
+    font-family: "Noto Sans Cypriot";
+}
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-001.html b/testing/web-platform/tests/css/css-writing-modes/available-size-001.html
new file mode 100644
index 0000000000..8227aee739
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / max-height / content height</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-001-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does not have a fixed height but does have a fixed max-height, use that, making sure you stick with the content height.">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  max-height: 8ch; /* **max**-height does not give the element a definite block size */
+  overflow: hidden;
+  color: transparent;
+  position: relative; /* to act as a container of #red */
+  padding: 1ch 0;
+}
+
+div > div { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  left: 0; top: 1ch;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>
+  <aside id="red">0</aside>
+  <div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div take its height from
+  the max-height of its parent, it should wrap just right for the green 0 to
+  overlap with the red one. -->
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-002.html b/testing/web-platform/tests/css/css-writing-modes/available-size-002.html
new file mode 100644
index 0000000000..1175ba8b80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-002.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / max-height / no scroller</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's ancestor doesn't have a definite block size but does have a fixed max-height, but isn't a scroller, do not use that size.">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  max-height: 8ch; /* **max**-height does not give the element a definite block size */
+  color: transparent;
+  position: relative; /* to act as a container of #green */
+}
+
+div > div > div { writing-mode: vertical-rl; }
+
+span {
+  background: white;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#green {
+  position: absolute;
+  background: green;
+  left: 0;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>
+  <div>
+    <aside id="green">0</aside>
+    <div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div takes its height from
+    the max-height of its parent (which it shouldn't, since it's not a scroller),
+    it should wrap just right for the white 0 to
+    overlap with the green one. -->
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-003.html b/testing/web-platform/tests/css/css-writing-modes/available-size-003.html
new file mode 100644
index 0000000000..67574f7688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / height / content height</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-001-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does have a fixed height, use that, making sure you stick with the content height.">
+<style>
+#scroller {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  height: 8ch;
+  width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
+  overflow: hidden;
+  color: transparent;
+  position: relative; /* to act as a container of #red */
+  padding: 1ch 0;
+}
+
+#parent { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size scrolling ancestor are different */
+#ortho { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  left: 0; top: 1ch;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div id=scroller>
+  <aside id=red>0</aside>
+  <div id=parent>
+    <div id=ortho>0 0 0 0 <span>0</span> 0 0 0</div>
+    <!-- If this div take its height from the height of its scrollable ancestor,
+         it should wrap just right for the green 0 to overlap with the red one. -->
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-004.html b/testing/web-platform/tests/css/css-writing-modes/available-size-004.html
new file mode 100644
index 0000000000..91e58e3a9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-004.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / height / no scroller</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size but an ancestor that is **not** a scroller does have a fixed height, do not use that.">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  height: 8ch;
+  width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
+  color: transparent;
+  position: relative; /* to act as a container of #green */
+}
+
+div > div { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size ancestor are different */
+div > div > div { writing-mode: vertical-rl; }
+
+span {
+  background: white;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#green { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: green;
+  left: 0;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>
+  <aside id="green">0</aside>
+  <div><div>0 0 0 0 <span>0</span> 0 0 0</div></div> <!-- If this div take its height from
+  the height of its fixed height non scrollable ancestor (which is should not),
+  it should wrap just right for the white 0 to overlap with the green one. -->
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-005.html b/testing/web-platform/tests/css/css-writing-modes/available-size-005.html
new file mode 100644
index 0000000000..f5b0c6d64a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / height / not remaining size</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-001-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does a have fixed height, use that whole height, even if some other content already consumes some of it.">
+<style>
+#scroller {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  height: 8ch;
+  width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
+  overflow: hidden;
+  color: transparent;
+  position: relative; /* to act as a container of #red */
+}
+
+#parent { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size scrolling ancestor are different */
+#ortho { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  left: 0;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  top: 1ch;
+}
+#spacer { /* shrinks the remaining space of the parent div. */
+  height: 1ch;
+  width: 100%;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div id=scroller>
+  <aside id="red">0</aside>
+  <div id=parent>
+    <aside id=spacer></aside>
+    <div id=ortho>0 0 0 0 <span>0</span> 0 0 0</div>
+  </div>
+  <!-- If the inner div take its height from the height of its scrollable
+  ancestor, it should wrap just right for the green 0 to overlap with the red
+  one. If instead it takes it size from the remaining height after having
+  removed #spacer, or does some other calculation that takes #spacer into
+  account, it won't line up with #red.-->
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-006.html b/testing/web-platform/tests/css/css-writing-modes/available-size-006.html
new file mode 100644
index 0000000000..618021bda8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-006.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's no scroller among ancestors, use the ICB instead.">
+<style>
+body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
+:root { overflow: hidden; }
+div {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter thatn 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-007.html b/testing/web-platform/tests/css/css-writing-modes/available-size-007.html
new file mode 100644
index 0000000000..5d7fdbda01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-007.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's no scroller among ancestors, use the ICB instead (not the content height of the body element, which is the ICB reduced by body's margins).">
+<style>
+div {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+:root { overflow: hidden; }
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter thatn 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20 taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-008.html b/testing/web-platform/tests/css/css-writing-modes/available-size-008.html
new file mode 100644
index 0000000000..4328bcb348
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-008.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB / tall max-height scroller</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's a scroller with max-height, but that scroller has a taller max-height than the ICB, use the ICB instead.">
+<style>
+body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
+div div {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+:root { overflow: hidden; }
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter thatn 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+section {
+  overflow: hidden;
+  max-height: 120vh;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<section>
+<div>
+<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
+</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-009.html b/testing/web-platform/tests/css/css-writing-modes/available-size-009.html
new file mode 100644
index 0000000000..2f218e6c84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-009.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB / tall height scroller</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's a scroller with height, but that scroller is taller than the ICB, use the ICB instead.">
+<style>
+body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
+:root { overflow: hidden; }
+#ortho {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter than 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+#scroller {
+  overflow: hidden;
+  writing-mode: vertical-lr;
+  height: 120vh;
+}
+#parent {
+  writing-mode: horizontal-tb;
+  width: 8em; /* avoid triggering intrinsic sizing bugs */
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div id=scroller>
+  <div id=parent>
+    <div id=ortho><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-010.html b/testing/web-platform/tests/css/css-writing-modes/available-size-010.html
new file mode 100644
index 0000000000..6b37deb91e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-010.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB / tall max-height scroller</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and the nearest scroller goes not have a fixed height or max-height, use the ICB, even if there is another scroller ancestor up the chain that does have fixed dimensions.">
+<style>
+body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
+:root { overflow: hidden; }
+div {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter thatn 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+section { overflow: hidden; }
+body > section { height: 20ch; }
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<section>
+<section>
+<section>
+<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
+</section>
+</section>
+</section>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-011.html b/testing/web-platform/tests/css/css-writing-modes/available-size-011.html
new file mode 100644
index 0000000000..048fb985b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-011.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>orthogonal flow parent with max-height</title>
+<meta charset=utf-8>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<meta name="assert" content="If an orthogonal flow's parent doesn't have a definite block size but does have a max block size, use that as the available size">
+<link rel="match" href="reference/available-size-011-ref.html">
+<style>
+main {
+  max-height: 1em;
+  line-height: 1em;
+}
+div {
+  writing-mode: vertical-rl;
+}
+</style>
+
+<p>This test passes if the word “ＰＡＳＳ” (without the quotation marks) appears below, written horizontally from left to right.
+<main><div>Ｓ Ｓ Ａ Ｐ</div></main>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-012.html b/testing/web-platform/tests/css/css-writing-modes/available-size-012.html
new file mode 100644
index 0000000000..cdaaea3af1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-012.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / max-height + min-height / content height</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-001-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does not have a fixed height but does have a fixed max-height, use that, increased by min-height if it exists and is larger. (same as -001, with min-height)">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  max-height: 4ch; /* **max**-height does not give the element a definite block size */
+  min-height: 8ch;
+  overflow: hidden;
+  color: transparent;
+  position: relative; /* to act as a container of #red */
+  padding: 1ch 0;
+}
+
+div > div { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  left: 0; top: 1ch;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>
+  <aside id="red">0</aside>
+  <div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div take its height from
+  the min-height of its parent, it should wrap just right for the green 0 to
+  overlap with the red one. -->
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-013.html b/testing/web-platform/tests/css/css-writing-modes/available-size-013.html
new file mode 100644
index 0000000000..152432029f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-013.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / height + min-height/ content height</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-001-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does have a fixed height, use that, increased by the min-height if it is set and is larger (same as -003, with min-height).">
+<style>
+#scroller {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  height: 4ch;
+  min-height: 8ch;
+  width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
+  overflow: hidden;
+  color: transparent;
+  position: relative; /* to act as a container of #red */
+  padding: 1ch 0;
+}
+
+#parent { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size scrolling ancestor are different */
+#ortho { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  left: 0; top: 1ch;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div id=scroller>
+  <aside id=red>0</aside>
+  <div id=parent>
+    <div id=ortho>0 0 0 0 <span>0</span> 0 0 0</div>
+    <!-- If this div take its height from the height of its scrollable ancestor,
+         it should wrap just right for the green 0 to overlap with the red one. -->
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-014.html b/testing/web-platform/tests/css/css-writing-modes/available-size-014.html
new file mode 100644
index 0000000000..8956f78edb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-014.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / height + min-height / not remaining size</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-001-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does a have fixed height, use that whole height increased by min-height if that's larger, even if some other content already consumes some of it (same as -005, with min-height).">
+<style>
+#scroller {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  height: 4ch;
+  min-height: 8ch;
+  width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
+  overflow: hidden;
+  color: transparent;
+  position: relative; /* to act as a container of #red */
+}
+
+#parent { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size scrolling ancestor are different */
+#ortho { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  left: 0;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  top: 1ch;
+}
+#spacer { /* shrinks the remaining space of the parent div. */
+  height: 1ch;
+  width: 100%;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div id=scroller>
+  <aside id="red">0</aside>
+  <div id=parent>
+    <aside id=spacer></aside>
+    <div id=ortho>0 0 0 0 <span>0</span> 0 0 0</div>
+  </div>
+  <!-- If the inner div take its height from the height of its scrollable
+  ancestor, it should wrap just right for the green 0 to overlap with the red
+  one. If instead it takes it size from the remaining height after having
+  removed #spacer, or does some other calculation that takes #spacer into
+  account, it won't line up with #red.-->
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-015.html b/testing/web-platform/tests/css/css-writing-modes/available-size-015.html
new file mode 100644
index 0000000000..e8c158389e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-015.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB / tall max-height + min-height scroller</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's a scroller with max-height and min-height, and max-height is smaller than the ICB but min-height is larger than the ICB, use the ICB as the available space (same as -008, with min-height).">
+<style>
+body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
+:root { overflow: hidden; }
+div {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter thatn 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+section {
+  overflow: hidden;
+  max-height: 40vh;
+  min-height: 120vh;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<section>
+<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
+</section>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-016.html b/testing/web-platform/tests/css/css-writing-modes/available-size-016.html
new file mode 100644
index 0000000000..21723d749a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-016.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB / tall height + min-height scroller</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's a scroller with height and min-height, and height is smaller than the ICB but min-height is larger than the ICB, use the ICB as the available space (same as -009, with min-height).">
+<style>
+body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
+:root { overflow: hidden; }
+#ortho {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter thatn 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+#scroller {
+  overflow: hidden;
+  writing-mode: vertical-lr;
+  height: 40vh;
+  min-height: 120vh;
+}
+#parent {
+  writing-mode: horizontal-tb;
+  width: 8em; /* avoid triggering intrinsic sizing bugs */
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div id=scroller>
+  <div id=parent>
+    <div id=ortho><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-017.html b/testing/web-platform/tests/css/css-writing-modes/available-size-017.html
new file mode 100644
index 0000000000..f79e9ea497
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-017.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / height + min-height parent</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent has a height and a min-height larger than the height, use min-height as the available size.">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  height: 4ch;
+  min-height: 8ch;
+  color: transparent;
+  position: relative; /* to act as a container of #green */
+}
+
+div > div { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red {
+  position: absolute;
+  background: red;
+  left: 0;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>
+  <aside id="red">0</aside>
+  <div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div takes its height from
+  the min-height of its parent (which it should)
+  it should wrap just right for the green 0 to
+  overlap with the red one. -->
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-018.html b/testing/web-platform/tests/css/css-writing-modes/available-size-018.html
new file mode 100644
index 0000000000..b4f659e4b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-018.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / max-height + min-height parent</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent has a max-height and a min-height larger than the height, use min-height as the available size.">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  max-height: 4ch;
+  min-height: 8ch;
+  color: transparent;
+  position: relative; /* to act as a container of #green */
+}
+
+div > div { writing-mode: vertical-rl; }
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+}
+
+#red {
+  position: absolute;
+  background: red;
+  left: 0;
+  writing-mode: vertical-rl;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>
+  <aside id="red">0</aside>
+  <div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div takes its height from
+  the min-height of its parent (which it should)
+  it should wrap just right for the green 0 to
+  overlap with the red one. -->
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/available-size-019.html b/testing/web-platform/tests/css/css-writing-modes/available-size-019.html
new file mode 100644
index 0000000000..86b7ecf41e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/available-size-019.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testing Available Space in Orthogonal Flows / ICB / tall max-height parent</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="reference/available-size-002-ref.html">
+<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, but has a max-height, but that max-height is than the ICB, use the ICB instead.">
+<style>
+body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
+:root { overflow: hidden; }
+div {
+  writing-mode: vertical-rl;
+  font-family: monospace;
+  font-size: 20px;
+  position: relative; /* to be a container for #red*/
+}
+.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
+             that the line would wrap between spacers if it ends up being
+             shorter thatn 100vh*/
+  display: inline-block;
+  height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
+}
+
+span {
+  background: green;
+  display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
+  color: transparent;
+}
+
+#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
+  position: absolute;
+  background: red;
+  writing-mode: vertical-rl;
+  z-index: -1;
+  font-family: monospace;
+  font-size: 20px;
+  left: 0; top: 0;
+}
+
+section {
+  max-height: 120vh;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<section>
+<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
+</section>
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-003.xht
new file mode 100644
index 0000000000..6211c6fde0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-003.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left top' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left top' will make background-image start at upper left corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left top;
+      background-repeat: repeat-x;
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      margin-top: 99px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-002.png" width="333" height="93" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats
+  above and if one of the cats starts
+  <strong>exactly inside the top left corner</strong> of
+  the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-005.xht
new file mode 100644
index 0000000000..39b5198f21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-005.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left bottom' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left bottom' will make background-image start at lower right corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left bottom;
+      background-repeat: repeat-x;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-004.png" width="397" height="95" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats at the
+  bottom of the page and if one of the cats
+  starts <strong>exactly inside the top left corner</strong>
+  of the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-007.xht
new file mode 100644
index 0000000000..c569e7fcfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-007.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right top' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right top' will make background-image start at upper right corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right top;
+      background-repeat: repeat-x;
+      width: 100%;
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      margin-top: 99px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-006.png" width="343" height="93" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats
+  above and if one of the cats starts
+  <strong>exactly inside the top right corner</strong> of
+  the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-009.xht
new file mode 100644
index 0000000000..780503571d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-009.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right bottom' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right bottom' will make background-image start at lower right corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right bottom;
+      background-repeat: repeat-x;
+      width: 100%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-008.png" width="399" height="93" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats at the
+  bottom of the page and if one of the cats starts
+  <strong>exactly inside the bottom right corner</strong> of
+  the page. This should remain true even after
+  resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-011.xht
new file mode 100644
index 0000000000..99995cd81f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-011.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left top' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left top' will make background-image start at upper left corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left top;
+      background-repeat: repeat-y;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-010.png" width="465" height="94" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on
+  the left of the page and if one of the cats
+  starts <strong>exactly inside the top left corner</strong>
+  of the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-013.xht
new file mode 100644
index 0000000000..2d8b81970b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-013.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left bottom' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left bottom' will make background-image start at lower left corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left bottom;
+      background-repeat: repeat-y;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-012.png" width="483" height="95" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on the
+  left of the page and if one of the cats starts
+  <strong>exactly inside the bottom left corner</strong> of
+  the page. This should remain true even after
+  resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-015.xht
new file mode 100644
index 0000000000..53c143884f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-015.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right top' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right top' will make background-image start at upper right corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right top;
+      background-repeat: repeat-y;
+      width: 100%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-014.png" width="484" height="95" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on
+  the right of the page and if one of the cats
+  starts <strong>exactly inside the top right corner</strong>
+  of the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-017.xht
new file mode 100644
index 0000000000..41aba845ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vlr-017.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right bottom' and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right bottom' will make background-image start at lower right corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right bottom;
+      background-repeat: repeat-y;
+      width: 100%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-016.png" width="518" height="92" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on the
+  right of the page and if one of the cats starts
+  <strong>exactly inside the bottom right corner</strong> of the
+  page. This should remain true even after resizing
+  the window.</div>
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-002.xht
new file mode 100644
index 0000000000..9f7e596686
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-002.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left top' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left top' will make background-image start at upper left corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left top;
+      background-repeat: repeat-x;
+      width: 100%;
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      margin-top: 99px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-002.png" width="333" height="93" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats
+  above and if one of the cats starts
+  <strong>exactly inside the top left corner</strong> of
+  the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-004.xht
new file mode 100644
index 0000000000..438d3f52cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-004.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left bottom' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left bottom' will make background-image start at lower left corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left bottom;
+      background-repeat: repeat-x;
+      width: 100%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-004.png" width="397" height="95" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats at the
+  bottom of the page and if one of the cats
+  starts <strong>exactly inside the top left corner</strong>
+  of the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-006.xht
new file mode 100644
index 0000000000..773f4f3cca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-006.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right top' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right top' will make background-image start at upper right corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right top;
+      background-repeat: repeat-x;
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      margin-top: 99px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-006.png" width="343" height="93" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats
+  above and if one of the cats starts
+  <strong>exactly inside the top right corner</strong> of
+  the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-008.xht
new file mode 100644
index 0000000000..2803d90dac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-008.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right bottom' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right bottom' will make background-image start at lower right corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right bottom;
+      background-repeat: repeat-x;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-008.png" width="399" height="93" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a row of cats at the
+  bottom of the page and if one of the cats starts
+  <strong>exactly inside the bottom right corner</strong> of
+  the page. This should remain true even after
+  resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-010.xht
new file mode 100644
index 0000000000..a8c97abcc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-010.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left top' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left top' will make background-image start at upper left corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left top;
+      background-repeat: repeat-y;
+      width: 100%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-010.png" width="465" height="94" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on
+  the left of the page and if one of the cats
+  starts <strong>exactly inside the top left corner</strong>
+  of the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-012.xht
new file mode 100644
index 0000000000..c800cf05f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-012.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left bottom' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left bottom' will make background-image start at lower left corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: left bottom;
+      background-repeat: repeat-y;
+      width: 100%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-012.png" width="483" height="95" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on the
+  left of the page and if one of the cats starts
+  <strong>exactly inside the bottom left corner</strong> of
+  the page. This should remain true even after
+  resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-014.xht
new file mode 100644
index 0000000000..98ac4f8a23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-014.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right top' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right top' will make background-image start at upper right corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right top;
+      background-repeat: repeat-y;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-014.png" width="484" height="95" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on
+  the right of the page and if one of the cats
+  starts <strong>exactly inside the top right corner</strong>
+  of the page. This should remain true even
+  after resizing the window.
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-016.xht
new file mode 100644
index 0000000000..c317792d80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-016.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: right bottom' and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: right bottom' will make background-image start at lower right corner of page (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/cat.png");
+      background-position: right bottom;
+      background-repeat: repeat-y;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-016.png" width="518" height="92" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a column of cats on the
+  right of the page and if one of the cats starts
+  <strong>exactly inside the bottom right corner</strong> of the
+  page. This should remain true even after resizing
+  the window.</div>
+-->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-018-ref.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-018-ref.xht
new file mode 100644
index 0000000000..bda2fb623e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-018-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      line-height: 1;
+    }
+
+  div#expected
+    {
+      text-align: right;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      top: 0px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="expected"><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-018.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-018.xht
new file mode 100644
index 0000000000..d4e76334b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-018.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left top' and 'vertical-rl' when document root element does not fill viewport width</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="background-position-vrl-018-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'background-position: left top' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/100x100-red.png");
+      background-position: left top;
+      background-repeat: repeat-y;
+      width: auto; /* Very important: we intentionally want the
+      document root element to not fill the viewport width */
+      writing-mode: vertical-rl;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      /*
+        8px : body's margin-right
+    +
+      357px : pass-cdts-background-position.png's image width
+    +
+        8px : body's margin-left
+    -
+      100px : background-image width (100x100-red.png)
+    ==========
+      273px is
+      */
+      top: 0px;
+      width: 100px;
+    }
+
+    /*
+    This test requires a viewport width of at least (strict minimum) of 473px !
+    */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-020.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-020.xht
new file mode 100644
index 0000000000..32346f1dd0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-020.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left center' and 'vertical-rl' when document root element does not fill viewport width</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="background-position-vrl-018-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'background-position: left center' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/100x100-red.png");
+      background-position: left center;
+      background-repeat: repeat-y;
+      width: auto; /* Very important: we intentionally want the
+      document root element to not fill the viewport width */
+      writing-mode: vertical-rl;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      /*
+        8px : body's margin-right
+    +
+      357px : pass-cdts-background-position.png's image width
+    +
+        8px : body's margin-left
+    -
+      100px : background-image width (100x100-red.png)
+    ==========
+      273px is
+      */
+      top: 0px;
+      width: 100px;
+    }
+
+    /*
+    This test requires a viewport width of at least (strict minimum) of 473px !
+    */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-022.xht b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-022.xht
new file mode 100644
index 0000000000..a985dc8a31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-position-vrl-022.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left bottom' and 'vertical-rl' when document root element does not fill viewport width</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="background-position-vrl-018-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'background-position: left bottom' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/100x100-red.png");
+      background-position: left bottom;
+      background-repeat: repeat-y;
+      width: auto; /* Very important: we intentionally want the
+      document root element to not fill the viewport width */
+      writing-mode: vertical-rl;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      /*
+        8px : body's margin-right
+    +
+      357px : pass-cdts-background-position.png's image width
+    +
+        8px : body's margin-left
+    -
+      100px : background-image width (100x100-red.png)
+    ==========
+      273px is
+      */
+      top: 0px;
+      width: 100px;
+    }
+
+    /*
+    This test requires a viewport width of at least (strict minimum) of 473px !
+    */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-002-ref.xht
new file mode 100644
index 0000000000..8b805a5298
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-002-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: green;
+      height: 100px;
+      margin-left: 100px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-002.html b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-002.html
new file mode 100644
index 0000000000..9caf1b789a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-002.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'background-size: 100%' filling padding-box of document root element</title>
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings">
+  <link rel="match" href="background-size-document-root-vrl-002-ref.xht">
+
+  <meta name="flags" content="image">
+  <meta name="assert" content="Test checks that 'background-size: 100% 100%' applied for the html root element will make the background-image fill the padding-box of the document box. Since 'background-color' is 'transparent' and since 'background-repeat' is set to 'no-repeat', then only the padding-box of the document root box should be painted green and such padding-box should start at top-right corner of canvas because 'writing-mode' is set to 'vertical-rl'.">
+
+  <style>
+  img
+    {
+      margin-left: 100px;
+    }
+
+  iframe
+    {
+      border: transparent 0px none;
+      height: 100px;
+      vertical-align: top;
+      width: 200px;
+    }
+
+  img#reference-overlapped-red
+    {
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><iframe src="support/embedded-doc-for-background-size-root-vrl-002.html">This test requires an user agent with capability to embed an HTML document thanks to the HTML &lt;iframe&gt; element.</iframe></div>
+
+  <div><img id="reference-overlapped-red" src="support/100x100-red.png" alt="Image download support must be enabled"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-004.html b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-004.html
new file mode 100644
index 0000000000..176bfea5dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'background-size: 100%' filling padding-box of document root element</title>
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings">
+  <link rel="match" href="background-size-document-root-vrl-002-ref.xht">
+
+  <meta name="flags" content="image">
+  <meta name="assert" content="Test checks that 'background-size: 100% 100%' applied for the html root element will make the background-image fill the padding-box of the document box. Since 'background-color' is 'transparent' and since 'background-repeat' is set to 'no-repeat', then only the padding-box of the document root box should be painted green and such padding-box should start at top-right corner of canvas because 'writing-mode' is set to 'vertical-rl'.">
+
+  <style>
+  img
+    {
+      margin-left: 100px;
+    }
+
+  iframe
+    {
+      border: transparent 0px none;
+      height: 100px;
+      vertical-align: top;
+      width: 200px;
+    }
+
+  img#reference-overlapped-red
+    {
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><iframe src="support/embedded-doc-for-background-size-root-vrl-004.html">This test requires an user agent with capability to embed an HTML document thanks to the HTML &lt;iframe&gt; element.</iframe></div>
+
+  <div><img id="reference-overlapped-red" src="support/100x100-red.png" alt="Image download support must be enabled"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-006.html
new file mode 100644
index 0000000000..e945160721
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-006.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'background-size: 100%' filling padding-box of document root element</title>
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings">
+  <link rel="match" href="background-size-document-root-vrl-002-ref.xht">
+
+  <meta name="flags" content="image">
+  <meta name="assert" content="Test checks that 'background-size: 100% 100%' applied for the html root element will make the background-image fill the padding-box of the document box. Since 'background-color' is 'transparent' and since 'background-repeat' is set to 'no-repeat', then only the padding-box of the document root box should be painted green and such padding-box should start at top-right corner of canvas because 'writing-mode' is set to 'vertical-rl'.">
+
+  <style>
+  img
+    {
+      margin-left: 100px;
+    }
+
+  iframe
+    {
+      border: transparent 0px none;
+      height: 100px;
+      vertical-align: top;
+      width: 250px;
+    }
+
+  img#reference-overlapped-red
+    {
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><iframe src="support/embedded-doc-for-background-size-root-vrl-006.html">This test requires an user agent with capability to embed an HTML document thanks to the HTML &lt;iframe&gt; element.</iframe></div>
+
+  <div><img id="reference-overlapped-red" src="support/100x100-red.png" alt="Image download support must be enabled"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-008.html b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-008.html
new file mode 100644
index 0000000000..cf9c460906
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/background-size-document-root-vrl-008.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'background-size: 100%' filling padding-box of document root element</title>
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings">
+  <link rel="match" href="background-size-document-root-vrl-002-ref.xht">
+
+  <meta name="flags" content="image">
+  <meta name="assert" content="Test checks that 'background-size: 100% 100%' applied for the html root element will make the background-image fill the padding-box of the document box. Since 'background-color' is 'transparent' and since 'background-repeat' is set to 'no-repeat', then only the padding-box of the document root box should be painted green and such padding-box should start at top-right corner of canvas because 'writing-mode' is set to 'vertical-rl'.">
+
+  <style>
+  img
+    {
+      margin-left: 100px;
+    }
+
+  iframe
+    {
+      border: transparent 0px none;
+      height: 100px;
+      vertical-align: top;
+      width: 250px;
+    }
+
+  img#reference-overlapped-red
+    {
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><iframe src="support/embedded-doc-for-background-size-root-vrl-008.html">This test requires an user agent with capability to embed an HTML document thanks to the HTML &lt;iframe&gt; element.</iframe></div>
+
+  <div><img id="reference-overlapped-red" src="support/100x100-red.png" alt="Image download support must be enabled"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-002.xht b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-002.xht
new file mode 100644
index 0000000000..617a412ffd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-002.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: baseline-alignment of empty non-replaced inline-block element and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the baseline-alignment of an empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: red;
+      color: green;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      border-right: green solid 1em;
+      display: inline-block;
+      height: 2em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>
+    <span></span>
+    TL
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-003.xht b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-003.xht
new file mode 100644
index 0000000000..959f501fd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-003.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: baseline-alignment of empty non-replaced inline-block element and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the baseline-alignment of an empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: red;
+      color: green;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      border-left: green solid 1em;
+      display: inline-block;
+      height: 2em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>
+    TL
+    <span></span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-004.xht b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-004.xht
new file mode 100644
index 0000000000..0282408f89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-004.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: baseline-alignment of non-empty non-replaced inline-block element and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the baseline-alignment of a non-empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: red;
+      color: green;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      display: inline-block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>
+    <span>FZ</span>
+    TL
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-005.xht b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-005.xht
new file mode 100644
index 0000000000..ce6097a244
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-non-replaced-005.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: baseline-alignment of non-empty non-replaced inline-block element and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the baseline-alignment of a non-empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: red;
+      color: green;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      display: inline-block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>
+    TL
+    <span>FZ</span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-002-ref.xht
new file mode 100644
index 0000000000..af23859471
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-002-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-01-16 -->
+
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  img
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there is a cat and <strong>no red</strong>.</p>
+
+  <div><img id="cat" src="support/cat.png" width="98" height="99" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-002.xht b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-002.xht
new file mode 100644
index 0000000000..097f892fc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-002.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: baseline-alignment of inline replaced element and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="baseline-inline-replaced-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that the baseline-alignment of an image in the line box of a block with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: red;
+      font: 96px/1 Ahem; /* computes to 96px/96px */
+      height: 99px; /* the height of the cat image */
+      writing-mode: vertical-rl;
+    }
+
+  img
+    {
+      vertical-align: baseline;
+    }
+  /* In vertical writing mode, the central baseline is used as the dominant baseline;
+  here, the central baseline is assumed to be halfway between the under and over
+  logical margin edges of the inline replaced element box. */
+
+  /* cat.png has an intrinsic height of 99px and an intrinsic width of 98px */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a cat and <strong>no red</strong>.</p>
+
+  <div><img src="support/cat.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-003.xht b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-003.xht
new file mode 100644
index 0000000000..1459d171c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-inline-replaced-003.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: baseline-alignment of inline replaced element and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="baseline-inline-replaced-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that the baseline-alignment of an image in the line box of a block with 'writing-mode' set to 'vertical-lr' is 'central' and not 'alphabetic'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: red;
+      font: 96px/1 Ahem; /* computes to 96px/96px */
+      height: 99px; /* the height of the cat image */
+      writing-mode: vertical-lr;
+    }
+
+  img
+    {
+      vertical-align: baseline;
+    }
+  /* In vertical writing mode, the central baseline is used as the dominant baseline;
+  here, the central baseline is assumed to be halfway between the under and over
+  logical margin edges of the inline replaced element box. */
+
+  /* cat.png has an intrinsic height of 99px and an intrinsic width of 98px */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a cat and <strong>no red</strong>.</p>
+
+  <div><img src="support/cat.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/baseline-with-orthogonal-flow-001.html b/testing/web-platform/tests/css/css-writing-modes/baseline-with-orthogonal-flow-001.html
new file mode 100644
index 0000000000..f054c59b6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/baseline-with-orthogonal-flow-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>
+    CSS Test: orthogonal-flow child should be skipped over when determining parent's last-baseline
+  </title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+  <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export">
+  <link rel="match" href="reference/baseline-with-orthogonal-flow-001-ref.html">
+  <!-- The inline-blocks in this example are using last-baseline alignment, and
+       css-align-3 sec 9.1 says they should take their last-baseline position:
+         "from the ...(last) in-flow block-level child in the block container
+         that contributes a set of ... (last) baselines".
+
+       The orthogonal-flow doesn't contribute a first/last baseline set (not
+       for its parent's writing-mode at least), so it should not affect the
+       baseline determination.
+  -->
+  <style>
+    .ib {
+      display: inline-block;
+    }
+    .vert {
+      writing-mode: vertical-rl;
+      color: transparent;
+    }
+    .overflow {
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  Test passes if the visible characters below are baseline-aligned.
+  <br><br>
+
+  aaa
+
+  <div class="ib">
+    bbb
+    <!-- This shouldn't influence the baseline of our inline block: -->
+    <div class="vert">vvv</div>
+  </div>
+
+  <div class="ib">
+    ccc
+    <!-- This shouldn't influence the baseline of our inline block: -->
+    <div class="vert overflow">ooo</div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-dynamic-iframe-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/bidi-dynamic-iframe-001-ref.html
new file mode 100644
index 0000000000..2476a78903
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-dynamic-iframe-001-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<meta charset="utf-8">
+<p>בְּרֵאשִׁית בָּרָא אֱלֹהִים אֵת הַשָּׁמַיִם וְאֵת הָאָֽרֶץ׃</p>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-dynamic-iframe-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-dynamic-iframe-001.html
new file mode 100644
index 0000000000..f55973fd5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-dynamic-iframe-001.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1721952">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="bidi-dynamic-iframe-001-ref.html">
+<iframe srcdoc="בְּרֵאשִׁית בָּרָא אֱלֹהִים אֵת הַשָּׁמַיִם וְאֵת הָאָֽרֶץ׃"></iframe>
+<p id="target"></p>
+<script>
+onload = function() {
+  let frame = document.querySelector("iframe");
+  let target = document.getElementById("target");
+
+  let doc = frame.contentDocument;
+  let bidiString = frame.getAttribute("srcdoc");
+  let node = doc.createTextNode("");
+
+  doc.body.appendChild(node);
+  node.appendData(bidiString);
+
+  target.appendChild(node);
+  frame.remove();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-001.html
new file mode 100644
index 0000000000..d8215ad264
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi embed (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-001.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &lt; a &gt;&#x202c;</div>
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-002.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-002.html
new file mode 100644
index 0000000000..73bc465bca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi embed (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-002.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-003.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-003.html
new file mode 100644
index 0000000000..596892d6ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi embed (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-003.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &gt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-004.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-004.html
new file mode 100644
index 0000000000..ddd5229f6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi embed (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-004.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-005.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-005.html
new file mode 100644
index 0000000000..a9afc3ba8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi embed, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-005.html'/>
+<meta name="assert" content='If unicode-bidi:embed is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="rtl">a > <span>&#x5d0; > &#x5d1;</span> > d</div>
+                  <div dir="rtl">a > <span>b > c</span> > d</div>
+                  </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;d &lt; b &gt; c &lt; a&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-006.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-006.html
new file mode 100644
index 0000000000..20348852e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi embed, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-006.html'/>
+<meta name="assert" content='If unicode-bidi:embed is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="ltr">&#x5d0; > <span>b > c</span> > &#x5d3;</div>
+                  <div dir="ltr"> &#x5d0; > <span>&#x5d1; > &#x5d2;</span> > &#x5d3;</div>
+                  </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d0; &gt; &#x5d2; &lt; &#x5d1; &gt; &#x5d3;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-007.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-007.html
new file mode 100644
index 0000000000..4885f68647
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-007.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-007.html'/>
+<meta name="assert" content='If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> 3</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-008.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-008.html
new file mode 100644
index 0000000000..da43f26709
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-008.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-008.html'/>
+<meta name="assert" content='If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> 3</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-009.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-009.html
new file mode 100644
index 0000000000..c65fb45c5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-009.html'/>
+<meta name="assert" content='If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-010.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-010.html
new file mode 100644
index 0000000000..67d3fb9956
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-010.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-010.html'/>
+<meta name="assert" content='If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> &gt; &#x5d1;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-embed-011.html b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-011.html
new file mode 100644
index 0000000000..a34235016b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-embed-011.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, unicode-bidi embed</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-011.html'/>
+<meta name="assert" content='Directionality is not changed by the direction property on its own, but unicode-bidi: embed will apply direction declared on a higher level element.'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; <b>a &gt; <span>b &gt; &#x5d3;</span> &gt; d</b> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d3; &lt; b &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-inline-fragment-crash.html b/testing/web-platform/tests/css/css-writing-modes/bidi-inline-fragment-crash.html
new file mode 100644
index 0000000000..5d3796566b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-inline-fragment-crash.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes Test: many levels of bidi inline fragmentations does not crash</title>
+<link rel="help" href="http://crbug.com/925247">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+span {
+  border: blue solid 2px;
+}
+</style>
+<body>
+<div>
+  <span>
+    1&#x202E;2&#x202D;
+    <span>3&#x202E;4&#x202D;
+      <span>5&#x202E;6&#x202D;
+        <span>7&#x202E;8&#x202D;</span>
+      </span>
+    </span>
+  </span>
+  x
+</div>
+<script>
+test(() => {
+  document.body.offsetTop;
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-001.html
new file mode 100644
index 0000000000..335791b845
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi isolate (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-001.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &lt; a &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-002.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-002.html
new file mode 100644
index 0000000000..f321cec9f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi isolate (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-002.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-003.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-003.html
new file mode 100644
index 0000000000..c678cd65a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi isolate (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-003.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &gt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-004.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-004.html
new file mode 100644
index 0000000000..5a6a9410e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi isolate (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-004.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-005.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-005.html
new file mode 100644
index 0000000000..5ea947da0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi isolate, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-005.html'/>
+<meta name="assert" content='If unicode-bidi:isolate is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="rtl">a > <span>&#x5d0; > &#x5d1;</span> > d</div>
+                  <div dir="rtl">a > <span>b > c</span> > d</div>
+                  </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d1; &lt; &#x5d0; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-006.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-006.html
new file mode 100644
index 0000000000..271845c03c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi isolate, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-006.html'/>
+<meta name="assert" content='If unicode-bidi:isolate is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="ltr">&#x5d0; > <span>b > c</span> > &#x5d3;</div>
+                  <div dir="ltr">&#x5d0; > <span>&#x5d1; > &#x5d2;</span> > &#x5d3;</div>
+                  </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-007.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-007.html
new file mode 100644
index 0000000000..d9b2e9f52a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-007.html'/>
+<meta name="assert" content='If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> 3</div>
+
+<div class="ref">&#x202d;&#x5d0; 3&#x202c;</div>
+
+
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-008.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-008.html
new file mode 100644
index 0000000000..6bcf092945
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-008.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-008.html'/>
+<meta name="assert" content='If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> 3</div>
+
+
+<div class="ref" dir="rtl">&#x202d;3 a&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-009.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-009.html
new file mode 100644
index 0000000000..4b762c399c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-009.html'/>
+<meta name="assert" content='If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;b &lt; a</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-010.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-010.html
new file mode 100644
index 0000000000..eb6262358c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-010.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-010.html'/>
+<meta name="assert" content='If unicode-bidi:isolate is applied to an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> &gt; &#x5d1;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-011.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-011.html
new file mode 100644
index 0000000000..c636cc2b5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-011.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, unicode-bidi embed</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-embed-011.html'/>
+<meta name="assert" content='Directionality is not changed by the direction property on its own, but unicode-bidi: isolate will apply direction declared on a higher level element.'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; <b>a &gt; <span>b &gt; &#x5d3;</span> &gt; d</b> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d3; &lt; b &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-001.html
new file mode 100644
index 0000000000..f539fbaa73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, isolate-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-001.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &lt; dcba &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-002.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-002.html
new file mode 100644
index 0000000000..80a19c4e3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, isolate-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-002.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>&#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; dcba &lt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-003.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-003.html
new file mode 100644
index 0000000000..2252895abb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, isolate-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-003.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in ltr order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-004.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-004.html
new file mode 100644
index 0000000000..c2597f709e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, isolate-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-004.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in ltr order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-005.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-005.html
new file mode 100644
index 0000000000..b92e16ad87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with isolate-override, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-005.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="rtl">a > <span>&#x5d1; > &#x5d2;</span> > d</div>
+                  <div dir="rtl">a > <span>b > c</span> > d</div>
+                  </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d2; &lt; &#x5d1; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; c &lt; b &gt; d&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-006.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-006.html
new file mode 100644
index 0000000000..dbf1e29f89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with isolate-override, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-006.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="ltr">&#x5d0; > <span>b > c</span> > &#x5d3;</div>
+                  <div dir="ltr"> &#x5d0; > <span>&#x5d1; > &#x5d2;</span> > &#x5d3;</div>
+                  </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d1; &gt; &#x5d2; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-007.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-007.html
new file mode 100644
index 0000000000..3cb763f8b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-007.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-007.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> 3</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d3;&#x5d2;&#x5d1;&#x5d0; 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-008.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-008.html
new file mode 100644
index 0000000000..3f93984c72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-008.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>abcd</span> 3</div>
+
+
+<div class="ref" dir="rtl">&#x202d;3 abcd&#x202c;</div>
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-009.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-009.html
new file mode 100644
index 0000000000..d14976226d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-009.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>abcd</span> &gt; e</div>
+
+
+<div class="ref" dir="rtl">&#x202d;e &lt; abcd&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-010.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-010.html
new file mode 100644
index 0000000000..9e6db40aff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-010.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-010.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt; &#x5d4;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt; &#x5d4;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-011.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-011.html
new file mode 100644
index 0000000000..331ce206e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-011.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, isolate-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-011.html'/>
+<meta name="assert" content='unicode-bidi: isolate-override will apply direction declared on a higher level element.'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; <b>a &gt; <span>bc &gt; &#x5d1;&#x5d2;</span> &gt; d</b> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d2;&#x5d1; &lt; cb &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-012.html b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-012.html
new file mode 100644
index 0000000000..2e93f34363
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-isolate-override-012.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: default direction, isolate-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-isolate-override-012.html'/>
+<meta name="assert" content='unicode-bidi: When no direction is set, isolate-override will apply ltr ordering to text within its scope.'/>
+<style type="text/css">
+.test span { unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; <span>abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-line-break-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-line-break-001.html
new file mode 100644
index 0000000000..f46b56b76c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-line-break-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>Test implicit bidi controls do not affect line breaking</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#unicode-bidi">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<style>
+html {
+  font-size: 10px;
+  line-height: 1;
+}
+.isolate {
+  unicode-bidi: isolate;
+}
+.embed {
+  unicode-bidi: embed;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<div id=log></div>
+<div id="container">
+  <div style="width: 4ch" data-expected-height="20">
+    <span class="isolate" dir="ltr">00</span> <span class="isolate" dir="ltr">00</span>
+  </div>
+  <div style="width: 4ch" data-expected-height="20">
+    <span class="embed" dir="ltr">00</span> <span class="embed" dir="ltr">00</span>
+  </div>
+
+  <div style="width: 4ch" data-expected-height="20">
+    <span dir="ltr">00</span> <span dir="ltr">00</span>
+  </div>
+  <div style="width: 4ch" data-expected-height="20">
+    <bdi dir="ltr">00</bdi> <bdi dir="ltr">00</bdi>
+  </div>
+  <div style="width: 4ch" data-expected-height="20">
+    <bdo dir="ltr">00</bdo> <bdo dir="ltr">00</bdo>
+  </div>
+
+  <div style="width: 4ch" data-expected-height="20">
+    <span class="isolate" dir="ltr">00 </span><span class="isolate" dir="ltr">00</span>
+  </div>
+  <div style="width: 4ch" data-expected-height="20">
+    <span class="embed" dir="ltr">00 </span><span class="embed" dir="ltr">00</span>
+  </div>
+</div>
+<script>
+run();
+function run() {
+  for (let node of document.getElementById('container').children) {
+    test(() => {
+      assert_approx_equals(node.offsetHeight, 20, 1);
+    }, node.innerHTML);
+  }
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-001.html
new file mode 100644
index 0000000000..59479c538c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi normal (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-001.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-002.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-002.html
new file mode 100644
index 0000000000..054142fc8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi normal (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-002.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &gt; a &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-003.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-003.html
new file mode 100644
index 0000000000..de3d48fa2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi normal (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-003.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-004.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-004.html
new file mode 100644
index 0000000000..365e21bd40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi normal (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-004.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &lt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-005.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-005.html
new file mode 100644
index 0000000000..10d262221e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi normal, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-005.html'/>
+<meta name="assert" content='If unicode-bidi:normal is applied to an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="rtl">a > <span>&#x5d0; > &#x5d1;</span> > d</div>
+                  <div dir="rtl">a > <span>b > c</span> > d</div>
+                  </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-006.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-006.html
new file mode 100644
index 0000000000..20d44b7e14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi normal, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-006.html'/>
+<meta name="assert" content='If unicode-bidi:normal is applied to an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="ltr">&#x5d0; > <span>b > c</span> > &#x5d3;</div>
+                  <div dir="ltr"> &#x5d0; > <span>&#x5d1; > &#x5d2;</span> > &#x5d3;</div>
+                  </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-007.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-007.html
new file mode 100644
index 0000000000..0bb38f94b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-007.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-007.html'/>
+<meta name="assert" content='If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> 3</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-008.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-008.html
new file mode 100644
index 0000000000..fe58f3fc04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-008.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-008.html'/>
+<meta name="assert" content='If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> 3</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-009.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-009.html
new file mode 100644
index 0000000000..72d7350305
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-009.html'/>
+<meta name="assert" content='If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-010.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-010.html
new file mode 100644
index 0000000000..4300140e84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-010.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-010.html'/>
+<meta name="assert" content='If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> &gt; &#x5d1;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-normal-011.html b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-011.html
new file mode 100644
index 0000000000..54bca7e23e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-normal-011.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, unicode-bidi normal</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-011.html'/>
+<meta name="assert" content='Directionality is not changed by the direction property on its own, nor by unicode-bidi:normal set on a lower level element.'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; <b>a &gt; <span>b &gt; &#x5d3;</span> &gt; d</b> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; b &gt; &#x5d3; &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-001.html
new file mode 100644
index 0000000000..985ecc6d17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, bidi-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-001.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &lt; dcba &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-002.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-002.html
new file mode 100644
index 0000000000..a22d4815c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, bidi-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-002.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>&#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; dcba &lt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-003.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-003.html
new file mode 100644
index 0000000000..fe8f320856
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, bidi-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-003.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in ltr order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-004.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-004.html
new file mode 100644
index 0000000000..cd607c1c98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, bidi-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-004.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in ltr order, ignoring the bidi algorithm.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-005.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-005.html
new file mode 100644
index 0000000000..863ad05ff5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with bidi-override, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-005.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="rtl">a > <span>&#x5d1; > &#x5d2;</span> > d</div>
+                  <div dir="rtl">a > <span>b > c</span> > d</div>
+                  </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d2; &lt; &#x5d1; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;d &lt; c &lt; b &lt; a&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-006.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-006.html
new file mode 100644
index 0000000000..77d4aad9df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with bidi-override, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-006.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="ltr">&#x5d0; > <span>b > c</span> > &#x5d3;</div>
+                  <div dir="ltr"> &#x5d0; > <span>&#x5d1; > &#x5d2;</span> > &#x5d3;</div>
+                  </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1; &gt; &#x5d2; &gt; &#x5d3;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-007.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-007.html
new file mode 100644
index 0000000000..5ad916d617
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-007.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-007.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>abcd</span> 3</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 dcba&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-008.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-008.html
new file mode 100644
index 0000000000..891dfc2ed8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-008.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-008.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>&#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> 3</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&#x5d0;&#x5d1;&#x5d2;&#x5d3; 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-009.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-009.html
new file mode 100644
index 0000000000..936cdf4b6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-009.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>&#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt; e</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; e&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-010.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-010.html
new file mode 100644
index 0000000000..1b6c7a5747
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-010.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-010.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>abcd</span> &gt; &#x5d4;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d4; &lt; dcba&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-011.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-011.html
new file mode 100644
index 0000000000..3ae442ffe0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-011.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, bidi-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-011.html'/>
+<meta name="assert" content='unicode-bidi: bidi-override will apply direction declared on a higher level element.'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; <b>a &gt; <span>bc &gt; &#x5d1;&#x5d2;</span> &gt; d</b> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d2;&#x5d1; &lt; cb &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-override-012.html b/testing/web-platform/tests/css/css-writing-modes/bidi-override-012.html
new file mode 100644
index 0000000000..8d353765d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-override-012.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: default direction, bidi-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-override-012.html'/>
+<meta name="assert" content='unicode-bidi: When no direction is set, bidi-override will apply ltr ordering to text within its scope.'/>
+<style type="text/css">
+.test span { unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; <span>abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-001.html
new file mode 100644
index 0000000000..afb57d2f9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: span unicode-bidi plaintext, rtl (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-001.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with a first strong directional character that is rtl, the text in that element will be displayed in rtl order.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>&#x5d0; &gt; b &gt; &#x5d2;</span> &gt;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d2; &lt; b &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-002.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-002.html
new file mode 100644
index 0000000000..dc44a46088
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-002.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span unicode-bidi plaintext, rtl (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-002.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with a first strong directional character that is rtl, the text in that element will be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&#x5d0; &gt; b &gt; &#x5d2;</span> &gt;</div>
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d2; &lt; b &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-003.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-003.html
new file mode 100644
index 0000000000..2afb754c33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: span unicode-bidi plaintext, ltr (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-003.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with a first strong directional character that is ltr, the text in that element will be displayed in ltr order.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>a &gt; &#x5d0; &gt; c</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &gt; c &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-004.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-004.html
new file mode 100644
index 0000000000..a5b4603d8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: span unicode-bidi plaintext, ltr (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-004.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with a first strong directional character that is ltr, the text in that element will be displayed in ltr order.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>a &gt; &#x5d0; &gt; c</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt; c &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-005.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-005.html
new file mode 100644
index 0000000000..75e0337748
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element as directional character with unicode-bidi plaintext, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-005.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="rtl">a > <span>&#x5d0; > &#x5d1;</span> > d</div>
+                  <div dir="rtl">a > <span>b > c</span> > d</div>
+                  </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d1; &lt; &#x5d0; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-006.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-006.html
new file mode 100644
index 0000000000..d48c9480a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi plaintext, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-006.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="ltr">&#x5d0; > <span>b > c</span> > &#x5d3;</div>
+                  <div dir="ltr">&#x5d0; > <span>&#x5d1; > &#x5d2;</span> > &#x5d3;</div>
+                  </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-007.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-007.html
new file mode 100644
index 0000000000..0a15eee6f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-007.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-007.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> 3</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; 3&#x202c;</div>
+
+
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-008.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-008.html
new file mode 100644
index 0000000000..3f878eadd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-008.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-008.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> 3</div>
+
+
+<div class="ref" dir="rtl">&#x202d;3 a&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-009.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-009.html
new file mode 100644
index 0000000000..68983b284e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-009.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;b &lt; a</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-010.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-010.html
new file mode 100644
index 0000000000..c1e955e03d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-010.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-010.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> &gt; &#x5d1;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-011.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-011.html
new file mode 100644
index 0000000000..df75c33d9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-011.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span unicode-bidi plaintext, no strong (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-plaintext-011.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with no strong directional character, the text in that element will be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&gt; &gt;</span> &gt;</div>
+
+<div class="ref" dir="rtl">&#x202d;&lt; &gt; &gt; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-br-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-br-001.html
new file mode 100644
index 0000000000..0d96934ad2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-plaintext-br-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>unicode-bidi: plaintext with forced breaks</title>
+<link rel="help" href='https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext'/>
+<link rel="match" href='reference/bidi-plaintext-br-001-ref.html'/>
+<link rel="author" title="Koji Ishii" href='mailto:kojii@chromium.org'/>
+<style>
+div.test {
+  font-family: Arial;
+  line-height: 1;
+  width: 10ch;
+  border: 1px solid blue;
+  unicode-bidi: plaintext;
+}
+</style>
+<body>
+  <div class="test">
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+    MMMMM
+  </div>
+  <div class="test">
+    MMMMM
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+  </div>
+  <div class="test">
+    a<br>
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+    MMMMM
+  </div>
+  <div class="test">
+    a<br>
+    MMMMM
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+  </div>
+  <div class="test">
+    &#x5D0;<br>
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+    MMMMM
+  </div>
+  <div class="test">
+    &#x5D0;<br>
+    MMMMM
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-table-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-table-001.html
new file mode 100644
index 0000000000..860a4b3212
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-table-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: table columns</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href="reference/bidi-table-001.html"/>
+<meta name="assert" content='If direction is applied to the ancestor of a table element, columns will be displayed in that direction.'/>
+<style type="text/css">
+.test { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if you see two lines reading c b a.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+
+The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run.
+-->
+
+
+<div class="test">
+<table><tbody>
+<tr><td>a</td><td>b</td><td>c</td></tr>
+<tr><td>a</td><td>b</td><td>c</td></tr>
+</tbody></table>
+</div>
+
+
+
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-001.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-001.html
new file mode 100644
index 0000000000..1f25284a5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi unset (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-001.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-002.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-002.html
new file mode 100644
index 0000000000..7360cde7d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi unset (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-002.html'/>
+<meta name="assert" content='In a ltr context, if direction:rtl is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order.'/>
+<style type="text/css">
+.test span { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &gt; a &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-003.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-003.html
new file mode 100644
index 0000000000..f7758c7b87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi unset (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-003.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>&#x5d0; &gt; a</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-004.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-004.html
new file mode 100644
index 0000000000..f8b8788c63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi unset (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-004.html'/>
+<meta name="assert" content='In a rtl context, if direction:ltr is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order.'/>
+<style type="text/css">
+.test span { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl">&gt; <span>a &gt; &#x5d0;</span> &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &lt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-005.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-005.html
new file mode 100644
index 0000000000..3b3a7a2456
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi unset, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-005.html'/>
+<meta name="assert" content='If direction is set but unicode-bidi is not set on an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character.'/>
+<style type="text/css">
+.test span { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="rtl">a > <span>&#x5d0; > &#x5d1;</span> > d</div>
+                  <div dir="rtl">a > <span>b > c</span> > d</div>
+                  </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-006.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-006.html
new file mode 100644
index 0000000000..440918ccfc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi unset, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-006.html'/>
+<meta name="assert" content='If direction is set but unicode-bidi is not set on an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character.'/>
+<style type="text/css">
+.test span { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test"><div dir="ltr">&#x5d0; > <span>b > c</span> > &#x5d3;</div>
+                  <div dir="ltr"> &#x5d0; > <span>&#x5d1; > &#x5d2;</span> > &#x5d3;</div>
+                  </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-007.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-007.html
new file mode 100644
index 0000000000..db4d014c30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-007.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-007.html'/>
+<meta name="assert" content='If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> 3</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-008.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-008.html
new file mode 100644
index 0000000000..290488a9b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-008.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-008.html'/>
+<meta name="assert" content='If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from surrounding text.'/>
+<style type="text/css">
+.test span { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> 3</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-009.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-009.html
new file mode 100644
index 0000000000..5c03c763d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-009.html'/>
+<meta name="assert" content='If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="rtl"><span>a</span> &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/bidi-unset-010.html b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-010.html
new file mode 100644
index 0000000000..f850eb6500
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/bidi-unset-010.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/bidi-normal-010.html'/>
+<meta name="assert" content='If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from following content.'/>
+<style type="text/css">
+.test span { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test" dir="ltr"><span>&#x5d0;</span> &gt; &#x5d1;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-embed-001.html b/testing/web-platform/tests/css/css-writing-modes/block-embed-001.html
new file mode 100644
index 0000000000..260c19fcaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-embed-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-embed-001.html'/>
+<meta name="assert" content='If direction is applied to a block element containing mixed direction text, the text in that element will be displayed in the expected order.'/>
+<style type="text/css">
+.test { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; a &gt; &#x5d1; &gt; c &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-embed-002.html b/testing/web-platform/tests/css/css-writing-modes/block-embed-002.html
new file mode 100644
index 0000000000..ad1c4ca931
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-embed-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-embed-002.html'/>
+<meta name="assert" content='If direction is applied to a block element containing mixed direction text, the text in that element will be displayed in the expected order.'/>
+<style type="text/css">
+.test { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div dir="rtl">
+<div class="test">&gt; a &gt; &#x5d1; &gt; c &gt;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-embed-003.html b/testing/web-platform/tests/css/css-writing-modes/block-embed-003.html
new file mode 100644
index 0000000000..aedb9d3e32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-embed-003.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-embed-003.html'/>
+<meta name="assert" content='If direction is applied to a block element, contained block elements inherit that direction.'/>
+<style type="text/css">
+.test { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">
+<div>&gt; a &gt; &#x5d1; &gt; c &gt;</div>
+<div>&gt; a &gt; &#x5d1; &gt; c &gt;</div>
+</div>
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-001-ref.xht
new file mode 100644
index 0000000000..b3f4ef46f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-001-ref.xht
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2014-12-30 and 2016-11-14 -->
+
+  <meta name="flags" content="ahem" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: blue;
+      color: yellow;
+      font: 20px/1 Ahem;
+      padding: 1em;
+      width: 19em;
+    }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>P1ro A1ro S1ro S1ro P&nbsp; P A&nbsp; A S&nbsp;&nbsp;&nbsp; S&nbsp;&nbsp;&nbsp; P&nbsp; P A&nbsp; A S&nbsp;&nbsp;&nbsp; S&nbsp;&nbsp;&nbsp; P4ro A4ro S4ro S4ro P&nbsp;&nbsp;&nbsp; A&nbsp; A &nbsp;&nbsp;&nbsp;S &nbsp;&nbsp;&nbsp;S P&nbsp;&nbsp;&nbsp; A&nbsp; A &nbsp;&nbsp;&nbsp;S &nbsp;&nbsp;&nbsp;S P&nbsp;&nbsp;&nbsp; A&nbsp; A S7ro S7ro</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-002-ref.xht
new file mode 100644
index 0000000000..f0074b3b0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-002-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2014-11-26 and 2016-11-14 -->
+
+  <!-- This reference file is the right-aligned version of
+  block-flow-direction-001-ref.xht
+  -->
+
+  <meta name="flags" content="ahem" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: blue;
+      color: yellow;
+      font: 20px/1 Ahem;
+      padding: 1em;
+      width: 19em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div>P1ro A1ro S1ro S1ro P&nbsp; P A&nbsp; A S&nbsp;&nbsp;&nbsp; S&nbsp;&nbsp;&nbsp; P&nbsp; P A&nbsp; A S&nbsp;&nbsp;&nbsp; S&nbsp;&nbsp;&nbsp; P4ro A4ro S4ro S4ro P&nbsp;&nbsp;&nbsp; A&nbsp; A &nbsp;&nbsp;&nbsp;S &nbsp;&nbsp;&nbsp;S P&nbsp;&nbsp;&nbsp; A&nbsp; A &nbsp;&nbsp;&nbsp;S &nbsp;&nbsp;&nbsp;S P&nbsp;&nbsp;&nbsp; A&nbsp; A S7ro S7ro</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-004.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-004.xht
new file mode 100644
index 0000000000..9124d7d972
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-004.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode' - initial value is 'horizontal-tb'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the default, initial value of writing-mode is 'horizontal-tb'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+  {
+  color: yellow;
+  font: 20px/1 Ahem;
+  width: 21em;
+  }
+
+  div
+  {
+  background-color: blue;
+  border-left: blue solid 1em;
+  border-right: blue solid 1em;
+  }
+
+  div#top-border { border-top: blue solid 1em; }
+
+  div#bottom-border { border-bottom: blue solid 1em; }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <!-- topmost line --><div id="top-border">AAAA BBBB CCCC DDDD</div>
+
+  <!-- 2nd topmost line --><div>E&nbsp; F G&nbsp; H J&nbsp;&nbsp;&nbsp; L&nbsp;&nbsp; </div>
+
+  <!-- 3rd topmost line --><div>M&nbsp; N Q&nbsp; R S&nbsp;&nbsp;&nbsp; T&nbsp;&nbsp; </div>
+
+  <!-- 4th topmost line --><div>UUUU VVVV WWWW XXXX</div>
+
+  <!-- 5th topmost line --><div>Z&nbsp;&nbsp;&nbsp; a&nbsp; b&nbsp;&nbsp;&nbsp; c&nbsp;&nbsp;&nbsp; d</div>
+
+  <!-- 6th topmost line --><div>e&nbsp;&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp;&nbsp; h&nbsp;&nbsp;&nbsp; j</div>
+
+  <!-- 7th topmost line --><div id="bottom-border">k&nbsp;&nbsp;&nbsp; m&nbsp; n qqqq rrrr</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-025-ref.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-025-ref.xht
new file mode 100644
index 0000000000..27dec99d2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-025-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      margin: 0px;
+    }
+
+    img
+    {
+      float: right;
+      padding-left: 16px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-043-ref.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-043-ref.xht
new file mode 100644
index 0000000000..4e886c5065
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-043-ref.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-11-22 and 2016-11-14 -->
+
+  <!-- This reference file is the bottom-left-corner version of
+  block-flow-direction-001-ref.xht
+  -->
+
+  <meta name="flags" content="ahem" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      background-color: blue;
+      bottom: 8px;
+      color: yellow;
+      font: 20px/1 Ahem;
+      padding: 1em;
+      position: absolute;
+      width: 19em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div>P1ro A1ro S1ro S1ro P&nbsp; P A&nbsp; A S&nbsp;&nbsp;&nbsp; S&nbsp;&nbsp;&nbsp; P&nbsp; P A&nbsp; A S&nbsp;&nbsp;&nbsp; S&nbsp;&nbsp;&nbsp; P4ro A4ro S4ro S4ro P&nbsp;&nbsp;&nbsp; A&nbsp; A &nbsp;&nbsp;&nbsp;S &nbsp;&nbsp;&nbsp;S P&nbsp;&nbsp;&nbsp; A&nbsp; A &nbsp;&nbsp;&nbsp;S &nbsp;&nbsp;&nbsp;S P&nbsp;&nbsp;&nbsp; A&nbsp; A S7ro S7ro</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-066-ref.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-066-ref.xht
new file mode 100644
index 0000000000..bb5c6dc95c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-066-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      bottom: 8px;
+      margin-bottom: 0px;
+      position: absolute;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      padding-left: 16px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/block-flow-direction-066-exp-res.png" width="358" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>bottom-left corner</strong> of the page.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-htb-001.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-htb-001.xht
new file mode 100644
index 0000000000..eb37aa9caf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-htb-001.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: horizontal-tb - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a 'horizontal-tb' writing mode are laid out one after the other, vertically, with the first beginning at the top of a containing block; they are ordered from top to bottom meaning that the 1st block box is the topmost one, then the 2nd block is juxtaposed at its bottom, then the 3rd block is juxtaposed to the 2nd block at its bottom, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: horizontal-tb;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      width: 21em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border-left: blue solid 1em;
+      border-right: blue solid 1em;
+    }
+
+  div#top-border
+    {
+      border-top: blue solid 1em;
+    }
+
+  div#bottom-border
+    {
+      border-bottom: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <!-- topmost line --><div id="top-border">AAAA BBBB CCCC DDDD</div>
+
+  <!-- 2nd topmost line --><div>E&nbsp; F G&nbsp; H J&nbsp;&nbsp;&nbsp; L&nbsp;&nbsp; </div>
+
+  <!-- 3rd topmost line --><div>M&nbsp; N Q&nbsp; R S&nbsp;&nbsp;&nbsp; T&nbsp;&nbsp; </div>
+
+  <!-- 4th topmost line --><div>UUUU VVVV WWWW XXXX</div>
+
+  <!-- 5th topmost line --><div>Z&nbsp;&nbsp;&nbsp; a&nbsp; b&nbsp;&nbsp;&nbsp; c&nbsp;&nbsp;&nbsp; d</div>
+
+  <!-- 6th topmost line --><div>e&nbsp;&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp;&nbsp; h&nbsp;&nbsp;&nbsp; j</div>
+
+  <!-- 7th topmost line --><div id="bottom-border">k&nbsp;&nbsp;&nbsp; m&nbsp; n qqqq rrrr</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-043.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-043.xht
new file mode 100644
index 0000000000..597e837058
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-043.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-lr - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-043-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
+
+<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
+
+<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
+
+<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-047.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-047.xht
new file mode 100644
index 0000000000..9b7b031e60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-047.xht
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a right-floated box with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#floated-right
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+      float: right;
+      writing-mode: sideways-lr;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="floated-right">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
+
+<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
+
+<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
+
+<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-048.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-048.xht
new file mode 100644
index 0000000000..46de57912a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-048.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that right-floated boxes with 'writing-mode' set to 'sideways-lr' establish block formating contexts with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-right
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      float: right;
+      writing-mode: sideways-lr;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">
+
+<!-- The left-most line of right-most "S" --> <div>a &nbsp;bbbb</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div>jjjj &nbsp;k</div>
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The 1st left-most line of left-most "S" --> <div>N &nbsp;QQQQ</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The left-most line of "A" --> <div>GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
+
+<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+  </div>
+
+  <div class="floated-right" id="left-border">
+
+<!-- The 1st left-most line of "P" --> <div>AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
+
+<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
+
+<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-050.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-050.xht
new file mode 100644
index 0000000000..71708f2bc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-050.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an absolutely positioned box with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#abs-pos
+    {
+      height: 9em;
+      left: auto;
+      position: absolute;
+      writing-mode: sideways-lr;
+    }
+
+  div#abs-pos > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="abs-pos">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
+
+<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
+
+<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
+
+<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-054.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-054.xht
new file mode 100644
index 0000000000..5932b5ce7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-054.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-lr;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  span#right-border
+    {
+    border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The 1st left-most line of "P" --> <span class="left-border">AAAAAAA</span>
+
+<!-- The 2nd left-most line of "P" --> <span>&nbsp;&nbsp; B &nbsp;C</span>
+
+<!-- The 3rd left-most line of "P" --> <span>&nbsp;&nbsp; D &nbsp;E</span>
+
+<!-- The 4th left-most line of "P" --> <span>&nbsp;&nbsp; FFFF</span>
+
+
+
+<!-- The left-most line of "A" --> <span class="left-border">GGGGGGG</span>
+
+<!-- The 2nd left-most line of "A" --> <span>&nbsp;&nbsp; H &nbsp;J</span>
+
+<!-- The 3rd left-most line of "A" --> <span>&nbsp;&nbsp; K &nbsp;L</span>
+
+<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <span class="left-border">N&nbsp; QQQQ</span>
+
+<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
+
+<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
+
+<!-- The 4th left-most line of left-most "S" --> <span>XXXX &nbsp;Y</span>
+
+
+
+<!-- The left-most line of right-most "S" --> <span class="left-border">a&nbsp; bbbb</span>
+
+<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
+
+<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
+
+<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj &nbsp;k</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-055.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-055.xht
new file mode 100644
index 0000000000..1dc72345ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-055.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr'
+ establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      writing-mode: sideways-lr;
+    }
+
+  span
+    {
+      border-left: blue solid 1em;
+      display: block;
+    }
+
+  span#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The "P" --> <span>AAAAAAA &nbsp;&nbsp; B &nbsp;C &nbsp;&nbsp; D &nbsp;E &nbsp;&nbsp; FFFF</span>
+
+<!-- The "A" --> <span>GGGGGGG &nbsp;&nbsp; H &nbsp;J &nbsp;&nbsp; K &nbsp;L MMMMMMM</span>
+
+<!-- The left-most "S" --> <span>N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y</span>
+
+<!-- The right-most "S" --> <span id="right-border">a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-056.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-056.xht
new file mode 100644
index 0000000000..fa5a3cc257
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-056.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-left: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-lr;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The 1st left-most line of "P" --> <span>AAAAAAA</span>
+
+<!-- The 2nd left-most line of "P" --> <span>&nbsp;&nbsp; B &nbsp;C</span>
+
+<!-- The 3rd left-most line of "P" --> <span>&nbsp;&nbsp; D &nbsp;E</span>
+
+<!-- The 4th left-most line of "P" --> <span>&nbsp;&nbsp; FFFF</span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of "A" --> <span>GGGGGGG</span>
+
+<!-- The 2nd left-most line of "A" --> <span>&nbsp;&nbsp; H &nbsp;J</span>
+
+<!-- The 3rd left-most line of "A" --> <span>&nbsp;&nbsp; K &nbsp;L</span>
+
+<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
+
+    </div><div class="inline-block">
+
+<!-- The 1st left-most line of left-most "S" --> <span>N&nbsp; QQQQ</span>
+
+<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
+
+<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
+
+<!-- The 4th left-most line of left-most "S" --> <span>XXXX &nbsp;Y</span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of right-most "S" --> <span>a&nbsp; bbbb</span>
+
+<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
+
+<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
+
+<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj &nbsp;k</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-058.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-058.xht
new file mode 100644
index 0000000000..2f03e47b04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-058.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-cell with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-cell
+    {
+      display: table-cell;
+      height: 9em;
+      writing-mode: sideways-lr;
+    }
+
+  div#table-cell > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-cell">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
+
+<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
+
+<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
+
+<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-060.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-060.xht
new file mode 100644
index 0000000000..5db6943097
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-060.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'sideways-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-caption with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-caption
+    {
+      display: table-caption;
+      height: 9em;
+      writing-mode: sideways-lr;
+    }
+
+  div#table-caption > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-caption">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
+
+<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
+
+<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
+
+<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-062.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-062.xht
new file mode 100644
index 0000000000..b1bf73d13f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-062.xht
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and sideways-lr - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-043-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and then the 2nd block is juxtaposed to the right-hand side of 1st block, the 3rd block is juxtaposed to the 2nd block on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      list-style: none outside url("support/blue1x1.png");
+      margin: 0em;
+      padding-bottom: 1em; /* overriding default 40px in several browsers */
+    }
+
+  /*
+     This test depends on the blue ::marker image being placed inside the (blue)
+     padding area.  That depends on how the spacing between it and the list-item
+     box is calculated, which depends on font metrics.  The following rule is
+     to avoid these uncertainties and place it inside the padding for sure.
+  */
+  ::marker
+    {
+      font-size: 0;
+    }
+
+  ul.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  ul#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The 1st left-most line of "P" --> <ul class="left-border"><li>AAAAAAA</li></ul>
+
+<!-- The 2nd left-most line of "P" --> <ul><li>&nbsp;&nbsp; B &nbsp;C</li></ul>
+
+<!-- The 3rd left-most line of "P" --> <ul><li>&nbsp;&nbsp; D &nbsp;E</li></ul>
+
+<!-- The 4th left-most line of "P" --> <ul><li>&nbsp;&nbsp; FFFF</li></ul>
+
+
+
+<!-- The left-most line of "A" --> <ul class="left-border"><li>GGGGGGG</li></ul>
+
+<!-- The 2nd left-most line of "A" --> <ul><li>&nbsp;&nbsp; H &nbsp;J</li></ul>
+
+<!-- The 3rd left-most line of "A" --> <ul><li>&nbsp;&nbsp; K &nbsp;L</li></ul>
+
+<!-- The 4th left-most line of "A" --> <ul><li>MMMMMMM</li></ul>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <ul class="left-border"><li>N&nbsp; QQQQ</li></ul>
+
+<!-- The 2nd left-most line of left-most "S" --> <ul><li>R&nbsp; S&nbsp; T</li></ul>
+
+<!-- The 3rd left-most line of left-most "S" --> <ul><li>U&nbsp; V&nbsp; W</li></ul>
+
+<!-- The 4th left-most line of left-most "S" --> <ul><li>XXXX &nbsp;Y</li></ul>
+
+
+
+<!-- The left-most line of right-most "S" --> <ul class="left-border"><li>a&nbsp; bbbb</li></ul>
+
+<!-- The 2nd left-most line of right-most "S" --> <ul><li>c&nbsp; d&nbsp; e</li></ul>
+
+<!-- The 3rd left-most line of right-most "S" --> <ul><li>f&nbsp; g&nbsp; h</li></ul>
+
+<!-- The 4th left-most line of right-most "S" --> <ul id="right-border"><li>jjjj &nbsp;k</li></ul>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-063.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-063.xht
new file mode 100644
index 0000000000..180b499e82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-063.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-lr - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-043-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc... " name="assert" />
+
+  <!--
+  This test is a variation of block-flow-direction-003 test.
+  -->
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      border-right: blue none 0em;
+    }
+
+  div#right-most
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The "P" --> <div>AAAAAAA &nbsp;&nbsp; B &nbsp;C &nbsp;&nbsp; D &nbsp;E &nbsp;&nbsp; FFFF</div>
+
+<!-- The "A" --> <div>GGGGGGG &nbsp;&nbsp; H &nbsp;J &nbsp;&nbsp; K &nbsp;L MMMMMMM</div>
+
+<!-- The left-most "S" --> <div>N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y</div>
+
+<!-- The right-most "S" --> <div id="right-most">a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-066.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-066.xht
new file mode 100644
index 0000000000..24a4dfef3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-slr-066.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: writing mode (sideways-lr) of document - horizontal position of first block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting" title="9.4.1 Block formatting contexts" />
+  <link rel="match" href="block-flow-direction-066-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that, when 'writing-mode' value of the root element is set to 'sideways-lr', then its block boxes are laid out rightwardedly (from left to right) one after the other beginning at its lefthand side. Also, the inline flow direction is 'topwardedly', that is inline boxes in the line box flow from the bottom toward the top; inline boxes are laid out vertically, one after the other, starting at the physical bottom side of its containing block." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-066-exp-res.png" width="358" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>bottom-left corner</strong> of the page.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-042.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-042.xht
new file mode 100644
index 0000000000..975c090772
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-042.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-rl - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-045.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-045.xht
new file mode 100644
index 0000000000..6e558f4f23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-045.xht
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a left-floated box with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#floated-left
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      float: left;
+      height: 8em;
+      writing-mode: sideways-rl;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="floated-left">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-046.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-046.xht
new file mode 100644
index 0000000000..4ec1164440
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-046.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that left-floated boxes with 'writing-mode' set to 'sideways-rl' establish block formating contexts with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-left
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-left: blue solid 1em;
+      border-top: blue solid 1em;
+      float: left;
+      writing-mode: sideways-rl;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div class="floated-left">
+
+<!-- The right-most line of "P" --> <div>eeee&nbsp;&nbsp;</div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp;</div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp;</div>
+
+<!-- The 4th right-most line of "P" --> <div>kkkkkkk</div>
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The right-most line of "A" --> <div>YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp;</div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp;</div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The right-most line of left-most "S" --> <div>L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+  </div>
+
+  <div class="floated-left" id="right-border">
+
+<!-- The right-most line of right-most "S" --> <div>A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-049.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-049.xht
new file mode 100644
index 0000000000..6ea429ae33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-049.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an absolutely positioned box with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#abs-pos
+    {
+      height: 9em;
+      left: auto;
+      position: absolute;
+      writing-mode: sideways-rl;
+    }
+
+  div#abs-pos > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="abs-pos">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-051.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-051.xht
new file mode 100644
index 0000000000..2f5e3f48c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-051.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+    background-color: blue;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-rl;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The right-most line of right-most "S" --> <span class="right-border">A&nbsp; BBBB</span>
+
+<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
+
+<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
+
+<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
+
+
+
+<!-- The right-most line of left-most "S" --> <span class="right-border">L&nbsp; MMMM</span>
+
+<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
+
+<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
+
+<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
+
+
+
+<!-- The right-most line of "A" --> <span class="right-border">YYYYYYY</span>
+
+<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
+
+
+
+<!-- The right-most line of "P" --> <span class="right-border">eeee&nbsp;&nbsp; </span>
+
+<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-052.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-052.xht
new file mode 100644
index 0000000000..9c5d749831
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-052.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-rl;
+    }
+
+  span
+    {
+      border-right: blue solid 1em;
+      display: block;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The right-most "S" --> <span>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</span>
+
+<!-- The left-most "S" --> <span>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</span>
+
+<!-- The "A" --> <span>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</span>
+
+<!-- The "P" --> <span id="left-border">eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-053.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-053.xht
new file mode 100644
index 0000000000..ea32277ad5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-053.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-rl;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The right-most line of "P" --> <span>eeee&nbsp;&nbsp; </span>
+
+<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of "A" --> <span>YYYYYYY</span>
+
+<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of left-most "S" --> <span>L&nbsp; MMMM</span>
+
+<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
+
+<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
+
+<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of right-most "S" --> <span>A&nbsp; BBBB</span>
+
+<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
+
+<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
+
+<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-057.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-057.xht
new file mode 100644
index 0000000000..e674b3b477
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-057.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-cell with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-cell
+    {
+      display: table-cell;
+      height: 9em;
+      writing-mode: sideways-rl;
+    }
+
+  div#table-cell > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-cell">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-059.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-059.xht
new file mode 100644
index 0000000000..3460092383
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-059.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'sideways-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-caption with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-caption
+    {
+      display: table-caption;
+      height: 9em;
+      writing-mode: sideways-rl;
+    }
+
+  div#table-caption > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-caption">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-061.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-061.xht
new file mode 100644
index 0000000000..8e97775a10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-061.xht
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and sideways-rl - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one and then the 2nd block is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd block on its left-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      list-style: none outside url("support/blue1x1.png");
+      margin: 0em;
+      padding-top: 1em; /* overriding default padding-start: 40px in several browsers */
+    }
+
+  /*
+     This test depends on the blue ::marker image being placed inside the (blue)
+     padding area.  That depends on how the spacing between it and the list-item
+     box is calculated, which depends on font metrics.  The following rule is
+     to avoid these uncertainties and place it inside the padding for sure.
+  */
+  ::marker
+    {
+      font-size: 0;
+    }
+
+  ul.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  ul#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The right-most line of right-most "S" --> <ul class="right-border"><li>A&nbsp; BBBB</li></ul>
+
+<!-- The 2nd right-most line of right-most "S" --> <ul><li>C&nbsp; D&nbsp; E</li></ul>
+
+<!-- The 3rd right-most line of right-most "S" --> <ul><li>F&nbsp; G&nbsp; H</li></ul>
+
+<!-- The 4th right-most line of right-most "S" --> <ul><li>JJJJ&nbsp; K</li></ul>
+
+
+
+<!-- The right-most line of left-most "S" --> <ul class="right-border"><li>L&nbsp; MMMM</li></ul>
+
+<!-- The 2nd right-most line of left-most "S" --> <ul><li>Q&nbsp; R&nbsp; S</li></ul>
+
+<!-- The 3rd right-most line of left-most "S" --> <ul><li>T&nbsp; U&nbsp; V</li></ul>
+
+<!-- The 4th right-most line of left-most "S" --> <ul><li>WWWW&nbsp; X</li></ul>
+
+
+
+<!-- The right-most line of "A" --> <ul class="right-border"><li>YYYYYYY</li></ul>
+
+<!-- The 2nd right-most line of "A" --> <ul><li>Z&nbsp; a&nbsp;&nbsp; </li></ul>
+
+<!-- The 3rd right-most line of "A" --> <ul><li>b&nbsp; c&nbsp;&nbsp; </li></ul>
+
+<!-- The 4th right-most line of "A" --> <ul><li>ddddddd</li></ul>
+
+
+
+<!-- The right-most line of "P" --> <ul class="right-border"><li>eeee&nbsp;&nbsp; </li></ul>
+
+<!-- The 2nd right-most line of "P" --> <ul><li>f&nbsp; g&nbsp;&nbsp; </li></ul>
+
+<!-- The 3rd right-most line of "P" --> <ul><li>h&nbsp; j&nbsp;&nbsp; </li></ul>
+
+<!-- The 4th right-most line of "P" --> <ul id="left-border"><li>kkkkkkk</li></ul>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-064.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-064.xht
new file mode 100644
index 0000000000..fba7236f9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-064.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-rl - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc... " name="assert" />
+
+  <!--
+  This test is a variation of block-flow-direction-002 test.
+  -->
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The right-most "S" --> <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</div>
+
+<!-- The left-most "S" --> <div>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</div>
+
+<!-- The "A" --> <div>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</div>
+
+<!-- The "P" --> <div id="left-border">eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-065.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-065.xht
new file mode 100644
index 0000000000..40c0f83daa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-srl-065.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: writing mode (sideways-rl) of document - horizontal position of first block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting" title="9.4.1 Block formatting contexts" />
+  <link rel="match" href="block-flow-direction-025-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that, when 'writing-mode' value of the root element is set to 'sideways-rl', then its block boxes are laid out leftwardedly (from right to left) one after the other beginning at its righthand side. Also, the inline flow direction is 'bottomwardedly', that is inline boxes in the line box flow from the top toward the bottom; inline boxes are laid out vertically, one after the other, starting at the physical top side of its containing block." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-003.xht
new file mode 100644
index 0000000000..720c9808ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-003.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-lr - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>B&nbsp; C&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "P" --> <div>D&nbsp; E&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "P" --> <div>FFFF&nbsp;&nbsp; </div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>H&nbsp; J&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "A" --> <div>K&nbsp; L&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">NNNN&nbsp; Q</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>X&nbsp; YYYY</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">aaaa&nbsp; b</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">j&nbsp; kkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-007.xht
new file mode 100644
index 0000000000..2e7545f694
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-007.xht
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a right-floated box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#floated-right
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+      float: right;
+      writing-mode: vertical-lr;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="floated-right">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>B&nbsp; C&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "P" --> <div>D&nbsp; E&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "P" --> <div>FFFF&nbsp;&nbsp; </div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>H&nbsp; J&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "A" --> <div>K&nbsp; L&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">NNNN&nbsp; Q</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>X&nbsp; YYYY</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">aaaa&nbsp; b</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">j&nbsp; kkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-008.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-008.xht
new file mode 100644
index 0000000000..614ea6bcb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-008.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that right-floated boxes with 'writing-mode' set to 'vertical-lr' establish block formating contexts with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-right
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      float: right;
+      writing-mode: vertical-lr;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">
+
+<!-- The left-most line of right-most "S" --> <div>aaaa&nbsp; b</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div>j&nbsp; kkkk</div>
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The 1st left-most line of left-most "S" --> <div>NNNN&nbsp; Q</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>X&nbsp; YYYY</div>
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The left-most line of "A" --> <div>GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>H&nbsp; J&nbsp;&nbsp;</div>
+
+<!-- The 3rd left-most line of "A" --> <div>K&nbsp; L&nbsp;&nbsp;</div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+  </div>
+
+  <div class="floated-right" id="left-border">
+
+<!-- The 1st left-most line of "P" --> <div>AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>B&nbsp; C&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "P" --> <div>D&nbsp; E&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "P" --> <div>FFFF&nbsp;&nbsp; </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-010.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-010.xht
new file mode 100644
index 0000000000..847fa0481a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-010.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#abs-pos
+    {
+      height: 9em;
+      left: auto;
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+
+  div#abs-pos > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="abs-pos">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>B&nbsp; C&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "P" --> <div>D&nbsp; E&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "P" --> <div>FFFF&nbsp;&nbsp; </div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>H&nbsp; J&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "A" --> <div>K&nbsp; L&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">NNNN&nbsp; Q</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>X&nbsp; YYYY</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">aaaa&nbsp; b</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">j&nbsp; kkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-014.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-014.xht
new file mode 100644
index 0000000000..ad49e098ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-014.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  span#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The 1st left-most line of "P" --> <span class="left-border">AAAAAAA</span>
+
+<!-- The 2nd left-most line of "P" --> <span>B&nbsp; C&nbsp;&nbsp; </span>
+
+<!-- The 3rd left-most line of "P" --> <span>D&nbsp; E&nbsp;&nbsp; </span>
+
+<!-- The 4th left-most line of "P" --> <span>FFFF&nbsp;&nbsp; </span>
+
+
+
+<!-- The left-most line of "A" --> <span class="left-border">GGGGGGG</span>
+
+<!-- The 2nd left-most line of "A" --> <span>H&nbsp; J&nbsp;&nbsp; </span>
+
+<!-- The 3rd left-most line of "A" --> <span>K&nbsp; L&nbsp;&nbsp; </span>
+
+<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <span class="left-border">NNNN&nbsp; Q</span>
+
+<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
+
+<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
+
+<!-- The 4th left-most line of left-most "S" --> <span>X&nbsp; YYYY</span>
+
+
+
+<!-- The left-most line of right-most "S" --> <span class="left-border">aaaa&nbsp; b</span>
+
+<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
+
+<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
+
+<!-- The 4th left-most line of right-most "S" --> <span id="right-border">j&nbsp; kkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-015.xht
new file mode 100644
index 0000000000..fb8ef5302a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-015.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      border-left: blue solid 1em;
+      display: block;
+    }
+
+  span#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The "P" --> <span>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp;</span>
+
+<!-- The "A" --> <span>GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM</span>
+
+<!-- The left-most "S" --> <span>NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY</span>
+
+<!-- The right-most "S" --> <span id="right-border">aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-016.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-016.xht
new file mode 100644
index 0000000000..cc57c23f7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-016.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-left: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The 1st left-most line of "P" --> <span>AAAAAAA</span>
+
+<!-- The 2nd left-most line of "P" --> <span>B&nbsp; C&nbsp;&nbsp; </span>
+
+<!-- The 3rd left-most line of "P" --> <span>D&nbsp; E&nbsp;&nbsp; </span>
+
+<!-- The 4th left-most line of "P" --> <span>FFFF&nbsp;&nbsp; </span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of "A" --> <span>GGGGGGG</span>
+
+<!-- The 2nd left-most line of "A" --> <span>H&nbsp; J&nbsp;&nbsp; </span>
+
+<!-- The 3rd left-most line of "A" --> <span>K&nbsp; L&nbsp;&nbsp; </span>
+
+<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
+
+    </div><div class="inline-block">
+
+<!-- The 1st left-most line of left-most "S" --> <span>NNNN&nbsp; Q</span>
+
+<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
+
+<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
+
+<!-- The 4th left-most line of left-most "S" --> <span>X&nbsp; YYYY</span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of right-most "S" --> <span>aaaa&nbsp; b</span>
+
+<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
+
+<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
+
+<!-- The 4th left-most line of right-most "S" --> <span id="right-border">j&nbsp; kkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-018.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-018.xht
new file mode 100644
index 0000000000..7f8bb9f4eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-018.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-cell with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-cell
+    {
+      display: table-cell;
+      height: 9em;
+      writing-mode: vertical-lr;
+    }
+
+  div#table-cell > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-cell">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>B&nbsp; C&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "P" --> <div>D&nbsp; E&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "P" --> <div>FFFF&nbsp;&nbsp; </div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>H&nbsp; J&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "A" --> <div>K&nbsp; L&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">NNNN&nbsp; Q</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>X&nbsp; YYYY</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">aaaa&nbsp; b</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">j&nbsp; kkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-020.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-020.xht
new file mode 100644
index 0000000000..89fe29d53c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-020.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'vertical-lr' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-caption with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-caption
+    {
+      display: table-caption;
+      height: 9em;
+      writing-mode: vertical-lr;
+    }
+
+  div#table-caption > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-caption">
+
+<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
+
+<!-- The 2nd left-most line of "P" --> <div>B&nbsp; C&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "P" --> <div>D&nbsp; E&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "P" --> <div>FFFF&nbsp;&nbsp; </div>
+
+
+
+<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
+
+<!-- The 2nd left-most line of "A" --> <div>H&nbsp; J&nbsp;&nbsp; </div>
+
+<!-- The 3rd left-most line of "A" --> <div>K&nbsp; L&nbsp;&nbsp; </div>
+
+<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <div class="left-border">NNNN&nbsp; Q</div>
+
+<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
+
+<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
+
+<!-- The 4th left-most line of left-most "S" --> <div>X&nbsp; YYYY</div>
+
+
+
+<!-- The left-most line of right-most "S" --> <div class="left-border">aaaa&nbsp; b</div>
+
+<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
+
+<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
+
+<!-- The 4th left-most line of right-most "S" --> <div id="right-border">j&nbsp; kkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-022.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-022.xht
new file mode 100644
index 0000000000..6c2f4d3b65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-022.xht
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and vertical-lr - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and then the 2nd block is juxtaposed to the right-hand side of 1st block, the 3rd block is juxtaposed to the 2nd block on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      list-style: none outside url("support/blue1x1.png");
+      margin: 0em;
+      padding-top: 1em; /* overriding default 40px in several browsers */
+    }
+
+  ul.left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  ul#right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  /*
+     This test depends on the blue ::marker image being placed inside the (blue)
+     padding area.  That depends on how the spacing between it and the list-item
+     box is calculated, which depends on font metrics.  The following rule is
+     to avoid these uncertainties and place it inside the padding for sure.
+  */
+  ::marker
+    {
+      font-size: 0;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The 1st left-most line of "P" --> <ul class="left-border"><li>AAAAAAA</li></ul>
+
+<!-- The 2nd left-most line of "P" --> <ul><li>B&nbsp; C&nbsp;&nbsp; </li></ul>
+
+<!-- The 3rd left-most line of "P" --> <ul><li>D&nbsp; E&nbsp;&nbsp; </li></ul>
+
+<!-- The 4th left-most line of "P" --> <ul><li>FFFF&nbsp;&nbsp; </li></ul>
+
+
+
+<!-- The left-most line of "A" --> <ul class="left-border"><li>GGGGGGG</li></ul>
+
+<!-- The 2nd left-most line of "A" --> <ul><li>H&nbsp; J&nbsp;&nbsp; </li></ul>
+
+<!-- The 3rd left-most line of "A" --> <ul><li>K&nbsp; L&nbsp;&nbsp; </li></ul>
+
+<!-- The 4th left-most line of "A" --> <ul><li>MMMMMMM</li></ul>
+
+
+
+<!-- The 1st left-most line of left-most "S" --> <ul class="left-border"><li>NNNN&nbsp; Q</li></ul>
+
+<!-- The 2nd left-most line of left-most "S" --> <ul><li>R&nbsp; S&nbsp; T</li></ul>
+
+<!-- The 3rd left-most line of left-most "S" --> <ul><li>U&nbsp; V&nbsp; W</li></ul>
+
+<!-- The 4th left-most line of left-most "S" --> <ul><li>X&nbsp; YYYY</li></ul>
+
+
+
+<!-- The left-most line of right-most "S" --> <ul class="left-border"><li>aaaa&nbsp; b</li></ul>
+
+<!-- The 2nd left-most line of right-most "S" --> <ul><li>c&nbsp; d&nbsp; e</li></ul>
+
+<!-- The 3rd left-most line of right-most "S" --> <ul><li>f&nbsp; g&nbsp; h</li></ul>
+
+<!-- The 4th left-most line of right-most "S" --> <ul id="right-border"><li>j&nbsp; kkkk</li></ul>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-023.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-023.xht
new file mode 100644
index 0000000000..7e1723b297
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vlr-023.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-lr - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc... " name="assert" />
+
+  <!--
+  This test is a variation of block-flow-direction-003 test.
+  -->
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      border-right: blue none 0em;
+    }
+
+  div#right-most
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The "P" --> <div>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; </div>
+
+<!-- The "A" --> <div>GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM</div>
+
+<!-- The left-most "S" --> <div>NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY</div>
+
+<!-- The right-most "S" --> <div id="right-most">aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-002.xht
new file mode 100644
index 0000000000..929db6850f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-002.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-rl - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-005.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-005.xht
new file mode 100644
index 0000000000..2a21d9cc50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-005.xht
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a left-floated box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#floated-left
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      float: left;
+      height: 8em;
+      writing-mode: vertical-rl;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="floated-left">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-006.xht
new file mode 100644
index 0000000000..5969dcb4f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-006.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that left-floated boxes with 'writing-mode' set to 'vertical-rl' establish block formating contexts with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-left
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-left: blue solid 1em;
+      border-top: blue solid 1em;
+      float: left;
+      writing-mode: vertical-rl;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div class="floated-left">
+
+<!-- The right-most line of "P" --> <div>eeee&nbsp;&nbsp;</div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp;</div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp;</div>
+
+<!-- The 4th right-most line of "P" --> <div>kkkkkkk</div>
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The right-most line of "A" --> <div>YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp;</div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp;</div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The right-most line of left-most "S" --> <div>L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+  </div>
+
+  <div class="floated-left" id="right-border">
+
+<!-- The right-most line of right-most "S" --> <div>A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-009.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-009.xht
new file mode 100644
index 0000000000..6e153c6f98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-009.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#abs-pos
+    {
+      height: 9em;
+      left: auto;
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+
+  div#abs-pos > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="abs-pos">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-011.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-011.xht
new file mode 100644
index 0000000000..eab8bbf110
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-011.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The right-most line of right-most "S" --> <span class="right-border">A&nbsp; BBBB</span>
+
+<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
+
+<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
+
+<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
+
+
+
+<!-- The right-most line of left-most "S" --> <span class="right-border">L&nbsp; MMMM</span>
+
+<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
+
+<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
+
+<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
+
+
+
+<!-- The right-most line of "A" --> <span class="right-border">YYYYYYY</span>
+
+<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
+
+
+
+<!-- The right-most line of "P" --> <span class="right-border">eeee&nbsp;&nbsp; </span>
+
+<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-012.xht
new file mode 100644
index 0000000000..95ec13e451
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-012.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      border-right: blue solid 1em;
+      display: block;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The right-most "S" --> <span>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</span>
+
+<!-- The left-most "S" --> <span>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</span>
+
+<!-- The "A" --> <span>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</span>
+
+<!-- The "P" --> <span id="left-border">eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-013.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-013.xht
new file mode 100644
index 0000000000..88b642752c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-013.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The right-most line of "P" --> <span>eeee&nbsp;&nbsp; </span>
+
+<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of "A" --> <span>YYYYYYY</span>
+
+<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of left-most "S" --> <span>L&nbsp; MMMM</span>
+
+<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
+
+<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
+
+<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of right-most "S" --> <span>A&nbsp; BBBB</span>
+
+<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
+
+<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
+
+<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-017.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-017.xht
new file mode 100644
index 0000000000..b51f4eaf22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-017.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-cell with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-cell
+    {
+      display: table-cell;
+      height: 9em;
+      writing-mode: vertical-rl;
+    }
+
+  div#table-cell > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-cell">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-019.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-019.xht
new file mode 100644
index 0000000000..2144962990
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-019.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'vertical-rl' - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table-caption with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#table-caption
+    {
+      display: table-caption;
+      height: 9em;
+      writing-mode: vertical-rl;
+    }
+
+  div#table-caption > div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="table-caption">
+
+<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
+
+<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
+
+<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
+
+<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
+
+
+
+<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
+
+<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
+
+<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
+
+<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
+
+
+
+<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
+
+<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
+
+
+
+<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
+
+<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
+
+<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
+
+<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-021.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-021.xht
new file mode 100644
index 0000000000..41a623db55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-021.xht
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and vertical-rl - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one and then the 2nd block is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd block on its left-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      list-style: none outside url("support/blue1x1.png");
+      margin: 0em;
+      padding-top: 1em; /* overriding default padding-start: 40px in several browsers */
+    }
+
+  ul.right-border
+    {
+      border-right: blue solid 1em;
+    }
+
+  ul#left-border
+    {
+      border-left: blue solid 1em;
+    }
+
+  /*
+     This test depends on the blue ::marker image being placed inside the (blue)
+     padding area.  That depends on how the spacing between it and the list-item
+     box is calculated, which depends on font metrics.  The following rule is
+     to avoid these uncertainties and place it inside the padding for sure.
+  */
+  ::marker
+    {
+      font-size: 0;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The right-most line of right-most "S" --> <ul class="right-border"><li>A&nbsp; BBBB</li></ul>
+
+<!-- The 2nd right-most line of right-most "S" --> <ul><li>C&nbsp; D&nbsp; E</li></ul>
+
+<!-- The 3rd right-most line of right-most "S" --> <ul><li>F&nbsp; G&nbsp; H</li></ul>
+
+<!-- The 4th right-most line of right-most "S" --> <ul><li>JJJJ&nbsp; K</li></ul>
+
+
+
+<!-- The right-most line of left-most "S" --> <ul class="right-border"><li>L&nbsp; MMMM</li></ul>
+
+<!-- The 2nd right-most line of left-most "S" --> <ul><li>Q&nbsp; R&nbsp; S</li></ul>
+
+<!-- The 3rd right-most line of left-most "S" --> <ul><li>T&nbsp; U&nbsp; V</li></ul>
+
+<!-- The 4th right-most line of left-most "S" --> <ul><li>WWWW&nbsp; X</li></ul>
+
+
+
+<!-- The right-most line of "A" --> <ul class="right-border"><li>YYYYYYY</li></ul>
+
+<!-- The 2nd right-most line of "A" --> <ul><li>Z&nbsp; a&nbsp;&nbsp; </li></ul>
+
+<!-- The 3rd right-most line of "A" --> <ul><li>b&nbsp; c&nbsp;&nbsp; </li></ul>
+
+<!-- The 4th right-most line of "A" --> <ul><li>ddddddd</li></ul>
+
+
+
+<!-- The right-most line of "P" --> <ul class="right-border"><li>eeee&nbsp;&nbsp; </li></ul>
+
+<!-- The 2nd right-most line of "P" --> <ul><li>f&nbsp; g&nbsp;&nbsp; </li></ul>
+
+<!-- The 3rd right-most line of "P" --> <ul><li>h&nbsp; j&nbsp;&nbsp; </li></ul>
+
+<!-- The 4th right-most line of "P" --> <ul id="left-border"><li>kkkkkkk</li></ul>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-024.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-024.xht
new file mode 100644
index 0000000000..76b9fe6459
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-024.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-rl - block flow direction of block-level boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc... " name="assert" />
+
+  <!--
+  This test is a variation of block-flow-direction-002 test.
+  -->
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+  /*
+  "
+  The principal writing mode of the document is determined by the writing-mode
+  and direction values specified on the root element.
+  "
+  */
+
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+      height: 9em;
+    }
+
+  div
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+<!-- The right-most "S" --> <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</div>
+
+<!-- The left-most "S" --> <div>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</div>
+
+<!-- The "A" --> <div>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</div>
+
+<!-- The "P" --> <div id="left-border">eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-025.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-025.xht
new file mode 100644
index 0000000000..92685d3d0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-025.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: writing mode of document - horizontal position of first block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting" title="9.4.1 Block formatting contexts" />
+  <link rel="match" href="block-flow-direction-025-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that, when 'writing-mode' value of the root element is set to 'vertical-rl', then its block boxes are laid out leftwardedly (from right to left) one after the other beginning at its righthand side." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-026-ref.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-026-ref.xht
new file mode 100644
index 0000000000..763bec577c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-026-ref.xht
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+		<meta name="flags" content="ahem" />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css">
+				div
+				{
+					background: pink;
+					border: 1px solid black;
+					color: blue;
+					font: 20px/1 "Ahem";
+					margin: 10px;
+					width: 3em;
+					white-space: pre;
+				}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if the 2 pink-and-blue rectangles are <strong>identical</strong>.</p>
+
+		<div>7 1
+ 52
+ 63</div>
+
+		<div>7 1
+ 52
+ 63</div>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-026.xht b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-026.xht
new file mode 100644
index 0000000000..1755ac5508
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-flow-direction-vrl-026.xht
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Writing Modes Test: vertical-rl - block flow direction of block-level boxes</title>
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+		<link rel="help" title="3.1. Block Flow Direction: the 'writing-mode' property" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" />
+		<link rel="match" href="block-flow-direction-vrl-026-ref.xht" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This test checks 1.block flow direction, 2.inline direction when 'writing-mode' is set to 'vertical-rl'." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css">
+				.view_ahem
+				{
+					background: pink;
+					border: 1px solid black;
+					color: blue;
+					font: 20px/1 "Ahem";
+					height: 3em;
+					margin: 10px;
+					width: 3em;
+					white-space: pre;
+				}
+				#test_ahem
+				{
+					writing-mode: vertical-rl;
+				}
+				#control_ahem
+				{
+					writing-mode: horizontal-tb;
+				}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if the 2 pink-and-blue rectangles are <strong>identical</strong>.</p>
+		<div class="view_ahem"><span id="test_ahem">123
+ 56
+7  </span></div>
+		<div class="view_ahem"><span id="control_ahem">7 1
+ 52
+ 63</span></div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-001.html b/testing/web-platform/tests/css/css-writing-modes/block-override-001.html
new file mode 100644
index 0000000000..72fbce8a21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-001.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-002.html b/testing/web-platform/tests/css/css-writing-modes/block-override-002.html
new file mode 100644
index 0000000000..558c9af682
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-002.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.'/>
+<style type="text/css">
+.test { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div dir="rtl">
+<div class="test">&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-003.html b/testing/web-platform/tests/css/css-writing-modes/block-override-003.html
new file mode 100644
index 0000000000..94744d498c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-003.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to a block element with no direction value set, characters are displayed strictly in sequence, in ltr order.'/>
+<style type="text/css">
+.test { unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-004.html b/testing/web-platform/tests/css/css-writing-modes/block-override-004.html
new file mode 100644
index 0000000000..46205ca0b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div override inheritance</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-004.html'/>
+<meta name="assert" content='If unicode-bidi:bidi-override is applied to a block element, all characters in immediate inline text are displayed strictly in sequence according to the direction property, but content of contained blocks is not.'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">
+&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;
+<div>&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;
+</div>
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; ef &lt; &#x5d3;&#x5d2; &lt; ab &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-001.html b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-001.html
new file mode 100644
index 0000000000..0c126dd981
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-isolate-001.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="test">&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-002.html b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-002.html
new file mode 100644
index 0000000000..8422136100
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-isolate-002.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.'/>
+<style type="text/css">
+.test { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div dir="rtl">
+<div class="test">&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-003.html b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-003.html
new file mode 100644
index 0000000000..2e6122af1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-isolate-003.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to a block element with no direction value set, characters are displayed strictly in sequence, in ltr order.'/>
+<style type="text/css">
+.test { unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-004.html b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-004.html
new file mode 100644
index 0000000000..3bb9e84de4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-override-isolate-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div override inheritance</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-override-isolate-004.html'/>
+<meta name="assert" content='If unicode-bidi:isolate-override is applied to a block element, all characters in immediate inline text are displayed strictly in sequence according to the direction property, but content of contained blocks is not.'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">
+&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;
+<div>&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;</div>
+&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;
+</div>
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; ef &lt; &#x5d3;&#x5d2; &lt; ab &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-plaintext-001.html b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-001.html
new file mode 100644
index 0000000000..22b6340c84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-plaintext-001.html'/>
+<meta name="assert" content='If unicode-bidi: plaintext is applied to a div element containing mixed direction text, the order of directional runs in the text in that element will be determined by its first strong character.'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+
+The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run.
+-->
+
+
+
+<div class="test">&gt; &#x5d0; &gt; b &gt; &#x5d2; &gt;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d2; &lt; b &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-plaintext-002.html b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-002.html
new file mode 100644
index 0000000000..41c0a1b674
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-002.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-plaintext-002.html'/>
+<meta name="assert" content='If unicode-bidi: plaintext is applied to a div element containing mixed direction text, the order of directional runs in the text in that element will be determined by its first strong character.'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+
+The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run.
+-->
+
+
+<div dir="rtl">
+<div class="test">&gt; a &gt; &#x5d1; &gt; c &gt;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-plaintext-003.html b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-003.html
new file mode 100644
index 0000000000..3b31280b05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-003.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext inheritance</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-plaintext-003.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to a block element, directional runs are displayed according to the first strong character, but content of contained blocks is not.'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">
+&gt; a &gt; &#x5d1; &gt; c &gt;
+<div>&gt; &#x5d0; &gt; b &gt; &#x5d2; &gt;</div>
+&gt; &#x5d0; &gt; b &gt; &#x5d2; &gt;
+</div>
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt;  &#x5d0; &gt; b &gt;  &#x5d2; &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-plaintext-004.html b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-004.html
new file mode 100644
index 0000000000..9586a1c3a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext with br</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href='reference/block-plaintext-004.html'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to a div element containing br tags, each line of characters that starts after br is displayed according to the first strong character after the br.'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">
+&gt; a &gt; &#x5d1; &gt; c &gt;<br/>
+&gt; &#x5d0; &gt; b &gt; &#x5d2; &gt;<br/>
+&gt; a &gt; &#x5d1; &gt; c &gt;<br/>
+</div>
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-plaintext-005.html b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-005.html
new file mode 100644
index 0000000000..3bd4d17add
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-005.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: textarea plaintext</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to a textarea element, each line of characters after a linebreak is displayed according to the first strong character after the linebreak.'/>
+<style type="text/css">
+.test textarea { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+textarea { font-family: ezra_silregular, serif; height:5em; width: 100%; border: 0; font-size: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes display the same glyphs in the same order, with the same line breaks.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">
+<textarea>
+&gt; a &gt; &#x5d1; &gt; c &gt;
+&gt; &#x5d0; &gt; b &gt; &#x5d2; &gt;
+&gt; a &gt; &#x5d1; &gt; c &gt;
+</textarea>
+</div>
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div>&#xA0;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/block-plaintext-006.html b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-006.html
new file mode 100644
index 0000000000..ab966ad710
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/block-plaintext-006.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: pre plaintext</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<link rel="help" href='http://www.w3.org/TR/css-writing-modes-3/#text-direction'/>
+<link rel="match" href="reference/block-plaintext-006.html"/>
+<meta name="assert" content='If unicode-bidi:plaintext is applied to a pre element, each line of characters after a linebreak is displayed according to the first strong character after the linebreak.'/>
+<style type="text/css">
+.test pre { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+pre { font-family: ezra_silregular, serif; width: 100%; border: 0; margin: 0; font-size: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes display the same glyphs in the same order, with the same line breaks.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="test">
+<pre><!-- comment token so following LF character isn't ignored by the HTML parser -->
+&gt; a &gt; &#x5d1; &gt; c &gt;
+&gt; &#x5d0; &gt; b &gt; &#x5d2; &gt;
+&gt; a &gt; &#x5d1; &gt; c &gt;
+<!-- need a blank line for whitespace to appear-->
+</pre>
+</div>
+
+<div class="ref">
+<div>&#xA0;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div>&#xA0;</div>
+</div>
+
+
+
+
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-003.xht
new file mode 100644
index 0000000000..952a27a9e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-003.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-lr' table with 'direction: ltr' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  td#five
+    {
+      border-bottom-color: green;
+      border-bottom-style: solid;
+      border-bottom-width: 100px;
+    }
+
+  td#six
+    {
+      border-top-color: red;
+      border-top-style: solid;
+      border-top-width: 100px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+    <tr>
+      <td></td> <td></td> <td></td>
+    </tr>
+
+    <tr>
+      <td></td> <td id="five"></td> <td id="six"></td>
+    </tr>
+
+    <tr>
+      <td></td> <td></td> <td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-005.xht
new file mode 100644
index 0000000000..fc20d629a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-005.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-lr' table with 'direction: ltr' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  td#five
+    {
+      border-right-color: green;
+      border-right-style: solid;
+      border-right-width: 100px;
+    }
+
+  td#eight
+    {
+      border-left-color: red;
+      border-left-style: solid;
+      border-left-width: 100px;
+      height: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+    <tr>
+      <td></td> <td></td> <td></td>
+    </tr>
+
+    <tr>
+      <td></td> <td id="five"></td> <td></td>
+    </tr>
+
+    <tr>
+      <td></td> <td id="eight"></td> <td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-007.xht
new file mode 100644
index 0000000000..41898f5de0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-007.xht
@@ -0,0 +1,150 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-lr' table with 'direction: ltr' (complex)</title>
+
+  <!--
+  Original (and horizontal-tb) test is
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/border-conflict-element-001a.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      border-style: solid solid solid solid;
+      border-width: 20px 20px 20px 20px;
+      padding: 0px;
+    }
+
+  td#one
+    {
+    border-color: green green green green;
+    }
+
+  td#two
+    {
+      border-color: red green green green;
+    }
+
+  td#three
+    {
+      border-color: red green green green;
+    }
+
+  td#four
+    {
+      border-color: red green green green;
+    }
+
+
+
+  td#five
+    {
+      border-color: green green green red;
+    }
+
+  td#six
+    {
+      border-color: red green green red;
+    }
+
+  td#seven
+    {
+      border-color: red green green red;
+    }
+
+  td#eight
+    {
+      border-color: red green green red;
+    }
+
+
+
+  td#nine
+    {
+      border-color: green green green red;
+    }
+
+  td#ten
+    {
+      border-color: red green green red;
+    }
+
+  td#eleven
+    {
+      border-color: red green green red;
+    }
+
+  td#twelve
+    {
+      border-color: red green green red;
+    }
+
+
+
+  td#thirteen
+    {
+      border-color: green green green red;
+    }
+
+  td#fourteen
+    {
+      border-color: red green green red;
+    }
+
+  td#fifteen
+    {
+      border-color: red green green red;
+    }
+
+  td#sixteen
+    {
+      border-color: red green green red;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+      <tr>
+          <td id="one"></td> <td id="two"></td> <td id="three"></td> <td id="four"></td>
+      </tr>
+
+      <tr>
+          <td id="five"></td> <td id="six"></td> <td id="seven"></td> <td id="eight"></td>
+      </tr>
+
+      <tr>
+          <td id="nine"></td> <td id="ten"></td> <td id="eleven"></td> <td id="twelve"></td>
+      </tr>
+
+      <tr>
+          <td id="thirteen"></td> <td id="fourteen"></td> <td id="fifteen"></td> <td id="sixteen"></td>
+      </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-009.xht
new file mode 100644
index 0000000000..32540ce8ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-009.xht
@@ -0,0 +1,151 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-lr' table with 'direction: ltr' (complex)</title>
+
+  <!--
+  Original (and horizontal-tb) test is
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/border-conflict-element-001c.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      border-style: solid none solid none;
+      border-width: 20px 0px 20px 0px;
+      padding: 0px;
+      width: 25px; /* height of each logical row */
+    }
+
+  td#one
+    {
+      border-color: green red green red;
+    }
+
+  td#two
+    {
+      border-color: red red green red;
+    }
+
+  td#three
+    {
+      border-color: red red green red;
+    }
+
+  td#four
+    {
+      border-color: red red green red;
+    }
+
+
+
+  td#five
+    {
+      border-color: green red green red;
+    }
+
+  td#six
+    {
+      border-color: red red green red;
+    }
+
+  td#seven
+    {
+      border-color: red red green red;
+    }
+
+  td#eight
+    {
+      border-color: red red green red;
+    }
+
+
+
+  td#nine
+    {
+      border-color: green red green red;
+    }
+
+  td#ten
+    {
+      border-color: red red green red;
+    }
+
+  td#eleven
+    {
+      border-color: red red green red;
+    }
+
+  td#twelve
+    {
+      border-color: red red green red;
+    }
+
+
+
+  td#thirteen
+    {
+      border-color: green red green red;
+    }
+
+  td#fourteen
+    {
+      border-color: red red green red;
+    }
+
+  td#fifteen
+    {
+      border-color: red red green red;
+    }
+
+  td#sixteen
+    {
+      border-color: red red green red;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+      <tr>
+          <td id="one"></td> <td id="two"></td> <td id="three"></td> <td id="four"></td>
+      </tr>
+
+      <tr>
+          <td id="five"></td> <td id="six"></td> <td id="seven"></td> <td id="eight"></td>
+      </tr>
+
+      <tr>
+          <td id="nine"></td> <td id="ten"></td> <td id="eleven"></td> <td id="twelve"></td>
+      </tr>
+
+      <tr>
+          <td id="thirteen"></td> <td id="fourteen"></td> <td id="fifteen"></td> <td id="sixteen"></td>
+      </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-011.xht
new file mode 100644
index 0000000000..ec2972a27b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-011.xht
@@ -0,0 +1,145 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-lr' table with 'direction: rtl' (complex)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      border-style: solid solid solid solid;
+      border-width: 20px 20px 20px 20px;
+      padding: 0px;
+    }
+
+  td#one
+    {
+      border-color: green green green green;
+    }
+
+  td#two
+    {
+      border-color: green green red green;
+    }
+
+  td#three
+    {
+      border-color: green green red green;
+    }
+
+  td#four
+    {
+      border-color: green green red green;
+    }
+
+
+
+  td#five
+    {
+      border-color: green green green red;
+    }
+
+  td#six
+    {
+      border-color: green green red red;
+    }
+
+  td#seven
+    {
+      border-color: green green red red;
+    }
+
+  td#eight
+    {
+      border-color: green green red red;
+    }
+
+
+
+  td#nine
+    {
+      border-color: green green green red;
+    }
+
+  td#ten
+    {
+      border-color: green green red red;
+    }
+
+  td#eleven
+    {
+      border-color: green green red red;
+    }
+
+  td#twelve
+    {
+      border-color: green green red red;
+    }
+
+
+
+  td#thirteen
+    {
+      border-color: green green green red;
+    }
+
+  td#fourteen
+    {
+      border-color: green green red red;
+    }
+
+  td#fifteen
+    {
+      border-color: green green red red;
+    }
+
+  td#sixteen
+    {
+      border-color: green green red red;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+      <tr>
+          <td id="one"></td> <td id="two"></td> <td id="three"></td> <td id="four"></td>
+      </tr>
+
+      <tr>
+          <td id="five"></td> <td id="six"></td> <td id="seven"></td> <td id="eight"></td>
+      </tr>
+
+      <tr>
+          <td id="nine"></td> <td id="ten"></td> <td id="eleven"></td> <td id="twelve"></td>
+      </tr>
+
+      <tr>
+          <td id="thirteen"></td> <td id="fourteen"></td> <td id="fifteen"></td> <td id="sixteen"></td>
+      </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-013.xht
new file mode 100644
index 0000000000..26bc3bbbe3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vlr-013.xht
@@ -0,0 +1,186 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - cell wins over row, cell wins over rowgroup and cell wins over table (compound)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that, in border-collapsing model, when 'border-style' values and 'border-width' values are identical, then the 'border-color' set on a cell wins over the 'border-color' set on a row (5th table), the 'border-color' set on a cell wins over the 'border-color' set on a row group (tfoot in 4th table, thead in 3rd table, tbody in 2nd table) and the 'border-color' set on a cell wins over the 'border-color' set on a table element (1st table)." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      height: 20px;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+
+
+  table#first
+    {
+      border-left: red solid 100px;
+    }
+
+  table#first td
+    {
+      border-left: green solid 100px;
+    }
+
+
+
+  table#second > tbody
+    {
+      border-left: red solid 100px;
+    }
+
+  table#second td
+    {
+      border-left: green solid 100px;
+    }
+
+
+
+  table#third > thead
+    {
+      border-left: red solid 100px;
+    }
+
+  table#third td
+    {
+      border-left: green solid 100px;
+    }
+
+
+
+  table#fourth > tfoot
+    {
+      border-left: red solid 100px;
+    }
+
+  table#fourth td
+    {
+      border-left: green solid 100px;
+    }
+
+
+
+  table#fifth tr
+    {
+      border-left: red solid 100px;
+    }
+
+  table#fifth td
+    {
+      border-left: green solid 100px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="first">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="second">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="third">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <thead>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </thead>
+
+  </table>
+
+
+  <table id="fourth">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tfoot>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tfoot>
+
+  </table>
+
+
+
+  <table id="fifth">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-002.xht
new file mode 100644
index 0000000000..4b91e5d053
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-002.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-rl' table with 'direction: ltr' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  td#five
+    {
+      border-bottom-color: green;
+      border-bottom-style: solid;
+      border-bottom-width: 100px;
+    }
+
+  td#six
+    {
+      border-top-color: red;
+      border-top-style: solid;
+      border-top-width: 100px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+    <tr>
+      <td></td> <td></td> <td></td>
+    </tr>
+
+    <tr>
+      <td></td> <td id="five"></td> <td id="six"></td>
+    </tr>
+
+    <tr>
+      <td></td> <td></td> <td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-004.xht
new file mode 100644
index 0000000000..4a8ff803cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-004.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-rl' table with 'direction: ltr' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  td#five
+    {
+      border-left-color: green;
+      border-left-style: solid;
+      border-left-width: 100px;
+    }
+
+  td#eight
+    {
+      border-right-color: red;
+      border-right-style: solid;
+      border-right-width: 100px;
+      height: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+    <tr>
+      <td></td> <td></td> <td></td>
+    </tr>
+
+    <tr>
+      <td></td> <td id="five"></td> <td></td>
+    </tr>
+
+    <tr>
+      <td></td> <td id="eight"></td> <td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-006.xht
new file mode 100644
index 0000000000..e09003a656
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-006.xht
@@ -0,0 +1,150 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-rl' table with 'direction: ltr' (complex)</title>
+
+  <!--
+  Original (and horizontal-tb) test is
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/border-conflict-element-001a.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      border-style: solid solid solid solid;
+      border-width: 20px 20px 20px 20px;
+      padding: 0px;
+    }
+
+  td#one
+    {
+      border-color: green green green green;
+    }
+
+  td#two
+    {
+      border-color: red green green green;
+    }
+
+  td#three
+    {
+      border-color: red green green green;
+    }
+
+  td#four
+    {
+      border-color: red green green green;
+    }
+
+
+
+  td#five
+    {
+      border-color: green red green green;
+    }
+
+  td#six
+    {
+      border-color: red red green green;
+    }
+
+  td#seven
+    {
+      border-color: red red green green;
+    }
+
+  td#eight
+    {
+      border-color: red red green green;
+    }
+
+
+
+  td#nine
+    {
+      border-color: green red green green;
+    }
+
+  td#ten
+    {
+      border-color: red red green green;
+    }
+
+  td#eleven
+    {
+      border-color: red red green green;
+    }
+
+  td#twelve
+    {
+      border-color: red red green green;
+    }
+
+
+
+  td#thirteen
+    {
+      border-color: green red green green;
+    }
+
+  td#fourteen
+    {
+      border-color: red red green green;
+    }
+
+  td#fifteen
+    {
+      border-color: red red green green;
+    }
+
+  td#sixteen
+    {
+      border-color: red red green green;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+      <tr>
+          <td id="one"></td> <td id="two"></td> <td id="three"></td> <td id="four"></td>
+      </tr>
+
+      <tr>
+          <td id="five"></td> <td id="six"></td> <td id="seven"></td> <td id="eight"></td>
+      </tr>
+
+      <tr>
+          <td id="nine"></td> <td id="ten"></td> <td id="eleven"></td> <td id="twelve"></td>
+      </tr>
+
+      <tr>
+          <td id="thirteen"></td> <td id="fourteen"></td> <td id="fifteen"></td> <td id="sixteen"></td>
+      </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-008.xht
new file mode 100644
index 0000000000..d735f188fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-008.xht
@@ -0,0 +1,151 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-rl' table with 'direction: ltr' (complex)</title>
+
+  <!--
+  Original (and horizontal-tb) test is
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/border-conflict-element-001c.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      border-style: solid none solid none;
+      border-width: 20px 0px 20px 0px;
+      padding: 0px;
+      width: 25px; /* height of each logical row */
+    }
+
+  td#one
+    {
+      border-color: green red green red;
+    }
+
+  td#two
+    {
+      border-color: red red green red;
+    }
+
+  td#three
+    {
+      border-color: red red green red;
+    }
+
+  td#four
+    {
+      border-color: red red green red;
+    }
+
+
+
+  td#five
+    {
+      border-color: green red green red;
+    }
+
+  td#six
+    {
+      border-color: red red green red;
+    }
+
+  td#seven
+    {
+      border-color: red red green red;
+    }
+
+  td#eight
+    {
+      border-color: red red green red;
+    }
+
+
+
+  td#nine
+    {
+      border-color: green red green red;
+    }
+
+  td#ten
+    {
+      border-color: red red green red;
+    }
+
+  td#eleven
+    {
+      border-color: red red green red;
+    }
+
+  td#twelve
+    {
+      border-color: red red green red;
+    }
+
+
+
+  td#thirteen
+    {
+      border-color: green red green red;
+    }
+
+  td#fourteen
+    {
+      border-color: red red green red;
+    }
+
+  td#fifteen
+    {
+      border-color: red red green red;
+    }
+
+  td#sixteen
+    {
+      border-color: red red green red;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+      <tr>
+          <td id="one"></td> <td id="two"></td> <td id="three"></td> <td id="four"></td>
+      </tr>
+
+      <tr>
+          <td id="five"></td> <td id="six"></td> <td id="seven"></td> <td id="eight"></td>
+      </tr>
+
+      <tr>
+          <td id="nine"></td> <td id="ten"></td> <td id="eleven"></td> <td id="twelve"></td>
+      </tr>
+
+      <tr>
+          <td id="thirteen"></td> <td id="fourteen"></td> <td id="fifteen"></td> <td id="sixteen"></td>
+      </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-010.xht
new file mode 100644
index 0000000000..9f067cb070
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-010.xht
@@ -0,0 +1,145 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - adjacent cells with same border styles in a 'vertical-rl' table with 'direction: rtl' (complex)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      border-style: solid solid solid solid;
+      border-width: 20px 20px 20px 20px;
+      padding: 0px;
+    }
+
+  td#one
+    {
+      border-color: green green green green;
+    }
+
+  td#two
+    {
+      border-color: green green red green;
+    }
+
+  td#three
+    {
+      border-color: green green red green;
+    }
+
+  td#four
+    {
+      border-color: green green red green;
+    }
+
+
+
+  td#five
+    {
+      border-color: green red green green;
+    }
+
+  td#six
+    {
+      border-color: green red red green;
+    }
+
+  td#seven
+    {
+      border-color: green red red green;
+    }
+
+  td#eight
+    {
+      border-color: green red red green;
+    }
+
+
+
+  td#nine
+    {
+      border-color: green red green green;
+    }
+
+  td#ten
+    {
+      border-color: green red red green;
+    }
+
+  td#eleven
+    {
+      border-color: green red red green;
+    }
+
+  td#twelve
+    {
+      border-color: green red red green;
+    }
+
+
+
+  td#thirteen
+    {
+      border-color: green red green green;
+    }
+
+  td#fourteen
+    {
+      border-color: green red red green;
+    }
+
+  td#fifteen
+    {
+      border-color: green red red green;
+    }
+
+  td#sixteen
+    {
+      border-color: green red red green;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table>
+
+      <tr>
+          <td id="one"></td> <td id="two"></td> <td id="three"></td> <td id="four"></td>
+      </tr>
+
+      <tr>
+          <td id="five"></td> <td id="six"></td> <td id="seven"></td> <td id="eight"></td>
+      </tr>
+
+      <tr>
+          <td id="nine"></td> <td id="ten"></td> <td id="eleven"></td> <td id="twelve"></td>
+      </tr>
+
+      <tr>
+          <td id="thirteen"></td> <td id="fourteen"></td> <td id="fifteen"></td> <td id="sixteen"></td>
+      </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-012.xht
new file mode 100644
index 0000000000..9e15c62aaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-conflict-element-vrl-012.xht
@@ -0,0 +1,186 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Border conflict resolution - cell wins over row, cell wins over rowgroup and cell wins over table (compound)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that, in border-collapsing model, when 'border-style' values and 'border-width' values are identical, then the 'border-color' set on a cell wins over the 'border-color' set on a row (5th table), the 'border-color' set on a cell wins over the 'border-color' set on a row group (tfoot in 4th table, thead in 3rd table, tbody in 2nd table) and the 'border-color' set on a cell wins over the 'border-color' set on a table element (1st table)." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      direction: ltr;
+      height: 20px;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+
+
+  table#first
+    {
+      border-right: red solid 100px;
+    }
+
+  table#first td
+    {
+      border-right: green solid 100px;
+    }
+
+
+
+  table#second > tbody
+    {
+      border-right: red solid 100px;
+    }
+
+  table#second td
+    {
+      border-right: green solid 100px;
+    }
+
+
+
+  table#third > thead
+    {
+      border-right: red solid 100px;
+    }
+
+  table#third td
+    {
+      border-right: green solid 100px;
+    }
+
+
+
+  table#fourth > tfoot
+    {
+      border-right: red solid 100px;
+    }
+
+  table#fourth td
+    {
+      border-right: green solid 100px;
+    }
+
+
+
+  table#fifth tr
+    {
+      border-right: red solid 100px;
+    }
+
+  table#fifth td
+    {
+      border-right: green solid 100px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="first">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="second">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="third">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <thead>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </thead>
+
+  </table>
+
+
+  <table id="fourth">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tfoot>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tfoot>
+
+  </table>
+
+
+
+  <table id="fifth">
+
+  <colgroup><col></col><col></col></colgroup>
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-spacing-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vlr-003.xht
new file mode 100644
index 0000000000..533f14c159
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vlr-003.xht
@@ -0,0 +1,135 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: border-spacing - first value is specified and non-zero in 'vertical-lr' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="border-spacing-vrl-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table left padding (physical table top padding) and leftmost cells and b) inter-column spacing and c) spacing between rightmost cells and logical table right padding (physical table bottom padding)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      height: 0.5em;
+      padding: 0em;
+      width: 1em;
+    }
+
+  /*
+
+         0px       width of nth row        20px                           TOP
+         |                                 |
+         ===================================     0x (0em)                 |||
+         | table padding-top 25px (1.25em) |                              |||
+         |    with red background=color    |                            \ ||| /
+         |    with red background=color    |                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         ===================================    25px (1.25em)
+         |logical left border-spacing: 10px|
+         |    with red background=color    |
+         ===================================    35px (1.75em)
+         |  height of 1st td 10px (0.5em)  |                              |||
+         |    with red background=color    |                              |||
+         ===================================    45px (2.25em)           \ ||| /
+         |inter-column spacing 10px (0.5em)|                             \   /
+         |    with red background=color    |                              \ /
+         ===================================    55px (2.75em)              v
+         |  height of 2nd td 10px (0.5em)  |
+         |    with red background=color    |
+         ===================================    65px (3.25em)
+         |logical righ border-spacing: 10px|                              |||
+         |    with red background=color    |                              |||
+         ===================================    75px (3.75em)           \ ||| /
+         |tble padding-bottom 25px (1.25em)|                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         |    with red background=color    |
+         |    with red background=color    |
+         ===================================   100px (5em)              BOTTOM
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-spacing-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vlr-005.xht
new file mode 100644
index 0000000000..37489b15dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vlr-005.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: border-spacing - second value is specified and non-zero in 'vertical-lr' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="border-spacing-vrl-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that second value of 'border-spacing' represents, from left to right, a) spacing between logical table top padding (physical table left padding) and topmost cells and b) inter-row spacing and c) spacing between bottommost cells and logical table bottom padding (physical table right padding)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      height: 1em;
+      padding: 0em;
+      width: 0.5em;
+    }
+
+  /*
+
+  0px             25px     35px     45px     55px     65px     75px            100px
+  | padding-left   |  left  |  2nd   | middle |  1st   |  right | padding-right|
+  |   of table     |  vert. |  row   |  vert. |  right |  vert. |   of table   |
+  |                | border |        | border |  most  | border |              |
+  |                | spacing|        | spacing|  row   | spacing|              |
+20|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+40|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+60|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+80|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+00|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-002-ref.xht
new file mode 100644
index 0000000000..958ba060f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-002-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div><img src="support/swatch-green.png" width="100" height="200" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-002.xht
new file mode 100644
index 0000000000..392d8610ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-002.xht
@@ -0,0 +1,135 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: border-spacing - first value is specified and non-zero in 'vertical-rl' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="border-spacing-vrl-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table right padding (physical table top padding) and rightmost cells and b) inter-column spacing and c) spacing between leftmost cells and logical table left padding (physical table bottom padding)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      height: 0.5em;
+      padding: 0em;
+      width: 1em;
+    }
+
+  /*
+
+         0px       width of nth row        20px                           TOP
+         |                                 |
+         ===================================     0x (0em)                 |||
+         | table padding-top 25px (1.25em) |                              |||
+         |    with red background=color    |                            \ ||| /
+         |    with red background=color    |                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         ===================================    25px (1.25em)
+         |logical righ border-spacing: 10px|
+         |    with red background=color    |
+         ===================================    35px (1.75em)
+         |  height of 1st td 10px (0.5em)  |                              |||
+         |    with red background=color    |                              |||
+         ===================================    45px (2.25em)           \ ||| /
+         |inter-column spacing 10px (0.5em)|                             \   /
+         |    with red background=color    |                              \ /
+         ===================================    55px (2.75em)              v
+         |  height of 2nd td 10px (0.5em)  |
+         |    with red background=color    |
+         ===================================    65px (3.25em)
+         |logical left border-spacing: 10px|                              |||
+         |    with red background=color    |                              |||
+         ===================================    75px (3.75em)           \ ||| /
+         |tble padding-bottom 25px (1.25em)|                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         |    with red background=color    |
+         |    with red background=color    |
+         ===================================   100px (5em)              BOTTOM
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-004.xht
new file mode 100644
index 0000000000..ce76be1c20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-spacing-vrl-004.xht
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: border-spacing - second value is specified and non-zero in 'vertical-rl' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="border-spacing-vrl-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that second value of 'border-spacing' represents, from right to left, a) spacing between logical table top padding (physical table right padding) and topmost cells and b) inter-row spacing and c) between bottommost cells and logical table bottom padding (physical table left padding)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      height: 1em;
+      padding: 0em;
+      width: 0.5em;
+    }
+
+  /*
+
+  0px             25px     35px     45px     55px     65px     75px            100px
+  | padding-left   |  left  |  2nd   | middle |  1st   |  right | padding-right|
+  |   of table     |  vert. |  right |  vert. |  right |  vert. |   of table   |
+  |                | border |  most  | border |  most  | border |              |
+  |                | spacing|   row  | spacing|  row   | spacing|              |
+20|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+40|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+60|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+80|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+00|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/border-vlr-007.xht
new file mode 100644
index 0000000000..fa17708a40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-vlr-007.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: border in 'vertical-lr' writing-mode context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <!--
+  Test inspired by
+  http://lxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1096224-1b.html
+  -->
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that border-left, border-right, border-top and border-bottom do not change in vertical writing-mode. The border-left property of a box still affects the lefthand border of such box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  .outer
+    {
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: blue;
+      border: transparent none 0px;
+      height: 9px;
+      margin: 0px;
+    }
+
+  .inner
+    {
+      background-color: transparent;
+      height: 50px; /* necessary, otherwise inner blocks must grow as tall as the height of viewport */
+    }
+
+  .foo
+    {
+      border-bottom: blue solid 5px;
+      border-left: blue solid 100px;
+      border-right: blue solid 50px;
+      border-top: blue solid 20px;
+      writing-mode: vertical-lr;
+    }
+
+  .bar
+    {
+      border-bottom: blue solid 20px;
+      border-left: blue solid 50px;
+      border-right: blue solid 100px;
+      border-top: blue solid 5px;
+      writing-mode: vertical-lr;
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <hr />
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/border-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/border-vrl-006.xht
new file mode 100644
index 0000000000..d12345ea14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/border-vrl-006.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: border in 'vertical-rl' writing-mode context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <!--
+  Test inspired by
+  http://lxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1096224-1b.html
+  -->
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that border-left, border-right, border-top and border-bottom do not change in vertical writing-mode. The border-left property of a box still affects the lefthand border of such box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  .outer
+    {
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: blue;
+      border: transparent none 0px;
+      height: 9px;
+      margin: 0px;
+    }
+
+  .inner
+    {
+      background-color: transparent;
+      height: 50px; /* necessary, otherwise inner blocks must grow as tall as the height of viewport */
+    }
+
+  .foo
+    {
+      border-bottom: blue solid 5px;
+      border-left: blue solid 100px;
+      border-right: blue solid 50px;
+      border-top: blue solid 20px;
+      writing-mode: vertical-rl;
+    }
+
+  .bar
+    {
+      border-bottom: blue solid 20px;
+      border-left: blue solid 50px;
+      border-right: blue solid 100px;
+      border-top: blue solid 5px;
+      writing-mode: vertical-rl;
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <hr />
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-003.xht
new file mode 100644
index 0000000000..91cbc32245
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-003.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: box offsets - position relative</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="The 'top', 'right', 'bottom', 'left' property, for relative positioning, specify the offset of the box itself from its normal in-flow position, from the position it would have had if it had been static. The 'top', 'right', 'bottom', 'left' offset property are physical properties, not logical ones in vertical writing-modes." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  img
+    {
+      position: relative;
+    }
+
+  img.moves-toward-left
+    {
+      right: 80px;
+    }
+
+  img.moves-toward-top
+    {
+      bottom: 80px;
+    }
+
+  img.moves-toward-right
+    {
+      left: 80px;
+    }
+
+  img.moves-toward-bottom
+    {
+      top: 80px;
+    }
+
+  /*
+  In this testcase, 7 red 80px by 80px squares overlap
+  another red 80px by 80px square (placed in the center of
+  a 3 by 3 grid of squares) and then, at the end, one single
+  green 80px by 80px square overlaps all 8 other red squares.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img class="moves-toward-bottom moves-toward-right" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-right" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-right moves-toward-top" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+  <div><img class="moves-toward-bottom" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-top" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+  <div><img class="moves-toward-left moves-toward-bottom" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-left" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-left moves-toward-top" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-005-ref.xht b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-005-ref.xht
new file mode 100644
index 0000000000..fc84149c83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-005-ref.xht
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div > img
+    {
+      margin-left: 8px;
+      margin-right: 1em;
+    }
+
+  table
+    {
+      background-color: yellow;
+      border-spacing: 0px;
+      border: orange solid 50px;
+      display: inline-table;
+      height: 300px;
+      vertical-align: top;
+      width: 300px;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  td.first-row
+    {
+      height: 29px;
+      vertical-align: top;
+    }
+
+  td#middle-row
+    {
+      text-align: center;
+    }
+
+  td.third-row
+    {
+      height: 25px;
+    }
+
+  span.blue
+    {
+      background-color: blue;
+      color: white;
+      height: 25px;
+      text-align: left;
+      width: 25px;
+    }
+
+  span#top-left, span#bottom-left
+    {
+      float: left;
+    }
+
+  span#top-right, span#bottom-right
+    {
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+<img src="support/pass-cdts-box-offsets-rel-pos.png" width="304" height="35" alt="Image download support must be enabled" /><!--
+  The image says:
+  "
+  Test passes if there is a blue square
+  at each corner of the yellow square.
+  "
+  --><table>
+      <tr><td class="first-row"><span class="blue" id="top-left">TL</span></td><td class="first-row"><span class="blue" id="top-right">TR</span></td></tr>
+      <tr><td id="middle-row" colspan="2"><img src="support/100x100-lime.png" alt="Image download support must be enabled" /></td></tr>
+      <tr><td class="third-row"><span class="blue" id="bottom-left">BL</span></td><td class="third-row"><span class="blue" id="bottom-right">BR</span></td></tr>
+    </table>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-005.xht
new file mode 100644
index 0000000000..8f09748a8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vlr-005.xht
@@ -0,0 +1,173 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: box offsets - relatively positioned boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="box-offsets-rel-pos-vlr-005-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="Box offsets (bottom, left, right, top) expressed in absolute units (not with percentage unit) for relatively positioned boxes are with respect to the edges of the boxes themselves." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#statically-positioned-box
+    {
+      background-color: yellow; /* padding box will be yellow */
+      border: orange solid 50px; /* border box will be orange */
+      height: 100px; /* a bright green square 100px by 100px image will serve as content box */
+      margin-left: 8px;
+      padding: 50px;
+      position: static;
+      width: 100px;
+    }
+
+  div.blue-relatively-positioned
+    {
+      background-color: blue;
+      color: white;
+      height: 25px;
+      position: relative;
+      width: 25px;
+      writing-mode: horizontal-tb;
+    }
+
+  div#top-left
+    {
+      right: 250px;
+      /*
+      Calculation of right offset:
+          50px (div#statically-positioned-box's border-right)
+       +
+         200px (div#statically-positioned-box's padding-box width)
+       ==================
+         250px
+      */
+
+      top: 50px;
+      /*
+      Calculation of top offset:
+        50px (div#statically-positioned-box's border-top)
+      ==================
+        50px
+      */
+    }
+
+  div#top-right
+    {
+      right: 100px;
+      /*
+      Calculation of right offset:
+          25px (div#top-left's content width)
+       +
+          25px (div#top-right's content width)
+       +
+          50px (div#statically-positioned-box's border-right)
+       ==================
+         100px
+      */
+
+      top: 50px;
+      /*
+      Calculation of top offset:
+        50px (div#statically-positioned-box's border-top)
+      ==================
+        50px
+      */
+    }
+
+  div#bottom-left
+    {
+      top: 225px;
+      /*
+      Calculation of top offset:
+          50px (div#statically-positioned-box's border-top)
+       +
+         200px (div#statically-positioned-box's padding-box height)
+       -
+          25px (div#bottom-left's content height)
+      ==================
+         225px
+    */
+
+      right: 300px;
+      /*
+      Calculation of right offset:
+          25px (div#top-left's content width)
+       +
+          25px (div#top-right's content width)
+       +
+          50px (div#statically-positioned-box's border-right)
+       +
+         200px (div#statically-positioned-box's padding-box width)
+       ==================
+         300px
+      */
+    }
+
+  div#bottom-right
+    {
+      top: 225px;
+      /*
+      Calculation of top offset:
+          50px (div#statically-positioned-box's border-top)
+       +
+         200px (div#statically-positioned-box's padding-box height)
+       -
+          25px (div#bottom-right's content height)
+      ==================
+         225px
+    */
+
+      right: 150px;
+      /*
+      Calculation of right offset:
+          25px (div#top-left's content width)
+       +
+          25px (div#top-right's content width)
+       +
+          25px (div#bottom-left's content width)
+       +
+          25px (div#bottom-right's content width)
+       +
+          50px (div#statically-positioned-box's border-left)
+       ==================
+         150px
+      */
+  }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-box-offsets-rel-pos.png" width="304" height="35" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  "
+  Test passes if there is a blue square
+  at each corner of the yellow square.
+  "
+  -->
+
+  <div id="statically-positioned-box"><img src="support/100x100-lime.png" alt="Image download support must be enabled" /></div>
+
+  <div class="blue-relatively-positioned" id="top-left">TL</div>
+
+  <div class="blue-relatively-positioned" id="top-right">TR</div>
+
+  <div class="blue-relatively-positioned" id="bottom-left">BL</div>
+
+  <div class="blue-relatively-positioned" id="bottom-right">BR</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-002.xht
new file mode 100644
index 0000000000..f96b01cc4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-002.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: box offsets - position relative</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="The 'top', 'right', 'bottom', 'left' property, for relative positioning, specify the offset of the box itself from its normal in-flow position, from the position it would have had if it had been static. The 'top', 'right', 'bottom', 'left' offset property are physical properties, not logical ones in vertical writing-modes." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  img
+    {
+      position: relative;
+    }
+
+  img.moves-toward-left
+    {
+      right: 80px;
+    }
+
+  img.moves-toward-top
+    {
+      bottom: 80px;
+    }
+
+  img.moves-toward-right
+    {
+      left: 80px;
+    }
+
+  img.moves-toward-bottom
+    {
+      top: 80px;
+    }
+
+  /*
+  In this testcase, 7 red 80px by 80px squares overlap
+  another red 80px by 80px square (placed in the center of
+  a 3 by 3 grid of squares) and then, at the end, one single
+  green 80px by 80px square overlaps all 8 other red squares.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img class="moves-toward-bottom moves-toward-left" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-left" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-left moves-toward-top" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+  <div><img class="moves-toward-bottom" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-top" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+  <div><img class="moves-toward-right moves-toward-bottom" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-right" src="support/100x100-red.png" width="80" height="80" alt="Image download support must be enabled" /><img class="moves-toward-right moves-toward-top" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-004-ref.xht
new file mode 100644
index 0000000000..cdf6912a6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-004-ref.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      text-align: right;
+    }
+
+  div > img
+    {
+      margin-left: 1em;
+      margin-right: 8px;
+    }
+
+  table
+    {
+      background-color: yellow;
+      border-spacing: 0px;
+      border: orange solid 50px;
+      display: inline-table;
+      height: 300px;
+      vertical-align: top;
+      width: 300px;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  td.first-row
+    {
+      height: 29px;
+      vertical-align: top;
+    }
+
+  td#middle-row
+  {
+  text-align: center;
+  }
+
+  td.third-row
+    {
+      height: 25px;
+    }
+
+  span.blue
+    {
+      background-color: blue;
+      color: white;
+      height: 25px;
+      text-align: left;
+      width: 25px;
+    }
+
+  span#top-left, span#bottom-left
+    {
+      float: left;
+    }
+
+  span#top-right, span#bottom-right
+    {
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    <table>
+      <tr><td class="first-row"><span class="blue" id="top-left">TL</span></td><td class="first-row"><span class="blue" id="top-right">TR</span></td></tr>
+      <tr><td id="middle-row" colspan="2"><img src="support/100x100-lime.png" alt="Image download support must be enabled" /></td></tr>
+      <tr><td class="third-row"><span class="blue" id="bottom-left">BL</span></td><td class="third-row"><span class="blue" id="bottom-right">BR</span></td></tr>
+  </table><img src="support/pass-cdts-box-offsets-rel-pos.png" width="304" height="35" alt="Image download support must be enabled" />
+
+  <!--
+  The image says:
+  "
+  Test passes if there is a blue square
+  at each corner of the yellow square.
+  "
+  -->
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-004.xht
new file mode 100644
index 0000000000..7d99680499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/box-offsets-rel-pos-vrl-004.xht
@@ -0,0 +1,173 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: box offsets - relatively positioned boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="box-offsets-rel-pos-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="Box offsets (bottom, left, right, top) expressed in absolute units (not with percentage unit) for relatively positioned boxes are with respect to the edges of the boxes themselves." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#statically-positioned-box
+    {
+      background-color: yellow; /* padding box will be yellow */
+      border: orange solid 50px; /* border box will be orange */
+      height: 100px; /* a bright green square 100px by 100px image will serve as content box */
+      margin-right: 8px;
+      padding: 50px;
+      position: static;
+      width: 100px;
+    }
+
+  div.blue-relatively-positioned
+    {
+      background-color: blue;
+      color: white;
+      height: 25px;
+      position: relative;
+      width: 25px;
+      writing-mode: horizontal-tb;
+    }
+
+  div#top-left
+    {
+      left: 75px;
+      /*
+      Calculation of left offset:
+          25px (div#top-left's content width)
+       +
+          50px (div#statically-positioned-box's border-left)
+       ==================
+          75px
+      */
+
+      top: 50px;
+      /*
+      Calculation of top offset:
+        50px (div#statically-positioned-box's border-top)
+      ==================
+        50px
+      */
+    }
+
+  div#top-right
+    {
+      left: 275px;
+      /*
+      Calculation of left offset:
+          25px (div#top-left's content width)
+       +
+          50px (div#statically-positioned-box's border-left)
+       +
+         200px (div#statically-positioned-box's padding-box)
+       ==================
+         275px
+      */
+
+      top: 50px;
+      /*
+      Calculation of top offset:
+        50px (div#statically-positioned-box's border-top)
+      ==================
+        50px
+      */
+    }
+
+  div#bottom-left
+    {
+      top: 225px;
+      /*
+      Calculation of top offset:
+          50px (div#statically-positioned-box's border-top)
+       +
+         200px (div#statically-positioned-box's padding-box height)
+       -
+          25px (div#bottom-left's content height)
+      ==================
+         225px
+    */
+
+      left: 125px;
+      /*
+      Calculation of left offset:
+          25px (div#top-left's content width)
+       +
+          25px (div#top-right's content width)
+       +
+          25px (div#bottom-left's content width)
+       +
+          50px (div#statically-positioned-box's border-left)
+       ==================
+         125px
+      */
+    }
+
+  div#bottom-right
+    {
+      top: 225px;
+      /*
+      Calculation of bottom offset:
+          50px (div#statically-positioned-box's border-top)
+       +
+         200px (div#statically-positioned-box's padding-box height)
+       -
+          25px (div#bottom-right's content height)
+      ==================
+         225px
+    */
+
+      left: 325px;
+      /*
+      Calculation of left offset:
+          25px (div#top-left's content width)
+       +
+          25px (div#top-right's content width)
+       +
+          25px (div#bottom-left's content width)
+       +
+          50px (div#statically-positioned-box's border-left)
+       +
+         200px (div#statically-positioned-box's padding-box)
+       ==================
+         325px
+      */
+  }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-box-offsets-rel-pos.png" width="304" height="35" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  "
+  Test passes if there is a blue square
+  at each corner of the yellow square.
+  "
+  -->
+
+  <div id="statically-positioned-box"><img src="support/100x100-lime.png" alt="Image download support must be enabled" /></div>
+
+  <div class="blue-relatively-positioned" id="top-left">TL</div>
+
+  <div class="blue-relatively-positioned" id="top-right">TR</div>
+
+  <div class="blue-relatively-positioned" id="bottom-left">BL</div>
+
+  <div class="blue-relatively-positioned" id="bottom-right">BR</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/caption-side-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/caption-side-vlr-003.xht
new file mode 100644
index 0000000000..94ed6a05f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/caption-side-vlr-003.xht
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'caption-side: top' and vertical-lr</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-lr table, then the caption is placed at the block-start side of the table, which is on the lefthand side of such table." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  table#test-overlapping-green
+    {
+      border-spacing: 0px;
+      caption-side: top;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      writing-mode: vertical-lr;
+    }
+
+  caption
+    {
+      color: green;
+    }
+
+  td
+    {
+      color: transparent;
+      padding: 0px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background: url("support/pattern-rg-rg-100x100.png") no-repeat;
+      bottom: 100px;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="test-overlapping-green">
+    <caption>CA</caption>
+    <tr>
+      <td>T</td><td>D</td>
+    </tr>
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/caption-side-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/caption-side-vlr-005.xht
new file mode 100644
index 0000000000..cff0c9bbdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/caption-side-vlr-005.xht
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'caption-side: bottom' and vertical-lr</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-lr table, then the caption is placed at the block-end side of the table, which is on the righthand side of such table." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#reference-overlapped-red
+    {
+      background: url("support/pattern-gr-gr-100x100.png") no-repeat;
+      height: 100px;
+      position: absolute;
+      width: 100px;
+      z-index: -1;
+    }
+
+  table#test-overlapping-green
+    {
+      border-spacing: 0px;
+      caption-side: bottom;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      writing-mode: vertical-lr;
+    }
+
+  caption
+    {
+      color: green;
+    }
+
+  td
+    {
+      color: transparent;
+      padding: 0px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+    <caption>CA</caption>
+    <tr>
+      <td>T</td><td>D</td>
+    </tr>
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/caption-side-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/caption-side-vrl-002.xht
new file mode 100644
index 0000000000..efce0af356
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/caption-side-vrl-002.xht
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'caption-side: top' and vertical-rl</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-rl table, then the caption is placed at the block-start side of the table, which is on the righthand side of such table." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#reference-overlapped-red
+    {
+      background: url("support/pattern-gr-gr-100x100.png") no-repeat;
+      height: 100px;
+      position: absolute;
+      width: 100px;
+      z-index: -1;
+    }
+
+  table#test-overlapping-green
+    {
+      border-spacing: 0px;
+      caption-side: top;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      writing-mode: vertical-rl;
+    }
+
+  caption
+    {
+      color: green;
+    }
+
+  td
+    {
+      color: transparent;
+      padding: 0px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+    <caption>CA</caption>
+    <tr>
+      <td>T</td><td>D</td>
+    </tr>
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/caption-side-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/caption-side-vrl-004.xht
new file mode 100644
index 0000000000..59d84cdf78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/caption-side-vrl-004.xht
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'caption-side: bottom' and vertical-rl</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-rl table, then the caption is placed at the block-end side of the table, which is on the lefthand side of such table." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#reference-overlapped-red
+    {
+      background: url("support/pattern-rg-rg-100x100.png") no-repeat;
+      height: 100px;
+      position: absolute;
+      width: 100px;
+      z-index: -1;
+    }
+
+  table#test-overlapping-green
+    {
+      border-spacing: 0px;
+      caption-side: bottom;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      writing-mode: vertical-rl;
+    }
+
+  caption
+    {
+      color: green;
+    }
+
+  td
+    {
+      color: transparent;
+      padding: 0px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+    <caption>CA</caption>
+    <tr>
+      <td>T</td><td>D</td>
+    </tr>
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-002-ref.xht
new file mode 100644
index 0000000000..1eb8b9197b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-002-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  img
+    {
+      vertical-align: top;
+    }
+
+  img
+    {
+      padding-left: 60px;
+    }
+
+  img + br + img
+    {
+      padding-left: 30px;
+    }
+
+  img + br + img + br + img
+    {
+      padding-left: 75px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div><img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-002.xht b/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-002.xht
new file mode 100644
index 0000000000..4795a1b6a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-002.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: central baseline-alignment of text with 'text-orientation: upright' (vertical-rl)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" title="4.2 Text Baselines" />
+  <link rel="match" href="central-baseline-alignment-002-ref.xht" />
+
+  <meta content="This test checks that the central baseline is used as the dominant baseline when 'text-orientation' is 'upright' in vertical writing-mode." name="assert" />
+  <meta content="ahem" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#textorient-mixed
+    {
+      color: orange;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      height: 4em;
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  span#blue120
+    {
+      color: blue;
+      font-size: 2em; /* computes to 120px */
+    }
+
+  span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="textorient-mixed">A<span id="blue120">B</span><span id="orange30">O</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-003.xht b/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-003.xht
new file mode 100644
index 0000000000..71eb26f0ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/central-baseline-alignment-003.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: central baseline-alignment of text with 'text-orientation: upright' (vertical-lr)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" title="4.2 Text Baselines" />
+  <link rel="match" href="central-baseline-alignment-002-ref.xht" />
+
+  <meta content="This test checks that the central baseline is used as the dominant baseline when 'text-orientation' is 'upright' in vertical writing-mode." name="assert" />
+  <meta content="ahem" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#textorient-mixed
+    {
+      color: orange;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      height: 4em;
+      text-orientation: upright;
+      writing-mode: vertical-lr;
+    }
+
+  span#blue120
+    {
+      color: blue;
+      font-size: 2em; /* computes to 120px */
+    }
+
+  span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="textorient-mixed">A<span id="blue120">B</span><span id="orange30">O</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-001.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-001.html
new file mode 100644
index 0000000000..7f887e771e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>upright vertical writing mode and ch unit on table rows</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-001-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table rows takes the writing mode (with upright text-orientation) into account,
+                            even though theses properties do not apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+}
+tr {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  line-height: 5ch; /* using the inherited line-height (which the affects the content of the td)
+                       instead of directly using the height property,
+                       because sizing on table cells is complicated and out of scope for this. */
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(1) {
+  background: blue;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(2) {
+  background: orange;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-002.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-002.html
new file mode 100644
index 0000000000..129d0eca5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>upright vertical writing mode and ch unit on table row groups</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-001-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table row groups takes the writing mode (with upright text-orientatino) into account,
+                            even though these properties do not apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+}
+tbody {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  line-height: 5ch; /* using the inherited line-height (which the affects the content of the td)
+                       instead of directly using the height property,
+                       because sizing on table cells is complicated and out of scope for this. */
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(1) {
+  background: blue;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(2) {
+  background: orange;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-003.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-003.html
new file mode 100644
index 0000000000..3ed08c4787
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>upright vertical writing mode and ch unit on table columns</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-001-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table columns takes the writing mode (with upright orientation) into account,
+                            even though these properties do no apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+col {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(1) {
+  background: blue;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(2) {
+  background: orange;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><col><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-004.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-004.html
new file mode 100644
index 0000000000..8005db198c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-004.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>upright vertical writing mode and ch unit on table column groups</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-001-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table column groups takes the writing mode (with upright text-orientation) into account,
+                            even though these properties do not apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+colgroup {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(1) {
+  background: blue;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(2) {
+  background: orange;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><colgroup><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-005.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-005.html
new file mode 100644
index 0000000000..436bb3df23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-005.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>sideways vertical writing mode and ch unit on table rows</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-005-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table rows takes the writing mode (with a sideways text-orientation) into account,
+                            even though theese properties do not apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+}
+tr {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+  line-height: 5ch; /* using the inherited line-height (which the affects the content of the td)
+                       instead of directly using the height property,
+                       because sizing on table cells is complicated and out of scope for this. */
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(2) {
+  background: orange;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(1) {
+  background: blue;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-006.html
new file mode 100644
index 0000000000..f329717574
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-006.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>sideways vertical writing mode and ch unit on table row groups</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-005-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table row groups takes the writing mode (with a sideways text-orientation) into account,
+                            even though these properties do not apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+}
+tbody {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+  line-height: 5ch; /* using the inherited line-height (which the affects the content of the td)
+                       instead of directly using the height property,
+                       because sizing on table cells is complicated and out of scope for this. */
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(2) {
+  background: orange;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(1) {
+  background: blue;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-007.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-007.html
new file mode 100644
index 0000000000..59aecf55a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-007.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>sideways vertical writing mode and ch unit on table columns</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-005-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table columns takes the writing mode (with a sideways orientation) into account,
+                            even though these properties do not apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+col {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+  width: 5ch;
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(2) {
+  background: orange;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(1) {
+  background: blue;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><col><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-008.html b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-008.html
new file mode 100644
index 0000000000..b0d09cef58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-008.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>sideways vertical writing mode and ch unit on table column groups</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-units-vrl-005-ref.html">
+<meta name="assert" content="The font-metric dependent ch unit on table column groups takes the writing mode (with a sideways orientation) into account,
+                            even though theses properties do not apply to that element.">
+<style>
+table {
+  font-size: 20px;
+  border-collapse: collapse;
+  border: none;
+}
+td {
+  padding: 0;
+  background: green;
+  height: 5ch;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+colgroup {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+  width: 5ch;
+}
+
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
+   and using the ch unit in the block dimension,
+   to make sure that the ch unit itself works well in the general case.
+   If it doesn't, or if writing modes don't work, the divs won't be square.
+ */
+div:nth-of-type(2) {
+  background: orange;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  width: 5ch;
+}
+div:nth-of-type(1) {
+  background: blue;
+  height: 5ch;
+  display: inline-block; /* shrinkwrap */
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <table><colgroup><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+  <div>00000</div>
+  <div>00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-002-ref.xht
new file mode 100644
index 0000000000..bcad5257ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-002-ref.xht
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  img
+    {
+      padding-right: 40px;
+    }
+
+  img + img
+    {
+      padding-right: 20px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div><img src="support/swatch-green.png" width="20" height="100" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="100" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-002.xht
new file mode 100644
index 0000000000..a1b5661e22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-002.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Clearance calculations - clearing box has larger margin than width of float</title>
+
+  <!--
+  This test is the verticalized version of
+  http://test.csswg.org/suites/css2.1/latest/html4/clear-clearance-calculation-001.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="clearance-calculations-vrl-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when a clearing element has a right margin (in a block formating context with 'writing-mode' set to 'vertical-rl') larger than the width of a floated element, then the right margin is collapsed with the margin-left of preceding in-flow sibling. The clearing element is then placed at the point of the resulting collapsed margin." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 5em;
+    }
+
+  div#parent
+    {
+      background: red url("support/clearance-calculation-vrl-002.png");
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      min-width: 6em;
+      writing-mode: vertical-rl;
+    }
+
+  div > div
+    {
+      background-color: green;
+      width: 1em;
+    }
+
+  div#preceding-sibling
+    {
+      margin-left: 1em;
+    }
+
+  div#floated-left
+    {
+      float: left;
+    }
+
+  div#clearing-left
+    {
+      clear: left;
+      margin-right: 4em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="parent">
+    <div id="preceding-sibling"></div>
+    <div id="floated-left"></div>
+    <div id="clearing-left"></div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-004-ref.xht
new file mode 100644
index 0000000000..09620990a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-004-ref.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img
+    {
+      padding-right: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div><img src="support/swatch-green.png" width="60" height="100" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-004.xht
new file mode 100644
index 0000000000..0da708dddb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-004.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Clearance calculations - clearing box has narrower margin than clearance</title>
+
+  <!--
+  This test is the verticalized version of
+  http://test.csswg.org/suites/css2.1/latest/html4/clear-clearance-calculation-002.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="clearance-calculations-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that if, after margin collapsing, the position of the clearing element is on the right of the float or would be hypothetically positioned within the layout position of the float, then the clearing element is positioned directly on the left of the floated element." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 5em; /* computes to 100px */
+    }
+
+  div#parent
+    {
+      background: red url("support/clearance-calculation-vrl-004.png");
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      min-width: 8em;
+      writing-mode: vertical-rl;
+    }
+
+  div > div
+    {
+      background-color: green;
+      width: 1em;
+    }
+
+  div#preceding-sibling
+    {
+      margin-left: 4em;
+    }
+
+  div#floated-left
+    {
+      float: left;
+      width: 2em;
+    }
+
+  div#clearing-left
+    {
+      clear: left;
+      margin-right: 3em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="parent">
+    <div id="preceding-sibling"></div>
+    <div id="floated-left"></div>
+    <div id="clearing-left"></div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-006-ref.xht
new file mode 100644
index 0000000000..8c3675beb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-006-ref.xht
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img
+    {
+      padding-right: 60px;
+    }
+
+    img + img
+    {
+      padding-right: 20px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div><img src="support/swatch-green.png" width="20" height="100" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="100" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-006.xht
new file mode 100644
index 0000000000..16cf8367c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-006.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: Clearance calculations - clearing box has larger margin than width of float</title>
+
+  <!--
+  This test is the verticalized version of
+  http://test.csswg.org/suites/css2.1/latest/html4/clear-clearance-calculation-003.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="clearance-calculations-vrl-006-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when a clearing element (in a block formating context with 'writing-mode' set to 'vertical-rl') has a right margin larger than the width of a floated element, then the right margin is collapsed with the margin-left of preceding in-flow sibling. The clearing element is then placed at the point of the resulting collapsed margin." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 5em; /* computes to 100px */
+    }
+
+  div#parent
+    {
+      background: red url("support/clearance-calculation-vrl-006.png");
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      min-width: 7em;
+      writing-mode: vertical-rl;
+    }
+
+  div > div
+    {
+      background-color: green;
+      width: 1em;
+    }
+
+  div#preceding-sibling
+    {
+      margin-left: 1em;
+    }
+
+  div#floated-left
+    {
+      float: left;
+    }
+
+  div#clearing-left /* collapsing-through element */
+    {
+      clear: left;
+      margin-left: 4em;
+      margin-right: 5em;
+      width: 0em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="parent">
+    <div id="preceding-sibling"></div>
+    <div id="floated-left"></div>
+    <div id="clearing-left"></div>
+    <div id="following-sibling"></div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-008-ref.xht
new file mode 100644
index 0000000000..db3cec606e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-008-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+    img
+    {
+      vertical-align: top;
+    }
+
+    img#green-square
+     {
+       padding-left: 8px;
+       padding-right: 100px;
+     }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/pass-cdts-clearance-calculations.png" width="474" height="17" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-008.xht
new file mode 100644
index 0000000000..8f229c9fe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clearance-calculations-vrl-008.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: clearance calculations</title>
+
+  <!--
+  This test is the verticalized version of
+  http://test.csswg.org/suites/css2.1/latest/html4/clear-clearance-calculation-004.htm
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="clearance-calculations-vrl-008-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="In this test, the right border edge of div#clearing-left must be on the left side of div#floated-left, i.e., 50px further on its left-hand side. That means that the margin-left of div#preceding-sibling must not collapse with the right margin of the div#clearing-left and clearance must be added such that clearance + margin-right of div#clearing-left = 50px, i.e., clearance = 50px - margin-right of div#clearing-left; therefore clearance is equal to 50px - 75px = - 25px." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 116px;
+      writing-mode: vertical-rl;
+    }
+
+  div#preceding-sibling
+    {
+      margin-left: 25px;
+      width: 25px;
+    }
+
+  div#floated-left
+    {
+      float: left;
+      width: 50px;
+    }
+
+  div#clearing-left
+    {
+      background-color: green;
+      clear: left;
+      margin-left: 8px;
+      margin-right: 75px;
+      width: 100px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      position: absolute;
+      right: 108px;
+      top: 8px;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="preceding-sibling"></div>
+
+  <div id="floated-left"></div>
+
+  <div id="clearing-left"></div>
+
+  <div><img src="support/pass-cdts-clearance-calculations.png" width="474" height="17" alt="Image download support must be enabled" /></div>
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-003.xht
new file mode 100644
index 0000000000..997b6049fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-003.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 50px, 50px, 0px)' set to an image with 'writing-mode: vertical-lr' will make invisible the region outside the top-left corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(0px, 50px, 50px, 0px);
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-gr-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-005.xht
new file mode 100644
index 0000000000..0d54ad0376
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-005.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 100px, 50px, 50px)' set to an image with 'writing-mode: vertical-lr' will make invisible the region outside the top-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(0px, 100px, 50px, 50px);
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rg-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-007.xht
new file mode 100644
index 0000000000..94fcfa5448
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-007.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-006-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 50px, 100px, 0px)' set to an image with 'writing-mode: vertical-lr' will make invisible the region outside the bottom-left corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(50px, 50px, 100px, 0px);
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-gr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-009.xht
new file mode 100644
index 0000000000..e9e628b88a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-009.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-008-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 100px, 100px, 50px)' set to an image with 'writing-mode: vertical-lr' will make invisible the region outside the bottom-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(50px, 100px, 100px, 50px);
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-rg-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-011-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-011-ref.xht
new file mode 100644
index 0000000000..1f6fe3d7ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-011-ref.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-left: 16px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-011.xht
new file mode 100644
index 0000000000..97ab4c35d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-011.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vlr-011-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 50px, 50px, 0px)' set to an image in a 'writing-mode: vertical-lr' document will make invisible the region outside the top-left corner." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  img#test
+    {
+      clip: rect(0px, 50px, 50px, 0px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-gr-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-013-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-013-ref.xht
new file mode 100644
index 0000000000..62bcb7b683
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-013-ref.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-left: 66px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-013.xht
new file mode 100644
index 0000000000..2c09ad6e30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-013.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vlr-013-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 100px, 50px, 50px)' set to an image in a 'writing-mode: vertical-lr' document will make invisible the region outside the top-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  img#test
+    {
+      clip: rect(0px, 100px, 50px, 50px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rg-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-015-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-015-ref.xht
new file mode 100644
index 0000000000..9a4a0d95d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-015-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-left: 16px;
+      padding-top: 50px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-015.xht
new file mode 100644
index 0000000000..618851dd6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-015.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vlr-015-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 50px, 100px, 0px)' set to an image in a 'writing-mode: vertical-lr' document will make invisible the region outside the bottom-left corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  img#test
+    {
+      clip: rect(50px, 50px, 100px, 0px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-gr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-017-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-017-ref.xht
new file mode 100644
index 0000000000..a43223fffe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-017-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-left: 66px;
+      padding-top: 50px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-017.xht
new file mode 100644
index 0000000000..b313b106c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vlr-017.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vlr-017-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 100px, 100px, 50px)' set to an image in a 'writing-mode: vertical-lr' document will make invisible the region outside the bottom-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  img#test
+    {
+      clip: rect(50px, 100px, 100px, 50px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-rg-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-002-ref.xht
new file mode 100644
index 0000000000..35c05260a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-002-ref.xht
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-002.xht
new file mode 100644
index 0000000000..4eb6fb5749
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-002.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 50px, 50px, 0px)' set to an image with 'writing-mode: vertical-rl' will make invisible the region outside the top-left corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(0px, 50px, 50px, 0px);
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-gr-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-004-ref.xht
new file mode 100644
index 0000000000..f59dd1342c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-004-ref.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div > img
+    {
+      padding-left: 50px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-004.xht
new file mode 100644
index 0000000000..8fe9fe32e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-004.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 100px, 50px, 50px)' set to an image with 'writing-mode: vertical-rl' will make invisible the region outside the top-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(0px, 100px, 50px, 50px);
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rg-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-006-ref.xht
new file mode 100644
index 0000000000..548d238fdc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-006-ref.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div > img
+    {
+      padding-top: 50px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-006.xht
new file mode 100644
index 0000000000..d714e16016
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-006.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-006-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 50px, 100px, 0px)' set to an image with 'writing-mode: vertical-rl' will make invisible the region outside the bottom-left corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(50px, 50px, 100px, 0px);
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-gr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-008-ref.xht
new file mode 100644
index 0000000000..2eac2befa8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-008-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div > img
+    {
+      padding-left: 50px;
+      padding-top: 50px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-008.xht
new file mode 100644
index 0000000000..4b86d72d5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-008.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-008-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 100px, 100px, 50px)' set to an image with 'writing-mode: vertical-rl' will make invisible the region outside the bottom-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  img#test
+    {
+      clip: rect(50px, 100px, 100px, 50px);
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-rg-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-010-ref.xht
new file mode 100644
index 0000000000..9611faa3b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-010-ref.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-right: 66px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-010.xht
new file mode 100644
index 0000000000..0b2a118064
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-010.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-010-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 50px, 50px, 0px)' set to an image in a 'writing-mode: vertical-rl' document will make invisible the region outside the top-left corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  img#test
+    {
+      clip: rect(0px, 50px, 50px, 0px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-gr-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-012-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-012-ref.xht
new file mode 100644
index 0000000000..7088a67fb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-012-ref.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-right: 16px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-012.xht
new file mode 100644
index 0000000000..50b1dfea20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-012.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-012-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(0px, 100px, 50px, 50px)' set to an image in a 'writing-mode: vertical-rl' document will make invisible the region outside the top-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  img#test
+    {
+      clip: rect(0px, 100px, 50px, 50px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rg-rr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-014-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-014-ref.xht
new file mode 100644
index 0000000000..5ca812e94c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-014-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-right: 66px;
+      padding-top: 50px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-014.xht
new file mode 100644
index 0000000000..6ecdf45f3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-014.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-014-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 50px, 100px, 0px)' set to an image in a 'writing-mode: vertical-rl' document will make invisible the region outside the bottom-left corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  img#test
+    {
+      clip: rect(50px, 50px, 100px, 0px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-gr-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-016-ref.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-016-ref.xht
new file mode 100644
index 0000000000..9ba9a041f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-016-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-right: 16px;
+      padding-top: 50px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-016.xht
new file mode 100644
index 0000000000..9586d06b16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/clip-rect-vrl-016.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'clip: rect()' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="clip-rect-vrl-016-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that 'clip: rect(50px, 100px, 100px, 50px)' set to an image in a 'writing-mode: vertical-rl' document will make invisible the region outside the bottom-right corner of such image." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  img#test
+    {
+      clip: rect(50px, 100px, 100px, 50px);
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  Image says:
+  Test passes if there is a filled green square and <strong>no red</strong>.
+  -->
+
+  <div><img id="test" src="support/pattern-rr-rg-100x100.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-003.xht
new file mode 100644
index 0000000000..57b5a1563a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-003.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: floated border-collapsing tables (vertical-lr)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that contiguous floated border-collapsing tables in a 'vertical-lr' context do not overlap." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-left: red solid 50px;
+      border-collapse: collapse;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      border-left: green solid 50px;
+      padding: 0px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="first">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="second">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-005.xht
new file mode 100644
index 0000000000..620f01c489
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-005.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: floated non-border-collapsing tables (vertical-lr)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that contiguous floated non-border-collapsing tables in a 'vertical-lr' context do not overlap." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: separate;
+      border-left: green solid 25px;
+      border-spacing: 0px;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      border-left: green solid 25px;
+      padding: 0px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="first">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="second">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-007.xht
new file mode 100644
index 0000000000..a02689e3f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-007.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <!--
+  Test inspired by
+  http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-004.html
+  -->
+
+  <title>CSS Writing Modes Test: vertical-lr - contiguous floated tables and horizontal margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-lr' are not subtracted by the amount of their borders. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: separate;
+      border-spacing: 0px;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  table#left-first
+    {
+      border-right: green solid 25px;
+      margin-right: 25px;
+    }
+
+  table#right-second
+    {
+      border-left: green solid 25px;
+      margin-left: 25px;
+    }
+
+  div#reference-overlapped
+    {
+      background-color: red;
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      background-repeat: no-repeat;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="left-first">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <table id="right-second">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-009.xht
new file mode 100644
index 0000000000..1679daeae8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vlr-009.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <!--
+  Test inspired by
+  http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-004.html
+  -->
+
+  <title>CSS Writing Modes Test: vertical-lr - contiguous floated tables and horizontal margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-lr' are not subtracted by the amount of their horizontal padding. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      background-color: green;
+      border-collapse: separate;
+      border-spacing: 0px;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  table#left-first
+    {
+      padding-right: 25px;
+      margin-right: 25px;
+    }
+
+  table#right-second
+    {
+      padding-left: 25px;
+      margin-left: 25px;
+    }
+
+  div#reference-overlapped
+    {
+      background-color: red;
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      background-repeat: no-repeat;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="left-first">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <table id="right-second">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-002.xht
new file mode 100644
index 0000000000..88b672830a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-002.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: floated border-collapsing tables (vertical-rl)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that contiguous floated border-collapsing tables in a 'vertical-rl' context do not overlap." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: collapse;
+      border-right: red solid 50px;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      border-right: green solid 50px;
+      padding: 0px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="first">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="second">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-004.xht
new file mode 100644
index 0000000000..4e5542bdb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-004.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: floated non-border-collapsing tables (vertical-rl)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that contiguous floated non-border-collapsing tables in a 'vertical-rl' context do not overlap." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-right: green solid 25px;
+      border-collapse: separate;
+      border-spacing: 0px;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      border-right: green solid 25px;
+      padding: 0px;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="first">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <table id="second">
+
+    <tbody>
+
+      <tr>
+        <td></td> <td></td>
+      </tr>
+
+    </tbody>
+
+  </table>
+
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-006.xht
new file mode 100644
index 0000000000..52ecdebc3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-006.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <!--
+  Test inspired by
+  http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-004.html
+  -->
+
+  <title>CSS Writing Modes Test: vertical-rl - contiguous floated tables and horizontal margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-rl' are not subtracted by the amount of their borders. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-collapse: separate;
+      border-spacing: 0px;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  table#left-first
+    {
+      border-right: green solid 25px;
+      margin-right: 25px;
+    }
+
+  table#right-second
+    {
+      border-left: green solid 25px;
+      margin-left: 25px;
+    }
+
+  div#reference-overlapped
+    {
+      background-color: red;
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      background-repeat: no-repeat;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="left-first">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <table id="right-second">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-008.xht
new file mode 100644
index 0000000000..24c1009261
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/contiguous-floated-table-vrl-008.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <!--
+  Test inspired by
+  http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-004.html
+  -->
+
+  <title>CSS Writing Modes Test: vertical-rl - contiguous floated tables and horizontal margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-rl' are not subtracted by the amount of their horizontal padding. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      background-color: green;
+      border-collapse: separate;
+      border-spacing: 0px;
+      float: left;
+      height: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+
+  table#left-first
+    {
+      padding-right: 25px;
+      margin-right: 25px;
+    }
+
+  table#right-second
+    {
+      padding-left: 25px;
+      margin-left: 25px;
+    }
+
+  div#reference-overlapped
+    {
+      background-color: red;
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      background-repeat: no-repeat;
+      height: 100px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <table id="left-first">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <table id="right-second">
+
+    <tr><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/crashtests/chrome-bug-1512988.html b/testing/web-platform/tests/css/css-writing-modes/crashtests/chrome-bug-1512988.html
new file mode 100644
index 0000000000..babe3ca704
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/crashtests/chrome-bug-1512988.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html style="position: absolute">
+  <title>Chrome crash when propagating orthogonal writing-mode to absolute positioned root element</title>
+  <link rel="help" href="https://crbug.com/1512988">
+  <body style="writing-mode: vertical-rl"></body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-percent-height-multicol-crash.html b/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-percent-height-multicol-crash.html
new file mode 100644
index 0000000000..aca93d23fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-percent-height-multicol-crash.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="help" href="https://crbug.com/1213358">
+<style type="text/css">
+.CLASS2 {
+  writing-mode: vertical-lr;
+}
+.CLASS4 {
+  columns: +6.9vh 8589934576;
+}
+samp, button, div.CLASS1 {
+  overflow-x: auto;
+  float: left;
+  block-size: 2.0%;
+}
+</style>
+<samp class="CLASS2">
+  <button>
+    <div class="CLASS1">
+      <h6 class="CLASS4">ABC</h6>
+    </div>
+    ABC
+  </button>
+</samp>
diff --git a/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-scroll-percent-height-crash.html b/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-scroll-percent-height-crash.html
new file mode 100644
index 0000000000..d40ebfd6eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-scroll-percent-height-crash.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="help" href="https://crbug.com/1213358">
+<div style="writing-mode:vertical-lr; inline-size:fit-content">
+  <div style="overflow: auto; writing-mode:horizontal-tb; height:10%">
+    abc
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-table-in-flex-crash.html b/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-table-in-flex-crash.html
new file mode 100644
index 0000000000..e29eb77355
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/crashtests/orthogonal-table-in-flex-crash.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1225014">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<div style="display: -webkit-box">
+<table style="writing-mode: vertical-rl">
+<caption>
diff --git a/testing/web-platform/tests/css/css-writing-modes/crashtests/table-root-direction-propagation-crash.html b/testing/web-platform/tests/css/css-writing-modes/crashtests/table-root-direction-propagation-crash.html
new file mode 100644
index 0000000000..d723c1276b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/crashtests/table-root-direction-propagation-crash.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<link rel="help" href="https://crbug.com/1303287">
+<style>
+  html {
+    display: table;
+    border-right: solid;
+  }
+  head { display: inline; }
+  body { direction: rtl; }
+</style>
+<body></body>
+<script>
+  requestAnimationFrame(() => requestAnimationFrame(() => document.body.remove()));
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/crashtests/unicode-bidi-select-crash.html b/testing/web-platform/tests/css/css-writing-modes/crashtests/unicode-bidi-select-crash.html
new file mode 100644
index 0000000000..b36a37616b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/crashtests/unicode-bidi-select-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1329417">
+<style>
+  select {
+    unicode-bidi: bidi-override;
+  }
+</style>
+<body>
+  <select>
+    <option>Test1</option>
+    <option id="opt" hidden="hidden">Test2</option>
+  </select>
+</body>
+<script>
+  document.body.offsetTop;
+  opt.defaultSelected = true;
+  window.getSelection().selectAllChildren(document.body);
+  document.vlinkColor = "red";
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/crashtests/wm-body-propagation-crash.html b/testing/web-platform/tests/css/css-writing-modes/crashtests/wm-body-propagation-crash.html
new file mode 100644
index 0000000000..a4a24712f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/crashtests/wm-body-propagation-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Chrome DCHECK failure for non-root &lt;html&gt;</title>
+<link rel="help" href="https://crbug.com/1217946">
+<body></body>
+<script>
+  let non_root = document.createElement("html");
+  document.documentElement.appendChild(non_root);
+  document.body.offsetTop;
+  document.body.style.display = "inline";
+  non_root.style.color = "red";
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/different-block-flow-dir-001.xht b/testing/web-platform/tests/css/css-writing-modes/different-block-flow-dir-001.xht
new file mode 100644
index 0000000000..151b736d83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/different-block-flow-dir-001.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: descendant inline with a different 'writing-mode' value</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that if an inline box has a different block flow direction than its containing block then its display computes to 'inline-block' in which case its specified width and specified height are not ignored and have to be rendered." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  span#inner
+  {
+  background-color: green;
+  color: green;
+  height: 6.25em;
+  vertical-align: top;
+  width: 6.25em;
+  writing-mode: vertical-rl;
+  }
+
+  div#reference-overlapped-red
+  {
+  background-color: red;
+  bottom: 6.25em;
+  height: 6.25em;
+  position: relative;
+  width: 6.25em;
+  z-index: -1;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="test-overlapping-green">
+    <span id="outer"><span id="inner">I</span></span>
+  </div>
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/different-block-flow-dir-002.xht b/testing/web-platform/tests/css/css-writing-modes/different-block-flow-dir-002.xht
new file mode 100644
index 0000000000..a762c19976
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/different-block-flow-dir-002.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: descendant inline with a different 'writing-mode' value</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="This test checks that if an inline box has a different block flow direction than its containing block then its display computes to 'inline-block' in which case its specified width and specified height are not ignored and have to be rendered." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  span#outer
+  {
+  vertical-align: top;
+  writing-mode: vertical-rl;
+  }
+
+  span#inner
+  {
+  background-color: green;
+  color: green;
+  height: 6.25em;
+  vertical-align: top;
+  width: 6.25em;
+  writing-mode: horizontal-tb;
+  }
+
+  div#reference-overlapped-red
+  {
+  background-color: red;
+  bottom: 6.25em;
+  height: 6.25em;
+  position: relative;
+  width: 6.25em;
+  z-index: -1;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="test-overlapping-green">
+    <span id="outer"><span id="inner">I</span></span>
+  </div>
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-propagation-body-contain-root-ref.html b/testing/web-platform/tests/css/css-writing-modes/direction-propagation-body-contain-root-ref.html
new file mode 100644
index 0000000000..4371a0d876
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-propagation-body-contain-root-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<body style="margin:0">This text should be left aligned.</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-propagation-body-contain-root.html b/testing/web-platform/tests/css/css-writing-modes/direction-propagation-body-contain-root.html
new file mode 100644
index 0000000000..2e4325d500
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-propagation-body-contain-root.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Do not propagate direction from body when html root is contained</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#principal-flow">
+<link rel="match" href="direction-propagation-body-contain-root-ref.html">
+<style>
+  html { contain: paint; }
+  body { direction: rtl; display: inline; }
+</style>
+<body></body>
+<script>
+  document.documentElement.insertBefore(document.createTextNode("This text should be left aligned."), document.body);
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-upright-001.html b/testing/web-platform/tests/css/css-writing-modes/direction-upright-001.html
new file mode 100644
index 0000000000..c9999951ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-upright-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<title>'text-orientation: upright' forces text to strong LTR in vertical typographic modes</title>
+<link rel=help href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel=match href="reference/direction-upright-001.html">
+<meta charset=utf-8>
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    text-align: right;
+    font: 20px/1 sans-serif;
+  }
+  span { text-orientation: upright; }
+  hr { clear: both; }
+</style>
+
+<p>Test passes if both rows of boxes are identical (order, orientation, and arrangement of contents).
+
+<!-- test -->
+
+<div dir=rtl style="writing-mode: vertical-rl">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+<div dir=rtl style="writing-mode: vertical-lr">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+
+<!-- control -->
+
+<div dir=rtl>
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב <span>ג ד</span> <span>ה ו</span> ז<br>
+ ١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
+</div>
+
+<hr>
+
+<!-- reference -->
+
+<div style="writing-mode: vertical-rl">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+<div style="writing-mode: vertical-lr">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+
+<div dir=rtl> א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-upright-002.html b/testing/web-platform/tests/css/css-writing-modes/direction-upright-002.html
new file mode 100644
index 0000000000..daa76c8ea6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-upright-002.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<title>'text-orientation: upright' forces used 'direction' to LTR in vertical typographic modes</title>
+<link rel=help href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel=help href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+<link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-auto-flow-property">
+<link rel=help href="https://www.w3.org/TR/css-ruby-1/#bidi">
+<link rel=match href="reference/direction-upright-002.html">
+
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    border-inline-start-color: orange;
+    border-block-start-color: aqua;
+    border-inline-end-color: lime;
+    border-block-end-color: yellow;
+  }
+  colgroup:first-child { background: fuchsia; }
+  col:last-child { background: purple; }
+  .flex { display: flex; }
+  .grid { grid-template-columns: auto auto }
+  hr { clear: both }
+</style>
+
+<p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents).
+
+<!-- test -->
+
+<div dir=rtl style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<!-- control -->
+
+<div dir=rtl style="text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<hr>
+
+<!-- reference -->
+
+<div style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<div dir=rtl>
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/direction-vlr-003-ref.xht
new file mode 100644
index 0000000000..f01f983898
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-vlr-003-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><img src="support/left-bottom-green-200x300.png" width="200" height="300" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/direction-vlr-003.xht
new file mode 100644
index 0000000000..6402f69e41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-vlr-003.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="match" href="direction-vlr-003-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when a block box has 'direction' set to 'rtl' in a vertical writing-mode, then inlines boxes are aligned from line-right to line-left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-bottom-200x300.png");
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/direction-vlr-005.xht
new file mode 100644
index 0000000000..2ea23b7d3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-vlr-005.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when a block box has 'direction' set to 'ltr' in a vertical writing-mode, then inlines boxes are aligned from line-left to line-right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-top-200x300.png");
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-002-ref.xht
new file mode 100644
index 0000000000..011258b7c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-002-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><img src="support/right-bottom-green-200x300.png" width="200" height="300" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-002.xht
new file mode 100644
index 0000000000..fecdf1a97b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-002.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="match" href="direction-vrl-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when a block box has 'direction' set to 'rtl' in a vertical writing-mode, then inlines boxes are aligned from line-right to line-left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-bottom-200x300.png");
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-004-ref.xht
new file mode 100644
index 0000000000..f705615076
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-004-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><img src="support/right-top-green-200x300.png" width="200" height="300" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/direction-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-004.xht
new file mode 100644
index 0000000000..16dd1c9eb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/direction-vrl-004.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
+  <link rel="match" href="direction-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that when a block box has 'direction' set to 'ltr' in a vertical writing-mode, then inlines boxes are aligned from line-left to line-right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-top-200x300.png");
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-001-ref.html
new file mode 100644
index 0000000000..4f72759011
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test Reference: dynamic changes to offset properties</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<style>
+
+body {
+  margin: 0;
+}
+
+#container {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: yellow;
+}
+
+#abspos {
+  margin-top: 10px;
+  margin-left: 70px;
+  width: 10px;
+  height: 10px;
+  background: fuchsia;
+}
+
+</style>
+
+<div id="container">
+  <div id="abspos"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-001.html b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-001.html
new file mode 100644
index 0000000000..b13907cd28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: dynamic changes to offset properties</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
+<link rel="match" href="dynamic-offset-rtl-001-ref.html">
+<meta name="flags" content="dom">
+<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
+<style>
+
+html {
+  direction: rtl;
+  overflow: hidden;
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200px;
+  height: 100px;
+  background: yellow;
+}
+
+#abspos {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  width: 10px;
+  height: 10px;
+  background: fuchsia;
+}
+
+</style>
+
+<div id="container">
+  <div id="abspos"></div>
+</div>
+
+<script>
+
+window.addEventListener("load", function(event) {
+  var e = document.getElementById("abspos");
+  e.offsetTop; // flush layout
+  e.parentNode.style.width = "100px";
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-002.html b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-002.html
new file mode 100644
index 0000000000..866b7a8d39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-rtl-002.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: dynamic changes to offset properties</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
+<link rel="match" href="dynamic-offset-rtl-001-ref.html">
+<meta name="flags" content="dom">
+<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
+<style>
+
+html {
+  direction: rtl;
+  overflow: hidden;
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200px;
+  height: 100px;
+  background: yellow;
+}
+
+#abspos {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  left: 10px; /* ignored */
+  width: 10px;
+  height: 10px;
+  background: fuchsia;
+}
+
+</style>
+
+<div id="container">
+  <div id="abspos"></div>
+</div>
+
+<script>
+
+window.addEventListener("load", function(event) {
+  var e = document.getElementById("abspos");
+  e.offsetTop; // flush layout
+  e.parentNode.style.width = "100px";
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-001.html b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-001.html
new file mode 100644
index 0000000000..745396e404
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: dynamic changes to offset properties</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
+<link rel="match" href="dynamic-offset-rtl-001-ref.html">
+<meta name="flags" content="dom">
+<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
+<style>
+
+html {
+  writing-mode: vertical-rl;
+  overflow: hidden;
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200px;
+  height: 100px;
+  background: yellow;
+}
+
+#abspos {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  width: 10px;
+  height: 10px;
+  background: fuchsia;
+}
+
+</style>
+
+<div id="container">
+  <div id="abspos"></div>
+</div>
+
+<script>
+
+window.addEventListener("load", function(event) {
+  var e = document.getElementById("abspos");
+  e.offsetTop; // flush layout
+  e.parentNode.style.width = "100px";
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-002.html b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-002.html
new file mode 100644
index 0000000000..c08909910e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-002.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: dynamic changes to offset properties</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
+<link rel="match" href="dynamic-offset-rtl-001-ref.html">
+<meta name="flags" content="dom">
+<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
+<style>
+
+html {
+  writing-mode: vertical-rl;
+  overflow: hidden;
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200px;
+  height: 100px;
+  background: yellow;
+}
+
+#abspos {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  left: 10px; /* ignored */
+  width: 10px;
+  height: 10px;
+  background: fuchsia;
+}
+
+</style>
+
+<div id="container">
+  <div id="abspos"></div>
+</div>
+
+<script>
+
+window.addEventListener("load", function(event) {
+  var e = document.getElementById("abspos");
+  e.offsetTop; // flush layout
+  e.parentNode.style.width = "100px";
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-rtl-001.html b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-rtl-001.html
new file mode 100644
index 0000000000..4380bad7dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-rtl-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: dynamic changes to offset properties</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
+<link rel="match" href="dynamic-offset-rtl-001-ref.html">
+<meta name="flags" content="dom">
+<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
+<style>
+
+html {
+  writing-mode: vertical-rl;
+  direction: rtl;
+  overflow: hidden;
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 200px;
+  background: yellow;
+}
+
+#abspos {
+  position: absolute;
+  bottom: 80px;
+  left: 70px;
+  width: 10px;
+  height: 10px;
+  background: fuchsia;
+}
+
+</style>
+
+<div id="container">
+  <div id="abspos"></div>
+</div>
+
+<script>
+
+window.addEventListener("load", function(event) {
+  var e = document.getElementById("abspos");
+  e.offsetTop; // flush layout
+  e.parentNode.style.height = "100px";
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-rtl-002.html b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-rtl-002.html
new file mode 100644
index 0000000000..209dcb835c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/dynamic-offset-vrl-rtl-002.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: dynamic changes to offset properties</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
+<link rel="match" href="dynamic-offset-rtl-001-ref.html">
+<meta name="flags" content="dom">
+<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
+<style>
+
+html {
+  writing-mode: vertical-rl;
+  direction: rtl;
+  overflow: hidden;
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 200px;
+  background: yellow;
+}
+
+#abspos {
+  position: absolute;
+  bottom: 80px;
+  left: 70px;
+  top: 80px; /* ignored */
+  width: 10px;
+  height: 10px;
+  background: fuchsia;
+}
+
+</style>
+
+<div id="container">
+  <div id="abspos"></div>
+</div>
+
+<script>
+
+window.addEventListener("load", function(event) {
+  var e = document.getElementById("abspos");
+  e.offsetTop; // flush layout
+  e.parentNode.style.height = "100px";
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/first-page-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/first-page-vlr-003.xht
new file mode 100644
index 0000000000..ce94a0793b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/first-page-vlr-003.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: first page of a document with vertical-lr writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" title="13.2.2 Page selectors: selecting left, right, and first pages" />
+
+  <meta content="paged" name="flags" />
+  <meta content="When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-lr' is the :right page." name="assert" />
+
+  <style type="text/css" media="print"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  @page :right
+    {
+      margin-left: 0%;
+    }
+
+  @page :left
+    {
+      margin-left: 50%;
+    }
+
+  p
+    {
+      border-left: blue solid 6px;
+      margin: 0;
+      padding-left: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-first-page-vlr-003.png" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+
+  PREREQUISITE: switch to a print preview
+  or page media view of the page.
+
+  Test passes if a blue vertical line is on the
+  <strong>left side</strong> of the page and <strong>not in the
+  horizontal center</strong> of the page.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/first-page-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/first-page-vrl-002.xht
new file mode 100644
index 0000000000..8ba53e233d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/first-page-vrl-002.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: first page of a document with vertical-rl writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" title="13.2.2 Page selectors: selecting left, right, and first pages" />
+
+  <meta content="image paged" name="flags" />
+  <meta content="When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-rl' is the :left page." name="assert" />
+
+  <style type="text/css" media="print"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  @page :right
+    {
+      margin-right: 0%;
+    }
+
+  @page :left
+    {
+      margin-right: 50%;
+    }
+
+  p
+    {
+      border-right: orange solid 6px;
+      margin: 0;
+      padding-right: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-first-page-vrl-002.png" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+
+  PREREQUISITE: switch to a print preview
+  or page media view of the page.
+
+  Test passes if an orange vertical line is
+  <strong>in the horizontal center</strong> of the page
+  and <strong>not on the right side</strong> of the page.
+  -->
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/flexbox_align-items-stretch-writing-modes-ref.html b/testing/web-platform/tests/css/css-writing-modes/flexbox_align-items-stretch-writing-modes-ref.html
new file mode 100644
index 0000000000..69db5a0124
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/flexbox_align-items-stretch-writing-modes-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Reference file</title>
+    <link rel="author" title="Mitsuteru Sawa" href="mailto:mitsuteru.s@gmail.com">
+    <style>
+        .test {
+            height: 100px;
+            width: 250px;
+            background-color: green;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a green rectangle and no red.</p>
+    <div class="test"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/flexbox_align-items-stretch-writing-modes.html b/testing/web-platform/tests/css/css-writing-modes/flexbox_align-items-stretch-writing-modes.html
new file mode 100644
index 0000000000..0f013e3b5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/flexbox_align-items-stretch-writing-modes.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>CSS Test: Flexbox align-items: stretch with writing-mode vertical-lr and vertical-rl</title>
+    <link rel="author" title="Mitsuteru Sawa" href="mailto:mitsuteru.s@gmail.com">
+    <link rel="reviewer" title="Tab Atkins Jr." href="mailto:jackalmage@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-align-items">
+    <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
+    <link rel="match" href="flexbox_align-items-stretch-writing-modes-ref.html">
+    <meta name="assert" content="vertical-writing-mode flex items should stretch">
+    <style>
+        .container {
+            display: flex;
+            width: 250px;
+        }
+        .vertical-rl {
+            writing-mode: vertical-rl;
+        }
+        .vertical-lr {
+            writing-mode: vertical-lr;
+        }
+        .item {
+            background-color: green;
+        }
+        .square {
+            height: 50px;
+            width: 50px;
+        }
+        .error {
+            position: absolute;
+            background-color: red;
+            height: 100px;
+            width: 250px;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a green rectangle and no red.</p>
+    <div class="test">
+        <div class="error"></div>
+        <div class="container">
+            <div class="horizontal item">
+                <div class="square"></div>
+                <div class="square"></div>
+            </div>
+            <div class="vertical-rl item">
+                <div class="square"></div>
+                <div class="square"></div>
+            </div>
+            <div class="vertical-lr item">
+                <div class="square"></div>
+                <div class="square"></div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-003.xht
new file mode 100644
index 0000000000..aab281c3bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-003.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'clear: right' in 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gr-gr-100x100.png");
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-right
+    {
+      float: right;
+    }
+
+  div#cleared-right
+    {
+      background-color: green;
+      clear: right;
+      width: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-right">R</div>
+    <div id="cleared-right"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-005.xht
new file mode 100644
index 0000000000..3d021ddfbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-005.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'clear: left' in 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gr-gr-100x100.png");
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-left
+    {
+      float: left;
+    }
+
+  div#cleared-left
+    {
+      background-color: green;
+      clear: left;
+      width: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-left">L</div>
+    <div id="cleared-left"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-007.xht
new file mode 100644
index 0000000000..9f4b5c888f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-007.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'clear: left' in 'vertical-lr' block formating context (intermediate)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gr-gr-100x100.png");
+      font-size: 50px;
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-lr;
+    }
+
+  div#container
+    {
+      border-right: green solid 1em;
+      width: auto; /* Very important: we want div#container to be able to shrink-wrap */
+    }
+
+  div.floated-left
+    {
+      float: left;
+      height: 50%; /* computes to 50px */
+      width: 1em; /* computes to 50px */
+    }
+
+  div#clearing
+    {
+      clear: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="container">
+      <div class="floated-left"></div>
+      <div class="floated-left"></div>
+      <div id="clearing"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-009.xht
new file mode 100644
index 0000000000..77ea726e37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vlr-009.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right', 'float: left' and 'clear: both' in 'vertical-lr' block formating context (intermediate)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gr-gr-100x100.png");
+      font-size: 50px;
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-lr;
+    }
+
+  div#container
+    {
+      border-right: green solid 1em;
+      width: auto; /* Very important: we want div#container to be able to shrink-wrap */
+    }
+
+  div#floated-left
+    {
+      float: left;
+      height: 50%; /* computes to 50px */
+      width: 1em; /* computes to 50px */
+    }
+
+  div#floated-right
+    {
+      float: right;
+      height: 50%; /* computes to 50px */
+      width: 1em; /* computes to 50px */
+    }
+
+  div#clearing
+    {
+      clear: both;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="container">
+      <div id="floated-right"></div>
+      <div id="clearing"></div>
+      <div id="floated-left"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-002.xht
new file mode 100644
index 0000000000..17537f1687
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-002.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'clear: right' in 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-rg-rg-100x100.png");
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-right
+    {
+      float: right;
+    }
+
+  div#cleared-right
+    {
+      background-color: green;
+      clear: right;
+      width: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-right">R</div>
+    <div id="cleared-right"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-004.xht
new file mode 100644
index 0000000000..63c33dd020
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-004.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'clear: left' in 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-rg-rg-100x100.png");
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-left
+    {
+      float: left;
+    }
+
+  div#cleared-left
+    {
+      background-color: green;
+      clear: left;
+      width: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-left">L</div>
+    <div id="cleared-left"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-006.xht
new file mode 100644
index 0000000000..50541bf898
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-006.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'clear: left' in 'vertical-rl' block formating context (intermediate)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-rg-rg-100x100.png");
+      font-size: 50px;
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  div#container
+    {
+      border-left: green solid 1em;
+      width: auto; /* Very important: we want div#container to be able to shrink-wrap */
+    }
+
+  div.floated-left
+    {
+      float: left;
+      height: 50%; /* computes to 50px */
+      width: 1em; /* computes to 50px */
+    }
+
+  div#clearing
+    {
+      clear: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="container">
+      <div class="floated-left"></div>
+      <div class="floated-left"></div>
+      <div id="clearing"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-008.xht
new file mode 100644
index 0000000000..f1eb3e7a58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-clear-vrl-008.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right', 'float: left' and 'clear: both' in 'vertical-rl' block formating context (intermediate)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-rg-rg-100x100.png");
+      font-size: 50px;
+      height: 2em; /* computes to 100px */
+      width: 2em; /* computes to 100px */
+      writing-mode: vertical-rl;
+    }
+
+  div#container
+    {
+      border-left: green solid 1em;
+      width: auto; /* Very important: we want div#container to be able to shrink-wrap */
+    }
+
+  div#floated-left
+    {
+      float: left;
+      height: 50%; /* computes to 50px */
+      width: 1em; /* computes to 50px */
+    }
+
+  div#floated-right
+    {
+      float: right;
+      height: 50%; /* computes to 50px */
+      width: 1em; /* computes to 50px */
+    }
+
+  div#clearing
+    {
+      clear: both;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="container">
+      <div id="floated-right"></div>
+      <div id="clearing"></div>
+      <div id="floated-left"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-003.xht
new file mode 100644
index 0000000000..ef6b0e2884
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-003.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous left-floating boxes in a 'vertical-lr' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="inline-replaced-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks the flow of contiguous left-floating boxes. The later (in source document) left-floating box must be to the right of the right outer edge of earlier floating boxes otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 299px;
+      writing-mode: vertical-lr;
+    }
+
+  img
+    {
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an unbroken drawing of a yin-yang (&#x262F;) symbol.</p>
+
+  <div><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-005.xht
new file mode 100644
index 0000000000..c2527467cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-005.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous right-floating boxes in a 'vertical-lr' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="inline-replaced-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks the flow of contiguous right-floating boxes. The later (in source document) right-floating box must be to the left of the left outer edge of earlier floating boxes otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 200px;
+      writing-mode: vertical-lr;
+    }
+
+  img
+    {
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an unbroken drawing of a yin-yang (&#x262F;) symbol.</p>
+
+  <div><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-007-ref.xht
new file mode 100644
index 0000000000..ea4bd4aa66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-007-ref.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-03-08 -->
+
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      margin: 0px 8px;
+    }
+
+  div
+    {
+      height: 200px;
+      margin-left: 8px;
+      width: 200px;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /></p>
+
+  <div>
+    <img src="support/test-tl.png" alt="Image download support must be enabled" /><img src="support/test-tr.png" alt="Image download support must be enabled" /><img src="support/test-bl.png" alt="Image download support must be enabled" /><img src="support/test-br.png" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-007.xht
new file mode 100644
index 0000000000..b140ec88a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-007.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous left-floating boxes in a 'vertical-lr' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="float-contiguous-vlr-007-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks the flow of contiguous left-floating boxes. The later (in source document) left-floating box must be to the right of the right outer edge of earlier floating boxes otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      height: 299px;
+    }
+
+  img
+    {
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /></p>
+
+  <div><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-009-ref.xht
new file mode 100644
index 0000000000..fa8bc43522
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-009-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-03-08 -->
+
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin: 0px 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  div > div
+    {
+      display: inline-block;
+      margin-left: 16px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /><div><img src="support/test-tl.png" alt="Image download support must be enabled" /><img src="support/test-tr.png" alt="Image download support must be enabled" /><br /><img src="support/test-bl.png" alt="Image download support must be enabled" /><img src="support/test-br.png" alt="Image download support must be enabled" /></div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-009.xht
new file mode 100644
index 0000000000..f2270379cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-009.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous right-floating boxes in a 'vertical-lr' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="float-contiguous-vlr-009-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks the flow of contiguous right-floating boxes. The later (in source document) right-floating box must be to the left of the left outer edge of earlier floating boxes otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      height: 200px;
+    }
+
+  div > img
+    {
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /></p>
+
+  <div><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-011.xht
new file mode 100644
index 0000000000..2858a45572
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-011.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous left-floating boxes with 'writing-mode' set to 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks the flow of contiguous left-floated boxes with 'writing-mode' set to 'vertical-lr'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      position: absolute;
+      width: 100px;
+      z-index: -1;
+    }
+
+  div.floated-left
+    {
+      color: green;
+      float: left;
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapped-red"></div>
+
+  <div class="floated-left">abcde</div>
+
+  <div class="floated-left">fghjk</div>
+
+  <div class="floated-left">lmnor</div>
+
+  <div class="floated-left">rstuv</div>
+
+  <div class="floated-left">wxyzz</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-013.xht
new file mode 100644
index 0000000000..6cc7ca6bc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vlr-013.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous right-floating boxes with 'writing-mode' set to 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="float-contiguous-vrl-012-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks the flow of contiguous right-floated boxes with 'writing-mode' set to 'vertical-lr'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  p
+    {
+      line-height: 1.25;
+    }
+
+  strong
+    {
+      line-height: 1;
+    }
+
+  div.floated-right
+    {
+      color: green;
+      float: right;
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      writing-mode: vertical-lr;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      position: absolute;
+      right: 8px;
+      top: 52px;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-right">abcde</div>
+
+  <div class="floated-right">fghjk</div>
+
+  <div class="floated-right">lmnor</div>
+
+  <div class="floated-right">rstuv</div>
+
+  <div class="floated-right">wxyzz</div>
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-002.xht
new file mode 100644
index 0000000000..cd2b8cd1fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-002.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous left-floating boxes in a 'vertical-rl' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="inline-replaced-vrl-004-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks the flow of contiguous left-floating boxes. The later (in source document) left-floating box must be to the right of the right outer edge of earlier floating boxes otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 299px;
+      writing-mode: vertical-rl;
+    }
+
+  img
+    {
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an unbroken drawing of a yin-yang (&#x262F;) symbol.</p>
+
+  <div><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-004.xht
new file mode 100644
index 0000000000..909b98602c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-004.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous right-floating boxes in a 'vertical-rl' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="inline-replaced-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks the flow of contiguous right-floating boxes. The later (in source document) right-floating box must be to the left of the left outer edge of earlier floating boxes, otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 200px;
+      writing-mode: vertical-rl;
+    }
+
+  img
+    {
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an unbroken drawing of a yin-yang (&#x262F;) symbol.</p>
+
+  <div><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-006-ref.xht
new file mode 100644
index 0000000000..76d5cd202b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-006-ref.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-03-08 -->
+
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      margin: 0px 8px;
+    }
+
+  div
+    {
+      height: 200px;
+      margin-right: 8px;
+      width: 200px;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /></p>
+
+  <div>
+    <img src="support/test-tr.png" alt="Image download support must be enabled" /><img src="support/test-tl.png" alt="Image download support must be enabled" /><img src="support/test-br.png" alt="Image download support must be enabled" /><img src="support/test-bl.png" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-006.xht
new file mode 100644
index 0000000000..bad564d3e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-006.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous left-floating boxes in a 'vertical-rl' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="float-contiguous-vrl-006-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks the flow of contiguous left-floating boxes. The later (in source document) left-floating box must be to the right of the right outer edge of earlier floating boxes otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      height: 299px;
+    }
+
+  img
+    {
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /></p>
+
+  <div><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-008-ref.xht
new file mode 100644
index 0000000000..61a6326de2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-008-ref.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-03-08 -->
+
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin: 0px 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  div > div
+    {
+      display: inline-block;
+      margin-right: 16px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /><div><img src="support/test-tr.png" alt="Image download support must be enabled" /><img src="support/test-tl.png" alt="Image download support must be enabled" /><br /><img src="support/test-br.png" alt="Image download support must be enabled" /><img src="support/test-bl.png" alt="Image download support must be enabled" /></div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-008.xht
new file mode 100644
index 0000000000..1dfcfba976
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-008.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous right-floating boxes in a 'vertical-rl' block formating context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="float-contiguous-vrl-008-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks the flow of contiguous right-floating boxes. The later (in source document) right-floating box must be to the left of the left outer edge of earlier floating boxes, otherwise (if there is not enough available horizontal space) below the margin box of the earlier box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      height: 200px;
+    }
+
+  div > img
+    {
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-float-contiguous.png" width="297" height="35" alt="Image download support must be enabled" /></p>
+
+  <div><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-010.xht
new file mode 100644
index 0000000000..9d2cc96863
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-010.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous left-floating boxes with 'writing-mode' set to 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks the flow of contiguous left-floated boxes with 'writing-mode' set to 'vertical-rl'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      position: absolute;
+      width: 100px;
+      z-index: -1;
+    }
+
+  div.floated-left
+    {
+      color: green;
+      float: left;
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapped-red"></div>
+
+  <div class="floated-left">abcde</div>
+
+  <div class="floated-left">fghjk</div>
+
+  <div class="floated-left">lmnor</div>
+
+  <div class="floated-left">rstuv</div>
+
+  <div class="floated-left">wxyzz</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-012-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-012-ref.xht
new file mode 100644
index 0000000000..407b1ee7dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-012-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      direction: ltr;
+      line-height: 1.25;
+    }
+
+  strong
+    {
+      line-height: 1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><img src="support/swatch-green.png" width="100" height="100" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-012.xht
new file mode 100644
index 0000000000..4da4622586
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-contiguous-vrl-012.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: contiguous right-floating boxes with 'writing-mode' set to 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="float-contiguous-vrl-012-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks the flow of contiguous right-floated boxes with 'writing-mode' set to 'vertical-rl'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  p
+    {
+      line-height: 1.25;
+    }
+
+  strong
+    {
+      line-height: 1;
+    }
+
+  div.floated-right
+    {
+      color: green;
+      float: right;
+      font: 20px/1 Ahem; /* computes to 20px/20px */
+      writing-mode: vertical-rl;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 100px;
+      position: absolute;
+      right: 8px;
+      top: 52px;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-right">abcde</div>
+
+  <div class="floated-right">fghjk</div>
+
+  <div class="floated-right">lmnor</div>
+
+  <div class="floated-right">rstuv</div>
+
+  <div class="floated-right">wxyzz</div>
+
+  <div id="reference-overlapped-red"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-in-htb-in-vrl.html b/testing/web-platform/tests/css/css-writing-modes/float-in-htb-in-vrl.html
new file mode 100644
index 0000000000..fbee2fbed3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-in-htb-in-vrl.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>Fixed-size float in autosized htr in vrl</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic" title="4. Intrinsic Size Determination">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height:100px; background:red;">
+  <div style="writing-mode:vertical-rl; background:green;">
+    <div style="writing-mode:horizontal-tb;">
+      <div style="float:left; width:100px; height:100px;"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vlr-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vlr-002-ref.xht
new file mode 100644
index 0000000000..5518d03ce9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vlr-002-ref.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  span
+    {
+      position: relative;
+      top: 40px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated left</div>
+    <span>VLR parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vlr-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vlr-002.xht
new file mode 100644
index 0000000000..2eb5c3a3f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vlr-002.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in vertical-lr context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-lft-orthog-htb-in-vlr-002-ref.xht" />
+
+  <meta content="This test checks the horizontal position of an orthogonal floated left block box inside a vertical-lr parent. The orthogonal floated left block box must be put as far to the left as possible inside the vertical-lr line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VLR parent
+    <div id="orthog-htb-float-left">HTB floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vrl-002-ref.xht
new file mode 100644
index 0000000000..3f2d84e4cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vrl-002-ref.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      color: white;
+      right: 16px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  span
+    {
+      position: relative;
+      top: 40px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated left</div>
+    <span>VRL parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vrl-002.xht
new file mode 100644
index 0000000000..6a4a27a849
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-htb-in-vrl-002.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in vertical-rl context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-lft-orthog-htb-in-vrl-002-ref.xht" />
+
+  <meta content="This test checks the horizontal position of an orthogonal floated left block box inside an vertical-rl parent. The orthogonal floated left block box must be put as far to the right as possible inside the vertical-rl line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VRL parent
+    <div id="orthog-htb-float-left">HTB floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vlr-in-htb-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vlr-in-htb-002-ref.xht
new file mode 100644
index 0000000000..d745d7a562
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vlr-in-htb-002-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      left: 40px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VLR floated left</div>
+    <span>HTB parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vlr-in-htb-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vlr-in-htb-002.xht
new file mode 100644
index 0000000000..69fc57c9d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vlr-in-htb-002.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-lft-orthog-vlr-in-htb-002-ref.xht" />
+
+  <meta content="This test checks the vertical position of an orthogonal floated left block box inside an horizontal-tb parent. The orthogonal floated left block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vlr-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vlr-float-left">VLR floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vrl-in-htb-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vrl-in-htb-002-ref.xht
new file mode 100644
index 0000000000..6f365a4fb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vrl-in-htb-002-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2016-12-14T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      left: 40px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VRL floated left</div>
+    <span>HTB parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vrl-in-htb-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vrl-in-htb-002.xht
new file mode 100644
index 0000000000..710664eb73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-lft-orthog-vrl-in-htb-002.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2016-11-08T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-lft-orthog-vrl-in-htb-002-ref.xht" />
+
+  <meta content="This test checks the vertical position of an orthogonal floated left block box inside an horizontal-tb parent. The orthogonal floated left block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vrl-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vrl-float-left">VRL floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vlr-003-ref.xht
new file mode 100644
index 0000000000..769282dd3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vlr-003-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      bottom: 16px;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated right</div>
+    <span>VLR parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vlr-003.xht
new file mode 100644
index 0000000000..f52e4b7eeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vlr-003.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in vertical-lr context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-rgt-orthog-htb-in-vlr-003-ref.xht" />
+
+  <meta content="This test checks the horizontal position of an orthogonal floated right block box inside a vertical-lr parent. The orthogonal floated right block box must be put as far to the left as possible inside the vertical-lr line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VLR parent
+    <div id="orthog-htb-float-right">HTB floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vrl-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vrl-003-ref.xht
new file mode 100644
index 0000000000..0c25b2a524
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vrl-003-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      bottom: 16px;
+      color: white;
+      position: absolute;
+      right: 16px;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated right</div>
+    <span>VRL parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vrl-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vrl-003.xht
new file mode 100644
index 0000000000..cdf5b250ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-htb-in-vrl-003.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in vertical-rl context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-rgt-orthog-htb-in-vrl-003-ref.xht" />
+
+  <meta content="This test checks the horizontal position of an orthogonal floated right block box inside a vertical-rl parent. The orthogonal floated right block box must be put as far to the right as possible inside the vertical-rl line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VRL parent
+    <div id="orthog-htb-float-right">HTB floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vlr-in-htb-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vlr-in-htb-003-ref.xht
new file mode 100644
index 0000000000..9bf82f0bbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vlr-in-htb-003-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      right: 16px;
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VLR floated right</div>
+    HTB parent
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vlr-in-htb-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vlr-in-htb-003.xht
new file mode 100644
index 0000000000..e95c9812cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vlr-in-htb-003.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-rgt-orthog-vlr-in-htb-003-ref.xht" />
+
+  <meta content="This test checks the vertical position of an orthogonal floated right block box inside an horizontal-tb parent. The orthogonal floated right block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vlr-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vlr-float-right">VLR floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vrl-in-htb-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vrl-in-htb-003-ref.xht
new file mode 100644
index 0000000000..efb9f9ffd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vrl-in-htb-003-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2016-12-14T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      right: 16px;
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VRL floated right</div>
+    HTB parent
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vrl-in-htb-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vrl-in-htb-003.xht
new file mode 100644
index 0000000000..2a1920b4a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-rgt-orthog-vrl-in-htb-003.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2016-11-08T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="float-rgt-orthog-vrl-in-htb-003-ref.xht" />
+
+  <meta content="This test checks the vertical position of an orthogonal floated right block box inside an horizontal-tb parent. The orthogonal floated right block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vrl-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vrl-float-right">VRL floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-003.xht
new file mode 100644
index 0000000000..1a0850ecbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-003.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width in 'vertical-lr' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.floated-left
+    {
+      background-color: red;
+      float: left;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      writing-mode: vertical-lr;
+    }
+
+  div.left-border
+    {
+      border-left: red solid 1em;
+    }
+
+  div#reference-overlapped-green
+    {
+      background-color: green;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-left">
+    <div class="left-border"></div>
+  </div>
+
+  <div id="reference-overlapped-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-005.xht
new file mode 100644
index 0000000000..11b4db627a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-005.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width in 'vertical-lr' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.floated-left
+    {
+      background-color: red;
+      float: left;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      writing-mode: vertical-lr;
+    }
+
+  div.left-border
+    {
+      border-left: red solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: red solid 1em;
+    }
+
+  div#reference-overlapped-green
+    {
+      background-color: green;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-left">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div id="reference-overlapped-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-007.xht
new file mode 100644
index 0000000000..09022f68ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-007.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width in 'vertical-lr' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.floated-left
+    {
+      background-color: red;
+      float: left;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      writing-mode: vertical-lr;
+    }
+
+  div.left-border
+    {
+      border-left: red solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: red solid 1em;
+    }
+
+  div.left-padding
+    {
+      padding-left: 1em;
+    }
+
+  div.right-padding
+    {
+      padding-right: 1em;
+    }
+
+  div#reference-overlapped-green
+    {
+      background-color: green;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-left">
+    <div class="left-border right-border left-padding right-padding"></div>
+  </div>
+
+  <div id="reference-overlapped-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-009.xht
new file mode 100644
index 0000000000..a8c51da662
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vlr-009.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width (height: auto) in 'vertical-lr' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' applying on logical width must not reduce content but size to fit to its content. In this test, 'L' and 'R' glyphs must be rendered." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#test-floated-left
+    {
+      color: green;
+      float: left;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+
+  div.inner-green-border-bottom
+    {
+      border-bottom: green solid 1em;
+    }
+
+  div#reference-red-overlapped
+    {
+      background-color: red;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="test-floated-left">
+
+    <div class="inner-green-border-bottom">L</div>
+
+    <div class="inner-green-border-bottom">R</div>
+
+  </div>
+
+  <div id="reference-red-overlapped"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-002.xht
new file mode 100644
index 0000000000..8aa1ff9ccb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-002.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width in 'vertical-rl' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.floated-left
+    {
+      background-color: red;
+      float: left;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      writing-mode: vertical-rl;
+    }
+
+  div.left-border
+    {
+      border-left: red solid 1em;
+    }
+
+  div#reference-overlapped-green
+    {
+      background-color: green;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-left">
+    <div class="left-border"></div>
+  </div>
+
+  <div id="reference-overlapped-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-004.xht
new file mode 100644
index 0000000000..3774c796a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-004.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test:  'float' and 'shrink-to-fit' logical width in 'vertical-rl' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.floated-left
+    {
+      background-color: red;
+      float: left;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      writing-mode: vertical-rl;
+    }
+
+  div.left-border
+    {
+      border-left: red solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: red solid 1em;
+    }
+
+  div#reference-overlapped-green
+    {
+      background-color: green;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-left">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div id="reference-overlapped-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-006.xht
new file mode 100644
index 0000000000..be35de5ce7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-006.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width in 'vertical-rl' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.floated-left
+    {
+      background-color: red;
+      float: left;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      writing-mode: vertical-rl;
+    }
+
+  div.left-border
+    {
+      border-left: red solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: red solid 1em;
+    }
+
+  div.left-padding
+    {
+      padding-left: 1em;
+    }
+
+  div.right-padding
+    {
+      padding-right: 1em;
+    }
+
+  div#reference-overlapped-green
+    {
+      background-color: green;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="floated-left">
+    <div class="left-border right-border left-padding right-padding"></div>
+  </div>
+
+  <div id="reference-overlapped-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-008.xht
new file mode 100644
index 0000000000..db39da1308
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-008.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width (height: auto) in 'vertical-rl' context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' applying on logical width must not reduce content but size to fit to its content. In this test, 'L' and 'R' glyphs must be rendered." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#test-floated-left
+    {
+      color: green;
+      float: left;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+
+  div.inner-green-border-bottom
+    {
+      border-bottom: green solid 1em;
+    }
+
+  div#reference-red-overlapped
+    {
+      background-color: red;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="test-floated-left">
+
+    <div class="inner-green-border-bottom">L</div>
+
+    <div class="inner-green-border-bottom">R</div>
+
+  </div>
+
+  <div id="reference-red-overlapped"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-vlr-016.xht b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-vlr-016.xht
new file mode 100644
index 0000000000..f76d119a07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-shrink-to-fit-vrl-vlr-016.xht
@@ -0,0 +1,136 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float' and 'shrink-to-fit' logical width (16 sub-tests)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that 'shrink-to-fit' rule (CSS2.1, §10.3.5) is applied onto logical width in vertical writing-modes. This test thoroughly checks systematically the 16 combinations of 'writing-mode: vertical-rl', 'writing-mode: vertical-lr', with 'float: left', with 'float: right' and with left and/or right border(s). Not tested here is 'padding-left' and 'padding-right'." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.test
+    {
+      background-color: red;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+    }
+
+  div.floated-right
+    {
+      float: right;
+    }
+
+  div.floated-left
+    {
+      float: left;
+    }
+
+  div.vrl
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div.vlr
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div.left-border
+    {
+      border-left: red solid 1em;
+    }
+
+  div.right-border
+    {
+      border-right: red solid 1em;
+    }
+
+  div#reference-overlapped-green
+    {
+      background-color: green;
+      height: 100px;
+      position: relative;
+      width: 100px;
+      z-index: -1;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="test floated-right vlr">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-right vlr">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-right vrl">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-right vrl">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-right vlr">
+    <div class="left-border"></div>
+  </div>
+
+  <div class="test floated-right vlr">
+    <div class="right-border"></div>
+  </div>
+
+  <div class="test floated-right vrl">
+    <div class="left-border"></div>
+  </div>
+
+  <div class="test floated-right vrl">
+    <div class="right-border"></div>
+  </div>
+
+  <div class="test floated-left vlr">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-left vlr">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-left vrl">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-left vrl">
+    <div class="left-border right-border"></div>
+  </div>
+
+  <div class="test floated-left vlr">
+    <div class="left-border"></div>
+  </div>
+
+  <div class="test floated-left vlr">
+    <div class="right-border"></div>
+  </div>
+
+  <div class="test floated-left vrl">
+    <div class="left-border"></div>
+  </div>
+
+  <div class="test floated-left vrl">
+    <div class="right-border"></div>
+  </div>
+
+  <div id="reference-overlapped-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/float-vlr-003.xht
new file mode 100644
index 0000000000..cf65a52db8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vlr-003.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' in a 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-right side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gg-rg-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-right">R</div>A
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/float-vlr-005.xht
new file mode 100644
index 0000000000..70bda18558
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vlr-005.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' in a 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-right side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gg-rg-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">A
+    <div id="floated-right">R</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/float-vlr-007.xht
new file mode 100644
index 0000000000..3207535fa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vlr-007.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' in a 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-left side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-rg-gg-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-left
+    {
+      color: green;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">A
+    <div id="floated-left">L</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/float-vlr-009.xht
new file mode 100644
index 0000000000..3efe0d0658
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vlr-009.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' in a 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-left side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gg-rg-100x100.png") no-repeat;
+      color: green;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-left
+    {
+      color: transparent;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-left">L</div>A
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/float-vlr-011.xht
new file mode 100644
index 0000000000..e452680c42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vlr-011.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'float: right' in a 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gr-rg-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+
+  div#floated-left
+    {
+      color: green;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-right">R</div>A B <div id="floated-left">L</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/float-vlr-013.xht
new file mode 100644
index 0000000000..e96bff66d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vlr-013.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'float: right' in a 'vertical-lr' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-rg-gr-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-lr;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+
+  div#floated-left
+    {
+      color: green;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    A <div id="floated-left">L</div> <div id="floated-right">R</div> B
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/float-vrl-002.xht
new file mode 100644
index 0000000000..f15ab73efb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vrl-002.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' in a 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-right side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gg-gr-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-right">R</div>A
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/float-vrl-004.xht
new file mode 100644
index 0000000000..317adb48f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vrl-004.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' in a 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-right side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gg-gr-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">A
+    <div id="floated-right">R</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/float-vrl-006.xht
new file mode 100644
index 0000000000..7a7d55a838
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vrl-006.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' in a 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-left side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gr-gg-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-left
+    {
+      color: green;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">A
+    <div id="floated-left">L</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/float-vrl-008.xht
new file mode 100644
index 0000000000..fdfcd9c4b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vrl-008.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' in a 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-left side of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gg-gr-100x100.png") no-repeat;
+      color: green;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-left
+    {
+      color: transparent;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-left">L</div>A
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/float-vrl-010.xht
new file mode 100644
index 0000000000..24ce2414e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vrl-010.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'float: right' in a 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-rg-gr-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+
+  div#floated-left
+    {
+      color: green;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="floated-right">R</div>A B <div id="floated-left">L</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/float-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/float-vrl-012.xht
new file mode 100644
index 0000000000..8cf9c16ce4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/float-vrl-012.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'float: right' in a 'vertical-rl' block formating context (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#wrapper
+    {
+      background: red url("support/pattern-gr-rg-100x100.png") no-repeat;
+      color: transparent;
+      font: 50px/1 Ahem; /* computes to 50px/50px */
+      height: 100px;
+      width: 100px;
+      writing-mode: vertical-rl;
+    }
+
+  div#floated-right
+    {
+      color: green;
+      float: right;
+    }
+
+  div#floated-left
+    {
+      color: green;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    A <div id="floated-left">L</div> <div id="floated-right">R</div> B
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-computed-style.html b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-computed-style.html
new file mode 100644
index 0000000000..dd82b54d6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-computed-style.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow">
+<title>Button appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<button id="horizontal-button">あいなき あいなき</button>
+<button id="horizontal-button-multiline">あいなき あいなき<br>あいなき</button>
+
+<input type="button" id="horizontal-input" value="あいなき あいなき">
+<input type="button" id="horizontal-input-multiline" value="あいなき あいなき&#10;あいなき">
+
+<button id="vertical-lr-button" style="writing-mode: vertical-lr">あいなき あいなき</button>
+<button id="vertical-rl-button" style="writing-mode: vertical-rl">あいなき あいなき</button>
+<button id="vertical-lr-button-multiline" style="writing-mode: vertical-lr">あいなき あいなき<br>あいなき</button>
+<button id="vertical-rl-button-multiline" style="writing-mode: vertical-rl">あいなき あいなき<br>あいなき</button>
+
+<input type="button" id="vertical-lr-input" style="writing-mode: vertical-lr" value="あいなき あいなき">
+<input type="button" id="vertical-rl-input" style="writing-mode: vertical-rl" value="あいなき あいなき">
+<input type="button" id="vertical-lr-input-multiline" style="writing-mode: vertical-lr" value="あいなき あいなき&#10;あいなき">
+<input type="button" id="vertical-rl-input-multiline" style="writing-mode: vertical-rl" value="あいなき あいなき&#10;あいなき">
+
+<script>
+for (const element of document.querySelectorAll("[id^='horizontal-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.height);
+        assert_equals(style.inlineSize, style.width);
+    }, `${element.id} block size should match height and inline size should match width`);
+    if (!element.matches("[id$='-multiline']")) {
+        test(() => {
+            const multiline = document.querySelector(`#${element.id}-multiline`);
+            const style = getComputedStyle(element);
+            const multilineStyle = getComputedStyle(multiline);
+            assert_greater_than(parseInt(multilineStyle.height, 10), parseInt(style.height, 10));
+            assert_equals(multilineStyle.width, style.width);
+        }, `${element.id}'s height is less than its multi-line counterpart, but width is identical.`);
+    }
+}
+
+for (const element of document.querySelectorAll("[id^='vertical-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.width);
+        assert_equals(style.inlineSize, style.height);
+    }, `${element.id} block size should match width and inline size should match height`);
+
+    if (!element.matches("[id$='-multiline']")) {
+        test(() => {
+            const multiline = document.querySelector(`#${element.id}-multiline`);
+            const style = getComputedStyle(element);
+            const multilineStyle = getComputedStyle(multiline);
+            assert_greater_than(parseInt(multilineStyle.width, 10), parseInt(style.width, 10));
+            assert_equals(multilineStyle.height, style.height);
+        }, `${element.id}'s width is less than its multi-line counterpart, but height is identical.`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..44579ac292
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-horizontal.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-none-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: horizontal-tb"></button>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..3a0c61b490
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-native-vertical.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance native writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: vertical-rl"></button>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..2679c6f04d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-none-horizontal.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance none writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: horizontal-tb; appearance: none;"></button>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..b37565a409
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/button-appearance-none-vertical.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: vertical-lr; appearance: none;"></button>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional-ref.html
new file mode 100644
index 0000000000..a43403ccf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Test baseline alignment of checkboxes in vertical-lr writing mode.</title>
+<meta charset="utf-8">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+input {
+    visibility: hidden;
+}
+
+</style>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
+<div style="writing-mode: vertical-lr">
+    <input type="checkbox" id="checkbox" checked>
+    <label for="checkbox">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <input type="checkbox" id="checkbox" checked>
+  <label for="checkbox">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional.html
new file mode 100644
index 0000000000..377a8e8785
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#checkbox-state-(type=checkbox)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test baseline alignment of checkboxes in vertical-lr writing mode.</title>
+<meta charset="utf-8">
+<link rel="match" href="checkbox-appearance-native-vertical-lr-baseline.optional-ref.html">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+</style>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
+<div style="writing-mode: vertical-lr">
+    <input type="checkbox" id="checkbox" checked>
+    <label for="checkbox">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <input type="checkbox" id="checkbox" checked>
+  <label for="checkbox">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional-ref.html
new file mode 100644
index 0000000000..7fe6db3407
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Test baseline alignment of checkboxes in vertical-rl writing mode.</title>
+<meta charset="utf-8">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+input {
+    visibility: hidden;
+}
+
+</style>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
+<div style="writing-mode: vertical-rl">
+    <input type="checkbox" id="checkbox" checked>
+    <label for="checkbox">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <input type="checkbox" id="checkbox" checked>
+  <label for="checkbox">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional.html
new file mode 100644
index 0000000000..630a83c7ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#checkbox-state-(type=checkbox)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test baseline alignment of checkboxes in vertical-rl writing mode.</title>
+<meta charset="utf-8">
+<link rel="match" href="checkbox-appearance-native-vertical-rl-baseline.optional-ref.html">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+</style>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
+<div style="writing-mode: vertical-rl">
+    <input type="checkbox" id="checkbox" checked>
+    <label for="checkbox">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <input type="checkbox" id="checkbox" checked>
+  <label for="checkbox">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-switch-input-computed-style.tentative.html b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-switch-input-computed-style.tentative.html
new file mode 100644
index 0000000000..f8d8d6fca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/checkbox-switch-input-computed-style.tentative.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Switch input writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<input type=checkbox switch id=horizontal-input style="writing-mode: horizontal-tb">
+<input type=checkbox switch id=vertical-lr-input style="writing-mode: vertical-lr">
+<input type=checkbox switch id=vertical-rl-input style="writing-mode: vertical-rl">
+
+<script>
+for (const element of document.querySelectorAll("[id^='horizontal-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.height);
+        assert_equals(style.inlineSize, style.width);
+    }, `${element.id} block size should match height and inline size should match width`);
+}
+
+for (const element of document.querySelectorAll("[id^='vertical-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.width);
+        assert_equals(style.inlineSize, style.height);
+    }, `${element.id} block size should match width and inline size should match height`);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html
new file mode 100644
index 0000000000..7ab0e0923d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow">
+<title>Color input appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<input type="color" style="writing-mode: horizontal-tb">
+<input type="color" style="writing-mode: vertical-lr">
+<input type="color" style="writing-mode: vertical-rl">
+
+<script>
+test(() => {
+  const input = document.querySelector(`input[type="color"][style="writing-mode: horizontal-tb"]`);
+  const style = getComputedStyle(input);
+  const blockSize = parseInt(style.blockSize, 10);
+  const inlineSize = parseInt(style.inlineSize, 10);
+  assert_not_equals(blockSize, 0);
+  assert_not_equals(inlineSize, 0);
+  assert_greater_than_equal(inlineSize, blockSize);
+  assert_equals(style.blockSize, style.height);
+  assert_equals(style.inlineSize, style.width);
+}, `input[type="color"][style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`);
+
+for (const writingMode of ["vertical-lr", "vertical-rl"]) {
+  test(() => {
+    const input = document.querySelector(`input[type="color"][style="writing-mode: ${writingMode}"]`);
+    const style = getComputedStyle(input);
+    const blockSize = parseInt(style.blockSize, 10);
+    const inlineSize = parseInt(style.inlineSize, 10);
+    assert_not_equals(blockSize, 0);
+    assert_not_equals(inlineSize, 0);
+    assert_greater_than_equal(inlineSize, blockSize);
+    assert_equals(style.blockSize, style.width);
+    assert_equals(style.inlineSize, style.height);
+  }, `input[type="color"][style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..ef5fc29fcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=color] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="color-input-appearance-none-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..9e19f51eb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=color] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="color-input-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color" style="writing-mode: vertical-rl">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..bfe8839395
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=color] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="color-input-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color" style="appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..a6ce538679
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=color] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="color-input-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color" style="writing-mode: vertical-lr; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-computed-style.html b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-computed-style.html
new file mode 100644
index 0000000000..0e79766793
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-computed-style.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow">
+<title>Date input appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<input type="date" id="horizontal-empty">
+<input type="date" id="horizontal-with-value" value="2023-11-10">
+<input type="date" id="vertical-lr-empty" style="writing-mode: vertical-lr">
+<input type="date" id="vertical-lr-with-value" value="2023-11-10" style="writing-mode: vertical-lr">
+<input type="date" id="vertical-rl-empty" style="writing-mode: vertical-rl">
+<input type="date" id="vertical-rl-with-value" value="2023-11-10" style="writing-mode: vertical-rl">
+
+<script>
+for (const element of document.querySelectorAll("[id^='horizontal-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.height);
+        assert_equals(style.inlineSize, style.width);
+    }, `${element.id} block size should match height and inline size should match width`);
+}
+
+for (const element of document.querySelectorAll("[id^='vertical-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.width);
+        assert_equals(style.inlineSize, style.height);
+    }, `${element.id} block size should match width and inline size should match height`);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..10510d7ea1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=date] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="date-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="date-input-appearance-none-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The date input below should match the correct writing mode.</p>
+<input type="date">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..02b05748c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-native-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=date] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="date-input-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="date-input-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The date input below should match the correct writing mode.</p>
+<input type="date" style="writing-mode: vertical-rl">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..6115e6f33b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-none-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=date] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="date-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="date-input-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The date input below should match the correct writing mode.</p>
+<input type="date" style="appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..e608ead51b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/date-input-appearance-none-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=date] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="date-input-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="date-input-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The date input below should match the correct writing mode.</p>
+<input type="date" style="writing-mode: vertical-lr; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/file-input-computed-style.html b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-computed-style.html
new file mode 100644
index 0000000000..417534e9bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-computed-style.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow">
+<title>File input writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<input type="file" id="horizontal-input" style="writing-mode: horizontal-tb">
+<input type="file" id="vertical-lr-input" style="writing-mode: vertical-lr">
+<input type="file" id="vertical-rl-input" style="writing-mode: vertical-rl">
+
+<script>
+for (const element of document.querySelectorAll("[id^='horizontal-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.height);
+        assert_equals(style.inlineSize, style.width);
+    }, `${element.id} block size should match height and inline size should match width`);
+}
+
+for (const element of document.querySelectorAll("[id^='vertical-']")) {
+    test(() => {
+        const style = getComputedStyle(element);
+        const blockSize = parseInt(style.blockSize, 10);
+        const inlineSize = parseInt(style.inlineSize, 10);
+        assert_not_equals(blockSize, 0);
+        assert_not_equals(inlineSize, 0);
+        assert_greater_than(inlineSize, blockSize);
+        assert_equals(style.blockSize, style.width);
+        assert_equals(style.inlineSize, style.height);
+    }, `${element.id} block size should match width and inline size should match height`);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/file-input-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-horizontal.optional.html
new file mode 100644
index 0000000000..b7bcb340e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#file-upload-state-(type=file)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>File input writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="file-input-vertical.optional.html">
+<link rel="mismatch" href="file-input-vertical-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The file input below should match the correct writing mode.</p>
+<input type="file" style="writing-mode: horizontal-tb">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/file-input-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-vertical-rtl.optional.html
new file mode 100644
index 0000000000..b58242555b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-vertical-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#file-upload-state-(type=file)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>File input writing mode vertical RTL</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="file-input-horizontal.optional.html">
+<link rel="mismatch" href="file-input-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The file input below should match the correct writing mode.</p>
+<input type="file" style="writing-mode: vertical-lr; direction: rtl;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/file-input-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-vertical.optional.html
new file mode 100644
index 0000000000..c9b4272f84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/file-input-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#file-upload-state-(type=file)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>File input writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="file-input-vertical-rtl.optional.html">
+<link rel="mismatch" href="file-input-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The file input below should match the correct writing mode.</p>
+<input type="file" style="writing-mode: vertical-lr">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-007-manual.xht
new file mode 100644
index 0000000000..7774f4b617
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-007-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'sideways-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'sideways-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      writing-mode: sideways-lr;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/form-controls-slr.png" width="180" height="185" alt="Image download support must be enabled" />
+<!--
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from bottom to top and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's righthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are rotated 90 degrees counter-clockwise.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-008-manual.xht
new file mode 100644
index 0000000000..35b4ace523
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'sideways-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'sideways-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from bottom to top, b) the glyphs must be rotated 90° counter-clockwise and c) the block flow direction must be from left to right." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° counter-clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-007-manual.xht
new file mode 100644
index 0000000000..37f4bb4733
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-007-manual.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'sideways-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'sideways-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      margin-left: 7em;
+      writing-mode: sideways-rl;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/form-controls-srl.png" width="180" height="185" alt="Image download support must be enabled" />
+<!--
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from top to bottom and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's lefthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are rotated 90 degrees clockwise.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-008-manual.xht
new file mode 100644
index 0000000000..f092ecc1d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'sideways-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'sideways-rl' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from right to left." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: sideways-rl;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the right of the page and with Text sample10 on the left and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-001-manual.html
new file mode 100644
index 0000000000..a6ce755f71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-001-manual.html
@@ -0,0 +1,30 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-002-manual.html
new file mode 100644
index 0000000000..9f331a0ec8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-002-manual.html
@@ -0,0 +1,30 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-003-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-003-manual.html
new file mode 100644
index 0000000000..624cd242cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-003-manual.html
@@ -0,0 +1,30 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-004-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-004-manual.html
new file mode 100644
index 0000000000..ce11f1fcb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-004-manual.html
@@ -0,0 +1,30 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-005-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-005-manual.html
new file mode 100644
index 0000000000..c2bf8bb00b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-005-manual.html
@@ -0,0 +1,35 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-006-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-006-manual.html
new file mode 100644
index 0000000000..78416009a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-006-manual.html
@@ -0,0 +1,35 @@
+<!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."/>
+<meta name="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-007-manual.xht
new file mode 100644
index 0000000000..8d5f5c9280
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-007-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      writing-mode: vertical-lr;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/form-controls-vlr.png" width="188" height="228" alt="Image download support must be enabled" />
+<!--
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from top to bottom and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's righthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are translated upright.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht
new file mode 100644
index 0000000000..9f103e10f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from left to right." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-007-manual.xht
new file mode 100644
index 0000000000..89ad197a57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-007-manual.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="bookmark" type="image/png" href="http://www.w3.org/TR/css-writing-modes-3/vertical-form.png" title="Screenshot of vertical layout of form controls and characters" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      margin-left: 7em;
+      writing-mode: vertical-rl;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/vertical-form.png" width="182" height="266" alt="Image download support must be enabled" />
+<!--
+  original source of the image is:
+  http://www.w3.org/TR/css-writing-modes-3/vertical-form.png
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from top to bottom and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's lefthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are translated upright.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-008-manual.xht
new file mode 100644
index 0000000000..f873373ca9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-rl' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from right to left." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the right of the page and with Text sample10 on the left and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-slr.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-slr.png
new file mode 100644
index 0000000000..ac9b2a3072
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-slr.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-srl.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-srl.png
new file mode 100644
index 0000000000..da9d401f91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-srl.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-vlr.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-vlr.png
new file mode 100644
index 0000000000..ebe4df21f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-vlr.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/vertical-form.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/vertical-form.png
new file mode 100644
index 0000000000..53a3af92cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/vertical-form.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html
new file mode 100644
index 0000000000..446036b73c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-meter-element-2">
+<title>Meter appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<meter value="40" min="0" max="100" style="writing-mode: horizontal-tb"></meter>
+<meter value="40" min="0" max="100" style="writing-mode: vertical-lr"></meter>
+<meter value="40" min="0" max="100" style="writing-mode: vertical-rl"></meter>
+
+<script>
+test(() => {
+  const meter = document.querySelector(`meter[style="writing-mode: horizontal-tb"]`);
+  const style = getComputedStyle(meter);
+  const blockSize = parseInt(style.blockSize, 10);
+  const inlineSize = parseInt(style.inlineSize, 10);
+  assert_not_equals(blockSize, 0);
+  assert_not_equals(inlineSize, 0);
+  assert_greater_than(inlineSize, blockSize);
+  assert_equals(style.blockSize, style.height);
+  assert_equals(style.inlineSize, style.width);
+}, `meter[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`);
+
+for (const writingMode of ["vertical-lr", "vertical-rl"]) {
+  test(() => {
+    const meter = document.querySelector(`meter[style="writing-mode: ${writingMode}"]`);
+    const style = getComputedStyle(meter);
+    const blockSize = parseInt(style.blockSize, 10);
+    const inlineSize = parseInt(style.inlineSize, 10);
+    assert_not_equals(blockSize, 0);
+    assert_not_equals(inlineSize, 0);
+    assert_greater_than(inlineSize, blockSize);
+    assert_equals(style.blockSize, style.width);
+    assert_equals(style.inlineSize, style.height);
+  }, `meter[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`);
+};
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal-rtl.optional.html
new file mode 100644
index 0000000000..65bbd653b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode horizontal & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="meter-appearance-native-vertical-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The meter element below should match the correct writing mode.</p>
+<meter value="70" min="0" max="100" style="writing-mode: horizontal-tb; direction: rtl"></meter>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..1e7a8df8ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-horizontal-rtl.optional.html">
+<link rel="mismatch" href="meter-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The meter element below should match the correct writing mode.</p>
+<meter value="70" min="0" max="100" style="writing-mode: horizontal-tb"></meter>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical-rtl.optional.html
new file mode 100644
index 0000000000..e488d8dd51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode vertical & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-horizontal-rtl.optional.html">
+<link rel="mismatch" href="meter-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The meter element below should match the correct writing mode.</p>
+<meter value="70" min="0" max="100" style="writing-mode: vertical-rl; direction: rtl"></meter>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..2205d5615d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="meter-appearance-native-vertical-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The meter element below should match the correct writing mode.</p>
+<meter value="70" min="0" max="100" style="writing-mode: vertical-rl"></meter>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow-ref.html
new file mode 100644
index 0000000000..ad1ecc35ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Reference: Number input in vertical writing mode with long value does not cause ink overflow</title>
+<p>Number input with long value does not cause ink overflow</p>
+<style>
+    input {
+        writing-mode: vertical-lr;
+        appearance: none;
+        inline-size: 10em;
+    }
+</style>
+<input type="number">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow.html b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow.html
new file mode 100644
index 0000000000..dfd8100a01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Number input in vertical writing mode with long value does not cause ink overflow</title>
+<meta charset="utf-8">
+<link rel="match" href="number-input-vertical-overflow-ref.html">
+<style>
+    input {
+        writing-mode: vertical-lr;
+        color: transparent;
+        appearance: none;
+        inline-size: 10em;
+    }
+</style>
+<p>Number input with long value does not cause ink overflow</p>
+<input type="number" value="11111111111111111111111111111111111">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html
new file mode 100644
index 0000000000..0f2e4f1792
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-progress-element-2">
+<title>Progress appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<progress value="30" min="0" max="100" style="writing-mode: horizontal-tb"></progress>
+<progress value="30" min="0" max="100" style="writing-mode: vertical-lr"></progress>
+<progress value="30" min="0" max="100" style="writing-mode: vertical-rl"></progress>
+
+<script>
+test(() => {
+  const progress = document.querySelector(`progress[style="writing-mode: horizontal-tb"]`);
+  const style = getComputedStyle(progress);
+  const blockSize = parseInt(style.blockSize, 10);
+  const inlineSize = parseInt(style.inlineSize, 10);
+  assert_not_equals(blockSize, 0);
+  assert_not_equals(inlineSize, 0);
+  assert_greater_than(inlineSize, blockSize);
+  assert_equals(style.blockSize, style.height);
+  assert_equals(style.inlineSize, style.width);
+}, `progress[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`);
+
+for (const writingMode of ["vertical-lr", "vertical-rl"]) {
+  test(() => {
+    const progress = document.querySelector(`progress[style="writing-mode: ${writingMode}"]`);
+    const style = getComputedStyle(progress);
+    const blockSize = parseInt(style.blockSize, 10);
+    const inlineSize = parseInt(style.inlineSize, 10);
+    assert_not_equals(blockSize, 0);
+    assert_not_equals(inlineSize, 0);
+    assert_greater_than(inlineSize, blockSize);
+    assert_equals(style.blockSize, style.width);
+    assert_equals(style.inlineSize, style.height);
+  }, `progress[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`);
+};
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal-rtl.optional.html
new file mode 100644
index 0000000000..319050638b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance native writing mode horizontal & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-none-horizontal-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; direction: rtl"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..bdda28675e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-native-horizontal-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical-rtl.optional.html
new file mode 100644
index 0000000000..9a1834e46d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance native writing mode vertical & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-native-horizontal-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: vertical-rl; direction: rtl"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..5ddfa20761
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance native writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: vertical-rl"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal-rtl.optional.html
new file mode 100644
index 0000000000..4276cac633
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance none writing mode horizontal & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-horizontal-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; appearance: none; direction: rtl"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..cda8a00715
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance none writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-none-horizontal-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; appearance: none;"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical-rtl.optional.html
new file mode 100644
index 0000000000..56baeb472f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance none writing mode vertical & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-none-horizontal-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="appearance: none; writing-mode: vertical-rl; direction: rtl"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..b02f725504
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: vertical-lr; appearance: none;"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional-ref.html
new file mode 100644
index 0000000000..6fca0762f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Test baseline alignment of radio buttons in vertical-lr writing mode.</title>
+<meta charset="utf-8">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+input {
+    visibility: hidden;
+}
+
+</style>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
+<div style="writing-mode: vertical-lr">
+    <input type="radio" id="radio" checked>
+    <label for="radio">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <input type="radio" id="radio" checked>
+  <label for="radio">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional.html
new file mode 100644
index 0000000000..c7810034fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#radio-button-state-(type=radio)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test baseline alignment of radio buttons in vertical-lr writing mode.</title>
+<meta charset="utf-8">
+<link rel="match" href="radio-appearance-native-vertical-lr-baseline.optional-ref.html">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+</style>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
+<div style="writing-mode: vertical-lr">
+    <input type="radio" id="radio" checked>
+    <label for="radio">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <input type="radio" id="radio" checked>
+  <label for="radio">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional-ref.html
new file mode 100644
index 0000000000..9e5dda820c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Test baseline alignment of radio buttons in vertical-rl writing mode.</title>
+<meta charset="utf-8">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+input {
+    visibility: hidden;
+}
+
+</style>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
+<div style="writing-mode: vertical-rl">
+    <input type="radio" id="radio" checked>
+    <label for="radio">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <input type="radio" id="radio" checked>
+  <label for="radio">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional.html
new file mode 100644
index 0000000000..6f7eed705e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#radio-button-state-(type=radio)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test baseline alignment of radio buttons in vertical-rl writing mode.</title>
+<meta charset="utf-8">
+<link rel="match" href="radio-appearance-native-vertical-rl-baseline.optional-ref.html">
+<style>
+
+label {
+    color: red;
+    background-color: red;
+    margin-top: -30px;
+}
+
+</style>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
+<div style="writing-mode: vertical-rl">
+    <input type="radio" id="radio" checked>
+    <label for="radio">こんにちわ</label>
+</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <input type="radio" id="radio" checked>
+  <label for="radio">Baseline</label>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html
new file mode 100644
index 0000000000..9382f890fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in horizontal writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10" style="direction: rtl">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..1651d83326
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html
new file mode 100644
index 0000000000..095ca96ea5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in vertical writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-horizontal-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-rl; direction: rtl;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..ca7eb994ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-rl">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html
new file mode 100644
index 0000000000..c1485688d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in horizontal writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10" style="direction: rtl; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..1f4bfe4c68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10" style="appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html
new file mode 100644
index 0000000000..527038ea84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in vertical writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-horizontal-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-lr; direction: rtl; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..9c151c659e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-lr; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-painting-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-painting-ref.html
new file mode 100644
index 0000000000..650a8139ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-painting-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<title>Reference: painting of input[type=range] does not happen outside of its bounds</title>
+<p>The range input below should be fully covered.</p>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html
new file mode 100644
index 0000000000..03e02b10a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test that painting of input[type=range] does not happen outside of its bounds</title>
+<meta charset="utf-8">
+<link rel="match" href="range-input-painting-ref.html">
+
+<style>
+    #container {
+        position: relative;
+    }
+    #cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+    }
+    @supports (writing-mode: vertical-lr) {
+        #cover {
+            background-color: Canvas;
+        }
+    }
+    input {
+        appearance: none;
+        writing-mode: vertical-lr;
+    }
+</style>
+
+<p>The range input below should be fully covered.</p>
+
+<div id="container">
+    <input type="range">
+    <div id="cover"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html
new file mode 100644
index 0000000000..8c7d234db5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test that painting of input[type=range] does not happen outside of its bounds</title>
+<meta charset="utf-8">
+<link rel="match" href="range-input-painting-ref.html">
+
+<style>
+    #container {
+        position: relative;
+    }
+    #cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+    }
+    @supports (writing-mode: vertical-lr) and (direction: rtl) {
+        #cover {
+            background-color: Canvas;
+        }
+    }
+    input {
+        appearance: none;
+        writing-mode: vertical-lr;
+        direction: rtl;
+    }
+</style>
+
+<p>The range input below should be fully covered.</p>
+
+<div id="container">
+    <input type="range">
+    <div id="cover"></div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-computed-style.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-computed-style.html
new file mode 100644
index 0000000000..2cbe33f9d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-computed-style.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow">
+<title>Select appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select style="writing-mode: horizontal-tb">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
+
+<select style="writing-mode: vertical-lr">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
+
+<select style="writing-mode: vertical-rl">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
+
+<script>
+test(() => {
+  const select = document.querySelector(`select[style="writing-mode: horizontal-tb"]`);
+  const style = getComputedStyle(select);
+  const blockSize = parseInt(style.blockSize, 10);
+  const inlineSize = parseInt(style.inlineSize, 10);
+  assert_not_equals(blockSize, 0);
+  assert_not_equals(inlineSize, 0);
+  assert_greater_than(inlineSize, blockSize);
+  assert_equals(style.blockSize, style.height);
+  assert_equals(style.inlineSize, style.width);
+}, `select[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`);
+
+for (const writingMode of ["vertical-lr", "vertical-rl"]) {
+  test(() => {
+    const select = document.querySelector(`select[style="writing-mode: ${writingMode}"]`);
+    const style = getComputedStyle(select);
+    const blockSize = parseInt(style.blockSize, 10);
+    const inlineSize = parseInt(style.inlineSize, 10);
+    assert_not_equals(blockSize, 0);
+    assert_not_equals(inlineSize, 0);
+    assert_greater_than(inlineSize, blockSize);
+    assert_equals(style.blockSize, style.width);
+    assert_equals(style.inlineSize, style.height);
+  }, `select[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..669c2c8c03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-horizontal.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: horizontal-tb">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..79eb364023
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-native-vertical.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance native writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-lr">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..a7bcd3a85f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-horizontal.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: horizontal-tb; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-vertical-lr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-vertical-lr.optional.html
new file mode 100644
index 0000000000..2b93db3773
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-vertical-lr.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="match" href="select-appearance-none-vertical-rl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-lr; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional.html
new file mode 100644
index 0000000000..7a412d88f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="match" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-rl; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..57b84109a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native select[multiple] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html
new file mode 100644
index 0000000000..dcec498ff0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-lr">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html
new file mode 100644
index 0000000000..bdad9390c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-rl">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..784451c336
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled select[multiple] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="appearance: none">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html
new file mode 100644
index 0000000000..6099eb271d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-lr; appearance: none">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html
new file mode 100644
index 0000000000..dfb0269b66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-rl; appearance: none">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-keyboard-selection.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-keyboard-selection.optional.html
new file mode 100644
index 0000000000..a6e26b6c48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-keyboard-selection.optional.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test &lt;select&gt; multiple keyboard selection</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select multiple size="4"></select>
+<script>
+const select = document.querySelector("select");
+for (let i = 0; i < 5; i++) {
+    const option = document.createElement("option");
+    option.textContent = `Option ${i + 1}`;
+    select.appendChild(option);
+}
+
+const arrow_left = "\uE012";
+const arrow_up = "\uE013";
+const arrow_right = "\uE014";
+const arrow_down = "\uE015";
+
+async function sendKeyEventAndWait(key) {
+  await test_driver.send_keys(document.activeElement, key);
+  // Engines differ in when the scrolling is applied so wait for a frame to be
+  // rendered.
+  await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+}
+
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
+    const scrollBlockAxis = isHorizontal ? "scrollTop" : "scrollLeft";
+
+    let nextKey = isHorizontal ? arrow_down : arrow_right;
+    let previousKey = isHorizontal ? arrow_up : arrow_left;
+
+    if (isReversedBlockFlowDirection) {
+        [nextKey, previousKey] = [previousKey, nextKey];
+    }
+
+    promise_test(async function() {
+        select.selectedIndex = 0;
+        select.style.writingMode = writingMode;
+        this.add_cleanup(() => {
+            select.scrollTop = 0;
+            select.scrollLeft = 0;
+            select.removeAttribute("style");
+        });
+
+        assert_equals(select.value, "Option 1");
+        assert_equals(select[scrollBlockAxis], 0);
+
+        select.focus();
+
+        assert_equals(document.activeElement, select);
+
+        await sendKeyEventAndWait(previousKey);
+        assert_equals(select.value, "Option 1");
+        assert_equals(select[scrollBlockAxis], 0);
+
+        await sendKeyEventAndWait(nextKey);
+        assert_equals(select.value, "Option 2");
+        assert_equals(select[scrollBlockAxis], 0);
+
+        for (let i = 0; i < select.size - 1; i++) {
+            await sendKeyEventAndWait(nextKey);
+        }
+
+        assert_equals(select.value, "Option 5");
+
+        if (!isReversedBlockFlowDirection) {
+            assert_true(select[scrollBlockAxis] > 0);
+        } else {
+            assert_true(select[scrollBlockAxis] < 0);
+        }
+
+        await sendKeyEventAndWait(previousKey);
+        assert_equals(select.value, "Option 4");
+
+        if (!isReversedBlockFlowDirection) {
+            assert_true(select[scrollBlockAxis] > 0);
+        } else {
+            assert_true(select[scrollBlockAxis] < 0);
+        }
+    }, `select[multiple][style="writing-mode: ${writingMode}"] supports keyboard navigation`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-options-visual-order.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-options-visual-order.html
new file mode 100644
index 0000000000..359c09279e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-options-visual-order.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test &lt;select&gt; multiple attribute options visual order</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select multiple size="4"></select>
+<script>
+const select = document.querySelector("select");
+for (let i = 0; i < 4; i++) {
+    const option = document.createElement("option");
+    option.textContent = `Option ${i + 1}`;
+    select.appendChild(option);
+}
+
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
+
+    promise_test(async function() {
+        select.style.writingMode = writingMode;
+        this.add_cleanup(() => {
+            select.removeAttribute("style");
+        });
+
+        const elementBox = select.getBoundingClientRect();
+        const computedStyle = getComputedStyle(select);
+
+        const borderAndPaddingTop = parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.paddingTop);
+        const borderAndPaddingRight = parseFloat(computedStyle.borderRightWidth) + parseFloat(computedStyle.paddingRight);
+        const borderAndPaddingBottom = parseFloat(computedStyle.borderBottomWidth) + parseFloat(computedStyle.paddingBottom);
+        const borderAndPaddingLeft = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.paddingLeft);
+
+        const contentX = elementBox.x + borderAndPaddingLeft;
+        const contentY = elementBox.y + borderAndPaddingTop;
+        const contentWidth = elementBox.width - borderAndPaddingLeft - borderAndPaddingRight;
+        const contentHeight = elementBox.height - borderAndPaddingTop - borderAndPaddingBottom;
+
+        const logicalOptionHeight = (isHorizontal ? contentHeight : contentWidth) / select.size;
+
+        let currentX = contentX + (isHorizontal ? contentWidth : logicalOptionHeight) / 2;
+        let currentY = contentY + (isHorizontal ? logicalOptionHeight : contentHeight) / 2;
+
+        for (let i = 0; i < select.size; i++) {
+            await new test_driver.Actions()
+                .pointerMove(Math.round(currentX), Math.round(currentY))
+                .pointerDown()
+                .pointerUp()
+                .send();
+
+            assert_equals(
+                select.value,
+                select.options[isReversedBlockFlowDirection ? (select.size - i - 1) : i].value,
+                "options are in visually incorrect order"
+            );
+
+            if (isHorizontal) {
+                currentY += logicalOptionHeight;
+            } else {
+                currentX += logicalOptionHeight;
+            }
+        }
+    }, `select[multiple][style="writing-mode: ${writingMode}"] has visually correct option order`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html
new file mode 100644
index 0000000000..ffaba9fe55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area">
+<title>Test &lt;select&gt; multiple attribute scroll progression</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select multiple size="5"></select>
+<script>
+const select = document.querySelector("select");
+for (let i = 0; i < 100; i++) {
+    const option = document.createElement("option");
+    option.textContent = `Option ${i + 1}`;
+    select.appendChild(option);
+}
+
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const scrollBlockAxis = (() => {
+        switch (writingMode) {
+        case "horizontal-tb":
+            return "scrollTop";
+        case "vertical-lr":
+        case "sideways-lr":
+        case "vertical-rl":
+        case "sideways-rl":
+            return "scrollLeft";
+        }
+    })();
+    const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop";
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const clientBlock = isHorizontal ? "clientHeight" : "clientWidth";
+    const clientInline = isHorizontal ? "clientWidth" : "clientHeight";
+    const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth";
+    const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight";
+
+    test(t => {
+        select.scrollTop = select.scrollLeft = 0;
+        select.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            select.removeAttribute("style");
+            select.scrollTop = select.scrollLeft = 0;
+        });
+
+        assert_true(
+            select[scrollBlock] > select[clientBlock],
+            "select should be scrollable in block axis"
+        );
+        assert_equals(
+            select[scrollInline], select[clientInline],
+            "select should not be scrollable in inline axis"
+        );
+
+        assert_equals(
+            select[scrollBlockAxis], 0,
+            `scrolling is initially at block start for writing-mode: ${writingMode}`
+        );
+
+        const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
+        select[scrollBlockAxis] = 100;
+        if (!isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] > 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollBlockAxis] = -100;
+        if (isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] < 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollInlineAxis] = 100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}`
+        );
+        select[scrollInlineAxis] = -100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}`
+        );
+    }, `select[multiple][style="writing-mode: ${writingMode}"] scrolls correctly`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html
new file mode 100644
index 0000000000..d70e018da7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area">
+<title>Test &lt;select&gt; size attribute scroll progression and sizing</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select size="5"></select>
+<script>
+const select = document.querySelector("select");
+for (let i = 0; i < 100; i++) {
+    const option = document.createElement("option");
+    option.textContent = `Option ${i + 1}`;
+    select.appendChild(option);
+}
+
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const scrollBlockAxis = (() => {
+        switch (writingMode) {
+        case "horizontal-tb":
+            return "scrollTop";
+        case "vertical-lr":
+        case "sideways-lr":
+        case "vertical-rl":
+        case "sideways-rl":
+            return "scrollLeft";
+        }
+    })();
+    const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop";
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const clientBlock = isHorizontal ? "clientHeight" : "clientWidth";
+    const clientInline = isHorizontal ? "clientWidth" : "clientHeight";
+    const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth";
+    const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight";
+
+    const select = document.querySelector("select");
+
+    test(t => {
+        select.scrollTop = select.scrollLeft = 0;
+        select.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            select.removeAttribute("style");
+            select.scrollTop = select.scrollLeft = 0;
+        });
+
+        assert_true(
+            select[scrollBlock] > select[clientBlock],
+            "select should be scrollable in block axis"
+        );
+        assert_equals(
+            select[scrollInline], select[clientInline],
+            "select should not be scrollable in inline axis"
+        );
+
+        assert_equals(
+            select[scrollBlockAxis], 0,
+            `scrolling is initially at block start for writing-mode: ${writingMode}`
+        );
+
+        const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
+        select[scrollBlockAxis] = 100;
+        if (!isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] > 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollBlockAxis] = -100;
+        if (isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] < 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollInlineAxis] = 100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}`
+        );
+        select[scrollInlineAxis] = -100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}`
+        );
+    }, `select[size][style="writing-mode: ${writingMode}"] scrolls correctly`);
+
+    test(t => {
+        select.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            select.removeAttribute("style");
+            select.size = 5;
+        });
+
+        let prevBlockSize = select[clientBlock];
+        let prevInlineSize = select[clientInline];
+        select.size = 10;
+        assert_true(
+            select[clientBlock] > prevBlockSize,
+            `${clientBlock} increased when increasing size`
+        );
+        assert_equals(
+            select[clientInline], prevInlineSize,
+            `${clientInline} did not change when increasing size`
+        );
+
+        prevBlockSize = select[clientBlock];
+        prevInlineSize = select[clientInline];
+        select.size = 8;
+        assert_true(
+            select[clientBlock] < prevBlockSize,
+            `${clientBlock} decreased when decreasing size`
+        );
+        assert_equals(
+            select[clientInline], prevInlineSize,
+            `${clientInline} did not change when decreasing size`
+        );
+    }, `select[size][style="writing-mode: ${writingMode}"] sizing works correctly`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/text-input-baseline.html b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-baseline.html
new file mode 100644
index 0000000000..35f44a6dc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-baseline.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<link rel="author" title="Di Zhang" href="dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-baselines">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<title>CSS Writing Modes: Test that typing inside text inputs shouldn't change text baseline</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+input, span {
+  font-size: 30px/1 Ahem;
+}
+</style>
+<div id="container">
+<span id="testText">foo</span>
+<input id="testInput">
+</div>
+
+<script>
+for (const inputType of ["text", "password", "search", "number", "email", "tel", "url"]) {
+    testInput.type = inputType;
+    for (const writingMode of ["vertical-lr", "vertical-rl", "horizontal-tb"]) {
+        if (!CSS.supports("writing-mode", writingMode))
+            continue;
+        promise_test(async t => {
+            container.style.writingMode = writingMode;
+            t.add_cleanup(() => {
+                container.removeAttribute("style");
+                testInput.value = '';
+            });
+            const { top: beforeInputTop, right: beforeInputRight } = testInput.getBoundingClientRect();
+            const { top: beforeTextTop, right: beforeTextRight } = testText.getBoundingClientRect();
+
+            testInput.value = '11'
+
+            const { top: afterInputTop, right: afterInputRight } = testInput.getBoundingClientRect();
+            const { top: afterTextTop, right: afterTextRight } = testText.getBoundingClientRect();
+
+            assert_approx_equals(beforeInputTop, afterInputTop, 1, `Typing in ${inputType} should not move input position top`);
+            assert_approx_equals(beforeInputRight, afterInputRight, 1, `Typing in ${inputType} should not move input position right`);
+            assert_approx_equals(beforeTextTop, afterTextTop, 1, `Typing in ${inputType} should not move text position top`);
+            assert_approx_equals(beforeTextRight, afterTextRight, 1, `Typing in ${inputType} should not move text position right`);
+        }, `input[type=${inputType}] in ${writingMode}: typing characters in input should not change location of elements within container.`);
+    }
+}
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/text-input-block-size.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-block-size.optional.html
new file mode 100644
index 0000000000..680e0b6532
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-block-size.optional.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="flags" content="ahem">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<title>Test block-size of text-based inputs is consistent across writing-modes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+    input {
+        appearance: none;
+        font: 30px/1 Ahem;
+    }
+</style>
+
+<input id="horizontalInput">
+<input id="verticalInput">
+
+<script>
+for (const inputType of ["text", "email", "password", "search", "tel", "url", "number"]) {
+    horizontalInput.type = inputType;
+    verticalInput.type = inputType;
+    for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+        if (!CSS.supports(`writing-mode: ${writingMode}`))
+            continue;
+        test(t => {
+            verticalInput.style.writingMode = writingMode;
+            t.add_cleanup(() => {
+                verticalInput.removeAttribute("style");
+            });
+
+            const verticalRect = verticalInput.getBoundingClientRect();
+            assert_true(
+                verticalRect.width < verticalRect.height,
+                "input has correct aspect ratio for default input size"
+            );
+
+            const horizontalRect = horizontalInput.getBoundingClientRect();
+            assert_equals(
+                Math.round(verticalRect.width),
+                Math.round(horizontalRect.height),
+                "width of vertical input matches height of horizontal input"
+            );
+        }, `Test input[type=${inputType}] block-size in writing-mode: ${writingMode}`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html
new file mode 100644
index 0000000000..601acb17e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test that typing lots of characters inside vertical text inputs doesn't cause scroll position changes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+    .spacer {
+        height: 100vh;
+    }
+    input {
+        font-family: monospace;
+
+        /* Use an explicit whole-number-of-pixels height, to avoid tripping
+           Mozilla bug 1851066, regarding fractional scroll positions
+           triggering an async 1px adjustment to scrollTop. We can remove this
+           once that bug is fixed.
+           (Without this hack, the input element may end up with a height
+           that's a fractional number of pixels, depending on the font.
+           And then this test's call to 'scrollIntoView' puts us at a
+           fractional scroll-position, to bottom-align the input element. And
+           that's sufficient to trigger bug 1851066 and get an asynchronous 1px
+           adjustment to scrollTop, which this test doesn't expect.
+        */
+        height: 200px;
+    }
+</style>
+
+<div class="spacer"></div>
+<input id="testInput">
+<div class="spacer"></div>
+
+<script>
+for (const inputType of ["text", "password", "search", "number"]) {
+    testInput.type = inputType;
+    for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+        if (!CSS.supports("writing-mode", writingMode))
+            continue;
+        promise_test(async t => {
+            assert_true(
+                document.documentElement.scrollHeight > document.documentElement.clientHeight,
+                "Page is scrollable"
+            );
+            testInput.style.writingMode = writingMode;
+            document.documentElement.scrollTop = 0;
+            t.add_cleanup(() => {
+                document.documentElement.scrollTop = 0;
+                testInput.value = "";
+            });
+
+            // Align input to the bottom edge
+            testInput.scrollIntoView({block: "end", inline: "nearest"});
+
+            assert_true(
+                document.documentElement.scrollTop > 0,
+                "Successfully scrolled"
+            );
+
+            const oldScrollTop = document.documentElement.scrollTop;
+
+            const numCharsToOverflow = document.documentElement.clientHeight / parseInt(getComputedStyle(testInput).fontSize);
+            const value = "1".repeat(numCharsToOverflow);
+
+            testInput.focus({ preventScroll: true });
+
+            await test_driver.send_keys(testInput, value);
+
+            assert_equals(
+                document.documentElement.scrollTop,
+                oldScrollTop,
+                "Typing lots of characters in input did not cause scrolling"
+            );
+        }, `input[type=${inputType}] in ${writingMode}: typing characters in input should not cause the page to scroll`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..79c54d5063
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-horizontal.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native textarea in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea>Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vlr.optional.html
new file mode 100644
index 0000000000..3ce811fd69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vlr.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-lr">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vrl.optional.html
new file mode 100644
index 0000000000..c5f8b4c311
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vrl.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-rl">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..be4dde195e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-horizontal.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled textarea in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="appearance: none;">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vlr.optional.html
new file mode 100644
index 0000000000..d5992962e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vlr.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-lr; appearance: none;">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vrl.optional.html
new file mode 100644
index 0000000000..cbaddc3a0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vrl.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-rl; appearance: none;">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-rows-cols-sizing.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-rows-cols-sizing.html
new file mode 100644
index 0000000000..8cd9c27d36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-rows-cols-sizing.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Textarea rows/cols size mapping in different writing modes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<textarea></textarea>
+
+<script>
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const textarea = document.querySelector("textarea");
+
+    test(t => {
+        textarea.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            textarea.removeAttribute("style");
+            textarea.removeAttribute("rows");
+        });
+
+        const rowsDimension = isHorizontal ? "height" : "width";
+        const colsDimension = isHorizontal ? "width" : "height";
+
+        let previousRect = textarea.getBoundingClientRect();
+        textarea.rows = 10;
+        assert_equals(
+            textarea.getBoundingClientRect()[colsDimension],
+            previousRect[colsDimension],
+            `${colsDimension} shouldn't change when changing rows`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.rows = 9;
+        assert_true(
+            textarea.getBoundingClientRect()[rowsDimension] < previousRect[rowsDimension],
+            `${rowsDimension} should decrease when decreasing rows`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[colsDimension],
+            previousRect[colsDimension],
+            `${colsDimension} shouldn't change when changing rows`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.rows = 11;
+        assert_true(
+            textarea.getBoundingClientRect()[rowsDimension] > previousRect[rowsDimension],
+            `${rowsDimension} should increase when increasing rows`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[colsDimension],
+            previousRect[colsDimension],
+            `${colsDimension} shouldn't change when changing rows`
+        );
+    }, `textarea[style="writing-mode: ${writingMode}"] rows attribute changes the size correctly`);
+
+    test(t => {
+        textarea.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            textarea.removeAttribute("style");
+            textarea.removeAttribute("cols");
+        });
+
+        const rowsDimension = isHorizontal ? "height" : "width";
+        const colsDimension = isHorizontal ? "width" : "height";
+
+        let previousRect = textarea.getBoundingClientRect();
+        textarea.cols = 40;
+        assert_equals(
+            textarea.getBoundingClientRect()[rowsDimension],
+            previousRect[rowsDimension],
+            `${rowsDimension} shouldn't change when changing cols`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.cols = 30;
+        assert_true(
+            textarea.getBoundingClientRect()[colsDimension] < previousRect[colsDimension],
+            `${colsDimension} should decrease when decreasing cols`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[rowsDimension],
+            previousRect[rowsDimension],
+            `${rowsDimension} shouldn't change when changing cols`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.cols = 50;
+        assert_true(
+            textarea.getBoundingClientRect()[colsDimension] > previousRect[colsDimension],
+            `${colsDimension} should increase when increasing cols`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[rowsDimension],
+            previousRect[rowsDimension],
+            `${rowsDimension} shouldn't change when changing cols`
+        );
+    }, `textarea[style="writing-mode: ${writingMode}"] cols attribute changes the size correctly`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/full-width-001.html b/testing/web-platform/tests/css/css-writing-modes/full-width-001.html
new file mode 100644
index 0000000000..cba3a08475
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/full-width-001.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: 'text-combine-upright: all' applied on a single typographic full-width unit character</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1. Full-width Characters">
+<link rel="mismatch" href="reference/full-width-001-horizontal-notref.html">
+<link rel="mismatch" href="reference/full-width-001-nofullwidth-notref.html">
+<meta content="asis should" name="flags">
+<meta name="assert" content="When 'text-combine-upright: all' and 'text-transform: full-width' are applied simultaneously on 1 single typographic unit or when 'text-combine-upright: all' is set on a full-width typographic unit character, then such typographic unit remains a full-width character.">
+
+  <!--
+  This test is the equivalent of the "2" month in the
+  <date>2010年2月23日</date> example of example 17 in
+  section 9.1.3.1 of the specification
+  -->
+
+<style>
+  div
+    {
+      font-size: 64px;
+      writing-mode: vertical-rl;
+    }
+
+  div > p
+    {
+      border: black solid 1px;
+    }
+
+  span.tcu-all
+    {
+      text-combine-upright: all;
+    }
+
+  span.full-width
+    {
+      text-transform: full-width;
+    }
+</style>
+
+</head>
+
+<body>
+
+<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
+
+<div>
+
+  <p id="test1"><span class="tcu-all full-width">&#x34;</span>月</p>
+
+  <!-- &#x34; is the ISO-Latin1 digit 4 -->
+
+  <p id="test2"><span class="tcu-all">&#xFF14;</span>月</p>
+
+  <!-- &#xFF14; is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
+
+  <p id="reference">&#xFF14;月</p>
+
+  <!-- &#xFF14; is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/full-width-002.html b/testing/web-platform/tests/css/css-writing-modes/full-width-002.html
new file mode 100644
index 0000000000..e15c51440a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/full-width-002.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: 'text-combine-upright: all' applied on 2 full-width characters</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> <!-- 2016-09-29 -->
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1. Full-width Characters">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property" title="2.1. Case Transforms: the 'text-transform' property">
+<link rel="mismatch" href="reference/full-width-002-notcu-notref.html">
+<link rel="mismatch" href="reference/full-width-002-horizontal-notref.html">
+<meta content="asis should" name="flags">
+<meta name="assert" content="When two or more full-width characters are combined, they are first converted to non-full-width characters.">
+
+  <!--
+  This test is the equivalent of the "23" day in the
+  <date>2010年2月23日</date> example of example 17 in
+  section 9.1.3.1 of the specification
+  -->
+
+<style>
+  div
+    {
+      font-size: 64px;
+      writing-mode: vertical-rl;
+    }
+
+  div > p
+    {
+      border: black solid 1px;
+    }
+
+  span.tcu-all
+    {
+      text-combine-upright: all;
+    }
+
+  span.full-width
+    {
+      text-transform: full-width;
+    }
+</style>
+</head>
+<body>
+
+<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
+
+<div>
+
+  <p id="test1"><span class="full-width tcu-all">&#x32;&#x38;</span>日</p>
+
+  <!-- &#x32; is the ISO-Latin1 digit 2 -->
+
+  <!-- &#x38; is the ISO-Latin1 digit 8 -->
+
+  <p id="test2"><span class="tcu-all">&#xFF12;&#xFF18;</span>日</p>
+
+  <!-- &#xFF12; is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
+
+  <!-- &#xFF18; is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
+
+  <p id="reference"><span class="tcu-all">28</span>日</p>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/full-width-003.html b/testing/web-platform/tests/css/css-writing-modes/full-width-003.html
new file mode 100644
index 0000000000..da0d470779
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/full-width-003.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: 'text-combine-upright: digits 2' applied on 2 full-width characters</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-fullwidth" title="9.1.3.1. Full-width Characters">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property" title="2.1. Case Transforms: the 'text-transform' property">
+<link rel="mismatch" href="reference/full-width-002-notcu-notref.html">
+<link rel="mismatch" href="reference/full-width-002-horizontal-notref.html">
+<meta content="asis should" name="flags">
+<meta name="assert" content="When two or more full-width characters are combined, they are first converted to non-full-width characters.">
+
+  <!--
+  This test is the equivalent of the "23" day in the
+  <date>2010年2月23日</date> example of example 17 in
+  section 9.1.3.1 of the specification
+  -->
+
+<style>
+  div
+    {
+      font-size: 64px;
+      writing-mode: vertical-rl;
+    }
+
+  div > p
+    {
+      border: black solid 1px;
+    }
+
+  span.tcu-digits2
+    {
+      text-combine-upright: digits 2;
+    }
+
+  span.full-width
+    {
+      text-transform: full-width;
+    }
+</style>
+</head>
+<body>
+
+<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
+
+<div>
+
+  <p id="test1"><span class="full-width tcu-digits2">&#x32;&#x38;</span>日</p>
+
+  <!-- &#x32; is the ISO-Latin1 digit 2 -->
+
+  <!-- &#x38; is the ISO-Latin1 digit 8 -->
+
+  <p id="test2"><span class="tcu-digits2">&#xFF12;&#xFF18;</span>日</p>
+
+  <!-- &#xFF12; is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
+
+  <!-- &#xFF18; is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
+
+  <p id="reference"><span class="tcu-digits2">28</span>日</p>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/height-width-inline-non-replaced-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/height-width-inline-non-replaced-vlr-003.xht
new file mode 100644
index 0000000000..6671d48ab8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/height-width-inline-non-replaced-vlr-003.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: height and width - inline non-replaced element in vertical writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-width" title="10.3.1 Inline, non-replaced elements" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-non-replaced" title="10.6.1 Inline, non-replaced elements" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that height and width declarations do not apply to inline non-replaced elements in vertical writing-modes." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#block
+    {
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 2em;
+      width: 2em;
+      writing-mode: vertical-lr;
+    }
+
+  div#inline
+    {
+      background-color: red;
+      color: red;
+      display: inline;
+      height: 2em;
+      width: 2em;
+    }
+
+  div#overlapping-green
+    {
+      background-color: green;
+      bottom: 200px;
+      height: 100px;
+      position: relative;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="block">
+    <div id="inline">A</div>
+  </div>
+
+  <div id="overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/height-width-inline-non-replaced-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/height-width-inline-non-replaced-vrl-002.xht
new file mode 100644
index 0000000000..492cbf3545
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/height-width-inline-non-replaced-vrl-002.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: height and width - inline non-replaced element in vertical writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-width" title="10.3.1 Inline, non-replaced elements" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-non-replaced" title="10.6.1 Inline, non-replaced elements" />
+  <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that height and width declarations do not apply to inline non-replaced elements in vertical writing-modes." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#block
+    {
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 2em;
+      width: 4em;
+      writing-mode: vertical-rl;
+    }
+
+  div#inline
+    {
+      background-color: red;
+      color: red;
+      display: inline;
+      height: 2em;
+      width: 4em;
+    }
+
+  div#overlapping-green
+    {
+      background-color: green;
+      bottom: 200px;
+      height: 100px;
+      left: 300px;
+      position: relative;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="block">
+    <div id="inline">A</div>
+  </div>
+
+  <div id="overlapping-green"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-003-ref.xht
new file mode 100644
index 0000000000..24130d1578
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-003-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+    }
+
+  body
+    {
+      height: 100%;
+      margin: 0px;
+    }
+
+  div
+    {
+      height: 100%;
+    }
+
+  img
+    {
+      margin-left: 1em;
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      height: 100%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+    <div><img src="support/pass-cdts-horiz-rule.png" width="260" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="10" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-003.xht
new file mode 100644
index 0000000000..5aabb7297f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-003.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: horizontal rule - 'vertical-lr' and orthogonal flow</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="horizontal-rule-vlr-003-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that an horizontal rule (&lt;hr&gt; element) in 'vertical-lr' writing-mode must be rendered as a vertical rule." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      margin: 0px;
+    }
+
+  hr
+    {
+      background-color: green;
+      border: transparent none 0px;
+      height: auto;
+      margin: 0px;
+      width: 10px;
+    }
+
+  div#overlapped-red
+    {
+      background-color: red;
+      height: 100%;
+      position: relative;
+      right: 10px;
+      width: 10px;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-horiz-rule.png" width="260" height="36" alt="Image download support must be enabled" /></p>
+
+  <hr></hr>
+
+  <div id="overlapped-red"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-005.xht
new file mode 100644
index 0000000000..fbc02bcac5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vlr-005.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: horizontal rule - 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="horizontal-rule-vrl-004-ref.xht" />
+
+  <meta content="This test checks that an horizontal rule (&lt;hr&gt; element) with 'vertical-lr' writing-mode but inside an 'horizontal-tb' writing-mode context must be rendered as an horizontal rule." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  hr
+    {
+      background-color: green;
+      border: transparent none 0px;
+      height: 10px;
+      margin: 0px;
+      width: 100%;
+      writing-mode: vertical-lr;
+    }
+
+  div#overlapped-red
+    {
+      background-color: red;
+      bottom: 10px;
+      height: 10px;
+      position: relative;
+      width: auto;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an horizontal green bar and <strong>no red</strong>.</p>
+
+  <hr></hr>
+
+  <div id="overlapped-red"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-002-ref.xht
new file mode 100644
index 0000000000..b0e9f48f0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-002-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+    }
+
+  body
+    {
+      direction: rtl;
+      height: 100%;
+      margin: 0px;
+    }
+
+  div
+    {
+      height: 100%;
+    }
+
+  img
+    {
+      margin-right: 1em;
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      height: 100%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+    <div><img src="support/pass-cdts-horiz-rule.png" width="260" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="10" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-002.xht
new file mode 100644
index 0000000000..4f0ab1cd06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-002.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: horizontal rule - 'vertical-rl' and orthogonal flow</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="horizontal-rule-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that an horizontal rule (&lt;hr&gt; element) in 'vertical-rl' writing-mode must be rendered as a vertical rule." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      margin: 0px;
+    }
+
+  hr
+    {
+      background-color: green;
+      border: transparent none 0px;
+      height: auto;
+      margin: 0px;
+      width: 10px;
+    }
+
+  div#overlapped-red
+    {
+      background-color: red;
+      height: 100%;
+      left: 10px;
+      position: relative;
+      width: 10px;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-horiz-rule.png" width="260" height="36" alt="Image download support must be enabled" /></p>
+
+  <hr></hr>
+
+  <div id="overlapped-red"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-004-ref.xht
new file mode 100644
index 0000000000..bff5b4aa7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-004-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  hr
+    {
+      background-color: green;
+      border: transparent none 0px;
+      height: 10px;
+      margin: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an horizontal green bar and <strong>no red</strong>.</p>
+
+  <hr></hr>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-004.xht
new file mode 100644
index 0000000000..a394a1ae8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/horizontal-rule-vrl-004.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: horizontal rule - 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="match" href="horizontal-rule-vrl-004-ref.xht" />
+
+  <meta content="This test checks that an horizontal rule (&lt;hr&gt; element) with 'vertical-rl' writing-mode but inside an 'horizontal-tb' writing-mode context must be rendered as an horizontal rule." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  hr
+    {
+      background-color: green;
+      border: transparent none 0px;
+      height: 10px;
+      margin: 0px;
+      width: 100%;
+      writing-mode: vertical-rl;
+    }
+
+  div#overlapped-red
+    {
+      background-color: red;
+      bottom: 10px;
+      height: 10px;
+      position: relative;
+      width: auto;
+      z-index: -1;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an horizontal green bar and <strong>no red</strong>.</p>
+
+  <hr></hr>
+
+  <div id="overlapped-red"></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-001.html b/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-001.html
new file mode 100644
index 0000000000..08500537f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html style="writing-mode: vertical-lr;">
+<title>CSS Test: intrinsic size contributions of images in vertical writing mode</title>
+<meta name="assert" content="The image's parent element's intrinsic inline size should be contributed to by the image's height, not the image's width">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
+<link rel="author" title="Zhang Junzhi" href="mailto:zjz@zjz.name">
+<link rel="match" href="img-intrinsic-size-contribution-ref.html">
+
+<style>
+* { margin: 0; padding: 0; }
+</style>
+
+<div style="border: 1px solid blue; display: grid; height: 150px;">
+	<div style="border: 1px solid orange;">
+		<img src="support/blue-200x100.png">
+	</div>
+</div>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-002.html b/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-002.html
new file mode 100644
index 0000000000..df0ccf2093
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html style="writing-mode: vertical-lr;">
+<title>CSS Test: intrinsic size contributions of images in vertical writing mode (with the image itself in horizontal writing mode)</title>
+<meta name="assert" content="The image's parent element's intrinsic inline size should be contributed to by the image's height, not the image's width">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
+<link rel="author" title="Zhang Junzhi" href="mailto:zjz@zjz.name">
+<link rel="match" href="img-intrinsic-size-contribution-ref.html">
+
+<style>
+* { margin: 0; padding: 0; }
+</style>
+
+<div style="border: 1px solid blue; display: grid; height: 150px;">
+	<div style="border: 1px solid orange;">
+		<img src="support/blue-200x100.png" style="writing-mode: horizontal-tb;">
+	</div>
+</div>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-ref.html b/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-ref.html
new file mode 100644
index 0000000000..ffda7d62ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/img-intrinsic-size-contribution-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Test Reference: intrinsic size contributions of images in vertical writing mode</title>
+<link rel="author" title="Zhang Junzhi" href="mailto:zjz@zjz.name">
+
+<style>
+* { margin: 0; padding: 0; }
+</style>
+
+<div style="border: 1px solid blue; height: 150px; width: 202px;">
+	<div style="border: 1px solid orange; height: 148px;">
+		<img src="support/blue-200x100.png">
+	</div>
+</div>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inheritance.html b/testing/web-platform/tests/css/css-writing-modes/inheritance.html
new file mode 100644
index 0000000000..143571c9d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inheritance.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Writing Modes properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#property-index">
+<meta name="assert" content="Properties inherit or not according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+assert_inherited('direction', 'ltr', 'rtl');
+assert_inherited('text-combine-upright', 'none', 'all');
+assert_inherited('text-orientation', 'mixed', 'upright');
+assert_not_inherited('unicode-bidi', 'normal', 'embed');
+assert_inherited('writing-mode', 'horizontal-tb', 'vertical-rl');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-002-ref.xht
new file mode 100644
index 0000000000..ce478e7499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-002-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-07-20 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img
+    {
+      padding-left: 90px; /* 60 px (padding-left) + 30px (the position difference of box) */
+    }
+
+    img + br + img
+    {
+      padding-left: 60px; /* 60 px (padding-left) */
+    }
+
+    img + br + img + img
+    {
+      padding-left: 0;
+    }
+
+    img + br + img + img + br + img
+    {
+      padding-left: 105px; /* 60 px (padding-left) + 45px (the position difference of box)
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+<div>
+   <img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><!--
+--><img src="support/swatch-yellow.png" width="120" height="120" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-002.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-002.xht
new file mode 100644
index 0000000000..41141e3de4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-002.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-block alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+    <link rel="match" href="inline-block-alignment-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    div#inline-block
+    {
+      display: inline-block;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#first-line-box
+    {
+      color: yellow;
+    }
+
+    span#last-line-box
+    {
+      color: blue;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="rl-mixed">A<div id="inline-block">
+    <span class="block-descendant" id="first-line-box">F</span>
+    <span class="block-descendant" id="last-line-box">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-003-ref.xht
new file mode 100644
index 0000000000..1867adcc0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-003-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-07-20 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img
+    {
+      padding-left: 210px; /* 60 px (padding-left) + 120px (blue box width) + 30px (the position difference of box) */
+    }
+
+    img + br + img
+    {
+      padding-left: 60px; /* 60 px (padding-left) */
+    }
+
+    img + br + img + img
+    {
+      padding-left: 0;
+    }
+
+    img + br + img + img + br + img
+    {
+      padding-left: 225px; /* 60 px (padding-left) + 120px (blue box width) + 45px (the position difference of box)
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+<div>
+   <img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-yellow.png" width="120" height="120" alt="Image download support must be enabled" /><!--
+--><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-003.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-003.xht
new file mode 100644
index 0000000000..b2a099175f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-003.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-block alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+    <link rel="match" href="inline-block-alignment-003-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-mixed
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+
+    div#inline-block
+    {
+      display: inline-block;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#first-line-box
+    {
+      color: yellow;
+    }
+
+    span#last-line-box
+    {
+      color: blue;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="lr-mixed">A<div id="inline-block">
+    <span class="block-descendant" id="first-line-box">F</span>
+    <span class="block-descendant" id="last-line-box">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-004.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-004.xht
new file mode 100644
index 0000000000..1ade276db7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-004.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-block alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+    <link rel="match" href="inline-block-alignment-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+
+    div#inline-block
+    {
+      display: inline-block;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#first-line-box
+    {
+      color: yellow;
+    }
+
+    span#last-line-box
+    {
+      color: blue;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="rl-upright">A<div id="inline-block">
+    <span class="block-descendant" id="first-line-box">F</span>
+    <span class="block-descendant" id="last-line-box">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-005.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-005.xht
new file mode 100644
index 0000000000..fb985a6d28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-005.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-block alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+    <link rel="match" href="inline-block-alignment-003-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-upright
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+    }
+
+    div#inline-block
+    {
+      display: inline-block;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#first-line-box
+    {
+      color: yellow;
+    }
+
+    span#last-line-box
+    {
+      color: blue;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="lr-upright">A<div id="inline-block">
+    <span class="block-descendant" id="first-line-box">F</span>
+    <span class="block-descendant" id="last-line-box">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-006-ref.xht
new file mode 100644
index 0000000000..cc6dbd4d1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-006-ref.xht
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-07-21 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+
+  img
+  {
+    padding-left: 84px; /* 60px (padding-left) + 24px (the left edge position of box) */
+    vertical-align: top;
+  }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div>
+    <img src="support/swatch-fuchsia.png" width="48" height="60" alt="Image download support must be enabled" /><br /><!--
+ --><img src="support/swatch-fuchsia.png" width="216" height="120" alt="Image download support must be enabled" /><br /><!--
+ --><img src="support/swatch-fuchsia.png" width="24" height="30" alt="Image download support must be enabled" />
+  </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-006.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-006.xht
new file mode 100644
index 0000000000..a3aad3ac17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-006.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline block alignment - alphabetical alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+    <link rel="match" href="inline-block-alignment-006-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-sideways
+    {
+      color: fuchsia;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-rl;
+      text-orientation: sideways;
+    }
+
+    div#inline-block
+    {
+      display: inline-block;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#fuchsia30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-sideways">É<div id="inline-block">
+    <span class="block-descendant">B</span>
+    <span class="block-descendant last-line-box">É</span>
+  </div><span id="fuchsia30">É</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-007-ref.xht
new file mode 100644
index 0000000000..d5bb56da8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-007-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" />
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+
+  img
+  {
+    vertical-align: top;
+  }
+
+  .ignore {
+    float: left;
+    height: 120px;
+    width: 120px;
+    background: silver;
+    margin: 60px 24px 30px 60px;
+  ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of a <strong>single blue irregular polygon</strong> is straight and unbroken.</p>
+
+  <div>
+    <div class="ignore"></div>
+    <img src="support/swatch-blue.png" width="48" height="60" alt="Image download support must be enabled" /><br /><!--
+ --><img src="support/swatch-blue.png" width="96px" height="120" alt="Image download support must be enabled" /><br /><!--
+ --><img src="support/swatch-blue.png" width="24" height="30" alt="Image download support must be enabled" />
+  </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-007.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-007.xht
new file mode 100644
index 0000000000..3691414454
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-007.xht
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline block alignment - alphabetical alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+    <link rel="match" href="inline-block-alignment-007-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-sideways
+    {
+      color: blue;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+    }
+
+    div#inline-block
+    {
+      display: inline-block;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    #small
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    .ignore { color: silver; }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of a <strong>single blue irregular polygon</strong> is straight and unbroken.</p>
+
+  <div id="lr-sideways">É<div id="inline-block">
+    <span class="block-descendant ignore">B</span>
+    <span class="block-descendant last-line-box">É</span>
+  </div><span id="small">É</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vlr-003.xht
new file mode 100644
index 0000000000..53e98c1e1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vlr-003.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <title>CSS Writing Modes Test: text baseline alignment of inline-block in orthogonal flow</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-06-12 -->
+    <link rel="help" title="4.3 Atomic Inline Baselines" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="match" href="inline-block-alignment-orthogonal-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' of the containing block of an inline-block in orthogonal flow is 'horizontal-tb', then the dominant baseline used is the alphabetical baseline. In this test, the inline-block should be 'sitting' on the alphabetical baseline, therefore creating a straight and unbroken bottom edge." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#horiz-tb
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: horizontal-tb;
+    }
+
+    div#inline-block-90
+    {
+      background-color: orange; /* we want the padding-bottom to be painted with orange color */
+      display: inline-block;
+      font-size: 1.5em; /* computes to 90px */
+      /*
+        such padding-bottom declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+      padding-bottom: 0.5em; /* computes to 45px */
+      text-orientation: mixed;
+      writing-mode: vertical-lr;
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>bottom edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="horiz-tb">É<div id="inline-block-90">
+      <span class="block-descendant">L</span>
+      <span class="block-descendant">Z</span>
+    </div><span id="orange30">É</span>
+  </div>
+
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vlr-005.xht
new file mode 100644
index 0000000000..b9e3690a7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vlr-005.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <title>CSS Writing Modes Test: text baseline alignment of inline-block in orthogonal flow</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-06-12 -->
+    <link rel="help" title="4.3 Atomic Inline Baselines" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="match" href="inline-block-alignment-orthogonal-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' of the containing block of an inline-block in orthogonal flow is 'horizontal-tb', then the dominant baseline used is the alphabetical baseline. In this test, the inline-block should be 'sitting' on the alphabetical baseline, therefore creating a straight and unbroken bottom edge." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#horiz-tb
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: horizontal-tb;
+    }
+
+    div#inline-block-90
+    {
+      background-color: orange; /* we want the padding-bottom to be painted with orange color */
+      display: inline-block;
+      font-size: 1.5em; /* computes to 90px */
+      /*
+        such padding-bottom declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+      padding-bottom: 0.5em; /* computes to 45px */
+      text-orientation: upright;
+      writing-mode: vertical-lr;
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>bottom edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="horiz-tb">É<div id="inline-block-90">
+      <span class="block-descendant">L</span>
+      <span class="block-descendant">Z</span>
+    </div><span id="orange30">É</span>
+  </div>
+
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-002-ref.xht
new file mode 100644
index 0000000000..5766808360
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-002-ref.xht
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-06-12 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: bottom;
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>bottom edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div><img src="support/swatch-orange.png" width="60" height="48" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="180" height="135" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="30" height="24" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-002.xht
new file mode 100644
index 0000000000..a77c0cc3b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-002.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <title>CSS Writing Modes Test: text baseline alignment of inline-block in orthogonal flow</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-06-12 -->
+    <link rel="help" title="4.3 Atomic Inline Baselines" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="match" href="inline-block-alignment-orthogonal-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' of the containing block of an inline-block in orthogonal flow is 'horizontal-tb', then the dominant baseline used is the alphabetical baseline. In this test, the inline-block should be 'sitting' on the alphabetical baseline, therefore creating a straight and unbroken bottom edge." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#horiz-tb
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: horizontal-tb;
+    }
+
+    div#inline-block-90
+    {
+      background-color: orange; /* we want the padding-bottom to be painted with orange color */
+      display: inline-block;
+      font-size: 1.5em; /* computes to 90px */
+      /*
+        such padding-bottom declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+      padding-bottom: 0.5em; /* computes to 45px */
+      text-orientation: mixed;
+      writing-mode: vertical-rl;
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>bottom edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="horiz-tb">É<div id="inline-block-90">
+      <span class="block-descendant">L</span>
+      <span class="block-descendant">Z</span>
+    </div><span id="orange30">É</span>
+  </div>
+
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-004.xht
new file mode 100644
index 0000000000..d26684f3a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-orthogonal-vrl-004.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <title>CSS Writing Modes Test: text baseline alignment of inline-block in orthogonal flow</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-06-12 -->
+    <link rel="help" title="4.3 Atomic Inline Baselines" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="match" href="inline-block-alignment-orthogonal-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' of the containing block of an inline-block in orthogonal flow is 'horizontal-tb', then the dominant baseline used is the alphabetical baseline. In this test, the inline-block should be 'sitting' on the alphabetical baseline, therefore creating a straight and unbroken bottom edge." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#horiz-tb
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: horizontal-tb;
+    }
+
+    div#inline-block-90
+    {
+      background-color: orange; /* we want the padding-bottom to be painted with orange color */
+      display: inline-block;
+      font-size: 1.5em; /* computes to 90px */
+      /*
+        such padding-bottom declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+      padding-bottom: 0.5em; /* computes to 45px */
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>bottom edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="horiz-tb">É<div id="inline-block-90">
+      <span class="block-descendant">L</span>
+      <span class="block-descendant">Z</span>
+    </div><span id="orange30">É</span>
+  </div>
+
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-slr-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-slr-009-ref.xht
new file mode 100644
index 0000000000..1c98878f18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-slr-009-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-12 -->
+ <meta name="flags" content="image" />
+ <style type="text/css"><![CDATA[
+ img
+ {
+  padding-left: 252px; /* 60px (padding-left) + 120px (B) + 96px (?) - 24px (?) == 252px */
+  vertical-align: top;
+ }
+
+ img + br + img
+ {
+  padding-left: 60px; /* 60px (padding-left) */
+ }
+
+ img + br + img + br + img
+ {
+  padding-left: 228px; /* 60px (padding-left) + 120px (B) + 96px (?) - 48px == 228px */
+ }
+ ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div><img src="support/swatch-teal.png" width="24" height="30" alt="Image download support must be enabled" /><br /><img src="support/swatch-teal.png" width="216" height="120" alt="Image download support must be enabled" /><br /><img src="support/swatch-teal.png" width="48" height="60" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-slr-009.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-slr-009.xht
new file mode 100644
index 0000000000..b21704b4c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-slr-009.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Writing Modes Test: inline block alignment - alphabetical alignment with vertical layout</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-12 -->
+  <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-4/#replaced-baselines" />
+  <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+  <link rel="match" href="inline-block-alignment-slr-009-ref.xht" />
+  <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'sideways-lr', then the alphabetic baseline is used as the dominant baseline." />
+  <meta name="flags" content="ahem" />
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+    div#slr
+  {
+    color: teal;
+    font: 60px/1 Ahem; /* computes to 60px/60px */
+    writing-mode: sideways-lr;
+  }
+
+  div#inline-block
+  {
+    display: inline-block;
+    padding-left: 0.5em; /* computes to 60px */
+    font-size: 2em; /* computes to 120px */
+    /*
+      such padding-left declaration is arbitrary and only serve to make the
+      test a bit more challenging.
+    */
+  }
+
+  span.block-descendant
+  {
+    display: block;
+  }
+
+  span#fuchsia30
+  {
+    padding-right: 4em; /* computes to 120px */
+    font-size: 0.5em; /* computes to 30px */
+    /*
+      such padding-right declaration is arbitrary and only serve to make the
+      test a bit more challenging.
+    */
+  }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div id="slr">É<div id="inline-block">
+  <span class="block-descendant">B</span>
+  <span class="block-descendant last-line-box">É</span>
+</div><span id="fuchsia30">É</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-srl-008.xht b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-srl-008.xht
new file mode 100644
index 0000000000..909dc0e9a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-block-alignment-srl-008.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline block alignment - alphabetical alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-06 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-4/#replaced-baselines" />
+    <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />
+    <link rel="match" href="inline-block-alignment-006-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'sideways-rl', then the alphabetic baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      color: fuchsia;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: sideways-rl;
+    }
+
+    div#inline-block
+    {
+      display: inline-block;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.block-descendant
+    {
+      display: block;
+    }
+
+    span#fuchsia30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="srl">É<div id="inline-block">
+    <span class="block-descendant">B</span>
+    <span class="block-descendant last-line-box">É</span>
+  </div><span id="fuchsia30">É</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-box-border-vlr-001.html b/testing/web-platform/tests/css/css-writing-modes/inline-box-border-vlr-001.html
new file mode 100644
index 0000000000..453a8a51c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-box-border-vlr-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="author" href="kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property">
+<link rel="match" href="reference/inline-box-border-vlr-001.html">
+<meta content="This test checks that block direciton borders applied to inline boxes do not affect the height of the line box, in vertical-lr writing-mode. The border is set to transparent to make this a ref-test.">
+<style>
+html {
+  margin: 0;
+  font-size: 20px;
+}
+body {
+  margin: 1em;
+  border: 1px solid blue;
+}
+body > div {
+  margin-bottom: 2em;
+  border: 1px solid black;
+}
+</style>
+<body>
+  <div style="writing-mode: vertical-lr; height: 1em">
+    <div><span>a</span></div>
+  </div>
+  <div style="writing-mode: vertical-lr; height: 1em">
+    <div><span style="border-left: 20px solid transparent">a</span></div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins-ref.html b/testing/web-platform/tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins-ref.html
new file mode 100644
index 0000000000..5bb6b9a95c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<style>
+.container {
+  border: 1px dashed blue;
+  height: 200px;
+  width: 560px;
+  box-sizing: content-box;
+}
+.container > div {
+  float: left;
+  width: 40px;
+  margin:       10px 20px 30px 40px;
+  border-width: 20px 30px 40px 50px;
+  padding:      30px 40px 50px 60px;
+  border-style: dotted;
+}
+.container > div:nth-child(1) { background: yellow; }
+.container > div:nth-child(2) { background: purple; }
+
+</style>
+
+<div class="container">
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins.html b/testing/web-platform/tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins.html
new file mode 100644
index 0000000000..dd0a596f3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"
+  title="3.1 Block Flow Direction: the writing-mode property">
+<link rel="match" href="inline-box-orthogonal-child-with-margins-ref.html">
+<meta content="This test checks that the correct margins of orthogonal children are used to compute the container's shrink to fit size. The test PASS if both children are rendered inside the container's blue border." name="assert" />
+ <style>
+.container {
+  border: 1px dashed blue;
+  height: 200px;
+  display: inline-block;
+}
+.container > div {
+  float: left;
+  width: 40px;
+  margin:       10px 20px 30px 40px;
+  border-width: 20px 30px 40px 50px;
+  padding:      30px 40px 50px 60px;
+  border-style: dotted;
+}
+.container > div:nth-child(1) { background: yellow; }
+.container > div:nth-child(2) { background: purple; }
+
+</style>
+
+<div class="container">
+  <div></div>
+  <div style="writing-mode: vertical-lr;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vlr-003.xht
new file mode 100644
index 0000000000..1c33d6eb02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vlr-003.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline replaced element and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="inline-replaced-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that the content of an inline replaced element does not rotate due to the writing mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 7em;
+      writing-mode: vertical-lr;
+    }
+
+  /* cat.png has an intrinsic height of 99px and an intrinsic width of 98px */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a cat and if the <strong>cat is not rotated</strong>.</p>
+
+  <div><img src="support/cat.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vlr-005.xht
new file mode 100644
index 0000000000..ad8950646e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vlr-005.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline replaced element and 'vertical-lr' (advanced)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="inline-replaced-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that, while the content of inline replaced elements do not rotate in vertical writing mode, they are nevertheless laid out from top to bottom (inline base direction) in a line box and their baseline-alignment is central (not alphabetic) and then the following lines boxes (line box direction within a block container) are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 2em;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an unbroken drawing of a yin-yang (&#x262F;) symbol.</p>
+
+  <div id="wrapper">
+    <img src="support/test-tl.png" alt="Image download support must be enabled" /><img src="support/test-bl.png" alt="Image download support must be enabled" /><img src="support/test-tr.png" alt="Image download support must be enabled" /><img src="support/test-br.png" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-002-ref.xht
new file mode 100644
index 0000000000..74a82ce960
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-002-ref.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-01-16 -->
+
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  img { vertical-align: top; }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there is a cat and if the <strong>cat is not rotated</strong>.</p>
+
+  <div><img id="cat" src="support/cat.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-002.xht
new file mode 100644
index 0000000000..fd09531cff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-002.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline replaced element and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="inline-replaced-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that the content of an inline replaced element does not rotate due to the writing mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 7em;
+      writing-mode: vertical-rl;
+   }
+
+  /* cat.png has an intrinsic height of 99px and an intrinsic width of 98px */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a cat and if the <strong>cat is not rotated</strong>.</p>
+
+  <div><img src="support/cat.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-004-ref.xht
new file mode 100644
index 0000000000..8d6e566327
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-004-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-01-16 -->
+
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 200px;
+      width: 200px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there is an unbroken drawing of a yin-yang (&#x262F;) symbol.</p>
+
+  <div>
+    <img src="support/test-tl.png" alt="Image download support must be enabled" /><img src="support/test-tr.png" alt="Image download support must be enabled" /><img src="support/test-bl.png" alt="Image download support must be enabled" /><img src="support/test-br.png" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-004.xht
new file mode 100644
index 0000000000..4729149194
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-replaced-vrl-004.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline replaced element and 'vertical-rl' (advanced)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
+  <link rel="match" href="inline-replaced-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that, while the content of inline replaced elements do not rotate in vertical writing mode, they are nevertheless laid out from top to bottom (inline base direction) in a line box and their baseline-alignment is central (not alphabetic) and then the following lines boxes (line box direction within a block container) are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 2em;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is an unbroken drawing of a yin-yang (&#x262F;) symbol.</p>
+
+  <div>
+    <img src="support/test-tr.png" alt="Image download support must be enabled" /><img src="support/test-br.png" alt="Image download support must be enabled" /><img src="support/test-tl.png" alt="Image download support must be enabled" /><img src="support/test-bl.png" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-002-ref.xht
new file mode 100644
index 0000000000..cc5ae6f4f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-002-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img
+    {
+      padding-left: 210px; /* 60 px (padding-left) + 120px (blue box width) + 30px (the position difference of box) */
+    }
+
+    img + br + img
+    {
+      padding-left: 60px; /* 60 px (padding-left) */
+    }
+
+    img + br + img + img
+    {
+      padding-left: 0;
+    }
+
+    img + br + img + img + br + img
+    {
+      padding-left: 225px; /* 60 px (padding-left) + 120px (blue box width) + 45px (the position difference of box)
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+<div>
+   <img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-yellow.png" width="120" height="120" alt="Image download support must be enabled" /><!--
+--><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-002.xht b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-002.xht
new file mode 100644
index 0000000000..05544f1a36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-002.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
+    <link rel="match" href="inline-table-alignment-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    div#inline-table
+    {
+      display: inline-table;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.row
+    {
+      display: table-row;
+    }
+
+    span#first
+    {
+      color: blue;
+    }
+
+    span#last
+    {
+      color: yellow;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="rl-mixed">A<div id="inline-table">
+    <span class="row" id="first">F</span>
+    <span class="row" id="last">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-003-ref.xht
new file mode 100644
index 0000000000..6687f7eeca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-003-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img
+    {
+      padding-left: 90px; /* 60 px (padding-left) + 30px (the position difference of box) */
+    }
+
+    img + br + img
+    {
+      padding-left: 60px; /* 60 px (padding-left) */
+    }
+
+    img + br + img + img
+    {
+      padding-left: 0;
+    }
+
+    img + br + img + img + br + img
+    {
+      padding-left: 105px; /* 60 px (padding-left) + 45px (the position difference of box)
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+<div>
+   <img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><!--
+--><img src="support/swatch-yellow.png" width="120" height="120" alt="Image download support must be enabled" /><br /><!--
+--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-003.xht b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-003.xht
new file mode 100644
index 0000000000..b0d2b322de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-003.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
+    <link rel="match" href="inline-table-alignment-003-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-mixed
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+
+    div#inline-table
+    {
+      display: inline-table;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.row
+    {
+      display: table-row;
+    }
+
+    span#first
+    {
+      color: blue;
+    }
+
+    span#last
+    {
+      color: yellow;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="lr-mixed">A<div id="inline-table">
+    <span class="row" id="first">F</span>
+    <span class="row" id="last">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-004.xht b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-004.xht
new file mode 100644
index 0000000000..bcef77d53d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-004.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
+    <link rel="match" href="inline-table-alignment-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+
+    div#inline-table
+    {
+      display: inline-table;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.row
+    {
+      display: table-row;
+    }
+
+    span#first
+    {
+      color: blue;
+    }
+
+    span#last
+    {
+      color: yellow;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="rl-upright">A<div id="inline-table">
+    <span class="row" id="first">F</span>
+    <span class="row" id="last">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-005.xht b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-005.xht
new file mode 100644
index 0000000000..2a5fe550ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/inline-table-alignment-005.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
+    <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
+    <link rel="match" href="inline-table-alignment-003-ref.xht" />
+    <meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-upright
+    {
+      color: orange;
+      font: 60px/1 Ahem; /* computes to 60px/60px */
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+    }
+
+    div#inline-table
+    {
+      display: inline-table;
+      padding-left: 0.5em; /* computes to 60px */
+      font-size: 2em; /* computes to 120px */
+      /*
+        such padding-left declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+
+    span.row
+    {
+      display: table-row;
+    }
+
+    span#first
+    {
+      color: blue;
+    }
+
+    span#last
+    {
+      color: yellow;
+    }
+
+    span#orange30
+    {
+      padding-right: 4em; /* computes to 120px */
+      font-size: 0.5em; /* computes to 30px */
+      /*
+        such padding-right declaration is arbitrary and only serve to make the
+        test a bit more challenging.
+      */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="lr-upright">A<div id="inline-table">
+    <span class="row" id="first">F</span>
+    <span class="row" id="last">L</span>
+  </div><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-htb-001.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-htb-001.xht
new file mode 100644
index 0000000000..38b78ef03f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-htb-001.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: horizontal-tb - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of a block box in a 'horizontal-tb' writing mode are laid out one after the other, vertically, with the first beginning at the top of the block box; they are ordered from top to bottom meaning that the 1st line box is the topmost one and then the 2nd block is juxtaposed to its bottom, the 3rd block is juxtaposed to the 2nd block on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+  {
+  color: yellow;
+  font: 20px/1 Ahem;
+  }
+
+  div
+  {
+  background-color: blue;
+  border: blue solid 1em;
+  width: 19em; /* Each line box has an inline-size of 19em */
+  writing-mode: horizontal-tb;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAA BBBB CCCC DDDD E&nbsp; F G&nbsp; H J&nbsp;&nbsp;&nbsp; L&nbsp;&nbsp; M&nbsp; N Q&nbsp; R S&nbsp;&nbsp;&nbsp; T&nbsp;&nbsp; UUUU VVVV WWWW XXXX Z&nbsp;&nbsp;&nbsp; a&nbsp; b&nbsp;&nbsp;&nbsp; c&nbsp;&nbsp;&nbsp; d e&nbsp;&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp;&nbsp; h&nbsp;&nbsp;&nbsp; j k&nbsp;&nbsp;&nbsp; m&nbsp; n qqqq rrrr</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-043.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-043.xht
new file mode 100644
index 0000000000..a6b60dd7d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-043.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-lr - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes in a block box with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-047.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-047.xht
new file mode 100644
index 0000000000..13dfdf8fae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-047.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of a right-floated box with its 'writing-mode' set to 'sideways-lr' will be ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      float: right;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-048.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-048.xht
new file mode 100644
index 0000000000..9038fdd1b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-048.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of right-floated boxes with 'writing-mode' set to 'sideways-lr' will be ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-right
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      float: right;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-lr;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">
+
+<!-- The right-most "S" --> a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The left-most "S" --> N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The "A" --> GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM
+
+  </div>
+
+  <div class="floated-right" id="left-border">
+
+<!-- The "P" --> AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-050.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-050.xht
new file mode 100644
index 0000000000..d2553cac4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-050.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'sideways-lr' will be ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      left: auto;
+      position: absolute;
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-053.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-053.xht
new file mode 100644
index 0000000000..24dac17255
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-053.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-right: blue solid 1em;
+      display: inline-block;
+      height: 8em; /* Each line box has an inline-size of 8em */
+      writing-mode: sideways-lr;
+    }
+
+  span
+    {
+      border-left: blue solid 1em;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The "P" --> <span>AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF </span>
+
+<!-- The "A" --> <span>GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM</span>
+
+<!-- The left-most "S" --> <span>N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y</span>
+
+<!-- The right-most "S" --> <span>a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-054.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-054.xht
new file mode 100644
index 0000000000..2b21837453
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-054.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-left: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-lr;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The 1st left-most line of "P" --> <span>AAAAAAA</span>
+
+<!-- The 2nd left-most line of "P" --> <span>&nbsp;&nbsp;&nbsp;B &nbsp;C</span>
+
+<!-- The 3rd left-most line of "P" --> <span>&nbsp;&nbsp;&nbsp;D &nbsp;E</span>
+
+<!-- The 4th left-most line of "P" --> <span>&nbsp;&nbsp;&nbsp;FFFF</span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of "A" --> <span>GGGGGGG</span>
+
+<!-- The 2nd left-most line of "A" --> <span>&nbsp;&nbsp;&nbsp;H &nbsp;J</span>
+
+<!-- The 3rd left-most line of "A" --> <span>&nbsp;&nbsp;&nbsp;K &nbsp;L</span>
+
+<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
+
+    </div><div class="inline-block">
+
+<!-- The 1st left-most line of left-most "S" --> <span>N&nbsp; QQQQ</span>
+
+<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
+
+<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
+
+<!-- The 4th left-most line of left-most "S" --> <span>XXXX &nbsp;Y</span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of right-most "S" --> <span>a&nbsp; bbbb</span>
+
+<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
+
+<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
+
+<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj &nbsp;k</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-056.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-056.xht
new file mode 100644
index 0000000000..ab29a5c0f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-056.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-cell;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-058.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-058.xht
new file mode 100644
index 0000000000..3b62e3c616
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-058.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-caption;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-060.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-060.xht
new file mode 100644
index 0000000000..8f27b854ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-slr-060.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and 'sideways-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes in a block box with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      list-style: none outside none;
+      margin: 0em;
+      padding-bottom: 0em; /* overriding default padding-end: 40px in several browsers */
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <ul><li>AAAAAAA &nbsp;&nbsp;&nbsp;B &nbsp;C &nbsp;&nbsp;&nbsp;D &nbsp;E &nbsp;&nbsp;&nbsp;FFFF &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG &nbsp;&nbsp;&nbsp;H &nbsp;J &nbsp;&nbsp;&nbsp;K &nbsp;L MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</li></ul>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-042.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-042.xht
new file mode 100644
index 0000000000..8cb56054b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-042.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-rl - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of a block box in a 'sideways-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-045.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-045.xht
new file mode 100644
index 0000000000..c4bdf51117
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-045.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of a left-floated box with its 'writing-mode' set to 'sideways-rl' will be ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      float: left;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-046.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-046.xht
new file mode 100644
index 0000000000..e2eea7ff61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-046.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of left-floated boxes with 'writing-mode' set to 'sideways-rl' will be ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-left
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-left: blue solid 1em;
+      border-top: blue solid 1em;
+      float: left;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-rl;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+
+  <div class="floated-left">
+
+<!-- The "P" --> eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The  "A" --> YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The left-most "S" --> L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X
+
+  </div>
+
+  <div class="floated-left" id="right-border">
+
+<!-- The right-most "S" --> A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-049.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-049.xht
new file mode 100644
index 0000000000..6fcb5060d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-049.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'sideways-rl' will be ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      left: auto;
+      position: absolute;
+      writing-mode: sideways-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-051.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-051.xht
new file mode 100644
index 0000000000..143500c1e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-051.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em; /* Each line box has an inline-size of 8em */
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-rl;
+    }
+
+  span
+    {
+      border-left: blue solid 1em;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The right-most "S" --> <span>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</span>
+
+<!-- The left-most "S" --> <span>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</span>
+
+<!-- The "A" --> <span>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</span>
+
+<!-- The "P" --> <span>eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-052.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-052.xht
new file mode 100644
index 0000000000..b5fc3fd53a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-052.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: sideways-rl;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The right-most line of "P" --> <span>eeee&nbsp;&nbsp; </span>
+
+<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of "A" --> <span>YYYYYYY</span>
+
+<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of left-most "S" --> <span>L&nbsp; MMMM</span>
+
+<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
+
+<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
+
+<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of right-most "S" --> <span>A&nbsp; BBBB</span>
+
+<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
+
+<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
+
+<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-055.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-055.xht
new file mode 100644
index 0000000000..6a9cdb43c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-055.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-cell;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-057.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-057.xht
new file mode 100644
index 0000000000..8d7ea7a9ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-057.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-caption;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: sideways-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-059.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-059.xht
new file mode 100644
index 0000000000..70ed1a1696
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-srl-059.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and 'sideways-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of a block box in a 'sideways-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      list-style: none outside none;
+      margin: 0em;
+      padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
+      writing-mode: sideways-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <ul><li>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</li></ul>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-003.xht
new file mode 100644
index 0000000000..87f418d932
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-003.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-lr - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes in a block box with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-007.xht
new file mode 100644
index 0000000000..109ba433af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-007.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of a right-floated box with its 'writing-mode' set to 'vertical-lr' will be ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      float: right;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-008.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-008.xht
new file mode 100644
index 0000000000..cd4327839e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-008.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: right' and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of right-floated boxes with 'writing-mode' set to 'vertical-lr' will be ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-right
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      float: right;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-lr;
+    }
+
+  div#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">
+
+<!-- The right-most "S" --> aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The left-most "S" --> NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY
+
+  </div>
+
+  <div class="floated-right">
+
+<!-- The "A" --> GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM
+
+  </div>
+
+  <div class="floated-right" id="left-border">
+
+<!-- The "P" --> AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp;
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-010.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-010.xht
new file mode 100644
index 0000000000..9e8bd2abce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-010.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'vertical-lr' will be ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      left: auto;
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-013.xht
new file mode 100644
index 0000000000..fecb4f552b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-013.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'vertical-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em; /* Each line box has an inline-size of 8em */
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      border-left: blue solid 1em;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The "P" --> <span>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; </span>
+
+<!-- The "A" --> <span>GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM</span>
+
+<!-- The left-most "S" --> <span>NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY</span>
+
+<!-- The right-most "S" --> <span>aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-014.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-014.xht
new file mode 100644
index 0000000000..51d4fe91aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-014.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'vertical-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-left: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The 1st left-most line of "P" --> <span>AAAAAAA</span>
+
+<!-- The 2nd left-most line of "P" --> <span>B&nbsp; C&nbsp;&nbsp; </span>
+
+<!-- The 3rd left-most line of "P" --> <span>D&nbsp; E&nbsp;&nbsp; </span>
+
+<!-- The 4th left-most line of "P" --> <span>FFFF&nbsp;&nbsp; </span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of "A" --> <span>GGGGGGG</span>
+
+<!-- The 2nd left-most line of "A" --> <span>H&nbsp; J&nbsp;&nbsp; </span>
+
+<!-- The 3rd left-most line of "A" --> <span>K&nbsp; L&nbsp;&nbsp; </span>
+
+<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
+
+    </div><div class="inline-block">
+
+<!-- The 1st left-most line of left-most "S" --> <span>NNNN&nbsp; Q</span>
+
+<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
+
+<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
+
+<!-- The 4th left-most line of left-most "S" --> <span>X&nbsp; YYYY</span>
+
+    </div><div class="inline-block">
+
+<!-- The left-most line of right-most "S" --> <span>aaaa&nbsp; b</span>
+
+<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
+
+<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
+
+<!-- The 4th left-most line of right-most "S" --> <span id="right-border">j&nbsp; kkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-016.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-016.xht
new file mode 100644
index 0000000000..39be7a9283
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-016.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'vertical-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-cell;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-018.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-018.xht
new file mode 100644
index 0000000000..24c7ed33a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-018.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'vertical-lr' are ordered from left to right." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-caption;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-020.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-020.xht
new file mode 100644
index 0000000000..f712eaac04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vlr-020.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and 'vertical-lr' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes in a block box with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc... " name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      list-style: none outside none;
+      margin: 0em;
+      padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <ul><li>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NNNN&nbsp; Q R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W X&nbsp; YYYY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; aaaa&nbsp; b c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h j&nbsp; kkkk</li></ul>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-002.xht
new file mode 100644
index 0000000000..4ef23f642a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-002.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-rl - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of a block box in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-005.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-005.xht
new file mode 100644
index 0000000000..727abf084e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-005.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of a left-floated box with its 'writing-mode' set to 'vertical-rl' will be ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      float: left;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-006.xht
new file mode 100644
index 0000000000..230c537d70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-006.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'float: left' and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the line boxes of left-floated boxes with 'writing-mode' set to 'vertical-rl' will be ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.floated-left
+    {
+      background-color: blue;
+      border-bottom: blue solid 1em;
+      border-left: blue solid 1em;
+      border-top: blue solid 1em;
+      float: left;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-rl;
+    }
+
+  div#right-border
+    {
+      border-right: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+
+  <div class="floated-left">
+
+<!-- The "P" --> eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The  "A" --> YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd
+
+  </div>
+
+  <div class="floated-left">
+
+<!-- The left-most "S" --> L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X
+
+  </div>
+
+  <div class="floated-left" id="right-border">
+
+<!-- The right-most "S" --> A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-009.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-009.xht
new file mode 100644
index 0000000000..051390d305
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-009.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: position absolute and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'vertical-rl' will be ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      left: auto;
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-011.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-011.xht
new file mode 100644
index 0000000000..5857e7437d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-011.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'vertical-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div#inline-block
+    {
+      background-color: blue;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em; /* Each line box has an inline-size of 8em */
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      border-left: blue solid 1em;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div id="inline-block">
+
+<!-- The right-most "S" --> <span>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</span>
+
+<!-- The left-most "S" --> <span>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</span>
+
+<!-- The "A" --> <span>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</span>
+
+<!-- The "P" --> <span>eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-012.xht
new file mode 100644
index 0000000000..68187dec7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-012.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: inline-block and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'vertical-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div.inline-block
+    {
+      background-color: blue;
+      border-right: blue solid 1em;
+      border-top: blue solid 1em;
+      display: inline-block;
+      height: 8em;
+      vertical-align: top;
+  /*
+  Why 'vertical-align: top' ?
+  See
+  http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
+  for explanations
+  */
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      display: block;
+    }
+
+  span#left-border
+    {
+      border-left: blue solid 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+
+    <div class="inline-block">
+
+<!-- The right-most line of "P" --> <span>eeee&nbsp;&nbsp; </span>
+
+<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of "A" --> <span>YYYYYYY</span>
+
+<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
+
+<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
+
+<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of left-most "S" --> <span>L&nbsp; MMMM</span>
+
+<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
+
+<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
+
+<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
+
+    </div><div class="inline-block">
+
+<!-- The right-most line of right-most "S" --> <span>A&nbsp; BBBB</span>
+
+<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
+
+<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
+
+<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
+
+    </div>
+
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-015.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-015.xht
new file mode 100644
index 0000000000..4e2791accf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-015.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-cell and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'vertical-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-cell;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-017.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-017.xht
new file mode 100644
index 0000000000..2f1ef84d30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-017.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: table-caption and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'vertical-rl' are ordered from right to left." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  div
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      display: table-caption;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-019.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-019.xht
new file mode 100644
index 0000000000..882d4d9ffc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-direction-vrl-019.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: list and 'vertical-rl' - ordering direction of line boxes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that line boxes of a block box in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  ul
+    {
+      background-color: blue;
+      border: blue solid 1em;
+      height: 7em; /* Each line box has an inline-size of 7em */
+      list-style: none outside none;
+      margin: 0em;
+      padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <ul><li>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</li></ul>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-003-ref.xht
new file mode 100644
index 0000000000..ee9e6d617e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-003-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-003.xht
new file mode 100644
index 0000000000..40ac9fca12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-003.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (mixed)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-003-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+
+  span#border-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span#border-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-005.xht
new file mode 100644
index 0000000000..a40a1dd5c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-005.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (mixed)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-003-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+
+  span#padding-left
+    {
+      padding-left: 1.5em;
+    }
+
+  span#padding-right
+    {
+      padding-right: 1.5em;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-007-ref.xht
new file mode 100644
index 0000000000..5970a2f239
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-007-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-007.xht
new file mode 100644
index 0000000000..eb65d2c18d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-007.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (sideways)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-007-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+    }
+
+  span#border-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span#border-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-009.xht
new file mode 100644
index 0000000000..444f53e2e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-009.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (sideways)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-007-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+    }
+
+  span#padding-left
+    {
+      padding-left: 1.5em;
+    }
+
+  span#padding-right
+    {
+      padding-right: 1.5em;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-011-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-011-ref.xht
new file mode 100644
index 0000000000..4c30bc7851
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-011-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-011.xht
new file mode 100644
index 0000000000..3d4ecdf9fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-011.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (upright)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-011-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+    }
+
+  span#border-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span#border-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-013.xht
new file mode 100644
index 0000000000..c617555a53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-013.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (upright)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-011-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+    }
+
+  span#padding-left
+    {
+      padding-left: 1.5em;
+    }
+
+  span#padding-right
+    {
+      padding-right: 1.5em;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-021-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-021-ref.xht
new file mode 100644
index 0000000000..bc067f8a79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-021-ref.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-021.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-021.xht
new file mode 100644
index 0000000000..b3fe884fb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-021.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (complex)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-021-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+  <meta name="DC.date.created" content="2015-07-22T09:54:03+11:00" scheme=
+  "W3CDTF" />
+  <meta name="DC.date.modified" content="2016-07-22T09:54:03+11:00" scheme=
+  "W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div.vlr, div#reference
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+    }
+
+  div.vlr
+    {
+      writing-mode: vertical-lr;
+    }
+
+  span.brdr-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span.brdr-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+
+  div#reference
+    {
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
+
+    <div class="vlr">
+      <div>12<span class="brdr-left">34</span>56</div>
+    </div>
+
+    <div class="vlr">
+      <div>12<span class="brdr-right">34</span>56</div>
+    </div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-023-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-023-ref.xht
new file mode 100644
index 0000000000..ded0aa861e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-023-ref.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      float: left;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-023.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-023.xht
new file mode 100644
index 0000000000..235125b52e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vlr-023.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (complex)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vlr-023-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+  <meta name="DC.date.created" content="2015-07-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-07-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div.vlr, div#reference
+    {
+      border: blue solid 2px;
+      float: left;
+      font-size: 32px;
+      margin: 1em;
+    }
+
+  div.vlr
+    {
+      writing-mode: vertical-lr;
+    }
+
+  span.brdr-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span.brdr-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+
+  div#reference
+    {
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
+
+    <div class="vlr">
+      <div>12<span class="brdr-left">34</span>56</div>
+    </div>
+
+    <div class="vlr">
+      <div>12<span class="brdr-right">34</span>56</div>
+    </div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-002-ref.xht
new file mode 100644
index 0000000000..9cd059ff04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-002-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-002.xht
new file mode 100644
index 0000000000..726385e485
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-002.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (mixed)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vrl-002-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+  span#border-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span#border-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-004.xht
new file mode 100644
index 0000000000..2755c555e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-004.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (mixed)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vrl-002-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+  span#padding-left
+    {
+      padding-left: 1.5em;
+    }
+
+  span#padding-right
+    {
+      padding-right: 1.5em;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-006-ref.xht
new file mode 100644
index 0000000000..c24b33625c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-006-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: sideways;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-006.xht
new file mode 100644
index 0000000000..24f2c46452
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-006.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (sideways)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vrl-006-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: sideways;
+    }
+
+  span#border-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span#border-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-008.xht
new file mode 100644
index 0000000000..afcf6f7edd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-008.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (sideways)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vrl-006-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: sideways;
+    }
+
+  span#padding-left
+    {
+      padding-left: 1.5em;
+    }
+
+  span#padding-right
+    {
+      padding-right: 1.5em;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-010-ref.xht
new file mode 100644
index 0000000000..7ec332c943
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-010-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div>123456</div>
+
+    <div>123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-010.xht
new file mode 100644
index 0000000000..5c361efa3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-010.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and border on non-replaced inline box (upright)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vrl-010-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+
+  span#border-left
+    {
+      border-left: 1.5em solid transparent;
+    }
+
+  span#border-right
+    {
+      border-right: 1.5em solid transparent;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-012.xht
new file mode 100644
index 0000000000..6e1b687b03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/line-box-height-vrl-012.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (upright)</title>
+
+  <!--
+  Test inspired by
+  https://searchfox.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading" />
+  <link rel="match" href="line-box-height-vrl-010-ref.xht" />
+
+  <meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accommodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      margin-left: 32px;
+    }
+
+  div
+    {
+      border: blue solid 2px;
+      font-size: 32px;
+      margin: 1em;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+
+  span#padding-left
+    {
+      padding-left: 1.5em;
+    }
+
+  span#padding-right
+    {
+      padding-right: 1.5em;
+    }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+    <p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
+
+    <div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
+
+    <div id="reference">123456</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/link-writing-mode-dependency-crash.html b/testing/web-platform/tests/css/css-writing-modes/link-writing-mode-dependency-crash.html
new file mode 100644
index 0000000000..a8f94713e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/link-writing-mode-dependency-crash.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1764217">
+<style>
+a {
+  border-inline-start: currentColor;
+}
+:link {
+  border-inline-start-color: #cba7;
+  writing-mode: sideways-lr;
+}
+</style>
+<a href="#">
diff --git a/testing/web-platform/tests/css/css-writing-modes/logical-physical-mapping-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/logical-physical-mapping-001-ref.html
new file mode 100644
index 0000000000..9fea986c94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/logical-physical-mapping-001-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: border-block and border-inline logical properties in different writing modes</title>
+<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+<style>
+#body tr td:nth-child(2) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(3) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(4) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(5) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(6) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(7) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(8) div {
+  writing-mode: sideways-lr;
+}
+#body tr td:nth-child(9) div {
+  writing-mode: sideways-lr;
+}
+
+
+#body tr td:nth-child(2n+2) div {
+  direction: ltr;
+}
+#body tr td:nth-child(2n+3) div {
+  direction: rtl;
+}
+
+
+td {
+  padding: 5px;
+  font-size: 13px;
+  background-color: silver;
+  width: 70px;
+  height: 70px;
+}
+
+
+.top {
+  border-bottom: 2px dotted blue;
+  border-top: 2px dotted orange;
+}
+.right {
+  border-left: 2px dotted blue;
+  border-right: 2px dotted orange;
+}
+
+.bottom {
+  border-top: 2px dotted blue;
+  border-bottom: 2px dotted orange;
+}
+.left {
+  border-right: 2px dotted blue;
+  border-left: 2px dotted orange;
+}
+</style>
+</head>
+<body>
+<p>
+  Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
+</p>
+<table>
+<thead>
+  <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
+  <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
+</thead>
+<tbody id=body>
+  <tr id=block-start><th>block-start</th>   <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
+  <tr id=block-end><th>block-end</th>       <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
+  <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
+  <tr id=inline-end><th>inline-end</th>     <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
+</tbody>
+</table>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/logical-physical-mapping-001.html b/testing/web-platform/tests/css/css-writing-modes/logical-physical-mapping-001.html
new file mode 100644
index 0000000000..76f3149bf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/logical-physical-mapping-001.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: border-block and border-inline logical properties in different writing modes</title>
+<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<link rel="match" href="logical-physical-mapping-001-ref.html">
+<style>
+#block-start div.outer div {
+  border-block-start: dotted 2px orange;
+}
+#block-end div.outer div {
+  border-block-end: dotted 2px orange;
+}
+#inline-start div.outer div {
+  border-inline-start: dotted 2px orange;
+}
+#inline-end div.outer div {
+  border-inline-end: dotted 2px orange;
+}
+
+#body tr td:nth-child(2) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(3) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(4) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(5) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(6) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(7) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(8) div {
+  writing-mode: sideways-lr;
+}
+#body tr td:nth-child(9) div {
+  writing-mode: sideways-lr;
+}
+
+
+#body tr td:nth-child(2n+2) div {
+  direction: ltr;
+}
+#body tr td:nth-child(2n+3) div {
+  direction: rtl;
+}
+
+
+td {
+  padding: 5px;
+  font-size: 13px;
+  background-color: silver;
+  width: 70px;
+  height: 70px;
+}
+
+
+.top {
+  border-bottom: 2px dotted blue;
+}
+.right {
+  border-left: 2px dotted blue;
+}
+
+.bottom {
+  border-top: 2px dotted blue;
+}
+.left {
+  border-right: 2px dotted blue;
+}
+</style>
+</head>
+<body>
+<p>
+  Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
+</p>
+<table>
+<thead>
+  <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
+  <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
+</thead>
+<tbody id=body>
+  <tr id=block-start><th>block-start</th>   <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
+  <tr id=block-end><th>block-end</th>       <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
+  <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
+  <tr id=inline-end><th>inline-end</th>     <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
+</tbody>
+</table>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/logical-props-001.html b/testing/web-platform/tests/css/css-writing-modes/logical-props-001.html
new file mode 100644
index 0000000000..5eea84d536
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/logical-props-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>writing-modes and logical props: tr</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-logical-1/#box">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
+<link rel="match" href="reference/logical-props-001-ref.html">
+<meta name="assert" content="The logical properties on table rows are resolved taking the writing mode of the element into account,
+                            even though the writing mode property does not apply to that element.">
+<style>
+table { border-collapse: collapse; }
+td {
+  padding: 0;
+  height: 100px;
+  width: 100px;
+}
+tr {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px green solid;
+}
+
+.red {
+  position: absolute;
+  width: 100px;
+  height: 5px;
+  background: red;
+  z-index: -1;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>horizontal green stripe</strong> below and <strong>no red</strong>.
+  <div class=red></div>
+  <table><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/logical-props-002.html b/testing/web-platform/tests/css/css-writing-modes/logical-props-002.html
new file mode 100644
index 0000000000..96295d09dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/logical-props-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>writing-modes and logical props: tbody</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-logical-1/#box">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
+<link rel="match" href="reference/logical-props-001-ref.html">
+<meta name="assert" content="The logical properties on table row groups are resolved taking the writing mode of the element into account,
+                            even though the writing mode property does not apply to that element.">
+<style>
+table { border-collapse: collapse; }
+td {
+  padding: 0;
+  height: 100px;
+  width: 100px;
+}
+tbody {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px green solid;
+}
+
+.red {
+  position: absolute;
+  width: 100px;
+  height: 5px;
+  background: red;
+  z-index: -1;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>horizontal green stripe</strong> below and <strong>no red</strong>.
+  <div class=red></div>
+  <table><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/logical-props-003.html b/testing/web-platform/tests/css/css-writing-modes/logical-props-003.html
new file mode 100644
index 0000000000..f40c9fc9ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/logical-props-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>writing-modes and logical props: col</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-logical-1/#box">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
+<link rel="match" href="reference/logical-props-001-ref.html">
+<meta name="assert" content="The logical properties on table columns are resolved taking the writing mode of the element into account,
+                            even though the writing mode property does not apply to that element.">
+<style>
+table { border-collapse: collapse; }
+td {
+  padding: 0;
+  height: 100px;
+  width: 100px;
+}
+col {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px green solid;
+}
+
+.red {
+  position: absolute;
+  width: 100px;
+  height: 5px;
+  background: red;
+  z-index: -1;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>horizontal green stripe</strong> below and <strong>no red</strong>.
+  <div class=red></div>
+  <table><col><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/logical-props-004.html b/testing/web-platform/tests/css/css-writing-modes/logical-props-004.html
new file mode 100644
index 0000000000..e5b23679e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/logical-props-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>writing-modes and logical props: colgroup</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-logical-1/#box">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
+<link rel="match" href="reference/logical-props-001-ref.html">
+<meta name="assert" content="The logical properties on table column groups are resolved taking the writing mode of the element into account,
+                            even though the writing mode property does not apply to that element.">
+<style>
+table { border-collapse: collapse; }
+td {
+  padding: 0;
+  height: 100px;
+  width: 100px;
+}
+colgroup {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px green solid;
+}
+
+.red {
+  position: absolute;
+  width: 100px;
+  height: 5px;
+  background: red;
+  z-index: -1;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>horizontal green stripe</strong> below and <strong>no red</strong>.
+  <div class=red></div>
+  <table><colgroup><tbody><tr><td>&nbsp;</td></tr></tbody></table>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-003.xht
new file mode 100644
index 0000000000..f16716a87f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-003.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - maximum of 2 adjoining margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-002.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that margin-end and margin-start of adjacent blocks collapse into its maximum in 'vertical-lr' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      width: 4em;
+      writing-mode: vertical-lr;
+    }
+
+  div#wrapper > div
+    {
+      background-color: green;
+      width: 1em;
+    }
+
+  div#leftmost
+    {
+      margin-right: 2em; /* block-end margin of 1st block */
+    }
+
+  div#rightmost
+    {
+      margin-left: 1em; /* block-start margin of following block */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="leftmost"></div>
+    <div id="rightmost"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-009.xht
new file mode 100644
index 0000000000..f71f2bddb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-009.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - adjoining margins of non-siblings or ancestors</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-005.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that adjoining margin-end and margin-start boxes generated by elements, that are not related by siblings or ancestors, collapse in 'vertical-lr' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      width: 4em;
+      writing-mode: vertical-lr;
+    }
+
+  div#leftmost
+    {
+      background-color: green;
+      margin-right: 2em; /* block-end margin of sub-block of 1st block */
+      width: 1em;
+    }
+
+  div#rightmost
+    {
+      background-color: green;
+      margin-left: 1em; /* block-start margin of following sibling block */
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div>
+      <div id="leftmost"></div>
+    </div>
+    <div id="rightmost"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-011.xht
new file mode 100644
index 0000000000..73e562c996
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-011.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - floated elements do not collapse margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-006.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that margin-end of floated box does not collapse with the margin-start of a preceding block box in 'vertical-lr' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      width: 4em;
+      writing-mode: vertical-lr;
+    }
+
+  div#wrapper > div
+    {
+      background-color: green;
+      width: 1em;
+    }
+
+  div#leftmost
+    {
+      margin-right: 1em; /* block-end margin of 1st block */
+    }
+
+  div#rightmost
+    {
+      float: right;
+      margin-left: 1em; /* block-start margin of floated box */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="leftmost"></div>
+    <div id="rightmost"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-015.xht
new file mode 100644
index 0000000000..b945de2e11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-015.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - elements with 'overflow' set to 'visible'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-008.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that elements with 'overflow' set to 'visible' collapse margin with in-flow children in 'vertical-lr' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: url("support/margin-collapse-2em-space-wm-vert.png") -1em top;
+      border-left: green solid 1em;
+      writing-mode: vertical-lr;
+    }
+
+  div#wrapper div
+    {
+      width: 1em;
+    }
+
+  div#overflow
+    {
+      margin-left: 2em; /* block-start margin of overflowed block */
+      overflow: visible;
+    }
+
+  div#nested
+    {
+      background-color: green;
+      margin-left: 2em; /* block-start margin of sub-block */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="overflow">
+      <div id="nested"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-017.xht
new file mode 100644
index 0000000000..480f54eff7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-017.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - elements with 'overflow' set to 'hidden'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted and modified from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-009.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that elements with 'overflow' set to 'hidden' do not collapse margin with in-flow children in 'vertical-lr' writing-mode. In this test, we are testing and checking that 'margin-left' of div#overflow does not collapse with 'margin-left' of div#nested." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background-color: green;
+      width: 8em;
+      writing-mode: vertical-lr;
+    }
+
+  div#overflow
+    {
+      background-color: white;
+      margin-left: 4em; /* block-start margin of overflowed block */
+      overflow: hidden;
+      width: 4em;
+    }
+
+  div#nested
+    {
+      background-color: red;
+      margin-left: 4em; /* block-start margin of sub-block */
+      width: 4em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="overflow">
+      <div id="nested"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-023.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-023.xht
new file mode 100644
index 0000000000..e655202e10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-023.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - absolute positioning and siblings</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that absolutely positioned boxes do not collapse margins with siblings in 'vertical-lr' writing-mode." />
+
+  <!--
+  left static position for the div#abs-pos could be determined with margin collapse
+  or without margin collapse; so there are 2 possible rendered layouts for such code
+  2015-01-18
+
+  Test adapted and modified from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-012.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+  <link rel="match" href="reference/margin-collapse-022-023-1.xht" />
+  <link rel="match" href="reference/margin-collapse-022-023-2.xht" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#test
+    {
+      border: teal solid 1em;
+      font: 25px/1 Ahem;
+      height: 4em; /* computes to 100px */
+      margin-bottom: 0.2em; /* computes to 5px */
+      writing-mode: vertical-lr;
+    }
+
+  div#wrapper
+    {
+      background-color: orange;
+      border-left: blue solid 1em;
+      width: 3em;
+    }
+
+  div#wrapper > div
+    {
+      height: 4em;
+      margin-left: 1em;
+    }
+
+  div#abs-pos
+    {
+      background-color: blue;
+      position: absolute;
+      top: 33px;  /* body's margin + div#test's border-top */
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="test">
+    <div id="wrapper">
+      <div id="widthless-static"></div>
+      <div id="abs-pos"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-025.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-025.xht
new file mode 100644
index 0000000000..e31c193205
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-025.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - collapse through empty siblings</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-016.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that margins can collapse through empty elements in 'vertical-lr' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      background-position: -1em top;
+      border-left: green solid 1em;
+      border-right: green solid 1em;
+      writing-mode: vertical-lr;
+    }
+
+  div.widthless
+    {
+      margin-right: 2em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div class="widthless"></div>
+    <div class="widthless"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-031.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-031.xht
new file mode 100644
index 0000000000..83169938d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-031.xht
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - collapse through sibling</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that horizontal margins of boxes can collapse through a sibling box whose left and right margins collapse in 'vertical-lr' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      writing-mode: vertical-lr;
+    }
+
+  div#left-most-sibling
+    {
+      background-color: green;
+      margin-right: 2em;
+      width: 1em;
+    }
+
+  div#middle-sibling
+    {
+      margin-left: 2em;
+      margin-right: 2em;
+    }
+
+  div#right-most-sibling
+    {
+      background-color: green;
+      margin-left: 2em;
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="left-most-sibling"></div>
+    <div id="middle-sibling"></div>
+    <div id="right-most-sibling"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-035.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-035.xht
new file mode 100644
index 0000000000..e3f14aecf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-035.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - left margin of a block collapses with left margin of its first child</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-017.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that, in a vertical-lr context, the left margin an in-flow block element collapses with its first in-flow block-level child's left margin if the element has no top border, no top padding, and the child has no clearance." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png") -1em top;
+      border-left: green solid 1em;
+      width: 3em;
+      writing-mode: vertical-lr;
+    }
+
+  div#parent
+    {
+      margin-left: 2em; /* block-start margin */
+    }
+
+  div#first-child
+    {
+      background-color: green;
+      margin-left: 2em; /* block-start margin of child */
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="parent">
+      <div id="first-child"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-037.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-037.xht
new file mode 100644
index 0000000000..db39c6442d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vlr-037.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-lr' and margin collapsing - right margin of a block collapses with right margin of its last child</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that, in a vertical-lr context, the right margin an in-flow block box collapses with its last in-flow block-level child's right margin if the element has no right padding and no right border and the child's right margin does not collapse with a left margin that has clearance." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png") -1em top;
+      border-left: green solid 1em;
+      width: 3em;
+      writing-mode: vertical-lr;
+    }
+
+  div#parent
+    {
+      background-color: green;
+      margin-right: 2em; /* block-end margin */
+    }
+
+  div#last-child
+    {
+      margin-right: 2em; /* block-end margin of last child */
+    }
+
+  div#following-parent
+    {
+      background-color: green;
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="parent">
+      <div id="widthless-child"></div>
+      <div id="last-child"></div>
+    </div>
+    <div id="following-parent"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-002.xht
new file mode 100644
index 0000000000..7259dc75ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-002.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - maximum of 2 adjoining margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-002.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that margin-end and margin-start of adjacent blocks collapse into its maximum in 'vertical-rl' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      width: 4em;
+      writing-mode: vertical-rl;
+    }
+
+  div#wrapper > div
+    {
+      background-color: green;
+      width: 1em;
+    }
+
+  div#rightmost
+    {
+      margin-left: 2em; /* block-end margin of 1st block */
+    }
+
+  div#leftmost
+    {
+      margin-right: 1em; /* block-start margin of following block */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="rightmost"></div>
+    <div id="leftmost"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-008.xht
new file mode 100644
index 0000000000..42acc04319
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-008.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - adjoining margins of non-siblings or ancestors</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-005.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that adjoining margin-end and margin-start boxes generated by elements, that are not related by siblings or ancestors, collapse in 'vertical-rl' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      width: 4em;
+      writing-mode: vertical-rl;
+    }
+
+  div#rightmost
+    {
+      background-color: green;
+      margin-left: 2em; /* block-end margin of sub-block of 1st block */
+      width: 1em;
+    }
+
+  div#leftmost
+    {
+      background-color: green;
+      margin-right: 1em; /* block-start margin of following sibling block */
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div>
+      <div id="rightmost"></div>
+    </div>
+    <div id="leftmost"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-010.xht
new file mode 100644
index 0000000000..6c86c76339
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-010.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - floated elements do not collapse margins</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-006.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that margin-start of floated box does not collapse with the margin-end of a preceding block box in 'vertical-rl' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      width: 4em;
+      writing-mode: vertical-rl;
+    }
+
+  div#wrapper > div
+    {
+      background-color: green;
+      width: 1em;
+    }
+
+  div#rightmost
+    {
+      margin-left: 1em; /* block-end margin of 1st block */
+    }
+
+  div#leftmost
+    {
+      float: left;
+      margin-right: 1em; /* block-start margin of floated box */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="rightmost"></div>
+    <div id="leftmost"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-014.xht
new file mode 100644
index 0000000000..6c1135827e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-014.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - elements with 'overflow' set to 'visible'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-008.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that elements with 'overflow' set to 'visible' collapse margin with in-flow children in 'vertical-rl' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: url("support/margin-collapse-2em-space-wm-vert.png") left top;
+      border-right: green solid 1em;
+      writing-mode: vertical-rl;
+    }
+
+  div#wrapper div
+    {
+      width: 1em;
+    }
+
+  div#overflow
+    {
+      margin-right: 2em; /* block-start margin of overflowed block */
+      overflow: visible;
+    }
+
+  div#nested
+    {
+      background-color: green;
+      margin-right: 2em; /* block-start margin of sub-block */
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="overflow">
+      <div id="nested"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-016.xht
new file mode 100644
index 0000000000..85641e5e9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-016.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - elements with 'overflow' set to 'hidden'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted and modified from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-009.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that elements with 'overflow' set to 'hidden' do not collapse their horizontal margin with the horizontal margin in-flow children in 'vertical-rl' writing-mode. In this test, we are testing and checking that 'margin-right' of div#overflow does not collapse with 'margin-right' of div#nested." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      width: 8em;
+      writing-mode: vertical-rl;
+    }
+
+  div#overflow
+    {
+      background-color: green;
+      margin-right: 4em; /* block-start margin of overflowed block */
+      overflow: hidden;
+      width: 4em;
+    }
+
+  div#nested
+    {
+      background-color: red;
+      margin-right: 4em; /* block-start margin of sub-block */
+      width: 4em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="overflow">
+      <div id="nested"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-022.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-022.xht
new file mode 100644
index 0000000000..a83835e306
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-022.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - absolute positioning and siblings</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that absolutely positioned boxes do not collapse margins with siblings in 'vertical-rl' writing-mode." />
+
+  <!--
+  left static position for the div#abs-pos could be determined with margin collapse
+  or without margin collapse; so there are 2 possible rendered layouts for such code
+  2015-01-18
+
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-012.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+  <link rel="match" href="reference/margin-collapse-022-023-1.xht" />
+  <link rel="match" href="reference/margin-collapse-022-023-2.xht" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#test
+    {
+      border: teal solid 1em;
+      font: 25px/1 Ahem;
+      height: 4em; /* computes to 100px */
+      margin-bottom: 0.2em; /* computes to 5px */
+      writing-mode: vertical-rl;
+    }
+
+  div#wrapper
+    {
+      background-color: orange;
+      border-right: blue solid 1em;
+      width: 3em;
+    }
+
+  div#wrapper > div
+    {
+      height: 4em;
+      margin-right: 1em;
+    }
+
+  div#abs-pos
+    {
+      background-color: blue;
+      position: absolute;
+      top: 33px; /* body's margin + div#test's border-top */
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="test">
+    <div id="wrapper">
+      <div id="widthless-static"></div>
+      <div id="abs-pos"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-024.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-024.xht
new file mode 100644
index 0000000000..89c2cfc90c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-024.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - collapse through empty siblings</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-016.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that margins can collapse through empty elements in 'vertical-rl' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      background-position: -1em top;
+      border-left: green solid 1em;
+      border-right: green solid 1em;
+      writing-mode: vertical-rl;
+    }
+
+  div.widthless
+    {
+      margin-left: 2em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div class="widthless"></div>
+    <div class="widthless"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-030.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-030.xht
new file mode 100644
index 0000000000..346d8bdf2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-030.xht
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - collapse through sibling</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that horizontal margins of boxes can collapse through a sibling box whose left and right margins collapse in 'vertical-rl' writing-mode." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background-image: url("support/margin-collapse-2em-space-wm-vert.png");
+      writing-mode: vertical-rl;
+    }
+
+  div#right-most-sibling
+    {
+      background-color: green;
+      margin-left: 2em;
+      width: 1em;
+    }
+
+  div#middle-sibling
+    {
+      margin-left: 2em;
+      margin-right: 2em;
+    }
+
+  div#left-most-sibling
+    {
+      background-color: green;
+      margin-right: 2em;
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="right-most-sibling"></div>
+    <div id="middle-sibling"></div>
+    <div id="left-most-sibling"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-034.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-034.xht
new file mode 100644
index 0000000000..bb80c17de7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-034.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - right margin of a block collapses with right margin of its first child</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  Test adapted from
+  http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-collapse-017.htm
+
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that, in a vertical-rl context, the right margin an in-flow block box collapses with its first in-flow block-level child's right margin if the element has no top border, no top padding, and the child has no clearance." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      border-right: green solid 1em;
+      width: 3em;
+      writing-mode: vertical-rl;
+    }
+
+  div#parent
+    {
+      margin-right: 2em; /* block-start margin */
+    }
+
+  div#first-child
+    {
+      background-color: green;
+      margin-right: 2em; /* block-start margin of child */
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="parent">
+      <div id="first-child"></div>
+    </div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-036.xht b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-036.xht
new file mode 100644
index 0000000000..e553f0cfaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-collapse-vrl-036.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'vertical-rl' and margin collapsing - left margin of a block collapses with left margin of its last child</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <!--
+  "
+  The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin.
+  "
+  -->
+
+  <meta content="ahem image" name="flags" />
+  <meta name="assert" content="This test checks that, in a vertical-rl context, the left margin an in-flow block box collapses with its last in-flow block-level child's left margin if the element has no left padding and no left border and the child's left margin does not collapse with a right margin that has clearance." />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font: 25px/1em Ahem;
+      height: 4em;
+    }
+
+  div#wrapper
+    {
+      background: red url("support/margin-collapse-2em-space-wm-vert.png");
+      border-right: green solid 1em;
+      width: 3em;
+      writing-mode: vertical-rl;
+    }
+
+  div#parent
+    {
+      background-color: green;
+      margin-left: 2em; /* block-end margin */
+    }
+
+  div#last-child
+    {
+      margin-left: 2em; /* block-end margin of last child */
+    }
+
+  div#following-parent
+    {
+      background-color: green;
+      width: 1em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="wrapper">
+    <div id="parent">
+      <div id="widthless-child"></div>
+      <div id="last-child"></div>
+    </div>
+    <div id="following-parent"></div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/margin-vlr-003.xht
new file mode 100644
index 0000000000..7ffed6e0d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-vlr-003.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin in 'vertical-lr' writing-mode context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <!--
+  Test inspired by
+  http://lxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1096224-1b.html
+  -->
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that margin-left, margin-right, margin-top and margin-bottom do not change in vertical writing-mode. The margin-left property of a box still affects the lefthand margin of such box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  .outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 0.5em auto;
+    }
+
+  .inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+    }
+
+  .foo
+    {
+      margin-bottom: 5px;
+      margin-left: 100px;
+      margin-right: 50px;
+      margin-top: 20px;
+      writing-mode: vertical-lr;
+    }
+
+  .bar
+    {
+      margin-bottom: 20px;
+      margin-left: 50px;
+      margin-right: 100px;
+      margin-top: 5px;
+      writing-mode: vertical-lr;
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <hr />
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/margin-vrl-002-ref.xht
new file mode 100644
index 0000000000..975664cede
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-vrl-002-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-bottom: 1em;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/margin-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/margin-vrl-002.xht
new file mode 100644
index 0000000000..c30022f6ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/margin-vrl-002.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin in 'vertical-rl' writing-mode context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <!--
+  Test inspired by
+  http://lxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1096224-1b.html
+  -->
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that margin-left, margin-right, margin-top and margin-bottom do not change in vertical writing-mode. The margin-left property of a box still affects the lefthand margin of such box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  .outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 0.5em auto;
+    }
+
+  .inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+    }
+
+  .foo
+    {
+      margin-bottom: 5px;
+      margin-left: 100px;
+      margin-right: 50px;
+      margin-top: 20px;
+      writing-mode: vertical-rl;
+    }
+
+  .bar
+    {
+      margin-bottom: 20px;
+      margin-left: 50px;
+      margin-right: 100px;
+      margin-top: 5px;
+      writing-mode: vertical-rl;
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <hr />
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/mongolian-orientation-001.html b/testing/web-platform/tests/css/css-writing-modes/mongolian-orientation-001.html
new file mode 100644
index 0000000000..0c3271c0dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/mongolian-orientation-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: orientation of mongolian</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/mongolian-orientation-001-ref.html">
+<meta name="assert" content="Mongolian is intrinsicly vertical, mixed and upright text-orientation are expected to be the same.">
+<style>
+div {
+  font-family: "Mongolian White"; /* Not required for the test to work,
+but it helps make it look not ugly if you have the font installed.*/
+  font-size: 2em;
+  margin: 1em;
+  writing-mode: vertical-lr;
+  float: left;
+}
+div:nth-of-type(1) { text-orientation: mixed; }
+div:nth-of-type(2) { text-orientation: upright; }
+</style>
+
+<p>The test passes if you see two identical lines of vertical text (in Mongolian).
+
+<div>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ</div>
+<div>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/mongolian-orientation-002.html b/testing/web-platform/tests/css/css-writing-modes/mongolian-orientation-002.html
new file mode 100644
index 0000000000..66dde36ac0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/mongolian-orientation-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: orientation of mongolian</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/mongolian-orientation-001-ref.html">
+<meta name="assert" content="In Mongolian, in horizontal text, glyphs are typeset in a 90° counter-clockwise rotation from their intrisic vertical orientation. text-orientation:sideways causes all text to be typeset sideways, as if in a horizontal layout, but rotated 90° clockwise. text-orientation:mixed causes typographic character units from vertical scripts are typeset with their intrinsic orientation. These two should therefore result in the same thing">
+<style>
+div {
+  font-family: "Mongolian White"; /* Not required for the test to work,
+but it helps make it look not ugly if you have the font installed.*/
+  font-size: 2em;
+  margin: 1em;
+  writing-mode: vertical-lr;
+  float: left;
+}
+div:nth-of-type(1) { text-orientation: mixed; }
+div:nth-of-type(2) { text-orientation: sideways; }
+</style>
+
+<p>The test passes if you see two identical lines of vertical text (in Mongolian).
+
+<div>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ</div>
+<div>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/mongolian-span-001.html b/testing/web-platform/tests/css/css-writing-modes/mongolian-span-001.html
new file mode 100644
index 0000000000..eeefbb4cc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/mongolian-span-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: Test Mongolian in a span renders the same as without the span</title>
+<link rel="match" href="reference/mongolian-span-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<link rel="author" href="mailto:kojii@chromium.org">
+<style>
+html {
+  writing-mode: vertical-lr;
+  font-size: 50px;
+}
+</style>
+<body>
+  <div>ᠶᠠᠫᠣᠨ</div>
+  <div><span>ᠶᠠᠫᠣᠨ</span></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/nested-orthogonal-001.html b/testing/web-platform/tests/css/css-writing-modes/nested-orthogonal-001.html
new file mode 100644
index 0000000000..09223424dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/nested-orthogonal-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Writing mode</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="In the face of multiple levels of orthogonal flow nesting, children's sizes propagate up to parents.">
+<style>
+body > div {
+  background: green;
+  writing-mode: vertical-lr;
+}
+
+div > div { writing-mode: horizontal-tb; }
+
+div > div > div {
+  writing-mode: vertical-rl;
+  height: 100px;
+  font-size: 100px;
+  line-height: 1;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div>
+  <div><div>&nbsp;</div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht
new file mode 100644
index 0000000000..481a02894c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht
@@ -0,0 +1,153 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: ltr' in vertical-lr (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-bottom) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body#containing-block
+    {
+      background-image: url("support/bg-red-3col-3row-320x320.png");
+      background-position: 198px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         16px (p's margin-left)
+     +
+        246px (img's width)
+     +
+         16px (p's margin-right)
+      ========
+        278px
+     -
+         80px (1 column of 80px)
+      ========
+        198px
+      */
+      background-repeat: no-repeat;
+      direction: ltr;
+      height: 320px;
+      margin: 8px;
+    }
+
+  p
+    {
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  div
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: -160px;
+
+      margin-left: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+    -160px : margin-bottom
+   ========================
+      80px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-bottom' is ignored and the value is calculated so as to make the equality true
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+   (solve) : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body id="containing-block">
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vlr-005.xht
new file mode 100644
index 0000000000..a443db4e83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vlr-005.xht
@@ -0,0 +1,153 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: rtl' in vertical-lr (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-top) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+      background-image: url("support/bg-red-3col-2row-320x320.png");
+      background-position: 198px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         16px (p's margin-left)
+     +
+        246px (img's width)
+     +
+         16px (p's margin-right)
+      ========
+        278px
+     -
+         80px (1 column of 80px)
+      ========
+        198px
+      */
+      background-repeat: no-repeat;
+    }
+
+  #containing-block
+    {
+      direction: rtl;
+      height: 320px;
+    }
+
+  p
+    {
+      direction: ltr;
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  #test
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: 160px;
+
+      margin-left: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     400px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-top' is ignored and the value is calculated so as to make the equality true
+
+   (solve) : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+  <div id="containing-block">
+   <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+   <!--
+   The image says:
+   Test passes if there is a filled
+   green square and <strong>no red</strong>.
+   -->
+
+   <div id="test"></div>
+  </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vrl-002.xht
new file mode 100644
index 0000000000..ce43f2e39d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vrl-002.xht
@@ -0,0 +1,149 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: ltr' in vertical-rl (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-bottom) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body#containing-block
+    {
+      background-image: url("support/bg-red-3col-3row-320x320.png");
+      background-position: -152px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         8px (body's margin-left)
+      -
+        80px (4th column width)
+      -
+        80px (3rd column width)
+      ========
+      -152px
+      */
+      background-repeat: no-repeat;
+      direction: ltr;
+      height: 320px;
+      margin: 8px;
+    }
+
+  p
+    {
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  div
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: -160px;
+
+      margin-right: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+    -160px : margin-bottom
+   ========================
+      80px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-bottom' is ignored and the value is calculated so as to make the equality true
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+   (solve) : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body id="containing-block">
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vrl-004.xht
new file mode 100644
index 0000000000..d084c2c6a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/normal-flow-overconstrained-vrl-004.xht
@@ -0,0 +1,148 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: rtl' in vertical-rl (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-top) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+      background-image: url("support/bg-red-3col-2row-320x320.png");
+      background-position: -152px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         8px (body's margin-left)
+      -
+        80px (4th column width)
+      -
+        80px (3rd column width)
+      ========
+      -152px
+      */
+      background-repeat: no-repeat;
+    }
+  #containing-block
+    {
+      direction: rtl;
+      height: 320px;
+    }
+
+  p
+    {
+      direction: ltr;
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  #test
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: 160px;
+
+      margin-right: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     400px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-top' is ignored and the value is calculated so as to make the equality true
+
+   (solve) : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body>
+  <div id="containing-block">
+   <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+   <!--
+   The image says:
+   Test passes if there is a filled
+   green square and <strong>no red</strong>.
+   -->
+
+   <div id="test"></div>
+  </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-002-ref.xht
new file mode 100644
index 0000000000..bd5b1c1391
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-002-ref.xht
@@ -0,0 +1,121 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+    }
+
+  /*
+    minimum used height of the document root element is 176px;
+    less than 176px will make the reference file no longer reliable.
+
+       36px : img#pass-fail-conditions-sentence's intrinsic height
+     +
+        4px : descender space below baseline
+     =========
+       40px : 1st table (height: 25%)
+    multiplied by
+        4
+     =========
+      160px : height of the 3 tables
+    +
+        8px : body's margin-top
+    +
+        8px : body's margin-bottom
+     =========
+      176px
+  */
+
+  body
+    {
+      height: calc(100% - 16px);
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin: 0px;
+      table-layout: fixed;
+      width: 100%;
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  table#first-table-top
+    {
+      height: 25%;
+    }
+
+  table#second-table-middle
+    {
+      height: 25%;
+    }
+
+  table#third-table-bottom
+    {
+      height: 50%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table id="first-table-top">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td>
+      <td style="background-color: olive;">&nbsp;</td>
+      <td style="background-color: blue;">&nbsp;</td>
+      <td style="padding-left: 16px; padding-right: 8px;"><img id="pass-fail-conditions-sentence" src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" alt="Image download support must be enabled" />
+      <!--
+      The image says:
+      Test passes if the orange rectangle
+      is below the blue rectangle.
+  --></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="second-table-middle">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td style="background-color: olive;">&nbsp;</td><td style="background-color: orange;">&nbsp;</td><td></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="third-table-bottom">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td></td><td style="background-color: orange;">&nbsp;</td><td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-002.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-002.xht
new file mode 100644
index 0000000000..561cc46be3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-002.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="ortho-htb-alongside-vrl-floats-002-ref.xht" />
+
+  <!--
+  The 'horizontal-tb' equivalent of this test is
+  http://www.gtalbot.org/BugzillaSection/Bug1283721-ortho-htb-alongside-vrl-floats-006htb.html
+  -->
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space." name="assert" />
+  <meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  /*
+    minimum used height of the document root element is 176px;
+    less than 176px will make the reference file no longer reliable.
+
+       36px : image intrinsic height
+     +
+        4px : descender space below baseline
+     =========
+       40px : 1st table with 'height: 25%'
+    multiplied by
+        4
+     =========
+      160px : height of the 3 tables
+    +
+        8px : body's margin-top
+    +
+        8px : body's margin-bottom
+     =========
+      176px
+  */
+
+  div
+    {
+      width: 100px;
+    }
+
+  div#first-blue-float
+    {
+      background-color: blue;
+      float: left;
+      height: 25%;
+    }
+
+  div#second-olive-float-with-clear
+    {
+      background-color: olive;
+      clear: left;
+      float: left;
+      height: 50%;
+    }
+
+  div#orange-horiz-tb
+    {
+      background-color: orange;
+      height: 75%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if the orange rectangle
+  is below the blue rectangle.
+  -->
+
+  <div id="first-blue-float">&nbsp;</div>
+
+  <div id="second-olive-float-with-clear">&nbsp;</div>
+
+  <div id="orange-horiz-tb">&nbsp;</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-006-ref.xht
new file mode 100644
index 0000000000..984d8463ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-006-ref.xht
@@ -0,0 +1,121 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+    }
+
+  /*
+    minimum used height of the document root element is 176px;
+    less than 176px will make the reference file no longer reliable.
+
+       36px : img#pass-fail-conditions-sentence's intrinsic height
+     +
+        4px : descender space below baseline
+     =========
+       40px : 1st table (height: 25%)
+    multiplied by
+        4
+     =========
+      160px : height of the 3 tables
+    +
+        8px : body's margin-top
+    +
+        8px : body's margin-bottom
+     =========
+      176px
+  */
+
+  body
+    {
+      height: calc(100% - 16px);
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      height: 25%;
+      margin: 0px;
+      table-layout: fixed;
+      width: 100%;
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table id="first-table-top">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td>
+      <td style="background-color: fuchsia;">&nbsp;</td>
+      <td style="background-color: olive;">&nbsp;</td>
+      <td style="background-color: blue;">&nbsp;</td>
+      <td style="background-color: fuchsia;">&nbsp;</td>
+      <td style="padding-left: 16px; padding-right: 8px;"><img id="pass-fail-conditions-sentence" src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" alt="Image download support must be enabled" />
+      <!--
+      The image says:
+      Test passes if the orange rectangle
+      is below the blue rectangle.
+  --></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="second-table-middle">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td style="background-color: fuchsia;"></td><td style="background-color: olive;">&nbsp;</td><td style="background-color: orange;">&nbsp;</td><td style="background-color: fuchsia;">&nbsp;</td><td></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="third-table-middle">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td style="background-color: fuchsia;"></td><td></td><td style="background-color: orange;">&nbsp;</td><td style="background-color: fuchsia;">&nbsp;</td><td></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="fourth-table-bottom">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td></td><td></td><td></td><td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-006.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-006.xht
new file mode 100644
index 0000000000..5f1ae73cad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-006.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="ortho-htb-alongside-vrl-floats-006-ref.xht" />
+
+  <!--
+  The 'horizontal-tb' equivalent of this test is
+  http://www.gtalbot.org/BugzillaSection/Bug1283721-new-block-form-ctxt-alongside-floats-005.html
+  -->
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space: in this test, this is the blue rectangle." name="assert" />
+  <meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      width: 100px;
+    }
+
+  div#tall-fuchsia-float
+    {
+      background-color: fuchsia;
+      float: left;
+      height: 75%;
+    }
+
+  div#second-blue-float
+    {
+      background-color: blue;
+      clear: left;
+      float: left;
+      height: 25%;
+    }
+
+  div#third-olive-float-with-clear
+    {
+      background-color: olive;
+      clear: left;
+      float: left;
+      height: 50%;
+    }
+
+  div#fourth-fuchsia-float-with-clear
+    {
+      background-color: fuchsia;
+      clear: left;
+      float: left;
+      height: 75%;
+    }
+
+  div#orange-horiz-tb
+    {
+      background-color: orange;
+      height: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if the orange rectangle
+  is below the blue rectangle.
+  -->
+
+  <div id="tall-fuchsia-float">&nbsp;</div>
+
+  <div id="second-blue-float">&nbsp;</div>
+
+  <div id="third-olive-float-with-clear">&nbsp;</div>
+
+  <div id="fourth-fuchsia-float-with-clear">&nbsp;</div>
+
+  <div id="orange-horiz-tb">&nbsp;</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-010-ref.xht
new file mode 100644
index 0000000000..ac17988e8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-010-ref.xht
@@ -0,0 +1,128 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+    }
+
+  /*
+    minimum used height of the document root element is 176px;
+    less than 176px will make the reference file no longer reliable.
+
+       36px : img#pass-fail-conditions-sentence's intrinsic height
+     +
+        4px : descender space below baseline
+     =========
+       40px : 1st table (height: 25%)
+    multiplied by
+        4
+     =========
+      160px : height of the 3 tables
+    +
+        8px : body's margin-top
+    +
+        8px : body's margin-bottom
+     =========
+      176px
+  */
+
+  body
+    {
+      height: calc(100% - 16px);
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      height: 25%;
+      margin: 0px;
+      table-layout: fixed;
+      width: 100%;
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table id="first-table-top">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td>
+      <td style="background-color: fuchsia;">&nbsp;</td>
+      <td style="background-color: olive;">&nbsp;</td>
+      <td style="background-color: blue;">&nbsp;</td>
+      <td style="padding-left: 16px; padding-right: 8px;"><img id="pass-fail-conditions-sentence" src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" alt="Image download support must be enabled" />
+      <!--
+      The image says:
+      Test passes if the orange rectangle
+      is below the blue rectangle.
+  --></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="second-table-middle">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td>
+      <td style="background-color: fuchsia;"></td>
+      <td style="background-color: olive;">&nbsp;</td>
+      <td style="background-color: orange;">&nbsp;</td>
+      <td></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="third-table-middle">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td>
+      <td style="background-color: fuchsia;"></td>
+      <td></td>
+      <td style="background-color: orange;">&nbsp;</td>
+      <td></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="fourth-table-bottom">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td></td><td></td><td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-010.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-010.xht
new file mode 100644
index 0000000000..195e988f00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-010.xht
@@ -0,0 +1,88 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="ortho-htb-alongside-vrl-floats-010-ref.xht" />
+
+  <!--
+  The 'horizontal-tb' equivalent of this test is
+  http://www.gtalbot.org/BugzillaSection/Bug1283721-new-block-form-ctxt-alongside-floats-004.html
+  -->
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space: in this test, this is the blue rectangle." name="assert" />
+  <meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      width: 100px;
+    }
+
+  div#first-blue-float
+    {
+      background-color: blue;
+      clear: left;
+      float: left;
+      height: 25%;
+    }
+
+  div#second-olive-float-with-clear
+    {
+      background-color: olive;
+      clear: left;
+      float: left;
+      height: 50%;
+    }
+
+  div#third-fuchsia-float-with-clear
+    {
+      background-color: fuchsia;
+      clear: left;
+      float: left;
+      height: 75%;
+    }
+
+  div#orange-horiz-tb
+    {
+      background-color: orange;
+      height: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if the orange rectangle
+  is below the blue rectangle.
+  -->
+
+  <div id="first-blue-float">&nbsp;</div>
+
+  <div id="second-olive-float-with-clear">&nbsp;</div>
+
+  <div id="third-fuchsia-float-with-clear">&nbsp;</div>
+
+  <div id="orange-horiz-tb">&nbsp;</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-014-ref.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-014-ref.xht
new file mode 100644
index 0000000000..28f0e33328
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-014-ref.xht
@@ -0,0 +1,121 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+    }
+
+  /*
+    minimum used height of the document root element is 176px;
+    less than 176px will make the reference file no longer reliable.
+
+       36px : img#pass-fail-conditions-sentence's intrinsic height
+     +
+        4px : descender space below baseline
+     =========
+       40px : 1st table (height: 25%)
+    multiplied by
+        4
+     =========
+      160px : height of the 3 tables
+    +
+        8px : body's margin-top
+    +
+        8px : body's margin-bottom
+     =========
+      176px
+  */
+
+  body
+    {
+      height: calc(100% - 16px);
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin: 0px;
+      table-layout: fixed;
+      width: 100%;
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  table#first-table-top
+    {
+      height: 25%;
+    }
+
+  table#second-table-middle
+    {
+      height: 25%;
+    }
+
+  table#third-table-bottom
+    {
+      height: 50%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table id="first-table-top">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td>
+      <td style="background-color: blue;">&nbsp;</td>
+      <td style="background-color: olive;">&nbsp;</td>
+      <td style="padding-left: 16px; padding-right: 8px;"><img id="pass-fail-conditions-sentence" src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" alt="Image download support must be enabled" />
+      <!--
+      The image says:
+      Test passes if the orange rectangle
+      is below the blue rectangle.
+  --></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="second-table-middle">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td style="background-color: orange;">&nbsp;</td><td style="background-color: olive;">&nbsp;</td><td></td>
+    </tr>
+
+  </table>
+
+
+
+  <table id="third-table-bottom">
+
+  <col></col><col width="100"></col><col width="100"></col><col width="324"></col>
+
+    <tr>
+      <td></td><td style="background-color: orange;">&nbsp;</td><td></td><td></td>
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-014.xht b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-014.xht
new file mode 100644
index 0000000000..141a2db9a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/ortho-htb-alongside-vrl-floats-014.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="ortho-htb-alongside-vrl-floats-014-ref.xht" />
+
+  <!--
+  The 'horizontal-tb' equivalent of this test is
+  http://www.gtalbot.org/BugzillaSection/Bug1283721-ortho-htb-alongside-vrl-floats-007htb.html
+  -->
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space." name="assert" />
+  <meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  /*
+    minimum used height of the document root element is 176px;
+    less than 176px will make the reference file no longer reliable.
+
+       36px : image intrinsic height
+     +
+        4px : descender space below baseline
+     =========
+       40px : 1st table with 'height: 25%'
+    multiplied by
+        4
+     =========
+      160px : height of the 3 tables
+    +
+        8px : body's margin-top
+    +
+        8px : body's margin-bottom
+     =========
+      176px
+  */
+
+  div
+    {
+      width: 100px;
+    }
+
+  div#first-blue-float
+    {
+      background-color: olive;
+      float: left;
+      height: 50%;
+    }
+
+  div#second-olive-float-with-clear
+    {
+      background-color: blue;
+      clear: left;
+      float: left;
+      height: 25%;
+    }
+
+  div#orange-horiz-tb
+    {
+      background-color: orange;
+      height: 75%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if the orange rectangle
+  is below the blue rectangle.
+  -->
+
+  <div id="first-blue-float">&nbsp;</div>
+
+  <div id="second-olive-float-with-clear">&nbsp;</div>
+
+  <div id="orange-horiz-tb">&nbsp;</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001.html
new file mode 100644
index 0000000000..a72def5659
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit with orthogonal children</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit with orthogonal children">
+<meta name="flags" content="ahem dom combo">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>1: Shrink-to-fit inline-block with a child of orthogonal block</h3>
+<div class="test">
+    <div class="inline-block"><div class="target">HH</div></div><span class="next">ZZ</span>
+</div>
+<h3>2: Shrink-to-fit inline-block with a child of orthogonal inline</h3>
+<div class="test">
+    <div class="inline-block"><span class="target">HH</span></div><span class="next">ZZ</span>
+</div>
+<h3>3: Shrink-to-fit inline-block with a child of orthogonal block with borders</h3>
+<div class="test">
+    <div class="inline-block"><div class="target border">HHH</div></div><span class="next">ZZ</span>
+</div>
+<h3>4: Shrink-to-fit inline-block with a child of orthogonal inline with borders</h3>
+<div class="test">
+    <div class="inline-block"><span class="target border">HHH</span></div><span class="next">ZZ</span>
+</div>
+<h3>5: Shrink-to-fit inline-block with a child of orthogonal block in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span>
+</div>
+<h3>6: Shrink-to-fit inline-block with a child of orthogonal inline in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span>
+</div>
+<h3>7: Shrink-to-fit inline-block with a child of orthogonal block with borders in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span>
+</div>
+<h3>8: Shrink-to-fit inline-block with a child of orthogonal inline with borders in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span>
+</div>
+<h3>9: Shrink-to-fit float with a child of orthogonal block</h3>
+<div class="test">
+    <div class="float"><div class="target">HH</div></div><span class="next">ZZ</span>
+</div>
+<h3>10: Shrink-to-fit float with a child of orthogonal inline</h3>
+<div class="test">
+    <div class="float"><span class="target">HH</span></div><span class="next">ZZ</span>
+</div>
+<h3>11: Shrink-to-fit float with a child of orthogonal block with borders</h3>
+<div class="test">
+    <div class="float"><div class="target border">HHH</div></div><span class="next">ZZ</span>
+</div>
+<h3>12: Shrink-to-fit float with a child of orthogonal inline with borders</h3>
+<div class="test">
+    <div class="float"><span class="target border">HHH</span></div><span class="next">ZZ</span>
+</div>
+<h3>13: Shrink-to-fit float with a child of orthogonal block in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span>
+</div>
+<h3>14: Shrink-to-fit float with a child of orthogonal inline in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span>
+</div>
+<h3>15: Shrink-to-fit float with a child of orthogonal block with borders in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span>
+</div>
+<h3>16: Shrink-to-fit float with a child of orthogonal inline with borders in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span>
+</div>
+<h3>17: Shrink-to-fit table-cell with a child of orthogonal block</h3>
+<div class="test">
+    <table><tr><td><div class="target">HH</div></td><td class="next">ZZ</td></tr></table>
+</div>
+<h3>18: Shrink-to-fit table-cell with a child of orthogonal inline</h3>
+<div class="test">
+    <table><tr><td><span class="target">HH</span></td><td class="next">ZZ</td></tr></table>
+</div>
+<h3>19: Shrink-to-fit table-cell with a child of orthogonal block with borders</h3>
+<div class="test">
+    <table><tr><td><div class="target border">HHH</div></td><td class="next">ZZ</td></tr></table>
+</div>
+<h3>20: Shrink-to-fit table-cell with a child of orthogonal inline with borders</h3>
+<div class="test">
+    <table><tr><td><span class="target border">HHH</span></td><td class="next">ZZ</td></tr></table>
+</div>
+<h3>21: Shrink-to-fit table-cell with a child of orthogonal block in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><div class="target">HH</div></div></td><td class="next">ZZ</td></tr></table>
+</div>
+<h3>22: Shrink-to-fit table-cell with a child of orthogonal inline in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><span class="target">HH</span></div></td><td class="next">ZZ</td></tr></table>
+</div>
+<h3>23: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><div class="target border">HHH</div></div></td><td class="next">ZZ</td></tr></table>
+</div>
+<h3>24: Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><span class="target border">HHH</span></div></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001a.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001a.html
new file mode 100644
index 0000000000..87ae82b08b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001a.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>1: Shrink-to-fit inline-block with a child of orthogonal block</h3>
+<div class="test">
+    <div class="inline-block"><div class="target">HH</div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001b.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001b.html
new file mode 100644
index 0000000000..1c79978ee1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001b.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal inline</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal inline">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>2: Shrink-to-fit inline-block with a child of orthogonal inline</h3>
+<div class="test">
+    <div class="inline-block"><span class="target">HH</span></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001c.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001c.html
new file mode 100644
index 0000000000..29a951573c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001c.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal block with borders</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal block with borders">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>3: Shrink-to-fit inline-block with a child of orthogonal block with borders</h3>
+<div class="test">
+    <div class="inline-block"><div class="target border">HHH</div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001d.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001d.html
new file mode 100644
index 0000000000..4d8291f30a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001d.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal inline with borders</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal inline with borders">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>4: Shrink-to-fit inline-block with a child of orthogonal inline with borders</h3>
+<div class="test">
+    <div class="inline-block"><span class="target border">HHH</span></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001e.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001e.html
new file mode 100644
index 0000000000..bed139f23f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001e.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal block in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal block in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>5: Shrink-to-fit inline-block with a child of orthogonal block in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001f.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001f.html
new file mode 100644
index 0000000000..2201c354aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001f.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal inline in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal inline in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>6: Shrink-to-fit inline-block with a child of orthogonal inline in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001g.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001g.html
new file mode 100644
index 0000000000..bdd7cf6569
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001g.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal block with borders in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal block with borders in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>7: Shrink-to-fit inline-block with a child of orthogonal block with borders in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001h.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001h.html
new file mode 100644
index 0000000000..8ec86ed004
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001h.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal inline with borders in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit inline-block with a child of orthogonal inline with borders in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>8: Shrink-to-fit inline-block with a child of orthogonal inline with borders in inline-block</h3>
+<div class="test">
+    <div class="inline-block"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001i.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001i.html
new file mode 100644
index 0000000000..27c24b8790
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001i.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>9: Shrink-to-fit float with a child of orthogonal block</h3>
+<div class="test">
+    <div class="float"><div class="target">HH</div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001j.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001j.html
new file mode 100644
index 0000000000..75a7734707
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001j.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal inline</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal inline">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>10: Shrink-to-fit float with a child of orthogonal inline</h3>
+<div class="test">
+    <div class="float"><span class="target">HH</span></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001k.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001k.html
new file mode 100644
index 0000000000..628e39b536
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001k.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal block with borders</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal block with borders">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>11: Shrink-to-fit float with a child of orthogonal block with borders</h3>
+<div class="test">
+    <div class="float"><div class="target border">HHH</div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001l.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001l.html
new file mode 100644
index 0000000000..820b48177a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001l.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal inline with borders</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal inline with borders">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>12: Shrink-to-fit float with a child of orthogonal inline with borders</h3>
+<div class="test">
+    <div class="float"><span class="target border">HHH</span></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001m.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001m.html
new file mode 100644
index 0000000000..3b883fc5e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001m.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal block in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal block in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>13: Shrink-to-fit float with a child of orthogonal block in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001n.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001n.html
new file mode 100644
index 0000000000..05b1700a70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001n.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal inline in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal inline in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>14: Shrink-to-fit float with a child of orthogonal inline in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001o.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001o.html
new file mode 100644
index 0000000000..7fea260cc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001o.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal block with borders in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal block with borders in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>15: Shrink-to-fit float with a child of orthogonal block with borders in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001p.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001p.html
new file mode 100644
index 0000000000..598810c388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001p.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal inline with borders in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit float with a child of orthogonal inline with borders in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>16: Shrink-to-fit float with a child of orthogonal inline with borders in inline-block</h3>
+<div class="test">
+    <div class="float"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001q.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001q.html
new file mode 100644
index 0000000000..98e988949d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001q.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>17: Shrink-to-fit table-cell with a child of orthogonal block</h3>
+<div class="test">
+    <table><tr><td><div class="target">HH</div></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001r.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001r.html
new file mode 100644
index 0000000000..0f42c92338
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001r.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal inline</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal inline">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>18: Shrink-to-fit table-cell with a child of orthogonal inline</h3>
+<div class="test">
+    <table><tr><td><span class="target">HH</span></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001s.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001s.html
new file mode 100644
index 0000000000..283776111a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001s.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal block with borders</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal block with borders">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>19: Shrink-to-fit table-cell with a child of orthogonal block with borders</h3>
+<div class="test">
+    <table><tr><td><div class="target border">HHH</div></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001t.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001t.html
new file mode 100644
index 0000000000..85fe15065a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001t.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal inline with borders</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal inline with borders">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>20: Shrink-to-fit table-cell with a child of orthogonal inline with borders</h3>
+<div class="test">
+    <table><tr><td><span class="target border">HHH</span></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001u.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001u.html
new file mode 100644
index 0000000000..61232e8355
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001u.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal block in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal block in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>21: Shrink-to-fit table-cell with a child of orthogonal block in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><div class="target">HH</div></div></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001v.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001v.html
new file mode 100644
index 0000000000..0c6207ff5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001v.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal inline in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal inline in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>22: Shrink-to-fit table-cell with a child of orthogonal inline in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><span class="target">HH</span></div></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001w.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001w.html
new file mode 100644
index 0000000000..9eaf4f871a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001w.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>23: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><div class="target border">HHH</div></div></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001x.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001x.html
new file mode 100644
index 0000000000..09dd171ed7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-parent-shrink-to-fit-001x.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block">
+<meta name="flags" content="ahem dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+<h3>24: Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block</h3>
+<div class="test">
+    <table><tr><td><div class="inline-block"><span class="target border">HHH</span></div></td><td class="next">ZZ</td></tr></table>
+</div>
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-001.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-001.html
new file mode 100644
index 0000000000..5e7ff7aef5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="assert" content="Available inline-size for the orthogonal writing-mode root inside the iframe is the initial containing block. If we resize the iframe, the orthogonal root may also need to be updated. The orthogonal root has two floats that should fit 'beside' each other after the iframe resize.">
+  <style>
+    #iframe {
+      display: block;
+      width: 100px;
+      height: 50px;
+      border: none;
+      background: red;
+    }
+  </style>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <iframe id="iframe" src="data:text/html,<!DOCTYPE html><body style='margin:0;'><div style='width:10px; height:10px;'><div><div style='writing-mode:vertical-rl; width:100px;'><div style='float:left; width:100px; height:50px; background:green;'></div><div style='float:left; width:100px; height:50px; background:green;'></div>"></iframe>
+  <script>
+    iframe.onload = function() {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          iframe.style.height = "100px";
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    }
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-002.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-002.html
new file mode 100644
index 0000000000..6164411b64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="assert" content="Available inline-size for the orthogonal writing-mode root inside the iframe is the initial containing block. If we resize the iframe, the orthogonal root may also need to be updated. The orthogonal root has two floats that should fit 'beside' each other after the iframe resize.">
+  <style>
+    #iframe {
+      display: block;
+      width: 100px;
+      height: 50px;
+      border: none;
+      background: red;
+    }
+  </style>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <iframe id="iframe" src="data:text/html,<!DOCTYPE html><body style='margin:0;'><div style='width:10px; height:10px;'><div><span><div style='writing-mode:vertical-rl; width:100px;'><div style='float:left; width:100px; height:50px; background:green;'></div><div style='float:left; width:100px; height:50px; background:green;'></div>"></iframe>
+  <script>
+    iframe.onload = function() {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          iframe.style.height = "100px";
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    }
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-003.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-003.html
new file mode 100644
index 0000000000..4bf7183c15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="assert" content="Available inline-size for the orthogonal writing-mode root inside the iframe is the initial containing block. If we resize the iframe, the orthogonal root may also need to be updated. The orthogonal root has two floats that should fit 'beside' each other after the iframe resize.">
+  <style>
+    #iframe {
+      display: block;
+      width: 100px;
+      height: 50px;
+      border: none;
+      background: red;
+    }
+  </style>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <iframe id="iframe" src="data:text/html,<!DOCTYPE html><body style='margin:0;'><div style='width:10px; height:10px;'><div><span style='display:inline-block; vertical-align:top;'><div style='writing-mode:vertical-rl; width:100px;'><div style='float:left; width:100px; height:50px; background:green;'></div><div style='float:left; width:100px; height:50px; background:green;'></div>"></iframe>
+  <script>
+    iframe.onload = function() {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          iframe.style.height = "100px";
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    }
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-004.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-004.html
new file mode 100644
index 0000000000..c01497e1ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="assert" content="Available inline-size for the orthogonal writing-mode root inside the iframe is the initial containing block. If we resize the iframe, the orthogonal root may also need to be updated. The orthogonal root has two floats that should fit 'beside' each other after the iframe resize.">
+  <style>
+    #iframe {
+      display: block;
+      width: 100px;
+      height: 50px;
+      border: none;
+      background: red;
+    }
+  </style>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <iframe id="iframe" src="data:text/html,<!DOCTYPE html><body style='margin:0;'><div style='width:10px; height:10px;'><div><div style='display:table;'><div style='writing-mode:vertical-rl; width:100px;'><div style='float:left; width:100px; height:50px; background:green;'></div><div style='float:left; width:100px; height:50px; background:green;'></div>"></iframe>
+  <script>
+    iframe.onload = function() {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          iframe.style.height = "100px";
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    }
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-005.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-005.html
new file mode 100644
index 0000000000..927086a723
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-005.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="assert" content="Available inline-size for the orthogonal writing-mode root inside the iframe is the initial containing block. If we resize the iframe, the orthogonal root may also need to be updated. The orthogonal root has two floats that should fit 'beside' each other after the iframe resize.">
+  <style>
+    #iframe {
+      display: block;
+      width: 100px;
+      height: 50px;
+      border: none;
+      background: red;
+    }
+  </style>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <iframe id="iframe" src="data:text/html,<!DOCTYPE html><body style='margin:0;'><div style='width:10px; height:10px;'><div><div style='position:absolute;'><div style='writing-mode:vertical-rl; width:100px;'><div style='float:left; width:100px; height:50px; background:green;'></div><div style='float:left; width:100px; height:50px; background:green;'></div>"></iframe>
+  <script>
+    iframe.onload = function() {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          iframe.style.height = "100px";
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    }
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-006.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-006.html
new file mode 100644
index 0000000000..5ed7d4f302
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-006.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="assert" content="Available inline-size for the orthogonal writing-mode root inside the iframe is the initial containing block. If we resize the iframe, the orthogonal root may also need to be updated. The orthogonal root has two floats that should fit 'beside' each other after the iframe resize.">
+  <style>
+    #iframe {
+      display: block;
+      width: 100px;
+      height: 50px;
+      border: none;
+      background: red;
+    }
+  </style>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <iframe id="iframe" src="data:text/html,<!DOCTYPE html><body style='margin:0;'><div style='width:10px; height:10px;'><div style='position:relative;'><div style='position:absolute;'><div style='writing-mode:vertical-rl; width:100px;'><div style='float:left; width:100px; height:50px; background:green;'></div><div style='float:left; width:100px; height:50px; background:green;'></div>"></iframe>
+  <script>
+    iframe.onload = function() {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          iframe.style.height = "100px";
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    }
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-007.html b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-007.html
new file mode 100644
index 0000000000..0b403b2aaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/orthogonal-root-resize-icb-007.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="assert" content="Available inline-size for the orthogonal writing-mode root inside the iframe is the initial containing block. If we resize the iframe, the orthogonal root may also need to be updated. The orthogonal root has two floats that should fit 'beside' each other after the iframe resize.">
+  <style>
+    #iframe {
+      display: block;
+      width: 100px;
+      height: 50px;
+      border: none;
+      background: red;
+    }
+  </style>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <iframe id="iframe" src="data:text/html,<!DOCTYPE html><body style='margin:0;'><div style='width:10px; height:10px;'><div><div style='display:inline-block; writing-mode:vertical-rl; width:100px; vertical-align:top;'><div style='float:left; width:100px; height:50px; background:green;'></div><div style='float:left; width:100px; height:50px; background:green;'></div>"></iframe>
+  <script>
+    iframe.onload = function() {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          iframe.style.height = "100px";
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    }
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-block-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/outline-inline-block-vrl-006.html
new file mode 100644
index 0000000000..14dcf916d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-block-vrl-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: outline layout and inline-block and vertical-rl writing-mode</title>
+<link rel="match" href="reference/outline-inline-block-vrl-006.html" />
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" />
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-14 -->
+<link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+<link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" />
+<meta content="ahem" name="flags" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  color:transparent;
+  font:50px/1 Ahem;
+  height:6em;
+  writing-mode:vertical-rl;
+}
+.outline {
+  color:orange;
+  display:inline-block;
+  outline:blue solid 2px;
+}
+</style>
+<p>Test passes if the inside of 3 blue rectangles is orange.
+<div class="container">
+  <!--
+    Additional div to ensure that the origin of the containing block of the
+    outline span is different from the origin of the writing mode root.
+  -->
+  <div>123<span class="outline">XXX</span></div>
+  <div>12345 6<span class="outline">XX</span></div>
+  <div>1</div>
+  <div><span class="outline">1</span></div>
+  <div>1</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-slr-005.xht b/testing/web-platform/tests/css/css-writing-modes/outline-inline-slr-005.xht
new file mode 100644
index 0000000000..3b150914f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-slr-005.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: outline layout and non-replaced inline in sideways-lr writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-4/#vertical-layout" />
+  <link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" />
+
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 200px;
+      writing-mode: sideways-lr;
+    }
+
+  span
+    {
+      outline: blue solid 2px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° counter-clockwise.</p>
+
+  <div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-srl-004.xht b/testing/web-platform/tests/css/css-writing-modes/outline-inline-srl-004.xht
new file mode 100644
index 0000000000..415ede3ac8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-srl-004.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: outline layout and non-replaced inline and sideways-rl writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-4/#vertical-layout" />
+  <link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" />
+
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 200px;
+      writing-mode: sideways-rl;
+    }
+
+  span
+    {
+      outline: blue solid 2px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° clockwise.</p>
+
+  <div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-003.xht
new file mode 100644
index 0000000000..80c9abb090
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-003.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: outline layout and non-replaced inline in vertical-lr writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" />
+
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 200px;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      outline: blue solid 2px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° clockwise.</p>
+
+  <div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-006.html b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-006.html
new file mode 100644
index 0000000000..539f03bba5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-lr writing-mode</title>
+<link rel="match" href="reference/outline-inline-vlr-006.html" />
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" />
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-14 -->
+<link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+<link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" />
+<meta content="ahem" name="flags" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  color:transparent;
+  font:50px/1 Ahem;
+  height:5em;
+}
+.vlr {
+  writing-mode:vertical-lr;
+}
+.outline {
+  color:orange;
+  outline:blue solid 2px;
+}
+</style>
+<p>Test passes if the inside of 2 blue squares is orange.
+<div class="vlr">1234<span class="outline">5 6</span>7890</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-013.xht
new file mode 100644
index 0000000000..f16677f996
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vlr-013.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <!--
+  Original test is
+  http://test.csswg.org/suites/css2.1/latest/html4/outline-layout-004.htm
+  -->
+
+  <title>CSS Writing Mode Test: outline and multi-line non-replaced inline box</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" />
+  <link href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" rel="help" title="18.4 Dynamic outlines: the 'outline' property" />
+  <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=266122" title="Bug 266122: Outline applied on a multi-line element should encompass all the line boxes and stay connected" />
+
+  <meta name="assert" content="Outline border must be connected and must enclose entirely a multi-line (non-replaced) inline box in a vertical writing-mode." />
+
+  <meta name="DC.date.created" content="2016-04-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-09-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font-size: 20px;
+      height: 200px;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      outline: blue solid 2px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if 1 and only 1 blue border encloses a whole set of several "Filler Text" (each rotated 90 degrees clockwise). The shape of the blue border may be non-rectangular but this is not required.</p>
+
+  <div><span>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</span></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-002.xht
new file mode 100644
index 0000000000..25a27d7e85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-002.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-rl writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+  <link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" />
+
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      height: 200px;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      outline: blue solid 2px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° clockwise.</p>
+
+  <div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-006.html
new file mode 100644
index 0000000000..9004ec93f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-006.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-rl writing-mode</title>
+<link rel="match" href="reference/outline-inline-vrl-006.html" />
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" />
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-14 -->
+<link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" />
+<link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" />
+<meta content="ahem" name="flags" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  color:transparent;
+  font:50px/1 Ahem;
+  height:5em;
+  writing-mode:vertical-rl;
+}
+.outline {
+  color:orange;
+  outline:blue solid 2px;
+}
+</style>
+<p>Test passes if the inside of 2 blue squares is orange.
+<div class="container">
+  <!--
+    Additional div to ensure that the origin of the containing block of the
+    outline span is different from the origin of the writing mode root.
+  -->
+  <div>1</div>
+  <div>1234<span class="outline">5 6</span>7890</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-012.xht
new file mode 100644
index 0000000000..74117052d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/outline-inline-vrl-012.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <!--
+  Original test is
+  http://test.csswg.org/suites/css2.1/latest/html4/outline-layout-004.htm
+  -->
+
+  <title>CSS Writing Mode Test: outline and multi-line non-replaced inline box</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" />
+  <link href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" rel="help" title="18.4 Dynamic outlines: the 'outline' property" />
+  <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=266122" title="Bug 266122: Outline applied on a multi-line element should encompass all the line boxes and stay connected" />
+
+  <meta name="assert" content="Outline border must be connected and must enclose entirely a multi-line (non-replaced) inline box in a vertical writing-mode." />
+
+  <meta name="DC.date.created" content="2016-04-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-09-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font-size: 20px;
+      height: 200px;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      outline: blue solid 2px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if 1 and only 1 blue border encloses a whole set of several "Filler Text" (each rotated 90 degrees clockwise). The shape of the blue border may be non-rectangular but this is not required.</p>
+
+  <div><span>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</span></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht
new file mode 100644
index 0000000000..56825efe5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      margin: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      margin-left: 96px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vlr-005.xht
new file mode 100644
index 0000000000..0636d191f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vlr-005.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'left' and 'right' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'left' and 'right' are not 'auto' in a vertical-lr context, then the value of 'left' wins and 'right' becomes -'left'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-upp-left-corn-320x320.png") no-repeat 358px 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 1st row and 2nd column
+               (and not 1st column)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 1st row in bg-red-upp-left-corn-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'left' should win, 'right' should be ignored and the used right value should become -'left'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht
new file mode 100644
index 0000000000..50f15e3868
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      margin: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      margin-right: 96px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vrl-004.xht
new file mode 100644
index 0000000000..23cb1ead7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-left-right-vrl-004.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'left' and 'right' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'left' and 'right' are not 'auto' in a vertical-rl context, then the value of 'right' wins and 'left' becomes -'right'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-upp-rght-corn-320x320.png") no-repeat calc(100% - 358px) 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 1st row
+               and in 3rd column (not in 4th column)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 1st row in bg-red-upp-rght-corn-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'right' should win, 'left' should be ignored and the used left value should become -'right'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht
new file mode 100644
index 0000000000..e141b6e402
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      left: 16px;
+      position: absolute;
+      top: -8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      left: 16px;
+      position: relative;
+      top: 80px;
+    }
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht
new file mode 100644
index 0000000000..75d123c853
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'top' and 'bottom' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'top' and 'bottom' are not 'auto' in a vertical-lr context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-1col-2row-320x320.png") no-repeat 278px 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the left edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 2nd row in bg-red-1col-2row-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'top' should win, 'bottom' should be ignored and the used bottom value should become -'top'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht
new file mode 100644
index 0000000000..aed33af615
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      position: absolute;
+      right: 16px;
+      top: -8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      position: relative;
+      right: 16px;
+      top: 80px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht
new file mode 100644
index 0000000000..1a0c4581e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'top' and 'bottom' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'top' and 'bottom' are not 'auto' in a vertical-rl context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-4col-2row-320x320.png") no-repeat calc(100% - 278px) 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 2nd row in bg-red-4col-2row-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'top' should win, 'bottom' should be ignored and the used bottom value should become -'top'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht
new file mode 100644
index 0000000000..b7dd97cabd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      bottom: -8px;
+      left: 16px;
+      position: absolute;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      left: 96px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vlr-009.xht
new file mode 100644
index 0000000000..f988359fb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vlr-009.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'left' and 'right' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'left' and 'right' are not 'auto' in a vertical-lr context, then the value of 'right' wins and 'left' becomes -'right'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-low-left-corn-320x320.png") no-repeat 358px calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 4th row
+               and 2nd column (and not in 1st column)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 4th row in bg-red-low-left-corn-320x320.png */
+
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'left' should win, 'right' should be ignored and the used right value should become -'left'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht
new file mode 100644
index 0000000000..9bd4acfd3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      bottom: -8px;
+      position: absolute;
+      right: 16px;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      position: relative;
+      right: 96px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vrl-008.xht
new file mode 100644
index 0000000000..86edebaadb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-left-right-vrl-008.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'left' and 'right' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'left' and 'right' are not 'auto' in a vertical-rl context, then the value of 'right' wins and 'left' becomes -'right'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-low-rght-corn-320x320.png") no-repeat calc(100% - 358px) calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 4th row
+               and 3rd col (and not 4th col)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 1st row in bg-red-low-rght-corn-320x320 */
+
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'right' should win, 'left' should be ignored and the used left value should become -'right'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht
new file mode 100644
index 0000000000..dedb68475e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      bottom: -8px;
+      left: 16px;
+      position: absolute;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      bottom: 80px;
+      left: 16px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht
new file mode 100644
index 0000000000..aef2bc41c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'top' and 'bottom' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'top' and 'bottom' are not 'auto' in a vertical-lr context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-1col-3row-320x320.png") no-repeat 278px calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the left edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 3rd row in bg-red-1col-3row-320x320 */
+
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'bottom' should win, 'top' should be ignored and the used top value should become -'bottom'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht
new file mode 100644
index 0000000000..da97328c14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      bottom: -8px;
+      position: absolute;
+      right: 16px;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      bottom: 80px;
+      position: relative;
+      right: 16px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht
new file mode 100644
index 0000000000..9d4639ebdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'top' and 'bottom' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'top' and 'bottom' are not 'auto' in a vertical-rl context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-4col-3row-320x320.png") no-repeat calc(100% - 278px) calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 3rd row in bg-red-4col-3row-320x320 */
+
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'bottom' should win, 'top' should be ignored and the used top value should become -'bottom'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/padding-percent-orthogonal-dynamic.html b/testing/web-platform/tests/css/css-writing-modes/padding-percent-orthogonal-dynamic.html
new file mode 100644
index 0000000000..402991bca6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/padding-percent-orthogonal-dynamic.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<title>CSS Writing Modes Test: Re-layout of orthogonal layouts with percentage padding</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#dimension-mapping">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #vertical {
+    width: 400px;
+    writing-mode: vertical-lr;
+  }
+
+  #padded {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 100%;
+  }
+
+  #horizontal {
+    writing-mode: horizontal-tb;
+    width: 100%;
+  }
+
+  #container {
+    width: 100%;
+    background-color: green;
+  }
+
+  #child { height: 100px; }
+</style>
+<div id="vertical">
+  <div id="padded">
+    <div id="horizontal">
+      <div id="container">
+        <div id="child"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  test(() => assert_equals(container.offsetWidth, 300),
+       "400px minus 100px padding based on #child height");
+
+  vertical.style.width = "200px";
+
+  test(() => assert_equals(container.offsetWidth, 100),
+       "200px minus 100px padding based on #child height");
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/padding-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/padding-vlr-005.xht
new file mode 100644
index 0000000000..1a89eb7dc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/padding-vlr-005.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding in 'vertical-lr' writing-mode context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <!--
+  Test inspired by
+  http://lxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1096224-1b.html
+  -->
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that padding-left, padding-right, padding-top and padding-bottom do not change in vertical writing-mode. The padding-left property of a box still affects the lefthand padding of such box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  .outer
+    {
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: blue;
+      border: transparent none 0px;
+      height: 9px;
+      margin: 0px;
+    }
+
+  .inner
+    {
+      background-color: blue;
+      height: 50px; /* necessary, otherwise inner blocks will grow as tall as the height of viewport */
+    }
+
+  .foo
+    {
+      padding-bottom: 5px;
+      padding-left: 100px;
+      padding-right: 50px;
+      padding-top: 20px;
+      writing-mode: vertical-lr;
+    }
+
+  .bar
+    {
+      padding-bottom: 20px;
+      padding-left: 50px;
+      padding-right: 100px;
+      padding-top: 5px;
+      writing-mode: vertical-lr;
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <hr />
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/padding-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/padding-vrl-004.xht
new file mode 100644
index 0000000000..916b123f23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/padding-vrl-004.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding in 'vertical-rl' writing-mode context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <!--
+  Test inspired by
+  http://lxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1096224-1b.html
+  -->
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that padding-left, padding-right, padding-top and padding-bottom do not change in vertical writing-mode. The padding-left property of a box still affects the lefthand padding of such box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  .outer
+    {
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  hr
+    {
+      background-color: blue;
+      border: transparent none 0px;
+      height: 9px;
+      margin: 0px;
+    }
+
+  .inner
+    {
+      background-color: blue;
+      height: 50px; /* necessary, otherwise inner blocks must grow as tall as the height of viewport */
+    }
+
+  .foo
+    {
+      padding-bottom: 5px;
+      padding-left: 100px;
+      padding-right: 50px;
+      padding-top: 20px;
+      writing-mode: vertical-rl;
+    }
+
+  .bar
+    {
+      padding-bottom: 20px;
+      padding-left: 50px;
+      padding-right: 100px;
+      padding-top: 5px;
+      writing-mode: vertical-rl;
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <hr />
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-002.xht b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-002.xht
new file mode 100644
index 0000000000..4472d61611
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-002.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-rl' - default page flow (progression) direction</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image paged" name="flags" />
+  <meta content="This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left." name="assert" />
+
+  <style type="text/css" media="print"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body, div
+    {
+      width: 100%;
+  /* width: 100% will force a page-break in vertical-rl writing-mode */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/page-flow-direction-002p1.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p2.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p3.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p4.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-003.xht b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-003.xht
new file mode 100644
index 0000000000..1694d08ac0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-003.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-lr' - default page flow (progression) direction</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image paged" name="flags" />
+  <meta content="This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right." name="assert" />
+
+  <style type="text/css" media="print"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body, div
+    {
+      width: 100%;
+  /* width: 100% will force a page-break in vertical-lr writing-mode */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/page-flow-direction-002p1.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p2.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p3.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p4.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-slr-005.xht b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-slr-005.xht
new file mode 100644
index 0000000000..30d045d1d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-slr-005.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' - default page flow (progression) direction</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image paged" name="flags" />
+  <meta content="This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right." name="assert" />
+
+  <style type="text/css" media="print"><![CDATA[
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+
+  body, div
+    {
+      width: 100%;
+  /* width: 100% will force a page-break in sideways-lr writing-mode */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/page-flow-direction-002p1.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p2.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p3.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p4.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-srl-004.xht b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-srl-004.xht
new file mode 100644
index 0000000000..d1d1aa65b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/page-flow-direction-srl-004.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' - default page flow (progression) direction</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image paged" name="flags" />
+  <meta content="This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left." name="assert" />
+
+  <style type="text/css" media="print"><![CDATA[
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+
+  body, div
+    {
+      width: 100%;
+  /* width: 100% will force a page-break in sideways-rl writing-mode */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/page-flow-direction-002p1.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p2.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p3.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/page-flow-direction-002p4.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/direction-computed.html b/testing/web-platform/tests/css/css-writing-modes/parsing/direction-computed.html
new file mode 100644
index 0000000000..6413fb5aed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/direction-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: getComputedStyle().direction</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">
+<meta name="assert" content="direction computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("direction", "ltr");
+test_computed_value("direction", "rtl");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/direction-invalid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/direction-invalid.html
new file mode 100644
index 0000000000..cb282f0b72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/direction-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing direction with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">
+<meta name="assert" content="direction supports only the grammar 'ltr | rtl'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("direction", "auto");
+test_invalid_value("direction", "ltr rtl");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/direction-valid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/direction-valid.html
new file mode 100644
index 0000000000..f8b9fa808b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/direction-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing direction with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">
+<meta name="assert" content="direction supports the full grammar 'ltr | rtl'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("direction", "ltr");
+test_valid_value("direction", "rtl");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-computed.html b/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-computed.html
new file mode 100644
index 0000000000..4da8377709
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: getComputedStyle().textCombineUpright</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright">
+<meta name="assert" content="text-combine-upright computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-combine-upright", "none");
+test_computed_value("text-combine-upright", "all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-invalid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-invalid.html
new file mode 100644
index 0000000000..c3401ea7d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing text-combine-upright with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright">
+<meta name="assert" content="text-combine-upright supports only the grammar 'none | all'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-combine-upright", "auto");
+test_invalid_value("text-combine-upright", "none all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-valid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-valid.html
new file mode 100644
index 0000000000..dada1f97e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/text-combine-upright-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing text-combine-upright with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright">
+<meta name="assert" content="text-combine-upright supports the full grammar 'none | all'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-combine-upright", "none");
+test_valid_value("text-combine-upright", "all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-computed.html b/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-computed.html
new file mode 100644
index 0000000000..94b78a2e55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: getComputedStyle().textOrientation</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">
+<meta name="assert" content="text-orientation computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-orientation", "mixed");
+test_computed_value("text-orientation", "upright");
+test_computed_value("text-orientation", "sideways");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-invalid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-invalid.html
new file mode 100644
index 0000000000..ceb9cf78cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing text-orientation with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">
+<meta name="assert" content="text-orientation supports only the grammar 'mixed | upright | sideways'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-orientation", "auto");
+test_invalid_value("text-orientation", "mixed upright");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-valid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-valid.html
new file mode 100644
index 0000000000..36f2d36701
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/text-orientation-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing text-orientation with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">
+<meta name="assert" content="text-orientation supports the full grammar 'mixed | upright | sideways'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-orientation", "mixed");
+test_valid_value("text-orientation", "upright");
+test_valid_value("text-orientation", "sideways");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-computed.html b/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-computed.html
new file mode 100644
index 0000000000..5a6164cd86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: getComputedStyle().unicodeBidi</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi">
+<meta name="assert" content="unicode-bidi computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("unicode-bidi", "normal");
+test_computed_value("unicode-bidi", "embed");
+test_computed_value("unicode-bidi", "isolate");
+test_computed_value("unicode-bidi", "bidi-override");
+test_computed_value("unicode-bidi", "isolate-override");
+test_computed_value("unicode-bidi", "plaintext");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-invalid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-invalid.html
new file mode 100644
index 0000000000..f1a2b730b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing unicode-bidi with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi">
+<meta name="assert" content="unicode-bidi supports only the grammar 'normal | embed | isolate | bidi-override | isolate-override | plaintext'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("unicode-bidi", "auto");
+test_invalid_value("unicode-bidi", "isolate plaintext");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-valid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-valid.html
new file mode 100644
index 0000000000..38911df2d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/unicode-bidi-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing unicode-bidi with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi">
+<meta name="assert" content="unicode-bidi supports the full grammar 'normal | embed | isolate | bidi-override | isolate-override | plaintext'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("unicode-bidi", "normal");
+test_valid_value("unicode-bidi", "embed");
+test_valid_value("unicode-bidi", "isolate");
+test_valid_value("unicode-bidi", "bidi-override");
+test_valid_value("unicode-bidi", "isolate-override");
+test_valid_value("unicode-bidi", "plaintext");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-computed.html b/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-computed.html
new file mode 100644
index 0000000000..a7d15efa73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: getComputedStyle().writingMode</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">
+<meta name="assert" content="writing-mode computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("writing-mode", "horizontal-tb");
+test_computed_value("writing-mode", "vertical-rl");
+test_computed_value("writing-mode", "vertical-lr");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-invalid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-invalid.html
new file mode 100644
index 0000000000..a2010d40d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing writing-mode with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">
+<meta name="assert" content="writing-mode supports only the grammar 'horizontal-tb | vertical-rl | vertical-lr'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("writing-mode", "auto");
+test_invalid_value("writing-mode", "horizontal-tb vertical-rl");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-valid.html b/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-valid.html
new file mode 100644
index 0000000000..6f79a36a4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/parsing/writing-mode-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes Level 3: parsing writing-mode with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">
+<meta name="assert" content="writing-mode supports the full grammar 'horizontal-tb | vertical-rl | vertical-lr'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("writing-mode", "horizontal-tb");
+test_valid_value("writing-mode", "vertical-rl");
+test_valid_value("writing-mode", "vertical-lr");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-003.xht
new file mode 100644
index 0000000000..fdc8661fe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-003.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-lr' (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the margin are calculated with respect to the width (inline-size) of the containing block if the 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      writing-mode: vertical-lr;
+    }
+
+  div.foo
+    {
+      margin-bottom: 2.5%; /* 5px ; collapses with hr's margin-top */
+      margin-left: 50%; /* 100px */
+      margin-right: 25%; /* 50px */
+      margin-top: 10%; /* 20px */
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 0.5em auto;
+    }
+
+  div.bar
+    {
+      margin-bottom: 10%; /* 20px */
+      margin-left: 25%; /* 50px */
+      margin-right: 50%; /* 100px */
+      margin-top: 2.5%; /* 5px ; collapses with hr's margin-bottom */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <hr />
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-005.xht
new file mode 100644
index 0000000000..afa40b9de6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-005.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the margin are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-lr;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+    }
+
+  div.foo
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-right: 0%; /* 0px */
+      margin-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div.bar
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 0%; /* 0px */
+      margin-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-007.xht
new file mode 100644
index 0000000000..5fc1ce23f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vlr-007.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-lr' (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the margin are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-lr;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-right: 0%; /* 0px */
+      margin-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div.bar
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 0%; /* 0px */
+      margin-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-002.xht
new file mode 100644
index 0000000000..d6e0939be7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-002.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-rl' (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the margin are calculated with respect to the width (inline-size) of the containing block if 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      writing-mode: vertical-rl;
+    }
+
+  div.foo
+    {
+      margin-bottom: 2.5%; /* 5px ; collapses with hr's margin-top */
+      margin-left: 50%; /* 100px */
+      margin-right: 25%; /* 50px */
+      margin-top: 10%; /* 20px */
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 0.5em auto;
+    }
+
+  div.bar
+    {
+      margin-bottom: 10%; /* 20px */
+      margin-left: 25%; /* 50px */
+      margin-right: 50%; /* 100px */
+      margin-top: 2.5%; /* 5px ; collapses with hr's margin-bottom */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <hr />
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-004.xht
new file mode 100644
index 0000000000..f5d93a20ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-004.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the margin are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-rl;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+    }
+
+  div.foo
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 0%; /* 0px */
+      margin-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div.bar
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-right: 0%; /* 0px */
+      margin-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-006.xht
new file mode 100644
index 0000000000..1640eda21c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-margin-vrl-006.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: margin percentage and 'vertical-rl' (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the margin are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-rl;
+    }
+
+  div.inner
+    {
+      background-color: yellow;
+      height: 50px;
+      width: 50px;
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 0%; /* 0px */
+      margin-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div.bar
+    {
+      margin-bottom: 0%; /* 0px */
+      margin-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      margin-right: 0%; /* 0px */
+      margin-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"></div>
+    <div class="inner bar"></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-003.xht
new file mode 100644
index 0000000000..5950b4a129
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-003.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-lr' (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the padding are calculated with respect to the width (inline-size) of the containing block if 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+      writing-mode: vertical-lr;
+    }
+
+  div.foo
+    {
+      padding-bottom: 2.5%; /* 5px */
+      padding-left: 50%; /* 100px */
+      padding-right: 25%; /* 50px */
+      padding-top: 10%; /* 20px */
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 3px auto;
+    }
+
+  div.bar
+    {
+      padding-bottom: 10%; /* 20px */
+      padding-left: 25%; /* 50px */
+      padding-right: 50%; /* 100px */
+      padding-top: 2.5%; /* 5px */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <hr />
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-005.xht
new file mode 100644
index 0000000000..03f285d4b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-005.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-lr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the padding are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-lr;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+    }
+
+  div.foo
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-right: 0%; /* 0px */
+      padding-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div.bar
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 0%; /* 0px */
+      padding-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-007.xht
new file mode 100644
index 0000000000..596fa78f57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vlr-007.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-lr' (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the padding are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-lr;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-right: 0%; /* 0px */
+      padding-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div.bar
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 0%; /* 0px */
+      padding-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-002.xht
new file mode 100644
index 0000000000..0d0094acbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-002.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding percentage and vertical-rl (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the padding are calculated with respect to the width (inline-size) of the containing block if the 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containing block." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border: blue solid 3px;
+      width: 200px;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+      writing-mode: vertical-rl;
+    }
+
+  div.foo
+    {
+      padding-bottom: 2.5%; /* 5px */
+      padding-left: 50%; /* 100px */
+      padding-right: 25%; /* 50px */
+      padding-top: 10%; /* 20px */
+    }
+
+  hr
+    {
+      background-color: transparent;
+      border: transparent none 0px;
+      height: 3px;
+      margin: 3px auto;
+    }
+
+  div.bar
+    {
+      padding-bottom: 10%;
+      padding-left: 25%;
+      padding-right: 50%;
+      padding-top: 2.5%;
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <hr />
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-004.xht
new file mode 100644
index 0000000000..fe2b167ba9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-004.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-rl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the padding are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-rl;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+    }
+
+  div.foo
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 0%; /* 0px */
+      padding-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div.bar
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-right: 0%; /* 0px */
+      padding-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-006.xht
new file mode 100644
index 0000000000..187d875cd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percent-padding-vrl-006.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: padding percentage and 'vertical-rl' (orthogonal flow)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimensional Mapping" />
+  <link rel="match" href="margin-vrl-002-ref.xht" />
+
+  <meta content="image" name="flags" />
+  <meta content="This test checks that percentages on the padding are calculated with respect to the height (inline-size) of the containing block if the 'writing-mode' of such containing block is 'vertical-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div.outer
+    {
+      background-color: blue;
+      border-top: blue solid 3px;
+      border-right: blue solid 3px;
+      border-bottom: blue solid 2px;
+      border-left: blue solid 3px;
+      height: 160px;
+      writing-mode: vertical-rl;
+    }
+
+  div.inner
+    {
+      background-color: transparent;
+      height: 50px;
+      writing-mode: horizontal-tb;
+    }
+
+  div.foo
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 0%; /* 0px */
+      padding-right: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-top: 12.5%; /* 12.5% mult by 160px == 20px */
+    }
+
+  div.bar
+    {
+      padding-bottom: 0%; /* 0px */
+      padding-left: 31.25%; /* 31.25% mult by 160px == 50px */
+      padding-right: 0%; /* 0px */
+      padding-top: 55.625%; /* 20px + 50px + 19px == 89px ; 89px divided by 160px == 55.625% */
+    }
+
+  div#reference
+    {
+      margin-top: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>
+
+  <div class="outer">
+    <div class="inner foo"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+    <div class="inner bar"><img src="support/swatch-yellow.png" width="50" height="50" alt="Image download support must be enabled" /></div>
+  </div>
+
+  <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" height="165" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/percentage-padding-in-shrink-to-fit.html b/testing/web-platform/tests/css/css-writing-modes/percentage-padding-in-shrink-to-fit.html
new file mode 100644
index 0000000000..240a66c9c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/percentage-padding-in-shrink-to-fit.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-padding-top">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=966795">
+<link rel="match" href="../reference/nothing.html">
+<meta name="assert" content="Percentage-padding is always resolved against the inline-size of the containing block, even if it's about block padding.">
+<p>There should be nothing below.</p>
+<div style="float:left;">
+  <div style="display:flex; writing-mode:vertical-rl; padding:1000%; background:red;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/available-size-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/available-size-001-ref.html
new file mode 100644
index 0000000000..d59cde45f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/available-size-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  color: transparent;
+  writing-mode: vertical-rl;
+  background: green;
+  border-top: 1ch solid white;
+  height: 1ch;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>0</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/available-size-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/available-size-002-ref.html
new file mode 100644
index 0000000000..ddebe93818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/available-size-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+body > div {
+  font-family: monospace; /* to be able to reliably measure things in ch*/
+  font-size: 20px;
+  color: transparent;
+  writing-mode: vertical-rl;
+  background: green;
+  height: 1ch;
+}
+</style>
+
+<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
+
+<div>0</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/available-size-011-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/available-size-011-ref.html
new file mode 100644
index 0000000000..ef66b4e0d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/available-size-011-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>CSS writing mode test reference</title>
+<meta charset=utf-8>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  line-height: 1em;
+  height: 1em;
+  writing-mode: vertical-rl;
+}
+</style>
+
+<p>This test passes if the word “ＰＡＳＳ” (without the quotation marks) appears below, written horizontally from left to right.
+<div>Ｓ Ｓ Ａ Ｐ</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/baseline-with-orthogonal-flow-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/baseline-with-orthogonal-flow-001-ref.html
new file mode 100644
index 0000000000..dda75ca1ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/baseline-with-orthogonal-flow-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>
+    CSS Reference Case
+  </title>
+  <style>
+    .ib {
+      display: inline-block;
+    }
+  </style>
+</head>
+<body>
+  Test passes if the visible characters below are baseline-aligned.
+  <br><br>
+
+  aaa
+
+  <div class="ib">
+    bbb
+  </div>
+
+  <div class="ib">
+    ccc
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-001.html
new file mode 100644
index 0000000000..24723ad3c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi embed (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &lt; a &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &lt; a &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-002.html
new file mode 100644
index 0000000000..fa9d254cbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi embed (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-003.html
new file mode 100644
index 0000000000..a8e1cb7710
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi embed (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &gt; a &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &gt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-004.html
new file mode 100644
index 0000000000..32f96a1f59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi embed (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-005.html
new file mode 100644
index 0000000000..cd46ded680
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi embed, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;d &lt; b &gt; c &lt; a&#x202c;</div>
+	     </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;d &lt; b &gt; c &lt; a&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-006.html
new file mode 100644
index 0000000000..c111084b21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi embed, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d0; &gt; &#x5d2; &lt; &#x5d1; &gt; &#x5d3;&#x202c;</div>
+    </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d0; &gt; &#x5d2; &lt; &#x5d1; &gt; &#x5d3;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-007.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-007.html
new file mode 100644
index 0000000000..b6117e485e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-007.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-008.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-008.html
new file mode 100644
index 0000000000..d38b1b5734
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-009.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-009.html
new file mode 100644
index 0000000000..146789a35f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-010.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-010.html
new file mode 100644
index 0000000000..2643873e34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi embed, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-011.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-011.html
new file mode 100644
index 0000000000..e1a01b43bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-embed-011.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, unicode-bidi embed</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: embed; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d3; &lt; b &gt; d &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d3; &lt; b &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-001.html
new file mode 100644
index 0000000000..40f9409afe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi isolate (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &lt; a &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &lt; a &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-002.html
new file mode 100644
index 0000000000..c1abbd0172
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi isolate (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-003.html
new file mode 100644
index 0000000000..3ea23c5bfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi isolate (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &gt; a &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &gt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-004.html
new file mode 100644
index 0000000000..4e8674fa92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi isolate (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-005.html
new file mode 100644
index 0000000000..7e4471c9be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi isolate, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d1; &lt; &#x5d0; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+      	     </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d1; &lt; &#x5d0; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-006.html
new file mode 100644
index 0000000000..eb4a12bd4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi isolate, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-007.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-007.html
new file mode 100644
index 0000000000..36c36492a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-007.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref">&#x202d;&#x5d0; 3&#x202c;</div>
+
+<div class="ref">&#x202d;&#x5d0; 3&#x202c;</div>
+
+
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-008.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-008.html
new file mode 100644
index 0000000000..f9e21cdd08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;3 a&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;3 a&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-009.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-009.html
new file mode 100644
index 0000000000..77e72e7e19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;b &lt; a</div>
+
+
+<div class="ref" dir="rtl">&#x202d;b &lt; a</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-010.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-010.html
new file mode 100644
index 0000000000..5e436f821b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi isolate, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-011.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-011.html
new file mode 100644
index 0000000000..5fc0714034
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-011.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, unicode-bidi embed</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: isolate; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d3; &lt; b &gt; d &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d3; &lt; b &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-001.html
new file mode 100644
index 0000000000..b9d066adeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, isolate-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &lt; dcba &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &lt; dcba &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-002.html
new file mode 100644
index 0000000000..56b9e7ec0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, isolate-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; dcba &lt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; dcba &lt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-003.html
new file mode 100644
index 0000000000..ec28350207
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, isolate-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-004.html
new file mode 100644
index 0000000000..8b02488112
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, isolate-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-005.html
new file mode 100644
index 0000000000..03db742fc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with isolate-override, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d2; &lt; &#x5d1; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; c &lt; b &gt; d&#x202c;</div>
+      	     </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d2; &lt; &#x5d1; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; c &lt; b &gt; d&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-006.html
new file mode 100644
index 0000000000..2f4213872b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with isolate-override, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d1; &gt; &#x5d2; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d1; &gt; &#x5d2; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-007.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-007.html
new file mode 100644
index 0000000000..379a20b2ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-007.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d3;&#x5d2;&#x5d1;&#x5d0;&#x202c; 3</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d3;&#x5d2;&#x5d1;&#x5d0;&#x202c; 3</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-008.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-008.html
new file mode 100644
index 0000000000..12500526f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;3 abcd&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;3 abcd&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-009.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-009.html
new file mode 100644
index 0000000000..af9a6eb339
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;e &lt; abcd</div>
+
+
+<div class="ref" dir="rtl">&#x202d;e &lt; abcd</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-010.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-010.html
new file mode 100644
index 0000000000..3bf9c6989b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and isolate-override, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt; &#x5d4;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt; &#x5d4;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-011.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-011.html
new file mode 100644
index 0000000000..c2e4d6b0fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-011.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, isolate-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d2;&#x5d1; &lt; cb &gt; d &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d2;&#x5d1; &lt; cb &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-012.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-012.html
new file mode 100644
index 0000000000..341913da8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-isolate-override-012.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: default direction, isolate-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-isolate-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-001.html
new file mode 100644
index 0000000000..a57042f4c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi normal (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-002.html
new file mode 100644
index 0000000000..6ae0ba13d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi normal (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &gt; a &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &gt; a &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-003.html
new file mode 100644
index 0000000000..1af0f83d83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi normal (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-004.html
new file mode 100644
index 0000000000..deb587765e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi normal (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &lt; a &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &lt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-005.html
new file mode 100644
index 0000000000..c14195471c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi normal, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+	     </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-006.html
new file mode 100644
index 0000000000..ddd877b340
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi normal, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+    </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-007.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-007.html
new file mode 100644
index 0000000000..cd4508fd74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-007.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-008.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-008.html
new file mode 100644
index 0000000000..74e3609c70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-009.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-009.html
new file mode 100644
index 0000000000..97b8591601
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-010.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-010.html
new file mode 100644
index 0000000000..cc9a249d96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi normal, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-011.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-011.html
new file mode 100644
index 0000000000..295e57749c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-normal-011.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, unicode-bidi normal</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; b &gt; &#x5d3; &gt; d &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; b &gt; &#x5d3; &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-001.html
new file mode 100644
index 0000000000..ba01516f48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, bidi-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &lt; dcba &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &lt; dcba &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-002.html
new file mode 100644
index 0000000000..d147bfb1ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, bidi-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; dcba &lt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; dcba &lt; &#x5d3;&#x5d2;&#x5d1;&#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-003.html
new file mode 100644
index 0000000000..3b200b3e37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, bidi-override (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; abcd &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-004.html
new file mode 100644
index 0000000000..9a6c96048a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, bidi-override (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-005.html
new file mode 100644
index 0000000000..980becacdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with bidi-override, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d2; &lt; &#x5d1; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;d &lt; c &lt; b &lt; a&#x202c;</div>
+	     </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d2; &lt; &#x5d1; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;d &lt; c &lt; b &lt; a&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-006.html
new file mode 100644
index 0000000000..f40ad50da5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with bidi-override, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1; &gt; &#x5d2; &gt; &#x5d3;&#x202c;</div>
+    </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1; &gt; &#x5d2; &gt; &#x5d3;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-007.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-007.html
new file mode 100644
index 0000000000..4d70ebf79e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-007.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;3 dcba&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 dcba</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-008.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-008.html
new file mode 100644
index 0000000000..a92c6ba43c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&#x5d0;&#x5d1;&#x5d2;&#x5d3; 3&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&#x5d0;&#x5d1;&#x5d2;&#x5d3; 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-009.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-009.html
new file mode 100644
index 0000000000..1cf791ae73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; e&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt; e&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-010.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-010.html
new file mode 100644
index 0000000000..654e57572e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and bidi-override, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d4; &lt; dcba&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d4; &lt; dcba&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-011.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-011.html
new file mode 100644
index 0000000000..195891733f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-011.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: direction alone and inherited, bidi-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test b { direction: rtl; font-weight: normal; }
+.test span { unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d2;&#x5d1; &lt; cb &gt; d &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d2;&#x5d1; &lt; cb &gt; d &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-012.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-012.html
new file mode 100644
index 0000000000..9bb8ef841f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-override-012.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: default direction, bidi-override</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 15em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; abcd &gt; &#x5d0;&#x5d1;&#x5d2;&#x5d3; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-001.html
new file mode 100644
index 0000000000..932d746119
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: span unicode-bidi plaintext, rtl (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d2; &lt; b &lt; &#x5d0; &gt;&#x202c;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d2; &lt; b &lt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-002.html
new file mode 100644
index 0000000000..63e4a615a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span unicode-bidi plaintext, rtl (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d2; &lt; b &lt; &#x5d0; &lt;&#x202c;</div>
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d2; &lt; b &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-003.html
new file mode 100644
index 0000000000..82457f382d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: span unicode-bidi plaintext, ltr (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &gt; c &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &gt; &#x5d0; &gt; c &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-004.html
new file mode 100644
index 0000000000..e91be7c4a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: span unicode-bidi plaintext, ltr (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt; c &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt; c &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-005.html
new file mode 100644
index 0000000000..4301099e19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element as directional character with unicode-bidi plaintext, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d1; &lt; &#x5d0; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+      	     </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;a &gt; &#x5d1; &lt; &#x5d0; &gt; d&#x202c;</div>
+      	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-006.html
new file mode 100644
index 0000000000..32b211e902
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi plaintext, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d3; &lt; b &gt; c &lt; &#x5d0;&#x202c;</div>
+      	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+      	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-007.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-007.html
new file mode 100644
index 0000000000..7b5d23bbf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-007.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; 3&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; 3&#x202c;</div>
+
+
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-008.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-008.html
new file mode 100644
index 0000000000..6201cbef25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;3 a&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;3 a&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-009.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-009.html
new file mode 100644
index 0000000000..a2885a191a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;b &lt; a</div>
+
+
+<div class="ref" dir="rtl">&#x202d;b &lt; a</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-010.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-010.html
new file mode 100644
index 0000000000..2b814fc9bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: element isolation and unicode-bidi plaintext, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d0; &gt; &#x5d1;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-011.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-011.html
new file mode 100644
index 0000000000..91115a5aa9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-011.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span unicode-bidi plaintext, no strong (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &gt; &gt; &lt;&#x202c;</div>
+
+<div class="ref" dir="rtl">&#x202d;&lt; &gt; &gt; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-br-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-br-001-ref.html
new file mode 100644
index 0000000000..23bb3e9933
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-plaintext-br-001-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+div.test {
+  font-family: Arial;
+  line-height: 1;
+  width: 10ch;
+  border: 1px solid blue;
+}
+</style>
+<body>
+  <div class="test" dir="rtl">
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+    MMMMM
+  </div>
+  <div class="test">
+    MMMMM
+    &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+  </div>
+  <div class="test">
+    <div>a</div>
+    <div dir="rtl">
+      &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+      MMMMM
+    </div>
+  </div>
+  <div class="test">
+    <div>a</div>
+    <div>
+      MMMMM
+      &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+    </div>
+  </div>
+  <div class="test">
+    <div dir="rtl">&#x5D0;</div>
+    <div dir="rtl">
+      &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+      MMMMM
+    </div>
+  </div>
+  <div class="test">
+    <div dir="rtl">&#x5D0;</div>
+    <div>
+      MMMMM
+      &#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;&#x5D0;
+    </div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-table-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-table-001.html
new file mode 100644
index 0000000000..076e17e2e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-table-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: table columns</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if you see two lines reading c b a.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+
+The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run.
+-->
+
+
+<div class="test">
+<table><tbody>
+<tr><td>a</td><td>b</td><td>c</td></tr>
+<tr><td>a</td><td>b</td><td>c</td></tr>
+</tbody></table>
+</div>
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-001.html
new file mode 100644
index 0000000000..ca8ead03f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi unset (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d0; &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-002.html
new file mode 100644
index 0000000000..8b52582d0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction rtl, unicode-bidi unset (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &gt; a &gt;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; &#x5d0; &gt; a &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-003.html
new file mode 100644
index 0000000000..364c85b6bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi unset (1)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; a &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-004.html
new file mode 100644
index 0000000000..3c8ab54b34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: span direction ltr, unicode-bidi unset (2)</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &lt; a &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d0; &lt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-005.html
new file mode 100644
index 0000000000..877572e904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi unset, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+	     </div>
+
+
+<div class="ref"><div dir="rtl">&#x202d;d &lt; &#x5d1; &lt; &#x5d0; &lt; a&#x202c;</div>
+	     <div dir="rtl">&#x202d;a &gt; b &gt; c &gt; d&#x202c;</div>
+	     </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-006.html
new file mode 100644
index 0000000000..84e87ff243
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element as directional character with unicode-bidi unset, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+    </div>
+
+
+<div class="ref"><div dir="ltr">&#x202d;&#x5d0; &gt; b &gt; c &gt; &#x5d3;&#x202c;</div>
+	     <div dir="ltr">&#x202d;&#x5d3; &lt; &#x5d2; &lt; &#x5d1; &lt; &#x5d0;&#x202c;</div>
+    </div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-007.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-007.html
new file mode 100644
index 0000000000..10f74193c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-007.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, rtl + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;3 &#x5d0;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-008.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-008.html
new file mode 100644
index 0000000000..6e86d03db5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, ltr + number</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a 3&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-009.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-009.html
new file mode 100644
index 0000000000..bee3e7eb6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, rtl list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: ltr; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+<div class="ref" dir="rtl">&#x202d;a &gt; b</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-010.html b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-010.html
new file mode 100644
index 0000000000..f80faf10db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/bidi-unset-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction/unicode-bidi: element isolation and unicode-bidi unset, ltr list</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test span { direction: rtl; unicode-bidi: normal; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+<div class="ref" dir="ltr">&#x202d;&#x5d1; &lt; &#x5d0;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-001.html
new file mode 100644
index 0000000000..52e9244bb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-002.html
new file mode 100644
index 0000000000..e3ab7a3a80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: ltr; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div dir="rtl">
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-003.html
new file mode 100644
index 0000000000..1f0f8a9436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-embed-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: rtl; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+</div>
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; c &lt; &#x5d1; &lt; a &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-001.html
new file mode 100644
index 0000000000..61cf4f61e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-002.html
new file mode 100644
index 0000000000..3ac969b21c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: ltr; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div dir="rtl">
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-003.html
new file mode 100644
index 0000000000..96131d4426
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-004.html
new file mode 100644
index 0000000000..3ae03a6815
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div override inheritance</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: bidi-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; ef &lt; &#x5d3;&#x5d2; &lt; ab &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+</div>
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; ef &lt; &#x5d3;&#x5d2; &lt; ab &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-001.html
new file mode 100644
index 0000000000..9e132ce8c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-002.html
new file mode 100644
index 0000000000..c3e50f5a40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div override ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: ltr; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div dir="rtl">
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-003.html
new file mode 100644
index 0000000000..fc8da8549b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>direction: div direction ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; ab &gt; &#x5d2;&#x5d3; &gt; ef &gt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-004.html
new file mode 100644
index 0000000000..8de24ce412
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-override-isolate-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div override inheritance</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { direction: rtl; unicode-bidi: isolate-override; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; ef &lt; &#x5d3;&#x5d2; &lt; ab &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+</div>
+
+<div class="ref">
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; ef &lt; &#x5d3;&#x5d2; &lt; ab &lt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt; fe &lt; &#x5d3;&#x5d2; &lt; ba &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-001.html
new file mode 100644
index 0000000000..2c2129fe23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext, rtl</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+
+The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run.
+-->
+
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d2; &lt; b &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+<div class="ref" dir="rtl">&#x202d;&lt; &#x5d2; &lt; b &lt; &#x5d0; &lt;&#x202c;</div>
+
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-002.html
new file mode 100644
index 0000000000..ebc0b8feb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext, ltr</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+
+The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run.
+-->
+
+<div dir="rtl">
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+
+<div class="ref" dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-003.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-003.html
new file mode 100644
index 0000000000..5f9457d744
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext inheritance</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt;  &#x5d0; &gt; b &gt;  &#x5d2; &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+</div>
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt;  &#x5d0; &gt; b &gt;  &#x5d2; &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-004.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-004.html
new file mode 100644
index 0000000000..de5c09a1de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: div plaintext with br</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+</div>
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-005.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-005.html
new file mode 100644
index 0000000000..014cbf01c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: textarea plaintext</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test textarea { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+textarea { font-family: ezra_silregular, serif; height:5em; width: 100%; border: 0; font-size: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes display the same glyphs in the same order, with the same line breaks.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div>&#xA0;</div>
+</div>
+
+<div class="ref">
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div>&#xA0;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-006.html
new file mode 100644
index 0000000000..8a68e2bac2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/block-plaintext-006.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>unicode-bidi: pre plaintext</title>
+
+<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'/>
+<style type="text/css">
+.test pre { unicode-bidi: plaintext; }
+
+ /* the following styles are not part of the test */
+.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; width: 10em; padding: 5px; clear: both; }
+input { margin: 5px; }
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: ezra_silregular, serif; }
+pre { font-family: ezra_silregular, serif; height:5em; width: 100%; border: 0; font-size: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the two boxes display the same glyphs in the same order, with the same line breaks.</p>
+
+
+<!--Notes:
+Key to entities used below:
+        &#x5d0; ... &#x5d5; - The first six Hebrew letters (strongly RTL).
+        &#x202d; - The LRO (left-to-right-override) formatting character.
+        &#x202c; - The PDF (pop directional formatting) formatting character; closes LRO.
+-->
+
+
+<div class="ref">
+<div>&#xA0;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div>&#xA0;</div>
+</div>
+
+<div class="ref">
+<div>&#xA0;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div dir="rtl">&#x202d;&lt;  &#x5d2; &lt; b &lt;  &#x5d0; &lt;&#x202c;</div>
+<div dir="ltr">&#x202d;&gt; a &gt; &#x5d1; &gt; c &gt;&#x202c;</div>
+<div>&#xA0;</div>
+</div>
+
+
+
+
+
+</body></html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/ch-units-vrl-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/ch-units-vrl-001-ref.html
new file mode 100644
index 0000000000..7bb13b36e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/ch-units-vrl-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+div:nth-of-type(1) { background: green; }
+div:nth-of-type(2) { background: blue; }
+div:nth-of-type(1),
+div:nth-of-type(2) {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: 5ch;
+  width: 5ch;
+}
+div:nth-of-type(3) {
+  background: orange;
+  height: 5ch;
+  width: 5ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <div></div>
+  <div></div>
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/ch-units-vrl-005-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/ch-units-vrl-005-ref.html
new file mode 100644
index 0000000000..dcbe650864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/ch-units-vrl-005-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 20px;
+  color: transparent;
+}
+
+div:nth-of-type(1) { background: green; }
+div:nth-of-type(2) { background: blue; }
+div:nth-of-type(1),
+div:nth-of-type(2) {
+  height: 5ch;
+  width: 5ch;
+}
+div:nth-of-type(3) {
+  background: orange;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: 5ch;
+  width: 5ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
+  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
+  <div></div>
+  <div></div>
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/direction-upright-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/direction-upright-001.html
new file mode 100644
index 0000000000..b8768ba772
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/direction-upright-001.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<title>Reftest Reference</title>
+<meta charset=utf-8>
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    text-align: right;
+    font: 20px/1 sans-serif;
+  }
+  span { text-orientation: upright; }
+  hr { clear: both; }
+</style>
+
+<p>Test passes if both rows of boxes are identical (order, orientation, and arrangement of contents).
+
+
+<div style="writing-mode: vertical-rl">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+<div style="writing-mode: vertical-lr">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+
+<div dir=rtl> א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+
+
+<hr>
+
+
+<div style="writing-mode: vertical-rl">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+<div style="writing-mode: vertical-lr">
+<bdo dir=ltr>
+ ז <span>ג ד</span> <span>ה ו</span> ב א<br>
+٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
+</bdo>
+</div>
+
+<div dir=rtl> א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+ א ב ג ד ה ו ז<br>
+ ١ ٢ ٣ ٤ ٥ ٦ ٧
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/direction-upright-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/direction-upright-002.html
new file mode 100644
index 0000000000..eac7ca9af9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/direction-upright-002.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<title>Reftest Reference</title>
+
+<style>
+  body > div {
+    border: solid silver;
+    float: left;
+    margin: 1em;
+    border-inline-start-color: orange;
+    border-block-start-color: aqua;
+    border-inline-end-color: lime;
+    border-block-end-color: yellow;
+  }
+  colgroup:first-child { background: fuchsia; }
+  col:last-child { background: purple; }
+  .flex { display: flex; }
+  .grid { grid-template-columns: auto auto }
+  hr { clear: both }
+</style>
+
+<p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents).
+
+<div style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<div dir=rtl>
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<hr>
+
+<div style="writing-mode: vertical-rl; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div style="writing-mode: vertical-lr; text-orientation: upright">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+
+<div dir=rtl>
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-rl">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
+<div dir=rtl style="writing-mode: sideways-lr">
+  <table>
+    <colgroup></colgroup>
+    <colgroup><col><col></colgroup>
+    <tr><td>A<td>B<td>C
+  </table>
+  <div class=flex>A <span>B</span></div>
+  <div class=grid>A <span>B</span></div>
+  <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/full-width-001-horizontal-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-001-horizontal-notref.html
new file mode 100644
index 0000000000..2666f8236a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-001-horizontal-notref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<meta content="asis" name="flags">
+<style>
+  div
+    {
+      font-size: 64px;
+    }
+
+  div > p
+    {
+      border: black solid 1px;
+    }
+
+  span.full-width
+    {
+      text-transform: full-width;
+    }
+</style>
+</head>
+<body>
+
+<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
+
+<div>
+
+  <p><span class="full-width">&#x34;</span>月</p>
+
+  <!-- &#x34; is the ISO-Latin1 digit 4 -->
+
+  <p>&#xFF14;月</p>
+
+  <!-- &#xFF14; is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
+
+  <p>&#xFF14;月</p>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/full-width-001-nofullwidth-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-001-nofullwidth-notref.html
new file mode 100644
index 0000000000..71b4956265
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-001-nofullwidth-notref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<meta content="asis" name="flags">
+<style>
+  div
+    {
+      font-size: 64px;
+      writing-mode: vertical-rl;
+    }
+
+  div > p
+    {
+      border: black solid 1px;
+    }
+</style>
+</head>
+<body>
+
+<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
+
+<div>
+
+  <p>&#x34;月</p>
+
+  <!-- &#x34; is the ISO-Latin1 digit 4 -->
+
+  <p>&#xFF14;月</p>
+
+  <!-- &#xFF14; is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
+
+  <p>&#xFF14;月</p>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/full-width-002-horizontal-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-002-horizontal-notref.html
new file mode 100644
index 0000000000..7cb8897f6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-002-horizontal-notref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<meta content="asis" name="flags">
+<style>
+  div
+    {
+      font-size: 64px;
+    }
+
+  div > p
+    {
+      border: black solid 1px;
+    }
+
+  span.full-width
+    {
+      text-transform: full-width;
+    }
+</style>
+</head>
+<body>
+
+<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
+
+<div>
+
+  <p><span class="full-width">28</span>日</p>
+
+  <p>&#xFF12;&#xFF18;日</p>
+
+  <!-- &#xFF12; is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
+
+  <!-- &#xFF18; is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
+
+  <p>28日</p>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/full-width-002-notcu-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-002-notcu-notref.html
new file mode 100644
index 0000000000..2dd5c8b513
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-002-notcu-notref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<meta content="asis" name="flags">
+<style>
+  div
+    {
+      font-size: 64px;
+      writing-mode: vertical-rl;
+    }
+
+  div > p
+    {
+      border: black solid 1px;
+    }
+
+  span.full-width
+    {
+      text-transform: full-width;
+    }
+</style>
+</head>
+<body>
+
+<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
+
+<div>
+
+  <p><span class="full-width">28</span>日</p>
+
+  <p>&#xFF12;&#xFF18;日</p>
+
+  <!-- &#xFF12; is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
+
+  <!-- &#xFF18; is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
+
+  <p>28日</p>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/full-width-notcu-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-notcu-notref.html
new file mode 100644
index 0000000000..13a04094ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-notcu-notref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<style>
+.test {
+  writing-mode: vertical-rl;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if the following paragraphs are identical:</p>
+
+<div class="test">
+  <p>６月19日</p>
+  <p>６月19日</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/full-width-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-ref.html
new file mode 100644
index 0000000000..0b02886dee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/full-width-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<style>
+.test {
+  writing-mode: vertical-rl;
+}
+
+.tcu-all {
+  text-combine-upright: all;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if the following paragraphs are identical:</p>
+
+<div class="test">
+  <p>６月<span class="tcu-all">19</span>日</p>
+  <p>６月<span class="tcu-all">19</span>日</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x1-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x1-notref.html
new file mode 100644
index 0000000000..6835d2f61d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x1-notref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p>x</p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x3-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x3-notref.html
new file mode 100644
index 0000000000..6809703f38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x3-notref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p>xxx</p>
+  <p>xxx</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x4-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x4-notref.html
new file mode 100644
index 0000000000..ab0a390719
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x4-notref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p>xxxx</p>
+  <p>xxxx</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x5-notref.html b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x5-notref.html
new file mode 100644
index 0000000000..2f89435a0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/horizontal-ahem-1x5-notref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p>xxxxx</p>
+  <p>xxxxx</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/inline-box-border-vlr-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/inline-box-border-vlr-001.html
new file mode 100644
index 0000000000..5b57e460ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/inline-box-border-vlr-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+html {
+  margin: 0;
+  font-size: 20px;
+}
+body {
+  margin: 1em;
+  border: 1px solid blue;
+}
+body > div {
+  margin-bottom: 2em;
+  border: 1px solid black;
+}
+</style>
+<body>
+  <div style="writing-mode: vertical-lr; height: 1em">
+    <div><span>a</span></div>
+  </div>
+  <div style="writing-mode: vertical-lr; height: 1em">
+    <div><span>a</span></div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/logical-props-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/logical-props-001-ref.html
new file mode 100644
index 0000000000..2154a8d3f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/logical-props-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 5px;
+  background: green;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>horizontal green stripe</strong> below and <strong>no red</strong>.
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/margin-collapse-022-023-1.xht b/testing/web-platform/tests/css/css-writing-modes/reference/margin-collapse-022-023-1.xht
new file mode 100644
index 0000000000..f54f3271fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/margin-collapse-022-023-1.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.ref
+    {
+      border: teal solid 1em;
+      font: 25px/1 Ahem;
+      height: 4em; /* computes to 100px */
+      margin-bottom: 0.2em;
+      width: 4em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+  <div class="ref" id="ref1"><img src="../support/swatch-blue.png" width="25" height="100" alt="Image download support must be enabled" /><img src="../support/swatch-orange.png" width="25" height="100" alt="Image download support must be enabled" /><img src="../support/swatch-orange.png" width="25" height="100" alt="Image download support must be enabled" /><img src="../support/swatch-blue.png" width="25" height="100" alt="Image download support must be enabled" /></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/margin-collapse-022-023-2.xht b/testing/web-platform/tests/css/css-writing-modes/reference/margin-collapse-022-023-2.xht
new file mode 100644
index 0000000000..dab33c3937
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/margin-collapse-022-023-2.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div.ref
+    {
+      border: teal solid 1em;
+      font: 25px/1 Ahem;
+      height: 4em; /* computes to 100px */
+      margin-bottom: 0.2em;
+      width: 4em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+  <div class="ref" id="ref2"><img src="../support/swatch-orange.png" width="25" height="100" alt="Image download support must be enabled" /><img src="../support/swatch-blue.png" width="25" height="100" alt="Image download support must be enabled" /><img src="../support/swatch-orange.png" width="25" height="100" alt="Image download support must be enabled" /><img src="../support/swatch-blue.png" width="25" height="100" alt="Image download support must be enabled" /></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/mongolian-orientation-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/mongolian-orientation-001-ref.html
new file mode 100644
index 0000000000..66cb618b4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/mongolian-orientation-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  font-family: "Mongolian White";
+  font-size: 2em;
+  margin: 1em;
+  writing-mode: vertical-lr;
+  float: left;
+}
+div:nth-of-type(1) { text-orientation: sideways; }
+div:nth-of-type(2) { text-orientation: sideways; }
+</style>
+
+<p>The test passes if you see two identical lines of vertical text (in Mongolian).
+
+<div>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ</div>
+<div>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/mongolian-span-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/mongolian-span-001-ref.html
new file mode 100644
index 0000000000..0b32c3a5a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/mongolian-span-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+html {
+  writing-mode: vertical-lr;
+  font-size: 50px;
+}
+</style>
+<body>
+  <div>ᠶᠠᠫᠣᠨ</div>
+  <div>ᠶᠠᠫᠣᠨ</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-block-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-block-vrl-006.html
new file mode 100644
index 0000000000..eb0e20ae09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-block-vrl-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-rl writing-mode</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" />
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-14 -->
+<meta content="ahem" name="flags" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  color:transparent;
+  font:50px/1 Ahem;
+}
+.outline {
+  color:orange;
+  display:inline-block;
+  outline:blue solid 2px;
+}
+</style>
+<p>Test passes if the inside of 3 blue rectangles is orange.
+<div class="container">
+  <span class="outline" style="margin-left:1em">1</span><br>
+  <span class="outline" style="margin-left:3em">1<br>2</span><br>
+  <span class="outline" style="margin-left:5em">1<br>2<br>X</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-vlr-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-vlr-006.html
new file mode 100644
index 0000000000..e2988e01c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-vlr-006.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-lr writing-mode</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" />
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-14 -->
+<meta content="ahem" name="flags" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  color:transparent;
+  font:50px/1 Ahem;
+  width:2em;
+}
+.outline {
+  color:orange;
+  outline:blue solid 2px;
+}
+</style>
+<p>Test passes if the inside of 2 blue squares is orange.
+<div>1<span class="outline">2</span> 34 56 78 <span class="outline">9</span>0</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-vrl-006.html
new file mode 100644
index 0000000000..0fa6d90677
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/outline-inline-vrl-006.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-rl writing-mode</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" />
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-14 -->
+<meta content="ahem" name="flags" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  color:transparent;
+  font:50px/1 Ahem;
+}
+.outline {
+  color:orange;
+  outline:blue solid 2px;
+}
+</style>
+<p>Test passes if the inside of 2 blue squares is orange.
+<div class="container">
+  <div>111<span class="outline">1</span></div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1111<span class="outline">1</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/scrollbar-vertical-rl-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/scrollbar-vertical-rl-ref.html
new file mode 100644
index 0000000000..2ee601d16d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/scrollbar-vertical-rl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Writing Modes Test: vertical-rl painting with vertical scrollbar reference</title>
+  <link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
+  <style>
+    #container {
+      width: 300px;
+      height: 200px;
+      border: 1px solid black;
+      writing-mode: vertical-rl;
+      overflow: scroll;
+      background: blue;
+    }
+    #target {
+      width:500px;
+    }
+  </style>
+<div id="container">
+  <div id="target"><br></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/svg-aliasing-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/svg-aliasing-001-ref.html
new file mode 100644
index 0000000000..75461923ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/svg-aliasing-001-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Writing modes test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<p>The test passes if you can see “1 2 3” 6 times below (without the quotation marks). If any of them is reversed (“3 2 1”) the test fails.</p>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="300"
+   height="600">
+<g>
+  <text x="0" y="50" style="fill: blue;">1 2 3</text>
+  <text x="0" y="150" style="fill: blue;">1 2 3</text>
+</g>
+<g>
+  <text x="150" y="50" style="fill: blue;">1 2 3</text>
+  <text x="150" y="150" style="fill: blue;">1 2 3</text>
+</g>
+<g>
+  <text x="300" y="50" style="direction: rtl; fill: blue;">3 2 1</text>
+  <text x="300" y="150" style="direction: rtl; fill: blue;">3 2 1</text>
+</g>
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/svg-aliasing-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/svg-aliasing-002-ref.html
new file mode 100644
index 0000000000..be3b7d0b1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/svg-aliasing-002-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Writing modes test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<p>The test passes if you can see “1 2 3” (without the quotation marks) 3 times below going top-to-bottom.
+If any of them is reversed (going bottom to top), the test fails.</p>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="300"
+   height="600">
+<g>
+  <text x="50" y="50" style="writing-mode: vertical-rl; fill: blue;">1 2 3</text>
+</g>
+<g>
+  <text x="125" y="50" style="writing-mode: vertical-rl; fill: blue;">1 2 3</text>
+</g>
+<g>
+  <text x="200" y="80" style="writing-mode: vertical-rl; direction: rtl; fill: blue;">3 2 1</text>
+</g>
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/table-cell-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/table-cell-001-ref.html
new file mode 100644
index 0000000000..a58eac85ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/table-cell-001-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Writing Mode test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<meta flags="ahem">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/20px ahem;
+  position: absolute;
+  z-index: -1;
+  background: green;
+  height: 4em;
+  width: 5em;
+}
+
+
+</style>
+
+<p>There should be a <strong>green rectangle</strong> and <strong>no red</strong>.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/table-cell-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/table-cell-002-ref.html
new file mode 100644
index 0000000000..e5b895aa95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/table-cell-002-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Writing Mode test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<meta flags="ahem">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 50px / 50px ahem;
+  color: green;
+
+  max-height: 100px;
+  writing-mode: vertical-rl;
+  /* Doing this with a horizontal div and max-width ought to result in the same 100x100 green square,
+     but font rasterisation may (and in practice does) result in different aliasing artifacts.
+     Therefore I am using the same writing mode as the test,
+     to make sure we get identically sharp/fuzzy edges on the same sides.
+  */
+}
+</style>
+
+<p>There should be a <strong>green square</strong> and <strong>no red</strong>.
+
+<div>xx xx</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-001-ref.html
new file mode 100644
index 0000000000..9c5acb315d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.v-rl {
+  writing-mode: vertical-rl;
+  width: 200px;
+}
+span {
+  -webkit-text-combine: horizontal; /*testing the layout text-combine, not it's support in general*/
+  text-combine-upright: all;
+  white-space: normal;
+}
+#test { color: blue; }
+#ref { color: orange; }
+</style>
+<p>Test passes if the blue and orange lines of text are identical.
+
+<div class=v-rl>
+  <div id=test>あ<span>12</span>い<span>34</span>う<span>5&nbsp;6</span>えお</div>
+  <div id=ref>あ<span>12</span>い<span>34</span>う<span>5&nbsp;6</span>えお</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-002-ref.html
new file mode 100644
index 0000000000..3844991110
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-002-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.v-rl {
+  writing-mode: vertical-rl;
+  width: 200px;
+}
+span {
+  -webkit-text-combine: horizontal; /*testing the layout text-combine, not it's support in general*/
+  text-combine-upright: all;
+  white-space: pre;
+}
+#test { color: blue; }
+#ref { color: orange; }
+</style>
+<p>Test passes if the blue and orange lines of text are identical.
+
+<div class=v-rl>
+  <div id=test>あ<span>&nbsp;&nbsp;12</span>い<span>34&nbsp;&nbsp;</span>う<span>5&nbsp;&nbsp;&nbsp;&nbsp;6</span>えお</div>
+  <div id=ref>あ<span>&nbsp;&nbsp;12</span>い<span>34&nbsp;&nbsp;</span>う<span>5&nbsp;&nbsp;&nbsp;&nbsp;6</span>えお</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-003-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-003-ref.html
new file mode 100644
index 0000000000..449036ff54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/tcy-white-space-processing-003-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.v-rl {
+  writing-mode: vertical-rl;
+  width: 200px;
+}
+span {
+  display: inline-block;
+  height: 1em;
+}
+#test { color: blue; }
+#test2 { color: brown; }
+#ref { color: orange; }
+.v-rl > div {
+  display: inline-block;
+  border: solid;
+  margin: 0 5px;
+}
+</style>
+<p>Test passes if the blue, orange, brown boxes are identical.
+
+<div class=v-rl>
+  <div id=test>あいう<span></span>えお<span></span></div>
+  <br>
+  <div id=test2>あいう<span></span>えお<span></span></div>
+  <br>
+  <div id=ref>あいう<span></span>えお<span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-decorations-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-decorations-001.html
new file mode 100644
index 0000000000..6b35f7f254
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-decorations-001.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes Test: The resulting composition is treated as a signel glyph for decorations</title>
+<meta name="flags" content="ahem">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+    font: 50px/1 Ahem;
+    text-decoration-skip-ink: none;
+}
+.vlr {
+    writing-mode:vertical-lr;
+}
+.vrl {
+    writing-mode:vertical-rl;
+}
+.test, .ref {
+    border:solid thin;
+    margin:.2em;
+}
+p {
+    margin:0 .5em;
+}
+.underline {
+    text-decoration:underline;
+}
+.overline {
+    text-decoration:overline;
+}
+.emphasis {
+    text-emphasis:filled;
+}
+</style>
+<p>This test asserts the resulting composition is treated as a single glyph for decorations.
+<p>Test passes if the following two boxes in each row are identical.
+<div id=container>
+    <div class=vlr>
+        <div class=test>
+            <p class=underline>X&#xA0;X
+            <p class=overline>X&#xA0;X
+            <p class=emphasis>XXX
+        </div>
+        <div class=ref>
+            <p class=underline>X&#xA0;X
+            <p class=overline>X&#xA0;X
+            <p class=emphasis>XXX
+        </div>
+    </div>
+    <div class=vrl>
+        <div class=test>
+            <p class=underline>X&#xA0;X
+            <p class=overline>X&#xA0;X
+            <p class=emphasis>XXX
+        </div>
+        <div class=ref>
+            <p class=underline>X&#xA0;X
+            <p class=overline>X&#xA0;X
+            <p class=emphasis>XXX
+        </div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-inherit-all-001.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-inherit-all-001.html
new file mode 100644
index 0000000000..ee862ad9a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-inherit-all-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes Test: text-combine-upright:all inherits</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+#container {
+    font-size:50px;
+}
+.vrl {
+    writing-mode:vertical-rl;
+}
+.tcy {
+    text-combine-upright:all;
+}
+</style>
+<p>Test passes if all two-digit numbers are <b>upright</b> in <b>horizontal</b> flow.
+<div id=container>
+    <div>66</div>
+    <div class=vrl><span class=tcy>66</span></div>
+    <div class=vrl><span class=tcy>66</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-inherit-all-002.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-inherit-all-002.html
new file mode 100644
index 0000000000..315d6f54bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-inherit-all-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Writing Modes Test: text-combine-upright :all </title>
+    <link rel="author" title="Shinsuke Matsuki" href="mailto:shinsuke.matsuki@access-company.com">
+    <meta charset="utf-8">
+    <style type="text/css">
+    #container {
+        font-size:50px;
+    }
+    .vrl {
+        writing-mode:vertical-rl;
+    }
+    .tcy {
+        text-combine-upright:all;
+    }
+    </style>
+</head>
+<body>
+    <p>Test passes if the <b>line breaks</b> before <q>56</q>, and all digits are in<b>upright</b> in <b>horizontal</b> flow.
+    <div id=container>
+        <div class="vrl tcy">
+            <table>
+                <tr>
+                    <td>
+                        <div style="display: inline-table">
+                            <div style="display: inline-block">
+                                <span class=tcy>12</span><span class=tcy>56</span>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-layout-rules-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-layout-rules-001-ref.html
new file mode 100644
index 0000000000..4f79679fff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-layout-rules-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: Layout rules of text-combine-upright</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  writing-mode: vertical-rl;
+  font: 50px/1 Ahem;
+}
+#container > div {
+  margin:.2em;
+}
+.tcy {
+  text-combine-upright: all;
+  color:transparent;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there are 2 <strong>identical</strong> hollow squares.</p>
+<div id="container">
+  <div>AAA<br>A A<br>AAA</div>
+  <div>AAA<br>A A<br>AAA</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-sideways-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-sideways-001-ref.html
new file mode 100644
index 0000000000..ede62dcb47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-sideways-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS reference file</title>
+<style>
+.test {
+  font: 32px sans-serif;
+  writing-mode: sideways-rl;
+}
+</style>
+<body lang="zh">
+<p>Test passes if the digits are NOT rotated or compressed to appear horizontally</p>
+<div class="test">中文1234中文</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-sideways-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-sideways-002-ref.html
new file mode 100644
index 0000000000..390d37d016
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-sideways-002-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS reference file</title>
+<style>
+.test {
+  font: 32px sans-serif;
+  writing-mode: sideways-lr;
+}
+</style>
+<body>
+<p>Test passes if the digits are NOT rotated or compressed to appear horizontally</p>
+<div class="test">AB123CD</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-value-single-character.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-value-single-character.html
new file mode 100644
index 0000000000..aeda4e4f95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-combine-upright-value-single-character.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: all</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<style>
+@font-face {
+  font-family: tcu-font;
+  src: url("/fonts/tcu-font.woff");
+}
+
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  font-family: tcu-font;
+}
+
+.tcy {
+  text-combine-upright: all;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> white triangles.</p>
+
+<div class="test">
+  <p>3</p>
+  <p>3</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/text-shadow-orientation-upright-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/text-shadow-orientation-upright-001-ref.html
new file mode 100644
index 0000000000..54c1f74259
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/text-shadow-orientation-upright-001-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      color: transparent;
+      font-family: Ahem;
+      font-size: 100px;
+      line-height: 1;
+    }
+
+  div#purple
+    {
+      text-shadow: 1em 0em purple;
+    }
+
+  div#orange-blue
+    {
+      color: yellow;
+      margin-left: 1em;
+      text-shadow: -1em 0em orange, 1em 0em blue;
+    }
+
+  div#fuchsia
+    {
+     text-shadow: 1em 0em fuchsia;
+    }
+  </style>
+
+  <div id="purple">U</div>
+
+  <div id="orange-blue">B</div>
+
+  <div id="fuchsia">F</div>
+
+  <!--
+
+                  .........
+                  .       .
+                  .       . <-purple
+                  .       .
+           .......................
+           .      .       .      .
+  orange-> .      .  yel  .      . <-blue
+           .      .  low  .      .
+           .......................
+                  .       .
+                  .       . <-fuchsia
+                  .       .
+                  .........
+
+  -->
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/three-levels-of-orthogonal-flows.html b/testing/web-platform/tests/css/css-writing-modes/reference/three-levels-of-orthogonal-flows.html
new file mode 100644
index 0000000000..65a1618560
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/three-levels-of-orthogonal-flows.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<p>The yellow box should be in the top right corner of the hotpink box.</p>
+<div style="width:30em; height:30em; background:hotpink;">
+    <div style="float:right; writing-mode:vertical-rl; background:yellow;">
+      <div style="visibility:hidden;">
+        Roses are red,<br>
+        violets are blue.<br>
+        All my base<br>
+        are belong to you.<br>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows-fixed.html b/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows-fixed.html
new file mode 100644
index 0000000000..93b1627a22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows-fixed.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<title>Two levels of writing mode roots with text inside, fixed available inline size for inner on outer</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<div style="width:10em; border:solid; background:yellow;">
+  <div style="padding:3px;">
+    This text should be inside a box with a yellow background and a black border. There should be no red.
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows-percentage.html b/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows-percentage.html
new file mode 100644
index 0000000000..2f00515d2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows-percentage.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Two levels of writing mode roots with text inside, percentage inline size on inner</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<p>There should be three lines below. The middle line should have a yellow
+  background that takes up about 50% of the viewport width (but otherwise be
+  exactly like the two others, i.e. no extra height or anything like that).</p>
+A B C D E F G
+<div style="width:50vw; background:yellow;">
+  A B C D E F G
+</div>
+A B C D E F G
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows.html b/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows.html
new file mode 100644
index 0000000000..c29f6d94fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/two-levels-of-orthogonal-flows.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>Two levels of writing mode roots with text inside, no constraints</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic" title="4. Intrinsic Size Determination">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1. Available Space in Orthogonal Flows">
+<p>There should be three lines below. The middle line should have a
+  yellow background (but otherwise be exactly like the two others,
+  i.e. no extra height or anything like that)</p>
+A B C D E F G
+<div style="width:fit-content; background:yellow;">
+  A B C D E F G
+</div>
+A B C D E F G
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x1-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x1-ref.html
new file mode 100644
index 0000000000..5fc6523630
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p>x</p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x3-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x3-ref.html
new file mode 100644
index 0000000000..dcb15f7690
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p>xxx</p>
+  <p>xxx</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x4-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x4-ref.html
new file mode 100644
index 0000000000..e8968d166c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x4-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p>xxxx</p>
+  <p>xxxx</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x5-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x5-ref.html
new file mode 100644
index 0000000000..5aa1943995
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/vertical-ahem-1x5-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p>xxxxx</p>
+  <p>xxxxx</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-horizontal-001l-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-horizontal-001l-ref.html
new file mode 100644
index 0000000000..22fa1082a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-horizontal-001l-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<style>
+.test {
+  font-size: 5em;
+  line-height: 1;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if the following texts are identical:</p>
+
+<div class="test">
+  <p>2014</p>
+  <p>2014</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-horizontal-001r-ref.html b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-horizontal-001r-ref.html
new file mode 100644
index 0000000000..204d87a4b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-horizontal-001r-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<style>
+.test {
+  font-size: 5em;
+  line-height: 1;
+  direction: rtl;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if the following texts are identical:</p>
+
+<div class="test">
+  <p>2014</p>
+  <p>2014</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-lr-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-lr-002-ref.xht
new file mode 100644
index 0000000000..32e5238365
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-lr-002-ref.xht
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: writing-mode - vertical-lr - basic case - reference</title>
+    <link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+        div
+        {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            width: 6em;
+            white-space: pre;
+        }
+    ]]></style>
+</head>
+<body>
+    <p>The upper block is identical to the lower block including each character positions.</p>
+<div>adhjns
+  i  t
+be ko
+c  lqu
+ f m v
+ g  r</div>
+<div>adhjns
+  i  t
+be ko
+c  lqu
+ f m v
+ g  r</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-rl-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-rl-001-ref.xht
new file mode 100644
index 0000000000..9a7e0250cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-rl-001-ref.xht
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: writing-mode - vertical-rl - basic case - reference</title>
+    <link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+        div
+        {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            width: 6em;
+            white-space: pre;
+        }
+    ]]></style>
+</head>
+<body>
+    <p>The upper block is identical to the lower block including each character positions.</p>
+<div>tomiea
+  n  b
+uq jf
+v  kgc
+ r l d
+ s  h</div>
+<div>tomiea
+  n  b
+uq jf
+v  kgc
+ r l d
+ s  h</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-rl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-rl-002-ref.xht
new file mode 100644
index 0000000000..4c25f00f1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/reference/writing-mode-vertical-rl-002-ref.xht
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: writing-mode - vertical-rl - basic case - reference</title>
+    <link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+        div
+        {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            width: 6em;
+        }
+    ]]></style>
+</head>
+<body>
+    <p>The upper block is identical to the lower block including each character positions.</p>
+<div>urmiea
+vsn&nbsp;&nbsp;x
+&nbsp;&nbsp;&nbsp;jf
+&nbsp;tokgc
+&nbsp;&nbsp;&nbsp;l d
+&nbsp;&nbsp;q h</div>
+<div>urmiea
+vsn&nbsp;&nbsp;x
+&nbsp;&nbsp;&nbsp;jf
+&nbsp;tokgc
+&nbsp;&nbsp;&nbsp;l d
+&nbsp;&nbsp;q h</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/relpos-inline-overflowing-block-vrl.html b/testing/web-platform/tests/css/css-writing-modes/relpos-inline-overflowing-block-vrl.html
new file mode 100644
index 0000000000..fa09cf37cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/relpos-inline-overflowing-block-vrl.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>vertical-rl, relatively positioned inline in block that overflows smaller parent</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1. Principles of Layout in Vertical Writing Modes">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="position:relative; writing-mode:vertical-rl; width:100px; height:100px; background:green;">
+  <div style="position:absolute; right:0; top:0; width:0.5em; height:1em; background:red;"></div>
+  <div style="width:200px;">
+    <span style="position:relative; color:green; background:green; display: inline-block">XXX</span>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-002.xht b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-002.xht
new file mode 100644
index 0000000000..ef650ee1bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-002.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: alternate text of image and vertical writing mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks that alternate text (latin) of image rotates 90° clockwise in vertical writing mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font-size: 2em;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the words "Text sample" are <strong>rotated 90° clockwise</strong>.</p>
+
+  <div><img src="#" alt="Text sample" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-003.xht b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-003.xht
new file mode 100644
index 0000000000..dbd9a23de6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-003.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: alternate text of image and vertical writing mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks that alternate text (latin) of image rotates 90° clockwise in vertical writing mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font-size: 2em;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the words "Text sample" are <strong>rotated 90° clockwise</strong>.</p>
+
+  <div><img src="#" alt="Text sample" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-004-ref.html b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-004-ref.html
new file mode 100644
index 0000000000..b6fd059120
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-004-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 50px; background: blue;"></div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-004.html b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-004.html
new file mode 100644
index 0000000000..61705d3d15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/replaced-content-image-004.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>Checks the natural-size of the image is in the correct orientation.</title>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1204409">
+<link rel="match" href="replaced-content-image-004-ref.html">
+<div style="writing-mode: vertical-rl;">
+  <img src="support/blue-200x100.png" width="200" height="100" style="width: auto; height: auto; max-width: 100px; max-height: 100px;">
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-slr-023.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-slr-023.xht
new file mode 100644
index 0000000000..56cac4c2c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-slr-023.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-lr - table rows progression</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'sideways-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc... Table cells and table columns in a table with writing-mode set to 'sideways-lr' are ordered according to inline flow direction, which is from bottom to top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: sideways-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">AAA &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; </td><td class="left-most-cell">BB C D EE</td><td class="left-most-cell">FF &nbsp;G &nbsp;H JJ</td></tr>
+
+<!-- The "A" -->
+  <tr><td>KKK &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; LLL</td><td>MM N O QQ</td><td>RR &nbsp;S &nbsp;T UU</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td>V&nbsp;&nbsp; W&nbsp; X&nbsp; YYY</td><td>aa b c d</td><td>ee &nbsp;f &nbsp;g &nbsp;h</td></tr>
+
+<!-- The right-most "S" -->
+  <tr><td>j&nbsp;&nbsp; k&nbsp; m&nbsp; nnn</td><td>qq r s t</td><td>uu &nbsp;v &nbsp;w &nbsp;x</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-slr-029.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-slr-029.xht
new file mode 100644
index 0000000000..94051c917b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-slr-029.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-lr - table rows progression (thead, 2 tbodies, tfoot)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'sideways-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc... Table cells and table columns in a table with writing-mode set to 'sideways-lr' are ordered according to inline flow direction, which is from bottom to top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: sideways-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <thead>
+
+<!-- The "P" -->
+      <tr><td class="left-most-cell">AAA &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; </td><td class="left-most-cell">BB C D EE</td><td class="left-most-cell">FF &nbsp;G &nbsp;H JJ</td></tr>
+
+    </thead>
+
+    <tfoot>
+
+<!-- The right-most "S" -->
+      <tr><td>j&nbsp;&nbsp; k&nbsp; m&nbsp; nnn</td><td>qq r s t</td><td>uu &nbsp;v &nbsp;w &nbsp;x</td></tr>
+
+    </tfoot>
+
+    <tbody>
+
+<!-- The "A" -->
+      <tr><td>KKK &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; LLL</td><td>MM N O QQ</td><td>RR &nbsp;S &nbsp;T UU</td></tr>
+
+    </tbody>
+
+    <tbody>
+
+<!-- The left-most "S" -->
+      <tr><td>V&nbsp;&nbsp; W&nbsp; X&nbsp; YYY</td><td>aa b c d</td><td>ee &nbsp;f &nbsp;g &nbsp;h</td></tr>
+
+    </tbody>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-srl-022.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-srl-022.xht
new file mode 100644
index 0000000000..32429ab87f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-srl-022.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-rl - table rows progression</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'sideways-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: sideways-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The right-most "S" -->
+  <tr><td>A&nbsp; B&nbsp; C&nbsp; DDD</td><td>EE F G H</td><td>JJ &nbsp;K &nbsp;L &nbsp;M</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td>N&nbsp; O&nbsp; Q&nbsp; RRR</td><td>SS T U V</td><td>WW &nbsp;X &nbsp;Y &nbsp;Z</td></tr>
+
+<!-- The "A" -->
+  <tr><td>aaa b&nbsp; c&nbsp; ddd</td><td>ee f g hh</td><td>jj &nbsp; &nbsp; kk</td></tr>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">mmm n&nbsp; o&nbsp; qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell">&nbsp; &nbsp; &nbsp; vv</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-srl-028.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-srl-028.xht
new file mode 100644
index 0000000000..2fdbd46cc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-srl-028.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sideways-rl - table rows progression (thead, 2 tbodies, tfoot)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'sideways-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: sideways-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <thead>
+
+<!-- The right-most "S" -->
+      <tr><td>A&nbsp; B&nbsp; C&nbsp; DDD</td><td>EE F G H</td><td>JJ &nbsp;K &nbsp;L &nbsp;M</td></tr>
+
+    </thead>
+
+    <tfoot>
+
+<!-- The "P" -->
+      <tr><td class="left-most-cell">mmm n&nbsp; o&nbsp; qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell">&nbsp; &nbsp; &nbsp; vv</td></tr>
+
+    </tfoot>
+
+    <tbody>
+
+<!-- The left-most "S" -->
+      <tr><td>N&nbsp; O&nbsp; Q&nbsp; RRR</td><td>SS T U V</td><td>WW &nbsp;X &nbsp;Y &nbsp;Z</td></tr>
+
+    </tbody>
+
+    <tbody>
+<!-- The "A" -->
+      <tr><td>aaa b&nbsp; c&nbsp; ddd</td><td>ee f g hh</td><td>jj &nbsp; &nbsp; kk</td></tr>
+
+    </tbody>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-003.xht
new file mode 100644
index 0000000000..c29ecc006a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-003.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-lr - table rows progression</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'vertical-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">AAA B&nbsp; C&nbsp; DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ &nbsp; &nbsp; &nbsp;</td></tr>
+
+<!-- The "A" -->
+  <tr><td>KKK L&nbsp; M&nbsp; NNN</td><td>OO Q R SS</td><td>TT &nbsp; &nbsp; UU</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td>VVV W&nbsp; X&nbsp; Y&nbsp;</td><td>a b c dd</td><td>&nbsp;e &nbsp;f &nbsp;g hh</td></tr>
+
+<!-- The right-most "S" -->
+  <tr><td>jjj k&nbsp; m&nbsp; n&nbsp;</td><td>q r s tt</td><td>&nbsp;u &nbsp;v &nbsp;w xx</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-005.xht
new file mode 100644
index 0000000000..6ea751c56f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-005.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-lr - table rows progression and colspan</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">AAA B&nbsp; C&nbsp; DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ &nbsp; &nbsp; &nbsp;</td></tr>
+
+<!-- The "A" -->
+  <tr><td colspan="2">KKKOO L&nbsp; Q&nbsp; M&nbsp; R&nbsp; NNNSS</td><td>TT &nbsp; &nbsp; UU</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td>VVV W&nbsp; X&nbsp; Y&nbsp;</td><td colspan="2">a&nbsp; b c&nbsp; d e&nbsp; f gggg</td></tr>
+
+<!-- The right-most "S" -->
+  <tr><td>jjj k&nbsp; m&nbsp; n&nbsp;</td><td>q r s tt</td><td>&nbsp;u &nbsp;v &nbsp;w xx</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-007.xht
new file mode 100644
index 0000000000..f9209bf793
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-007.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-lr - table rows progression and rowspan</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rowspanned cells in a table are handled according to a left-to-right direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">AAA B&nbsp; C&nbsp; DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell" rowspan="2">JJ &nbsp; &nbsp; &nbsp; &nbsp; TT &nbsp; &nbsp; UU</td></tr>
+
+<!-- The "A" -->
+  <tr><td>KKK L&nbsp; M&nbsp; NNN</td><td>OO Q R SS</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td>VVV W&nbsp; X&nbsp; Y&nbsp;</td><td rowspan="2">a b c dd &nbsp; q r s tt</td><td>&nbsp;e &nbsp;f &nbsp;g hh</td></tr>
+
+<!-- The right-most "S" -->
+  <tr><td>jjj k&nbsp; m&nbsp; n&nbsp;</td><td>&nbsp;u &nbsp;v &nbsp;w xx</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-009.xht
new file mode 100644
index 0000000000..4703ea44f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vlr-009.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-lr - table rows progression (thead, 2 tbodies, tfoot)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'vertical-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc... Table cells in a table with writing-mode set to 'sideways-lr' are ordered according to inline flow direction, which is from bottom to top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <thead>
+
+<!-- The "P" -->
+      <tr><td class="left-most-cell">AAA B&nbsp; C&nbsp; DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ &nbsp; &nbsp; &nbsp;</td></tr>
+
+    </thead>
+
+    <tfoot>
+
+<!-- The right-most "S" -->
+      <tr><td>jjj k&nbsp; m&nbsp; n&nbsp;</td><td>q r s tt</td><td>&nbsp;u &nbsp;v &nbsp;w xx</td></tr>
+
+    </tfoot>
+
+    <tbody>
+
+<!-- The "A" -->
+      <tr><td>KKK L&nbsp; M&nbsp; NNN</td><td>OO Q R SS</td><td>TT &nbsp; &nbsp; UU</td></tr>
+
+    </tbody>
+
+    <tbody>
+
+<!-- The left-most "S" -->
+      <tr><td>VVV W&nbsp; X&nbsp; Y&nbsp;</td><td>a b c dd</td><td>&nbsp;e &nbsp;f &nbsp;g hh</td></tr>
+
+    </tbody>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-002.xht
new file mode 100644
index 0000000000..66ca97cc2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-002.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-rl - table rows progression</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The right-most "S" -->
+  <tr><td>A&nbsp; B&nbsp; C&nbsp; DDD</td><td>EE F G H</td><td>JJ &nbsp;K &nbsp;L &nbsp;M</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td>N&nbsp; O&nbsp; Q&nbsp; RRR</td><td>SS T U V</td><td>WW &nbsp;X &nbsp;Y &nbsp;Z</td></tr>
+
+<!-- The "A" -->
+  <tr><td>aaa b&nbsp; c&nbsp; ddd</td><td>ee f g hh</td><td>jj &nbsp; &nbsp; kk</td></tr>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">mmm n&nbsp; o&nbsp; qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell">&nbsp; &nbsp; &nbsp; vv</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-004.xht
new file mode 100644
index 0000000000..16814f3d08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-004.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-rl - table rows progression and colspan</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The right-most "S" -->
+  <tr><td>A&nbsp; B&nbsp; C&nbsp; DDD</td><td>EE F G H</td><td>JJ &nbsp;K &nbsp;L &nbsp;M</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td colspan="2">N&nbsp; OO Q&nbsp; R&nbsp; S&nbsp; T&nbsp; UUUU</td><td>WW &nbsp;X &nbsp;Y &nbsp;Z</td></tr>
+
+<!-- The "A" -->
+  <tr><td>aaa b&nbsp; c&nbsp; ddd</td><td colspan="2">eeff g&nbsp;&nbsp; h&nbsp;&nbsp; jjjj</td></tr>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">mmm n&nbsp; o&nbsp; qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell">&nbsp; &nbsp; &nbsp; vv</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-006.xht
new file mode 100644
index 0000000000..9ee5fea771
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-006.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-rl - table rows progression and rowspan</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rowspanned cells in a table are handled according to a right-to-left direction." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+<!-- The right-most "S" -->
+  <tr><td>A&nbsp; B&nbsp; C&nbsp; DDD</td><td>EE F G H</td><td rowspan="2">JJ &nbsp;K &nbsp;L &nbsp;M &nbsp; WW &nbsp;X &nbsp;Y &nbsp;Z</td></tr>
+
+<!-- The left-most "S" -->
+  <tr><td>N&nbsp; O&nbsp; Q&nbsp; RRR</td><td>SS T U V</td></tr>
+
+<!-- The "A" -->
+  <tr><td>aaa b&nbsp; c&nbsp; ddd</td><td rowspan="2" class="left-most-cell">ee f g hh &nbsp; r s t uu</td><td>jj &nbsp; &nbsp; kk</td></tr>
+
+<!-- The "P" -->
+  <tr><td class="left-most-cell">mmm n&nbsp; o&nbsp; qqq</td><td class="left-most-cell">&nbsp; &nbsp; &nbsp; vv</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-008.xht
new file mode 100644
index 0000000000..28681e7bb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/row-progression-vrl-008.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: vertical-rl - table rows progression (thead, 2 tbodies, tfoot)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that rows of a table element with in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc..." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <thead>
+
+<!-- The right-most "S" -->
+      <tr><td>A&nbsp; B&nbsp; C&nbsp; DDD</td><td>EE F G H</td><td>JJ &nbsp;K &nbsp;L &nbsp;M</td></tr>
+
+    </thead>
+
+    <tfoot>
+
+<!-- The "P" -->
+      <tr><td class="left-most-cell">mmm n&nbsp; o&nbsp; qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell">&nbsp; &nbsp; &nbsp; vv</td></tr>
+
+    </tfoot>
+
+    <tbody>
+
+<!-- The left-most "S" -->
+      <tr><td>N&nbsp; O&nbsp; Q&nbsp; RRR</td><td>SS T U V</td><td>WW &nbsp;X &nbsp;Y &nbsp;Z</td></tr>
+
+    </tbody>
+
+    <tbody>
+<!-- The "A" -->
+      <tr><td>aaa b&nbsp; c&nbsp; ddd</td><td>ee f g hh</td><td>jj &nbsp; &nbsp; kk</td></tr>
+
+    </tbody>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/scrollbar-vertical-rl.html b/testing/web-platform/tests/css/css-writing-modes/scrollbar-vertical-rl.html
new file mode 100644
index 0000000000..71e57efb09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/scrollbar-vertical-rl.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Writing Modes Test: vertical-rl painting with vertical scrollbar</title>
+
+  <link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3 Orthogonal flows" />
+  <link rel="match" href="./reference/scrollbar-vertical-rl-ref.html" />
+
+  <style>
+    #container {
+      width: 300px;
+      height: 200px;
+      border: 1px solid black;
+      writing-mode: vertical-rl;
+      overflow: scroll;
+      background: red;
+    }
+    #target {
+      width:500px;
+      background:blue;
+    }
+  </style>
+</head>
+<body>
+<div id="container">
+  <div id="target"><br></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-001-ref.xht
new file mode 100644
index 0000000000..d9635b15fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-001-ref.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(136px + 100vw + 136px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      padding: 0px 84px;
+      width: calc(136px + 100% + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-001.xht
new file mode 100644
index 0000000000..8a65a38d50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-001.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-003-ref.xht
new file mode 100644
index 0000000000..3ebeaebf95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-003-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 15ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-003.xht
new file mode 100644
index 0000000000..286361f4f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-003.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-004-ref.xht
new file mode 100644
index 0000000000..b09fed4117
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-004-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(100px + 100vw + 100px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      margin: 0px 100px;
+      width: 100vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+<script>
+  document.scrollingElement.scrollLeft=document.scrollingElement.scrollWidth;
+</script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-004.xht
new file mode 100644
index 0000000000..f67d4e4f09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-004.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+<script>
+  document.scrollingElement.scrollLeft=document.scrollingElement.scrollWidth;
+</script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-006-ref.xht
new file mode 100644
index 0000000000..381f01947f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-006-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      margin-left: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-006.xht
new file mode 100644
index 0000000000..dd1124c599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-006.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-007-ref.xht
new file mode 100644
index 0000000000..259727af45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-007-ref.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: 672px;
+      /*
+      136px :
+    +
+      400px :
+    +
+      136px :
+   ===========
+      672px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-007.xht
new file mode 100644
index 0000000000..615466a5ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-007.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-008-ref.xht
new file mode 100644
index 0000000000..cb0ae13157
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-008-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 50ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-008.xht
new file mode 100644
index 0000000000..fe28a61fd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-008.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, min-content inline size (50ch) is greater than the width (400px) of the containing block. Therefore, the inline size of the orthogonal block will be the min-content inline size." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-009.xht
new file mode 100644
index 0000000000..751e817d1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-009.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-010-ref.xht
new file mode 100644
index 0000000000..e72c778a3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-010-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      margin-left: 92px;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-010.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-010.xht
new file mode 100644
index 0000000000..15732c0664
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-010.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-011-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-011-ref.xht
new file mode 100644
index 0000000000..7e93f20720
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-011-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      margin-left: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-011.xht
new file mode 100644
index 0000000000..1b9f559aef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-011.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vlr-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-012.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-012.xht
new file mode 100644
index 0000000000..d7e99d6c66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-012.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-013-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-013-ref.xht
new file mode 100644
index 0000000000..9c0066e661
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-013-ref.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(52px + 100vw + 52px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 100% + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-013.xht
new file mode 100644
index 0000000000..8840ed83f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-013.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-015-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-015-ref.xht
new file mode 100644
index 0000000000..5a6189da19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-015-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 3px + 15ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-015.xht
new file mode 100644
index 0000000000..655f7e73be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-015.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-016-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-016-ref.xht
new file mode 100644
index 0000000000..4ae074ca65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-016-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      box-sizing: border-box;
+      width: 100vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-016.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-016.xht
new file mode 100644
index 0000000000..85ffca1c1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-016.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-018-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-018-ref.xht
new file mode 100644
index 0000000000..0dad6eff1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-018-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-018.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-018.xht
new file mode 100644
index 0000000000..7acc664c1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-018.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-019-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-019-ref.xht
new file mode 100644
index 0000000000..b3b58cdc45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-019-ref.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: 504px;
+      /*
+       52px :
+    +
+      400px :
+    +
+       52px :
+   ============
+      504px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-019.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-019.xht
new file mode 100644
index 0000000000..d60ee74ef9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-019.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-020-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-020-ref.xht
new file mode 100644
index 0000000000..ef85ca7b3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-020-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 3px + 50ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-020.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-020.xht
new file mode 100644
index 0000000000..dd93248c0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-020.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width (inline-size) of the containing block is definite in this test, then the constrain is the width (inline-size) of such containing block which is, in this test, 400px. But the min-content inline size of the orthogonal block is greater than the width (inline-size) of the containing block. Therefore, the min-content inline-size will become the width of the orthogonal block." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-021.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-021.xht
new file mode 100644
index 0000000000..3d1d1983d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-021.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-022-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-022-ref.xht
new file mode 100644
index 0000000000..cdacb7c9b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-022-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-022.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-022.xht
new file mode 100644
index 0000000000..49eb1c5bee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-022.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then the constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-023-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-023-ref.xht
new file mode 100644
index 0000000000..08f9200183
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-023-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-023.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-023.xht
new file mode 100644
index 0000000000..f6e82d13f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-023.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vlr-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-024.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-024.xht
new file mode 100644
index 0000000000..e6663a3d6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vlr-024.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-001-ref.xht
new file mode 100644
index 0000000000..727c00f559
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-001-ref.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(136px + 100vw + 136px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 100% + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+<script>
+  document.scrollingElement.scrollLeft=document.scrollingElement.scrollWidth;
+</script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-001.xht
new file mode 100644
index 0000000000..5bdf95f3e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-001.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-13T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  size (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-003-ref.xht
new file mode 100644
index 0000000000..a0337dbd1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-003-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 136px - 3px - 15ch - 3px - 136px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 15ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-003.xht
new file mode 100644
index 0000000000..0a569b1fe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-003.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-004.xht
new file mode 100644
index 0000000000..043b081ba1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-004.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-006-ref.xht
new file mode 100644
index 0000000000..c04509cb5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-006-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      margin-right: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-006.xht
new file mode 100644
index 0000000000..7ea8acaec7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-006.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-007-ref.xht
new file mode 100644
index 0000000000..3d3c8061e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-007-ref.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 136px - 400px - 136px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      padding: 0px 84px;
+      position: absolute;
+      width: 672px;
+      /*
+      136px :
+    +
+      400px :
+    +
+      136px :
+   ===========
+      672px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-007.xht
new file mode 100644
index 0000000000..e5d8bcf5e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-007.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-008-ref.xht
new file mode 100644
index 0000000000..b93fcb0bdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-008-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 136px - 3px - 50ch - 3px - 136px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 50ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-008.xht
new file mode 100644
index 0000000000..bbfa6b41b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-008.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, min-content inline size (50ch) is greater than the width (400px) of the containing block. Therefore, the inline size of the orthogonal block will be the min-content inline size." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-009.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-009.xht
new file mode 100644
index 0000000000..e21b31f4a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-009.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. In this test, the max-content inline size of the orthogonal block will be smaller than the width of its containing block. Therefore the inline size of div#ortho-block-htb will be its max-content inline-size." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-010-ref.xht
new file mode 100644
index 0000000000..b4b3146e39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-010-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      margin-right: 92px;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-010.xht
new file mode 100644
index 0000000000..66203ec48a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-010.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. Therefore, the outer edges of the inline-axis of the orthogonal block becomes '400px'." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-011-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-011-ref.xht
new file mode 100644
index 0000000000..9cf63a8c28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-011-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      margin-right: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-011.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-011.xht
new file mode 100644
index 0000000000..083c276b13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-011.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. But the min-content inline size of the orthogonal block is greater than '400px' and less than the width of the initial containing block. In such case, the inline-size content edges of the orthogonal block becomes its min-content. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vrl-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-012.xht
new file mode 100644
index 0000000000..07d26c5d20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-012.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. The max-content is narrower than the definite-sized width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-013-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-013-ref.xht
new file mode 100644
index 0000000000..f6429a32ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-013-ref.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2019-12-18T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+      width: calc(52px + 100vw + 52px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      direction: ltr;
+      position: absolute;
+      width: calc(52px + 100% + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-013.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-013.xht
new file mode 100644
index 0000000000..c5b872ab5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-013.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-015-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-015-ref.xht
new file mode 100644
index 0000000000..4dc3a097b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-015-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 52px - 3px - 15ch - 3px - 52px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      position: absolute;
+      width: calc(52px + 3px + 15ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-015.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-015.xht
new file mode 100644
index 0000000000..a0013c5810
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-015.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-015-ref.xht" />
+
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. But the max-content inline size of the orthogonal block is less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-016.xht
new file mode 100644
index 0000000000..a35bc322b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-016.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-018-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-018-ref.xht
new file mode 100644
index 0000000000..abb838180c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-018-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-right: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-018.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-018.xht
new file mode 100644
index 0000000000..2fadcb4772
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-018.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content inline size of the orthogonal block is less than the width of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-019-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-019-ref.xht
new file mode 100644
index 0000000000..528dfc0d9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-019-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 52px - 400px - 52px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      position: absolute;
+      width: 504px; /* 52px + 400px + 52px == 504px */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-019.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-019.xht
new file mode 100644
index 0000000000..f48da4e829
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-019.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-020-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-020-ref.xht
new file mode 100644
index 0000000000..5a1c26877c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-020-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 52px - 3px - 50ch - 3px - 52px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      position: absolute;
+      width: calc(52px + 3px + 50ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-020.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-020.xht
new file mode 100644
index 0000000000..a2c50618e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-020.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. min-content inline size is greater than 400px. Therefore, the inline size of the orthogonal block will be its min-content. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-021.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-021.xht
new file mode 100644
index 0000000000..20ed5a7e96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-021.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-022-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-022-ref.xht
new file mode 100644
index 0000000000..036655d410
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-022-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-022.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-022.xht
new file mode 100644
index 0000000000..5159312f02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-022.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-023-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-023-ref.xht
new file mode 100644
index 0000000000..29af2db8c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-023-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-023.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-023.xht
new file mode 100644
index 0000000000..5d014e3e6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-023.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vrl-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-024.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-024.xht
new file mode 100644
index 0000000000..38ef98cb79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-htb-in-vrl-024.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-001-ref.xht
new file mode 100644
index 0000000000..07718ec366
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-001-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      padding: 0px 84px;
+      width: calc(136px + 35px + 50vw + 35px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-001.xht
new file mode 100644
index 0000000000..976fa0e75e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-001.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-002-ref.xht
new file mode 100644
index 0000000000..8983440cd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-002-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      margin-left: 92px;
+      width: 50vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-002.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-002.xht
new file mode 100644
index 0000000000..8562ca2727
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-002.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-003-ref.xht
new file mode 100644
index 0000000000..52e4221be7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-003-ref.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      padding: 0px 84px;
+      width: calc(136px + 3px + 200px + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-003.xht
new file mode 100644
index 0000000000..c5f9e51a4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-003.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-004-ref.xht
new file mode 100644
index 0000000000..5875ac2470
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-004-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      margin: 0px 92px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-004.xht
new file mode 100644
index 0000000000..625572a7cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-004.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-005-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-005-ref.xht
new file mode 100644
index 0000000000..93a65a228a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-005-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 35px + 50vw + 35px + 52px);
+      /*
+        52px : offsetWidth of sentence-before
+        35px : left border
+        50vw : content width of tested orthogonal block
+        35px : right border
+        52px : offsetWidth of sentence-after
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-005.xht
new file mode 100644
index 0000000000..05d17e381b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-005.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-006-ref.xht
new file mode 100644
index 0000000000..089fff04cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-006-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      width: 50vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-006.xht
new file mode 100644
index 0000000000..787db075dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-006.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-007-ref.xht
new file mode 100644
index 0000000000..39abb34774
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-007-ref.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      width: 310px;
+      /*
+        52px :
+     +
+         3px :
+     +
+       200px :
+     +
+         3px :
+     +
+        52px :
+    ============
+       310px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-007.xht
new file mode 100644
index 0000000000..a1b66814d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-007.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-008-ref.xht
new file mode 100644
index 0000000000..f45630852f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-008-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-008.xht
new file mode 100644
index 0000000000..81bdaadf72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vlr-008.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-001-ref.xht
new file mode 100644
index 0000000000..bd5116f4cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-001-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      padding: 0px 84px;
+      left: calc(50% - 136px - 35px - 35px - 136px);
+      width: calc(136px + 35px + 50vw + 35px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-001.xht
new file mode 100644
index 0000000000..7de2f0833c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-001.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-002-ref.xht
new file mode 100644
index 0000000000..9bbfc8384d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-002-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      position: absolute;
+      right: 100px;
+      width: 50vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-002.xht
new file mode 100644
index 0000000000..71d7b08d36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-002.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-003-ref.xht
new file mode 100644
index 0000000000..d7f8c9e079
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-003-ref.xht
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-04T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 478px);
+      padding: 0px 84px;
+      position: absolute;
+      width: 478px;
+      /*
+      136px :
+    +
+        3px :
+    +
+      200px :
+    +
+        3px :
+    +
+      136px :
+    ==========
+      478px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-003.xht
new file mode 100644
index 0000000000..584571e09f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-003.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-004-ref.xht
new file mode 100644
index 0000000000..bc41035cfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-004-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      position: absolute;
+      right: 100px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-004.xht
new file mode 100644
index 0000000000..69e37cdcc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-004.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-005-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-005-ref.xht
new file mode 100644
index 0000000000..e21533cea9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-005-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      right: 0px;
+      width: calc(52px + 35px + 50vw + 35px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-005.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-005.xht
new file mode 100644
index 0000000000..ae5b658b83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-005.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-006-ref.xht
new file mode 100644
index 0000000000..6ff98c746e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-006-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      right: 0px;
+      position: absolute;
+      width: 50%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-006.xht
new file mode 100644
index 0000000000..82e120539a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-006.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-007-ref.xht
new file mode 100644
index 0000000000..4085dd5f56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-007-ref.xht
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 310px);
+      position: absolute;
+      width: 310px;
+      /*
+         52px :
+      +
+          3px :
+      +
+        200px :
+      +
+          3px :
+      +
+         52px :
+     ===========
+        310px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-007.xht
new file mode 100644
index 0000000000..e67eccf921
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-007.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-008-ref.xht
new file mode 100644
index 0000000000..6a12158605
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-008-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      position: absolute;
+      right: 0px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-008.xht
new file mode 100644
index 0000000000..541c9ed92f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-htb-in-vrl-008.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-001-ref.xht
new file mode 100644
index 0000000000..b105906e22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-001-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+      width: auto;
+    }
+
+  p#sentence-after
+    {
+      top: calc(100px - 16px + 52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+      padding-bottom: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-001.xht
new file mode 100644
index 0000000000..4eb89f2169
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-001.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-002-ref.xht
new file mode 100644
index 0000000000..daf920a538
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-002-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-002.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-002.xht
new file mode 100644
index 0000000000..ea5aa32b0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-002.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-003-ref.xht
new file mode 100644
index 0000000000..265cac44d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-003-ref.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 222px; /* 600px - 342px - 36px == 222px */
+      top: 342px; /* 100px - 16px + 52px + 3px + 200px + 3px == 342px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-003.xht
new file mode 100644
index 0000000000..951ebcc2b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-003.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-004-ref.xht
new file mode 100644
index 0000000000..b59df49086
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-004-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-004.xht
new file mode 100644
index 0000000000..dbcbb4adea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-004.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-005-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-005-ref.xht
new file mode 100644
index 0000000000..ed404746ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-005-ref.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-005.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-005.xht
new file mode 100644
index 0000000000..baa254010c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-005.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-006-ref.xht
new file mode 100644
index 0000000000..68b165dcf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-006-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-006.xht
new file mode 100644
index 0000000000..60b842144e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-006.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-007-ref.xht
new file mode 100644
index 0000000000..61b5a6cc10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-007-ref.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 122px;
+      top: 258px; /* 52px + 3px + 200px + 3px == 258px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-007.xht
new file mode 100644
index 0000000000..2982498b2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-007.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-008-ref.xht
new file mode 100644
index 0000000000..71feed3c3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-008-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-008.xht
new file mode 100644
index 0000000000..d2e142a533
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vlr-in-htb-008.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-001-ref.xht
new file mode 100644
index 0000000000..1e06bc9ece
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-001-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(100px - 16px + 52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+      padding-bottom: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-001.xht
new file mode 100644
index 0000000000..5305b0b555
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-001.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-002-ref.xht
new file mode 100644
index 0000000000..6a740497a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-002-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-002.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-002.xht
new file mode 100644
index 0000000000..acb3126eb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-002.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-003-ref.xht
new file mode 100644
index 0000000000..f442b1c0c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-003-ref.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 222px; /* 600px - 342px - 36px == 222px */
+      top: 342px; /* 100px - 16px + 52px + 3px + 200px + 3px == 342px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-003.xht
new file mode 100644
index 0000000000..8e7a421f5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-003.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-004-ref.xht
new file mode 100644
index 0000000000..7404c778d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-004-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-004.xht
new file mode 100644
index 0000000000..6e3bea971d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-004.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-005-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-005-ref.xht
new file mode 100644
index 0000000000..74b244cd5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-005-ref.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-005.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-005.xht
new file mode 100644
index 0000000000..dfc92e4387
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-005.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-006-ref.xht
new file mode 100644
index 0000000000..424df69995
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-006-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-006.xht
new file mode 100644
index 0000000000..4297f6c349
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-006.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-007-ref.xht
new file mode 100644
index 0000000000..238579e5a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-007-ref.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 122px;
+      top: 258px; /* 52px + 3px + 200px + 3px == 258px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-007.xht
new file mode 100644
index 0000000000..099621d8ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-007.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-008-ref.xht
new file mode 100644
index 0000000000..5f4bb53dd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-008-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-008.xht
new file mode 100644
index 0000000000..238e6a1678
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-prct-vrl-in-htb-008.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-001-ref.xht
new file mode 100644
index 0000000000..8bf0812b74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-001-ref.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 100px;
+      top: calc(100px - 16px + 52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-001.xht
new file mode 100644
index 0000000000..b795197968
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-001.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-003-ref.xht
new file mode 100644
index 0000000000..d649293368
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-003-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+      padding-bottom: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-003.xht
new file mode 100644
index 0000000000..ecb201c638
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-003.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-004-ref.xht
new file mode 100644
index 0000000000..81b4f6b652
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-004-ref.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-004.xht
new file mode 100644
index 0000000000..debf860435
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-004.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-006-ref.xht
new file mode 100644
index 0000000000..4948c0697b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-006-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-006.xht
new file mode 100644
index 0000000000..6372660f5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-006.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-007-ref.xht
new file mode 100644
index 0000000000..19b5f6f0b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-007-ref.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 400px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 28px; /* 600px - 536px -52px + 16px ==  28px */
+      top: 536px; /* 100px - 16px + 52px + 400px == 536px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-007.xht
new file mode 100644
index 0000000000..6dca74074c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-007.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-008-ref.xht
new file mode 100644
index 0000000000..d41cd93393
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-008-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      left: 8px;
+      padding-bottom: 16px;
+      position: absolute;
+      top: calc(136px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-008.xht
new file mode 100644
index 0000000000..0c58766ac8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-008.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content inline size is presumed to be greater than the height (400px) of the containing block. Therefore the content edges of the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-009-ref.xht
new file mode 100644
index 0000000000..4f55d0fb09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-009-ref.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: calc(600px - 100px + 16px - 52px - 3px - 15ch - 3px - 52px + 16px);
+      /*
+      600px
+   -
+      100px
+   +
+       16px : margin collapsing of p#sentence-before's margin-top with body's margin-top
+   -
+       52px
+   -
+        3px
+   -
+       15ch
+   -
+        3px
+   -
+       52px
+   +
+       16px : margin collapsing of p#sentence-after's margin-bottom with body's margin-bottom
+  ============
+   approx. 270px
+      */
+
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-009.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-009.xht
new file mode 100644
index 0000000000..074a462c7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-009.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-009-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-010-ref.xht
new file mode 100644
index 0000000000..4120ffd84d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-010-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-010.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-010.xht
new file mode 100644
index 0000000000..78db01e089
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-010.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-011-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-011-ref.xht
new file mode 100644
index 0000000000..af1c2a75c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-011-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-011.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-011.xht
new file mode 100644
index 0000000000..dc29d1bc7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-011.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-012-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-012-ref.xht
new file mode 100644
index 0000000000..5b6c215b43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-012-ref.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 92px 0px;
+      height: 416px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      display: inline-block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-012.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-012.xht
new file mode 100644
index 0000000000..cc0f985773
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-012.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-012-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-013-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-013-ref.xht
new file mode 100644
index 0000000000..4b120fac8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-013-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-013.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-013.xht
new file mode 100644
index 0000000000..3e838dab45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-013.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-015-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-015-ref.xht
new file mode 100644
index 0000000000..8fe2889690
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-015-ref.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-015.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-015.xht
new file mode 100644
index 0000000000..85b5fb6255
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-015.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-016-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-016-ref.xht
new file mode 100644
index 0000000000..ba102400e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-016-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-016.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-016.xht
new file mode 100644
index 0000000000..34bc8bb2eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-016.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 35px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-018-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-018-ref.xht
new file mode 100644
index 0000000000..c0d941755e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-018-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-018.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-018.xht
new file mode 100644
index 0000000000..fa5eb21868
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-018.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-019-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-019-ref.xht
new file mode 100644
index 0000000000..2b199e8084
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-019-ref.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: 452px; /* 52px + 400px == 452px */
+      padding-bottom: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-019.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-019.xht
new file mode 100644
index 0000000000..002cd86a14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-019.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-020-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-020-ref.xht
new file mode 100644
index 0000000000..603732b7af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-020-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      left: 8px;
+      padding-bottom: 1em;
+      position: absolute;
+      top: calc(52px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-020.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-020.xht
new file mode 100644
index 0000000000..507d44ee87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-020.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content will be greater than the height of the containing block. Therefore, the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-021.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-021.xht
new file mode 100644
index 0000000000..fb0f21c9c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-021.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content of the orthogonal block will be less than the height of its definite containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-022-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-022-ref.xht
new file mode 100644
index 0000000000..73b85e8d8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-022-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-022.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-022.xht
new file mode 100644
index 0000000000..c807340094
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-022.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-023-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-023-ref.xht
new file mode 100644
index 0000000000..d7e13430ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-023-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-023.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-023.xht
new file mode 100644
index 0000000000..0d6d626cbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-023.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-024.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-024.xht
new file mode 100644
index 0000000000..1c7e9f3c6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vlr-in-htb-024.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-001-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-001-ref.xht
new file mode 100644
index 0000000000..70c5fdf3f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-001-ref.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 100px;
+      top: calc(100px - 16px + 52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-001.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-001.xht
new file mode 100644
index 0000000000..a9ae7d7dff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-001.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-02T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-003-ref.xht
new file mode 100644
index 0000000000..4b3690dd72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-003-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 100px;
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-003.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-003.xht
new file mode 100644
index 0000000000..d928dec83f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-003.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-08T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-004-ref.xht
new file mode 100644
index 0000000000..e0c0c21707
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-004-ref.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-004.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-004.xht
new file mode 100644
index 0000000000..6be8c60cfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-004.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-006-ref.xht
new file mode 100644
index 0000000000..611b5e1b53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-006-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-006.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-006.xht
new file mode 100644
index 0000000000..c10848444f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-006.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-007-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-007-ref.xht
new file mode 100644
index 0000000000..76db5128b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-007-ref.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 400px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 28px; /* 600px - 536px -52px + 16px ==  28px */
+      top: 536px; /* 100px - 16px + 52px + 400px == 536px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-007.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-007.xht
new file mode 100644
index 0000000000..c2b68a1372
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-007.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-008-ref.xht
new file mode 100644
index 0000000000..76fc0844c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-008-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(136px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-008.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-008.xht
new file mode 100644
index 0000000000..3e326f317d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-008.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content inline size is presumed to be greater than the height (400px) of the containing block. Therefore the content edges of the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-009-ref.xht
new file mode 100644
index 0000000000..5a4b529806
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-009-ref.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: calc(600px - 100px + 16px - 52px - 3px - 15ch - 3px - 52px + 16px);
+      /*
+      600px
+   -
+      100px
+   +
+       16px : margin collapsing of p#sentence-before's margin-top with body's margin-top
+   -
+       52px
+   -
+        3px
+   -
+       15ch
+   -
+        3px
+   -
+       52px
+   +
+       16px : margin collapsing of p#sentence-after's margin-bottom with body's margin-bottom
+  ============
+   approx. 270px
+      */
+
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-009.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-009.xht
new file mode 100644
index 0000000000..296e70fd5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-009.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-009-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-010-ref.xht
new file mode 100644
index 0000000000..e8e8ea707f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-010-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 400px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-010.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-010.xht
new file mode 100644
index 0000000000..c0327ee118
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-010.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-011-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-011-ref.xht
new file mode 100644
index 0000000000..b6888380d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-011-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-011.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-011.xht
new file mode 100644
index 0000000000..762a303250
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-011.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-012-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-012-ref.xht
new file mode 100644
index 0000000000..2835089958
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-012-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 600px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-012.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-012.xht
new file mode 100644
index 0000000000..146d285fbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-012.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-012-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-013-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-013-ref.xht
new file mode 100644
index 0000000000..8e3e1acb0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-013-ref.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      writing-mode: vertical-rl;
+      overflow: hidden; /* since test and reference might place scrollbars on
+                           different sides */
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-013.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-013.xht
new file mode 100644
index 0000000000..db48e58eb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-013.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      overflow: hidden; /* since test and reference might place scrollbars on
+                           different sides */
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-015-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-015-ref.xht
new file mode 100644
index 0000000000..695ea8184d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-015-ref.xht
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-015.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-015.xht
new file mode 100644
index 0000000000..1026a82ab7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-015.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-016-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-016-ref.xht
new file mode 100644
index 0000000000..9455290b63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-016-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-016.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-016.xht
new file mode 100644
index 0000000000..1bcb563606
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-016.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 35px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-018-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-018-ref.xht
new file mode 100644
index 0000000000..d8cc746d71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-018-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-018.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-018.xht
new file mode 100644
index 0000000000..7c4f9037a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-018.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-019-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-019-ref.xht
new file mode 100644
index 0000000000..7e4161090c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-019-ref.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: 452px;
+      /*
+        52px :
+     +
+         3px :
+     +
+       394px :
+     +
+         3px :
+    ============
+       452px
+      */
+    }
+
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-019.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-019.xht
new file mode 100644
index 0000000000..2aa0bdab78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-019.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-020-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-020-ref.xht
new file mode 100644
index 0000000000..12f5d4c413
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-020-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(52px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-020.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-020.xht
new file mode 100644
index 0000000000..1ccad4bc02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-020.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-285T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content will be greater than the height of the containing block. Therefore, the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      font-family: monospace;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-021.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-021.xht
new file mode 100644
index 0000000000..d5fec89015
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-021.xht
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content of the orthogonal block will be less than the height of its definite containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-022-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-022-ref.xht
new file mode 100644
index 0000000000..8b4bcea3cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-022-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-022.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-022.xht
new file mode 100644
index 0000000000..1d1797bfe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-022.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-023-ref.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-023-ref.xht
new file mode 100644
index 0000000000..329e70f196
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-023-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-023.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-023.xht
new file mode 100644
index 0000000000..3f1fc04c39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-023.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-024.xht b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-024.xht
new file mode 100644
index 0000000000..e3436cd6fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-024.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-001-ref.html
new file mode 100644
index 0000000000..2fe36cb216
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 200px;
+  width: 500px;
+}
+.element {
+  background: magenta;
+  font: 25px/1 Ahem;
+  margin: 50px;
+  height: 100px;
+  writing-mode: vertical-lr;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-001.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-001.html
new file mode 100644
index 0000000000..af096e7248
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-001-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that a verticalLR element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 200px;
+  width: 500px;
+}
+.element {
+  background: magenta;
+  font: 25px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's height should be 100px. */
+  writing-mode: vertical-lr;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-002-ref.html
new file mode 100644
index 0000000000..43379d61b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-002-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 200px;
+  width: 500px;
+}
+.element {
+  background: magenta;
+  font: 25px/1 Ahem;
+  margin: 50px;
+  height: 100px;
+  writing-mode: vertical-rl;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-002.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-002.html
new file mode 100644
index 0000000000..10bf166980
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-002-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that a verticalRL element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 200px;
+  width: 500px;
+}
+.element {
+  background: magenta;
+  font: 25px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's height should be 100px. */
+  writing-mode: vertical-rl;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-003-ref.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-003-ref.html
new file mode 100644
index 0000000000..e0b0e2b6c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-003-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 200px;
+  width: 500px;
+  writing-mode: vertical-lr;
+}
+.element {
+  background: magenta;
+  font: 50px/1 Ahem;
+  margin: 20px;
+  width: 460px;
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-003.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-003.html
new file mode 100644
index 0000000000..1b779ab6b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-003.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-003-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 200px;
+  width: 500px;
+  writing-mode: vertical-lr;
+}
+.element {
+  background: magenta;
+  font: 50px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's width should be 460px. */
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-004.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-004.html
new file mode 100644
index 0000000000..47e0ddfbb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-003-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 200px;
+  width: 500px;
+  writing-mode: vertical-rl;
+}
+.element {
+  background: magenta;
+  font: 50px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's width should be 460px. */
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-005-ref.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-005-ref.html
new file mode 100644
index 0000000000..076edc3856
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-005-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 500px;
+  width: 200px;
+}
+.element {
+  background: magenta;
+  font: 50px/1 Ahem;
+  margin: 20px;
+  height: 460px;
+  writing-mode: vertical-lr;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-005.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-005.html
new file mode 100644
index 0000000000..076b0d33b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-005.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-005-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that a verticalLR element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 500px;
+  width: 200px;
+}
+.element {
+  background: magenta;
+  font: 50px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's height should be 460px. */
+  writing-mode: vertical-lr;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-006-ref.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-006-ref.html
new file mode 100644
index 0000000000..116258fad3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-006-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 500px;
+  width: 200px;
+}
+.element {
+  background: magenta;
+  font: 50px/1 Ahem;
+  margin: 20px;
+  height: 460px;
+  writing-mode: vertical-rl;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-006.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-006.html
new file mode 100644
index 0000000000..09b2c4ca65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-006.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-006-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that a verticalRL element inside an horizontal container computes properly its percentage margins against the container's inline size (the container's width in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 500px;
+  width: 200px;
+}
+.element {
+  background: magenta;
+  font: 50px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (200px), so it should be 20px and element's height should be 460px. */
+  writing-mode: vertical-rl;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-007-ref.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-007-ref.html
new file mode 100644
index 0000000000..5c7bc196d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-007-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 500px;
+  width: 200px;
+  writing-mode: vertical-lr;
+}
+.element {
+  background: magenta;
+  font: 25px/1 Ahem;
+  margin: 50px;
+  width: 100px;
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-007.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-007.html
new file mode 100644
index 0000000000..4e5bad9d23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-007.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-007-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 500px;
+  width: 200px;
+  writing-mode: vertical-lr;
+}
+.element {
+  background: magenta;
+  font: 25px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's width should be 100px. */
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-008.html b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-008.html
new file mode 100644
index 0000000000..6a0bef02e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-orthogonal-percentage-margin-008.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Orthogonal element sizing and percentage margins</title>
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping">
+<link rel="match" href="sizing-orthogonal-percentage-margin-007-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="assert" content="This test checks that an horizontal element inside a verticalLR container computes properly its percentage margins against the container's inline size (the container's height in this test), and the element is sized accordingly subtracting those margins from the available size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  background: cyan;
+  border: solid thick;
+  height: 500px;
+  width: 200px;
+  writing-mode: vertical-rl;
+}
+.element {
+  background: magenta;
+  font: 25px/1 Ahem;
+  margin: 10%; /* This should be computed against the container's inline size (500px), so it should be 50px and element's width should be 100px. */
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="container">
+  <div class="element">XX X X X XX X X XX X XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html
new file mode 100644
index 0000000000..0fd818c5a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Percentage size on orthogonal replaced elements</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.container {
+  display: inline-block;
+  border: solid 5px black;
+  margin: 10px;
+  vertical-align: top;
+  width: 200px;
+  height: 100px;
+}
+
+img {
+  display: block;
+  width: 200px;
+  height: 100px;
+}
+
+</style>
+
+<p>The test passes if you see four filled lime rectangles with black border and <strong>no red</strong>.</p>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html b/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html
new file mode 100644
index 0000000000..6829920c80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Percentage size on orthogonal replaced elements</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="sizing-percentages-replaced-orthogonal-001-ref.html">
+<meta name="assert" content="Checks that orthogonal replaced elements resolve properly their percentage sizes against the expected axis from their containing block.">
+<style>
+.container {
+  display: inline-block;
+  border: solid 5px black;
+  margin: 10px;
+  vertical-align: top;
+  width: 200px;
+  height: 100px;
+  background: red;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if you see four filled lime rectangles with black border and <strong>no red</strong>.</p>
+
+<div class="container horizontalTB">
+  <img class="verticalLR" src="support/100x100-lime.png" />
+</div>
+
+<div class="container horizontalTB">
+  <img class="verticalRL" src="support/100x100-lime.png" />
+</div>
+
+<div class="container verticalLR">
+  <img class="horizontalTB" src="support/100x100-lime.png" />
+</div>
+
+<div class="container verticalRL">
+  <img class="horizontalTB" src="support/100x100-lime.png" />
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
new file mode 100644
index 0000000000..5502ba7ef1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a sideways-lr block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <meta content="image" name="flags">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    display: flow-root; /* Establishes a block formatting context */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats.html b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats.html
new file mode 100644
index 0000000000..9dbbebbd55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a sideways-lr block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="slr-alongside-vlr-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="image" name="flags">
+  <meta content="This test verifies that the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient space in the inline-direction." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: sideways-lr; /* Same block direction as <html> */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats-ref.html b/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats-ref.html
new file mode 100644
index 0000000000..6f7ac1686b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a sideways-rl block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <meta content="image" name="flags">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    display: flow-root; /* Establishes a block formatting context */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats.html b/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats.html
new file mode 100644
index 0000000000..db99965518
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a sideways-rl block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="srl-alongside-vrl-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="image" name="flags">
+  <meta content="This test verifies that the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient space in the inline-direction." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: sideways-rl; /* Same block direction as <html> */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/100x100-lime.png b/testing/web-platform/tests/css/css-writing-modes/support/100x100-lime.png
new file mode 100644
index 0000000000..1b94770080
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/100x100-lime.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/100x100-red.png b/testing/web-platform/tests/css/css-writing-modes/support/100x100-red.png
new file mode 100644
index 0000000000..57bf3ddc52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/100x100-red.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/DejaVuSerif-webfont.woff b/testing/web-platform/tests/css/css-writing-modes/support/DejaVuSerif-webfont.woff
new file mode 100644
index 0000000000..4583cc675d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/DejaVuSerif-webfont.woff
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/WidthTest-Regular.otf b/testing/web-platform/tests/css/css-writing-modes/support/WidthTest-Regular.otf
new file mode 100644
index 0000000000..06b1d3c025
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/WidthTest-Regular.otf
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-1col-2row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-1col-2row-320x320.png
new file mode 100644
index 0000000000..7ca197bc06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-1col-2row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-1col-3row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-1col-3row-320x320.png
new file mode 100644
index 0000000000..f5c13ab550
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-1col-3row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-2col-2row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-2col-2row-320x320.png
new file mode 100644
index 0000000000..4f354e9352
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-2col-2row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-2col-3row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-2col-3row-320x320.png
new file mode 100644
index 0000000000..6eded69a4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-2col-3row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-3col-2row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-3col-2row-320x320.png
new file mode 100644
index 0000000000..5f4b53c46b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-3col-2row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-3col-3row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-3col-3row-320x320.png
new file mode 100644
index 0000000000..4c2f6c8e63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-3col-3row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-4col-2row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-4col-2row-320x320.png
new file mode 100644
index 0000000000..052d224df1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-4col-2row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-4col-3row-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-4col-3row-320x320.png
new file mode 100644
index 0000000000..1826531268
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-4col-3row-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-low-left-corn-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-low-left-corn-320x320.png
new file mode 100644
index 0000000000..4614673810
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-low-left-corn-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-low-rght-corn-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-low-rght-corn-320x320.png
new file mode 100644
index 0000000000..3d3a3c029d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-low-rght-corn-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-upp-left-corn-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-upp-left-corn-320x320.png
new file mode 100644
index 0000000000..b0db0c2e4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-upp-left-corn-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/bg-red-upp-rght-corn-320x320.png b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-upp-rght-corn-320x320.png
new file mode 100644
index 0000000000..af756b7ba6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/bg-red-upp-rght-corn-320x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/block-flow-direction-025-exp-res.png b/testing/web-platform/tests/css/css-writing-modes/support/block-flow-direction-025-exp-res.png
new file mode 100644
index 0000000000..851eeea039
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/block-flow-direction-025-exp-res.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/block-flow-direction-066-exp-res.png b/testing/web-platform/tests/css/css-writing-modes/support/block-flow-direction-066-exp-res.png
new file mode 100644
index 0000000000..d325b15a4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/block-flow-direction-066-exp-res.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue-200x100.png b/testing/web-platform/tests/css/css-writing-modes/support/blue-200x100.png
new file mode 100644
index 0000000000..e32c47dd1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue-200x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue-horiz-line-220x1.png b/testing/web-platform/tests/css/css-writing-modes/support/blue-horiz-line-220x1.png
new file mode 100644
index 0000000000..3898d5a2d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue-horiz-line-220x1.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue-horiz-line-320x1.png b/testing/web-platform/tests/css/css-writing-modes/support/blue-horiz-line-320x1.png
new file mode 100644
index 0000000000..7d9151c848
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue-horiz-line-320x1.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue-vert-line-1x220.png b/testing/web-platform/tests/css/css-writing-modes/support/blue-vert-line-1x220.png
new file mode 100644
index 0000000000..07b0239fc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue-vert-line-1x220.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue-vert-line-1x320.png b/testing/web-platform/tests/css/css-writing-modes/support/blue-vert-line-1x320.png
new file mode 100644
index 0000000000..6049e27150
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue-vert-line-1x320.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue-yellow-206w-165h.png b/testing/web-platform/tests/css/css-writing-modes/support/blue-yellow-206w-165h.png
new file mode 100644
index 0000000000..47ceb84d3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue-yellow-206w-165h.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue1x1.png b/testing/web-platform/tests/css/css-writing-modes/support/blue1x1.png
new file mode 100644
index 0000000000..667b655889
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue1x1.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/blue20x20.png b/testing/web-platform/tests/css/css-writing-modes/support/blue20x20.png
new file mode 100644
index 0000000000..e0af555330
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/blue20x20.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/cat.png b/testing/web-platform/tests/css/css-writing-modes/support/cat.png
new file mode 100644
index 0000000000..85dd732481
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/cat.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-002.png b/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-002.png
new file mode 100644
index 0000000000..7fc9f14ed6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-002.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-004.png b/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-004.png
new file mode 100644
index 0000000000..2d1355e3bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-004.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-006.png b/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-006.png
new file mode 100644
index 0000000000..5145c22c48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/clearance-calculation-vrl-006.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-007.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-007.html
new file mode 100644
index 0000000000..9616e67c24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-007.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-007 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 80%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  1. [If] 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+            80% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          400px : right (80% of 500px == 400px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 0 .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-009.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-009.html
new file mode 100644
index 0000000000..7cd83eb446
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-009.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-009 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  1. [If] 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+           20% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          400px : right (20% of 500px == 100px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 300px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-015.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-015.html
new file mode 100644
index 0000000000..371febed0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-015.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-015 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  3. [If] 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit. Then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           60% : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width (set to shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px == 300px)
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px.
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-017.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-017.html
new file mode 100644
index 0000000000..f421df9127
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-017.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-017 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+   position absolute and 'vertical-lr' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  3. [If] 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit. Then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           60% : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width (set to shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px == 300px)
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px.
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-019.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-019.html
new file mode 100644
index 0000000000..5b60921c9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-019.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-019 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 80%;
+      top: 0px;
+      width: 50px;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  4. [If] 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+            80% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+          400px : right (80% of 500px == 400px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 0px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-021.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-021.html
new file mode 100644
index 0000000000..8248aed9c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-021.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-021 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 80%;
+      top: 0px;
+      width: 50px;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  4. [If] 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+            80% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+          400px : right (80% of 500px == 400px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 0px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-023.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-023.html
new file mode 100644
index 0000000000..e0a3caff3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-023.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-023 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - 'width' is 'auto', 'left' and 'right' are not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  5. [If] 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+            20% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          solve : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          100px : right (20% of 500px == 100px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used width value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-025.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-025.html
new file mode 100644
index 0000000000..010c8b539a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-025.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-025 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - 'width' is 'auto', 'left' and 'right' are not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  5. [If] 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+            20% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          solve : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          100px : right (20% of 500px == 100px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used width value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-027.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-027.html
new file mode 100644
index 0000000000..2dcb3d8fbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-027.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-027 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  6. [If] 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+            20% : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          100px : width (20% of 500px == 100px)
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-029.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-029.html
new file mode 100644
index 0000000000..3164e13b17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-029.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-029 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  6. [If] 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+            20% : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          100px : width (20% of 500px == 100px)
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-031.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-031.html
new file mode 100644
index 0000000000..27e2509c38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-031.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-031 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - overconstrained values with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      margin-left: 0px;
+      margin-right: 0px;
+      position: absolute;
+      right: 40%;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+            20% : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+           40% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          100px : width (20% of 500px == 100px)
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+ignore and solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-033.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-033.html
new file mode 100644
index 0000000000..f25b101972
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vlr-033.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vlr-033 in 'writing-mode: vertical-lr'</title>
+
+  <!--
+  position absolute and 'vertical-lr' - overconstrained values with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 20%;
+      margin-left: 0px;
+      margin-right: 0px;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-lr;
+    }
+
+  /*
+  "
+  If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            20% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+            20% : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+           20% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+ignore and solve : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          100px : width (20% of 500px == 100px)
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          100px : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 300px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-006.html
new file mode 100644
index 0000000000..a882508c91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-006.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-006 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 80%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  1. [If] 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+            80% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          400px : right (80% of 500px == 400px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 0px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-008.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-008.html
new file mode 100644
index 0000000000..9ac1219d55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-008.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-008 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'left' and 'width' are 'auto', 'right' is not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  1. [If] 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+            20% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          100px : right (20% of 500px == 100px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 300px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-014.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-014.html
new file mode 100644
index 0000000000..67d7a6b38a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-014.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-014 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  3. [If] 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit. Then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           60% : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width (set to shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px == 300px)
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px.
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-016.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-016.html
new file mode 100644
index 0000000000..4008d0b587
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-016.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-016 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      border-left: green solid 25px;
+      border-right: green solid 75px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  3. [If] 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit. Then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width (set to shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px == 300px)
+        +
+            0px : margin-left
+        +
+           25px : border-left-width
+        +
+            0px : padding-left
+        +
+            0px : width (shrink-to-fit)
+        +
+            0px : padding-right
+        +
+           75px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px.
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-018.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-018.html
new file mode 100644
index 0000000000..a21cc4a455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-018.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-018 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 80%;
+      top: 0px;
+      width: 50px;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  4. [If] 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+            80% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+          400px : right (80% of 500px == 400px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 0px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-020.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-020.html
new file mode 100644
index 0000000000..c92176722d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-020.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-020 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green solid 35px;
+      border-right: green solid 15px;
+      height: 100px;
+      left: auto;
+      position: absolute;
+      right: 80%;
+      top: 0px;
+      width: 50px;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  4. [If] 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+           auto : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+            80% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+        (solve) : left
+        +
+            0px : margin-left
+        +
+           35px : border-left-width
+        +
+            0px : padding-left
+        +
+           50px : width
+        +
+            0px : padding-right
+        +
+           15px : border-right-width
+        +
+            0px : margin-right
+        +
+          400px : right (80% of 500px == 400px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 0px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-022.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-022.html
new file mode 100644
index 0000000000..eb7eff5fd3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-022.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-022 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'width' is 'auto', 'left' and 'right' are not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  5. [If] 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+            20% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          solve : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          100px : right (20% of 500px == 100px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used width value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-024.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-024.html
new file mode 100644
index 0000000000..11602443a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-024.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-024 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'width' is 'auto', 'left' and 'right' are not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: auto;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  5. [If] 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+           auto : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+            20% : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          solve : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          100px : right (20% of 500px == 100px)
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used width value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-026.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-026.html
new file mode 100644
index 0000000000..abd8aa80c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-026.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-026 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  6. [If] 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+            20% : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          100px : width (20% of 500px == 100px)
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-028.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-028.html
new file mode 100644
index 0000000000..38a7d271a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-028.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-028 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      position: absolute;
+      right: auto;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  6. [If] 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+            60% : left
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+            20% : width
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+           auto : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+          300px : left (60% of 500px)
+        +
+            0px : margin-left
+        +
+            0px : border-left-width
+        +
+            0px : padding-left
+        +
+          100px : width (20% of 500px == 100px)
+        +
+            0px : padding-right
+        +
+            0px : border-right-width
+        +
+            0px : margin-right
+        +
+          solve : right
+        ====================
+          500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-030.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-030.html
new file mode 100644
index 0000000000..291bc3c2b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-030.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-030 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - overconstrained values with 'direction: ltr' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: ltr;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 60%;
+      margin-left: 0px;
+      margin-right: 0px;
+      position: absolute;
+      right: 40%;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+             60% : left
+         +
+             0px : margin-left
+         +
+             0px : border-left-width
+         +
+             0px : padding-left
+         +
+             20% : width
+         +
+             0px : padding-right
+         +
+             0px : border-right-width
+         +
+             0px : margin-right
+         +
+             40% : right
+         ====================
+           500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+           300px : left (60% of 500px)
+         +
+             0px : margin-left
+         +
+             0px : border-left-width
+         +
+             0px : padding-left
+         +
+           100px : width (20% of 500px == 100px)
+         +
+             0px : padding-right
+         +
+             0px : border-right-width
+         +
+             0px : margin-right
+         +
+ignore and solve : right
+         ====================
+           500px : width of containing block (width of Initial Containing Block)
+
+   so used right offset value must be 100px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-032.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-032.html
new file mode 100644
index 0000000000..3df277356c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-abs-pos-non-replaced-icb-vrl-032.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-032 in 'writing-mode: vertical-rl'</title>
+
+  <!--
+  position absolute and 'vertical-rl' - overconstrained values with 'direction: rtl' in initial containing block
+  -->
+
+  <style type="text/css">
+  html
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      background-color: green;
+      border-left: green none 0px;
+      border-right: green none 0px;
+      height: 100px;
+      left: 20%;
+      margin-left: 0px;
+      margin-right: 0px;
+      position: absolute;
+      right: 20%;
+      top: 0px;
+      width: 20%;
+      writing-mode: vertical-rl;
+    }
+
+  /*
+  "
+  If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
+  "
+  10.3.7 Absolutely positioned, non-replaced elements
+  http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
+
+  So:
+
+             20% : left
+         +
+             0px : margin-left
+         +
+             0px : border-left-width
+         +
+             0px : padding-left
+         +
+             20% : width
+         +
+             0px : padding-right
+         +
+             0px : border-right-width
+         +
+             0px : margin-right
+         +
+             20% : right
+         ====================
+           500px : width of containing block (width of Initial Containing Block)
+
+  becomes
+
+ignore and solve : left
+         +
+             0px : margin-left
+         +
+             0px : border-left-width
+         +
+             0px : padding-left
+         +
+           100px : width (20% of 500px == 100px)
+         +
+             0px : padding-right
+         +
+             0px : border-right-width
+         +
+             0px : margin-right
+         +
+           100px : right
+         ====================
+           500px : width of containing block (width of Initial Containing Block)
+
+   so used left offset value must be 300px .
+
+  */
+  </style>
+ </head>
+
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-002.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-002.html
new file mode 100644
index 0000000000..f4c21ad9dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+
+  <title>Embedded HTML document for background-size-document-root-vrl-002</title>
+
+  <style>
+    html
+      {
+        background-image: url("swatch-green.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        writing-mode: vertical-rl;
+
+        width: 100px;
+      }
+  </style>
+
+ </head>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-004.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-004.html
new file mode 100644
index 0000000000..bbc1f91d58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-004.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+
+  <title>Embedded HTML document for background-size-document-root-vrl-004</title>
+
+  <style>
+    html
+      {
+        background-image: url("swatch-green.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        writing-mode: vertical-rl;
+
+        border-right: green solid 20px;
+        width: 80px;
+      }
+  </style>
+
+ </head>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-006.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-006.html
new file mode 100644
index 0000000000..f4c1fa0396
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-006.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+
+  <title>Embedded HTML document for background-size-document-root-vrl-006</title>
+
+  <style>
+    html
+      {
+        background-image: url("swatch-green.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        writing-mode: vertical-rl;
+
+        margin-right: 50px;
+        padding-right: 50px;
+        width: 50px;
+      }
+  </style>
+
+ </head>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-008.html b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-008.html
new file mode 100644
index 0000000000..4e67786f13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/embedded-doc-for-background-size-root-vrl-008.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+  <meta charset="UTF-8">
+
+  <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 -->
+
+  <title>Embedded HTML document for background-size-document-root-vrl-008</title>
+
+  <style>
+    html
+      {
+        background-image: url("swatch-green.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        writing-mode: vertical-rl;
+
+        border-left: white solid 20px;
+        margin-right: 50px;
+        padding-right: 50px;
+        width: 50px;
+      }
+  </style>
+
+ </head>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/left-bottom-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/left-bottom-200x300.png
new file mode 100644
index 0000000000..6e30eba507
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/left-bottom-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/left-bottom-green-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/left-bottom-green-200x300.png
new file mode 100644
index 0000000000..30668751df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/left-bottom-green-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/left-center-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/left-center-200x300.png
new file mode 100644
index 0000000000..6025c4e85b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/left-center-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/left-center-green-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/left-center-green-200x300.png
new file mode 100644
index 0000000000..b2645c0fe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/left-center-green-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/left-side-filled-square-40x160.png b/testing/web-platform/tests/css/css-writing-modes/support/left-side-filled-square-40x160.png
new file mode 100644
index 0000000000..86fd7e5671
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/left-side-filled-square-40x160.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/left-top-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/left-top-200x300.png
new file mode 100644
index 0000000000..43e739acbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/left-top-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/margin-collapse-2em-space-wm-vert.png b/testing/web-platform/tests/css/css-writing-modes/support/margin-collapse-2em-space-wm-vert.png
new file mode 100644
index 0000000000..8a2fa55efd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/margin-collapse-2em-space-wm-vert.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/mn+arabic.png b/testing/web-platform/tests/css/css-writing-modes/support/mn+arabic.png
new file mode 100644
index 0000000000..d999c3d309
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/mn+arabic.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/mn+latin.png b/testing/web-platform/tests/css/css-writing-modes/support/mn+latin.png
new file mode 100644
index 0000000000..224297163c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/mn+latin.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/mn-orientation.png b/testing/web-platform/tests/css/css-writing-modes/support/mn-orientation.png
new file mode 100644
index 0000000000..0167dfbde6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/mn-orientation.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/mn_ar_wrap.png b/testing/web-platform/tests/css/css-writing-modes/support/mn_ar_wrap.png
new file mode 100644
index 0000000000..c7d5ca5806
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/mn_ar_wrap.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/mn_en_wrap.png b/testing/web-platform/tests/css/css-writing-modes/support/mn_en_wrap.png
new file mode 100644
index 0000000000..e697c992bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/mn_en_wrap.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/opaque-square-40x160.png b/testing/web-platform/tests/css/css-writing-modes/support/opaque-square-40x160.png
new file mode 100644
index 0000000000..11636f5f77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/opaque-square-40x160.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/ortho-htb-alongside-vrl-floats-002-exp-res.png b/testing/web-platform/tests/css/css-writing-modes/support/ortho-htb-alongside-vrl-floats-002-exp-res.png
new file mode 100644
index 0000000000..54d35eb05e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/ortho-htb-alongside-vrl-floats-002-exp-res.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p1.png b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p1.png
new file mode 100644
index 0000000000..f5adb11b4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p1.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p2.png b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p2.png
new file mode 100644
index 0000000000..7ecf84bae3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p2.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p3.png b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p3.png
new file mode 100644
index 0000000000..d7c58d6224
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p3.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p4.png b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p4.png
new file mode 100644
index 0000000000..04dc0fe2e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/page-flow-direction-002p4.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-abs-pos-non-replaced.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-abs-pos-non-replaced.png
new file mode 100644
index 0000000000..15fd6065ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-abs-pos-non-replaced.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-002.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-002.png
new file mode 100644
index 0000000000..a0db690941
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-002.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-004.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-004.png
new file mode 100644
index 0000000000..ec130f10f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-004.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-006.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-006.png
new file mode 100644
index 0000000000..981741b7e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-006.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-008.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-008.png
new file mode 100644
index 0000000000..9b2a0610e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-008.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-010.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-010.png
new file mode 100644
index 0000000000..a2d6614618
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-010.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-012.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-012.png
new file mode 100644
index 0000000000..23b1beb9cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-012.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-014.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-014.png
new file mode 100644
index 0000000000..64e081c72f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-014.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-016.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-016.png
new file mode 100644
index 0000000000..952e0089b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-016.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-018.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-018.png
new file mode 100644
index 0000000000..22f51030c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-bg-pos-vrl-018.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-box-offsets-rel-pos.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-box-offsets-rel-pos.png
new file mode 100644
index 0000000000..e81c0ae4cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-box-offsets-rel-pos.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-clearance-calculations.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-clearance-calculations.png
new file mode 100644
index 0000000000..ec502d3532
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-clearance-calculations.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-first-page-vlr-003.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-first-page-vlr-003.png
new file mode 100644
index 0000000000..f8c677b8e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-first-page-vlr-003.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-first-page-vrl-002.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-first-page-vrl-002.png
new file mode 100644
index 0000000000..48555d3acc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-first-page-vrl-002.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-float-contiguous.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-float-contiguous.png
new file mode 100644
index 0000000000..8d35d98e9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-float-contiguous.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-horiz-rule.png b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-horiz-rule.png
new file mode 100644
index 0000000000..f9cc0b1eef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pass-cdts-horiz-rule.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-gr-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-gr-100x100.png
new file mode 100644
index 0000000000..fd9b7e1ef2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-gr-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-rg-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-rg-100x100.png
new file mode 100644
index 0000000000..80c7035f1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-rg-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-rr-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-rr-100x100.png
new file mode 100644
index 0000000000..a98636ddef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gg-rr-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-gg-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-gg-100x100.png
new file mode 100644
index 0000000000..fd1f7a7b50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-gg-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-gr-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-gr-100x100.png
new file mode 100644
index 0000000000..431b99f933
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-gr-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-rg-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-rg-100x100.png
new file mode 100644
index 0000000000..63248d4dd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-rg-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-rr-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-rr-100x100.png
new file mode 100644
index 0000000000..6fba835830
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-gr-rr-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-gg-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-gg-100x100.png
new file mode 100644
index 0000000000..47ee743880
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-gg-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-gr-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-gr-100x100.png
new file mode 100644
index 0000000000..6b19ec9a4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-gr-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-rg-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-rg-100x100.png
new file mode 100644
index 0000000000..e28bdba9dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-rg-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-rr-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-rr-100x100.png
new file mode 100644
index 0000000000..797e289e05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rg-rr-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-rr-gr-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rr-gr-100x100.png
new file mode 100644
index 0000000000..97aac24065
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rr-gr-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/pattern-rr-rg-100x100.png b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rr-rg-100x100.png
new file mode 100644
index 0000000000..177743874e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/pattern-rr-rg-100x100.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/right-bottom-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/right-bottom-200x300.png
new file mode 100644
index 0000000000..38904b2508
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/right-bottom-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/right-bottom-green-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/right-bottom-green-200x300.png
new file mode 100644
index 0000000000..a3c6bb63b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/right-bottom-green-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/right-center-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/right-center-200x300.png
new file mode 100644
index 0000000000..b9987017a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/right-center-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/right-center-green-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/right-center-green-200x300.png
new file mode 100644
index 0000000000..8f54bf5a89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/right-center-green-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/right-side-filled-square-40x160.png b/testing/web-platform/tests/css/css-writing-modes/support/right-side-filled-square-40x160.png
new file mode 100644
index 0000000000..f76b208311
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/right-side-filled-square-40x160.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/right-top-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/right-top-200x300.png
new file mode 100644
index 0000000000..59467ec3f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/right-top-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/right-top-green-200x300.png b/testing/web-platform/tests/css/css-writing-modes/support/right-top-green-200x300.png
new file mode 100644
index 0000000000..313c37f4df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/right-top-green-200x300.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-aqua.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-aqua.png
new file mode 100644
index 0000000000..dd47e28665
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-aqua.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-blue.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-blue.png
new file mode 100644
index 0000000000..bf2759634d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-blue.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-fuchsia.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-fuchsia.png
new file mode 100644
index 0000000000..3f8f8b4ea3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-fuchsia.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-green.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-green.png
new file mode 100644
index 0000000000..0aa79b0c86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-green.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-olive.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-olive.png
new file mode 100644
index 0000000000..8fff8179ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-olive.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-orange.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-orange.png
new file mode 100644
index 0000000000..d3cd498b52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-orange.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-teal.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-teal.png
new file mode 100644
index 0000000000..0293ce89de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-teal.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/swatch-yellow.png b/testing/web-platform/tests/css/css-writing-modes/support/swatch-yellow.png
new file mode 100644
index 0000000000..1591aa0e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/swatch-yellow.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/tcu-font.otf b/testing/web-platform/tests/css/css-writing-modes/support/tcu-font.otf
new file mode 100644
index 0000000000..d6e6e7fc18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/tcu-font.otf
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/tcy.css b/testing/web-platform/tests/css/css-writing-modes/support/tcy.css
new file mode 100644
index 0000000000..0117e215eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/tcy.css
@@ -0,0 +1,11 @@
+.tcy {
+  text-combine-upright: all;
+}
+.fake-tcy {
+  display: inline-block;
+  writing-mode: horizontal-tb;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  line-height: 1em;
+}
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/test-bl.png b/testing/web-platform/tests/css/css-writing-modes/support/test-bl.png
new file mode 100644
index 0000000000..904e24e996
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/test-bl.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/test-br.png b/testing/web-platform/tests/css/css-writing-modes/support/test-br.png
new file mode 100644
index 0000000000..f413ff5c1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/test-br.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/test-tl.png b/testing/web-platform/tests/css/css-writing-modes/support/test-tl.png
new file mode 100644
index 0000000000..f6ac0ef7e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/test-tl.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/test-tr.png b/testing/web-platform/tests/css/css-writing-modes/support/test-tr.png
new file mode 100644
index 0000000000..59843ae54b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/test-tr.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-010.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-010.png
new file mode 100644
index 0000000000..d5d96d9cd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-010.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-012.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-012.png
new file mode 100644
index 0000000000..7d5e9a4e24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-012.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-mixed-vrl-002.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-mixed-vrl-002.png
new file mode 100644
index 0000000000..88f06722fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-mixed-vrl-002.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-left-001.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-left-001.png
new file mode 100644
index 0000000000..51921a7e91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-left-001.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-lr.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-lr.png
new file mode 100644
index 0000000000..2c1c8f7f4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-lr.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-right-001.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-right-001.png
new file mode 100644
index 0000000000..f4bfd48549
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-sideways-right-001.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-upright-001.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-upright-001.png
new file mode 100644
index 0000000000..d7df4098ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-upright-001.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-upright-vrl-002.png b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-upright-vrl-002.png
new file mode 100644
index 0000000000..22eff43039
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation-upright-vrl-002.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/text-orientation.js b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation.js
new file mode 100644
index 0000000000..fb6eb7d60d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/text-orientation.js
@@ -0,0 +1,217 @@
+(function () {
+    var log = function () {};
+
+    function OrientationTester(container, orientation) {
+        this.container = container;
+        this.setOrientation(orientation);
+    }
+    extend(OrientationTester.prototype, {
+        setOrientation: function (orientation) {
+            this.orientation = orientation;
+        },
+        measure: function (results) {
+            this.results = results;
+            this._measureNode(this.container);
+        },
+        _measureNode: function (node, block) {
+            switch (node.nodeType) {
+            case Node.ELEMENT_NODE:
+                var blockOverride = node.dataset.block;
+                if (blockOverride)
+                    block = blockOverride;
+                var nodes = node.childNodes;
+                for (var i = 0; i < nodes.length; i++)
+                    this._measureNode(nodes[i], block);
+                return;
+            case Node.TEXT_NODE:
+                break;
+            default:
+                return;
+            }
+
+            if (this.orientation == "R") {
+                var advanceExpected = 8;
+                var advanceFailed = 4;
+            } else {
+                advanceExpected = 4;
+                advanceFailed = 8;
+            }
+
+            var range = document.createRange();
+            var text = node.textContent;
+            for (var ich = 0; ich < text.length; ich++) {
+                var code = text.charCodeAt(ich);
+                if (code == 10 || code == 13)
+                    continue;
+                range.setStart(node, ich);
+                if (code >= 0xD800 && code <= 0xDBFF) {
+                    var next = text.charCodeAt(ich+1);
+                    if (next >= 0xDC00 && next <= 0xDFFF) {
+                        ich++;
+                        code = ((code & 0x3FF) << 10) + (next & 0x3FF) + 0x10000;
+                    }
+                }
+                range.setEnd(node, ich + 1);
+                rect = range.getBoundingClientRect();
+                if (rect.width == 16) {
+                    if (rect.height == advanceExpected) {
+                        this.results.passCount++;
+                        continue;
+                    }
+                    //log("U+" + stringFromUnicode(code) + " " + rect.width + "x" + rect.height);
+                    if (rect.height == advanceFailed) {
+                        this.results.failed(this, code, block);
+                        continue;
+                    }
+                }
+                this.results.inconclusive(this, code, block, rect);
+            }
+        }});
+
+    function Results(name) {
+        this.details = document.createElement("details");
+        this.summary = appendChildElement(this.details, "summary");
+        this.summary.textContent = name;
+        var typeList = appendChildElement(this.details, "ul");
+        this.failList = appendChildElement(appendChildElement(typeList, "li", "Failures"), "ol");
+        this.inconclusiveList = appendChildElement(appendChildElement(typeList, "li", "Inconclusives"), "ol");
+        this.passCount = 0;
+        this.failCount = 0;
+        this.inconclusiveCount = 0;
+    }
+    extend(Results.prototype, {
+        failed: function (test, code, block) {
+            this.failCount++;
+            this.append(this.failList, test, code, block);
+        },
+        inconclusive: function (test, code, block, rect) {
+            this.inconclusiveCount++;
+            this.append(this.inconclusiveList, test, code, block, " but inconclusive (rendered as " + rect.width + "x" + rect.height + ")");
+        },
+        append: function (list, test, code, block, message) {
+            var text = stringFromUnicode(code) + " should be " + test.orientation;
+            if (block)
+                text = block + ": " + text;
+            if (message)
+                text += message;
+            appendChildElement(list, "li", text);
+        },
+        done: function (test) {
+            this.summary.textContent += " (" + this.passCount + " passes, " +
+                this.failCount + " fails, " +
+                this.inconclusiveCount + " inconclusives)";
+            details.appendChild(this.details);
+            assert_equals(this.failCount, 0, "Fail count");
+            assert_greater_than(this.passCount, 0, "Pass count");
+            test.done();
+        }});
+
+    function Runner() {
+        var nodes = document.querySelectorAll("div[data-vo]");
+        this.testers = [];
+        for (var i = 0; i < nodes.length; i++) {
+            var node = nodes[i];
+            var vo = node.dataset.vo;
+            var tester = new OrientationTester(node, vo);
+            tester.test = async_test("Default orientation for vo=" + vo);
+            this.testers.push(tester);
+        }
+        this.testU = async_test("Orientation=Upright");
+        this.testR = async_test("Orientation=Rotated");
+    }
+    extend(Runner.prototype, {
+        run: function () {
+            log("Started");
+            var start = new Date;
+
+            for (var i = 0; i < this.testers.length; i++) {
+                var tester = this.testers[i];
+                var test = tester.test;
+                test.step(function () {
+                    var results = new Results(test.name);
+                    tester.measure(results);
+                    results.done(test);
+                });
+            }
+            this.runOrientation(this.testU, "U");
+            this.runOrientation(this.testR, "R");
+
+            log("Elapsed " + (new Date() - start));
+            done();
+        },
+        runOrientation: function (test, orientation) {
+            container.classList.add(orientation);
+            var results = new Results(test.name);
+            var me = this;
+            test.step(function () {
+                for (var i = 0; i < me.testers.length; i++) {
+                    var tester = me.testers[i];
+                    tester.setOrientation(orientation);
+                    tester.measure(results);
+                }
+                results.done(test);
+            })
+            container.classList.remove(orientation);
+        }});
+
+    setup({explicit_done:true, explicit_timeout:true});
+    var runner = new Runner();
+    window.onload = function () {
+        if (window.location.search == "?wait") {
+            log("Sleeping 5 secs for debug purpose");
+            return setTimeout(run, 5000);
+        }
+        run();
+    }
+
+    function run() {
+        onFontReady("16px orientation", function () { runner.run(); });
+    }
+
+    function onFontReady(font, func) {
+        log("Waiting test fonts to load");
+        if (document.fonts) {
+            if ('load' in document.fonts)
+                return document.fonts.load(font).then(func);
+            if ('ready' in document.fonts)
+                return document.fonts.ready.then(func);
+        }
+        document.offsetTop; // last resort to load @font-face
+        func();
+    }
+
+    function arrayFromRangesByValue(dict) {
+        var array = [];
+        for (var value in dict) {
+            var ranges = dict[value];
+            for (var i = 0; i < ranges.length; i += 2) {
+                var to = ranges[i+1];
+                for (var code = ranges[i]; code <= to; code++)
+                    array[code] = value;
+            }
+        }
+        return array;
+    };
+
+    function stringFromUnicode(code) {
+        var hex = code.toString(16).toUpperCase();
+        if (hex.length < 4) {
+            hex = "0000" + hex;
+            hex = hex.substr(hex.length - 4);
+        }
+        return hex + ' "' + String.fromCharCode(code) + '"';
+    }
+
+    function appendChildElement(parent, tag, text) {
+        var node = document.createElement(tag);
+        if (text)
+            node.textContent = text;
+        parent.appendChild(node);
+        return node;
+    }
+
+    function extend(target, dict) {
+        for (var key in dict)
+            target[key] = dict[key];
+    }
+})();
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/width-test.css b/testing/web-platform/tests/css/css-writing-modes/support/width-test.css
new file mode 100644
index 0000000000..4f15976ccc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/width-test.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: WidthTest;
+  src: url(WidthTest-Regular.otf);
+}
+.test {
+  font: 72px/1 WidthTest;
+}
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/wm-propagation-body-003-exp-res.png b/testing/web-platform/tests/css/css-writing-modes/support/wm-propagation-body-003-exp-res.png
new file mode 100644
index 0000000000..b437e8fb8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/wm-propagation-body-003-exp-res.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/wm-propagation-body-035-exp-res.png b/testing/web-platform/tests/css/css-writing-modes/support/wm-propagation-body-035-exp-res.png
new file mode 100644
index 0000000000..33f2820daf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/wm-propagation-body-035-exp-res.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/world.png b/testing/web-platform/tests/css/css-writing-modes/support/world.png
new file mode 100644
index 0000000000..b56ada3ef1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/world.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-59x59.png b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-59x59.png
new file mode 100644
index 0000000000..50816d38f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-59x59.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-horiz-redline-bottom-59x59.png b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-horiz-redline-bottom-59x59.png
new file mode 100644
index 0000000000..d6139238de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-horiz-redline-bottom-59x59.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-center-59x59.png b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-center-59x59.png
new file mode 100644
index 0000000000..c352b10954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-center-59x59.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-left-59x59.png b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-left-59x59.png
new file mode 100644
index 0000000000..8baf6f6040
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-left-59x59.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-right-59x59.png b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-right-59x59.png
new file mode 100644
index 0000000000..7e881312b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/yellow-square-vert-redline-right-59x59.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/zh+arabic.png b/testing/web-platform/tests/css/css-writing-modes/support/zh+arabic.png
new file mode 100644
index 0000000000..019debeae6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/zh+arabic.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/zh+latin.png b/testing/web-platform/tests/css/css-writing-modes/support/zh+latin.png
new file mode 100644
index 0000000000..8fa56d5b6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/zh+latin.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/zh-orientation.png b/testing/web-platform/tests/css/css-writing-modes/support/zh-orientation.png
new file mode 100644
index 0000000000..fa05cfe797
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/zh-orientation.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/zh_ar_wrap.png b/testing/web-platform/tests/css/css-writing-modes/support/zh_ar_wrap.png
new file mode 100644
index 0000000000..747e816e21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/zh_ar_wrap.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/support/zh_en_wrap.png b/testing/web-platform/tests/css/css-writing-modes/support/zh_en_wrap.png
new file mode 100644
index 0000000000..a3d6591863
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/support/zh_en_wrap.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/svg-aliasing-001.html b/testing/web-platform/tests/css/css-writing-modes/svg-aliasing-001.html
new file mode 100644
index 0000000000..3979459838
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/svg-aliasing-001.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>SVG writing modes values parsed as aliases</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#svg-writing-mode">
+<link rel="match" href="reference/svg-aliasing-001-ref.html">
+<meta name="assert" content="The legacy SVG writing mode values are parsed as simple aliases of the newer ones, and do not have side effects on bidi.">
+<meta name="flags" content="may"> <!-- "may" because the support for these values is optional-->
+
+<p>The test passes if you can see “1 2 3” 6 times below (without the quotation marks). If any of them is reversed (“3 2 1”) the test fails.</p>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="300"
+   height="600">
+<g style="direction: ltr">
+  <text x="0" y="50" style="writing-mode: lr; fill: blue;">1 2 3</text>
+  <text x="0" y="150" style="writing-mode: rl; fill: blue;">1 2 3</text>
+</g>
+<g>
+  <text x="150" y="50" style="writing-mode: lr; fill: blue;">1 2 3</text>
+  <text x="150" y="150" style="writing-mode: rl; fill: blue;">1 2 3</text>
+</g>
+<g style="direction: rtl">
+  <text x="300" y="50" style="writing-mode: lr; fill: blue;">3 2 1</text>
+  <text x="300" y="150" style="writing-mode: rl; fill: blue;">3 2 1</text>
+</g>
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/svg-aliasing-002.html b/testing/web-platform/tests/css/css-writing-modes/svg-aliasing-002.html
new file mode 100644
index 0000000000..c1b26279cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/svg-aliasing-002.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>SVG writing modes values parsed as aliases</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#svg-writing-mode">
+<link rel="match" href="reference/svg-aliasing-002-ref.html"
+<meta name="assert" content="The legacy SVG writing mode values are parsed as simple aliases of the newer ones, and do not have side effects on bidi.">
+<meta name="flags" content="may"> <!-- "may" because the support for these values is optional-->
+
+<p>The test passes if you can see “1 2 3” (without the quotation marks) 3 times below going top-to-bottom.
+If any of them is reversed (going bottom to top), the test fails.</p>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="300"
+   height="600">
+<g style="direction: ltr">
+  <text x="50" y="50" style="writing-mode: tb; fill: blue;">1 2 3</text>
+</g>
+<g>
+  <text x="125" y="50" style="writing-mode: tb; fill: blue;">1 2 3</text>
+</g>
+<g style="direction: rtl">
+  <text x="200" y="80" style="writing-mode: tb; fill: blue;">3 2 1</text>
+</g>
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-cell-001.html b/testing/web-platform/tests/css/css-writing-modes/table-cell-001.html
new file mode 100644
index 0000000000..29344abbab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-cell-001.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Writing Mode test: orthogonal table cell</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta assert="The writing mode property applies to table cells: two adjacent cells can have orthogonal writing modes, and the enclosing table must be laid out correctly.">
+<meta flags="ahem">
+<link rel="match" href="reference/table-cell-001-ref.html">
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+table, td {
+  padding: 0;
+  border-spacing: 0;
+  font: 20px/20px ahem;
+}
+td { background: green; }
+#t2 { writing-mode: vertical-rl; }
+
+#red {
+  font: 20px/20px ahem;
+  position: absolute;
+  z-index: -1;
+  background: red;
+  height: 4em;
+  width: 5em;
+}
+
+
+</style>
+
+<p>There should be a <strong>green rectangle</strong> and <strong>no red</strong>.
+
+<div id=red></div>
+
+<table><tbody><tr><td id=t1>&nbsp;&nbsp;&nbsp;&nbsp;</td><td id=t2>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></tbody></table>
+<!--
+* Each table cell should be 4em in its inline dimention: horizontal for the first, vertical for the second.
+* The first table cell should be 4em tall, to match the height of the second one.
+* The second table cell should be 1em in its block dimention, which is horizontal.
+* Juxtaposing the two that give 4em x 5em.
+-->
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-cell-002.html b/testing/web-platform/tests/css/css-writing-modes/table-cell-002.html
new file mode 100644
index 0000000000..320926f394
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-cell-002.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Writing Mode test: orthogonal table cell</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta assert="The writing mode property applies to table cells: max-heights constrains on a vertical table cell (in a horizontal table)
+              ought to have the same effect on the cell as max-width would on horizontal ones.
+              Lines of longer than the max which have break opportunities are expected to wrap.">
+<meta flags="ahem">
+<link rel="match" href="reference/table-cell-002-ref.html">
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+table, td {
+  padding: 0;
+  border-spacing: 0;
+}
+td {
+  max-height: 100px;
+  font: 50px / 50px ahem;
+  color: green;
+  writing-mode: vertical-rl;
+  background: red;
+}
+</style>
+
+<p>There should be a <strong>green square</strong> and <strong>no red</strong>.
+
+<table><tbody><tr><td>xx xx</td></tr></tbody></table>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-column-order-002.xht b/testing/web-platform/tests/css/css-writing-modes/table-column-order-002.xht
new file mode 100644
index 0000000000..9fd26e3cad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-column-order-002.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'direction: rtl' - table columns order and vertical-rl</title>
+
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-21 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the direction property" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table with 'writing-mode' set to 'vertical-rl' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). This test relies on right-to-left directionality applying to characters that are strongly sensitive to directionality. In this test, we use digits [0-9] and non-breaking spaces which are all strongly sensitive to bidi directionality." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+   <!-- The right-most "S" -->
+   <tr><td><!-- bottommost column -->111 2 &nbsp; 3 &nbsp; 4 &nbsp;</td><td>5&nbsp; 6&nbsp; 7&nbsp; 88</td><td><!-- topmost column -->&nbsp;9 &nbsp;0 &nbsp;1 22</td></tr>
+
+   <!-- The left-most "S" -->
+   <tr><td><!-- bottommost column -->333 4 &nbsp; 5 &nbsp; 6 &nbsp;</td><td>7&nbsp; 8&nbsp; 9&nbsp; 00</td><td><!-- topmost column -->&nbsp;1 &nbsp;2 &nbsp;3 44</td></tr>
+
+   <!-- The "A" -->
+   <tr><td><!-- bottommost column -->555 &nbsp;&nbsp; &nbsp;&nbsp; 666</td><td>77 8&nbsp; 9&nbsp; 00</td><td><!-- topmost column -->11 &nbsp;2 &nbsp;3 44</td></tr>
+
+   <!-- The "P" -->
+   <tr><td class="left-most-cell"><!-- bottommost column -->&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 555</td><td class="left-most-cell">66 7&nbsp; 8&nbsp; 99</td><td class="left-most-cell"><!-- topmost column -->00 &nbsp;1 &nbsp;2 33</td></tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-column-order-003.xht b/testing/web-platform/tests/css/css-writing-modes/table-column-order-003.xht
new file mode 100644
index 0000000000..c26de3887d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-column-order-003.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'direction: rtl' - table columns order and vertical-lr</title>
+
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-21 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the direction property" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table with 'writing-mode' set to 'vertical-lr' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). This test relies on right-to-left directionality applying to characters that are strongly sensitive to directionality. In this test, we use digits [0-9] and non-breaking spaces which are all strongly sensitive to bidi directionality." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+   <!-- The "P" -->
+   <tr><td class="left-most-cell"><!-- bottommost column -->111 &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td><td class="left-most-cell">22 3&nbsp; 4&nbsp; 55</td><td class="left-most-cell"><!-- topmost column -->66 &nbsp;7 &nbsp;8 99</td></tr>
+
+   <!-- The "A" -->
+   <tr><td><!-- bottommost column -->000 &nbsp;&nbsp; &nbsp;&nbsp; 111</td><td>22 3&nbsp; 4&nbsp; 55</td><td><!-- topmost column -->66 &nbsp;7 &nbsp;8 99</td></tr>
+
+   <!-- The left-most "S" -->
+   <tr><td><!-- bottommost column -->0 &nbsp; 1 &nbsp; 2 &nbsp; 333</td><td>44 5&nbsp; 6&nbsp; 7&nbsp;</td><td><!-- topmost column -->88 &nbsp;9 &nbsp;0 &nbsp;1</td></tr>
+
+   <!-- The right-most "S" -->
+   <tr><td><!-- bottommost column -->2 &nbsp; 3 &nbsp; 4 &nbsp; 555</td><td>66 7&nbsp; 8&nbsp; 9&nbsp;</td><td><!-- topmost column -->00 &nbsp;1 &nbsp;2 &nbsp;3</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-column-order-004.xht b/testing/web-platform/tests/css/css-writing-modes/table-column-order-004.xht
new file mode 100644
index 0000000000..9ee1bab1a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-column-order-004.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'direction: rtl' - table columns order and vertical-rl</title>
+
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-21 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the direction property" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that colspanned cells in a table with 'direction' set to 'rtl' are handled according to a bottom-to-top column direction. This test relies on right-to-left directionality applying to characters that are strongly sensitive to directionality. In this test, we use digits [0-9] and non-breaking spaces which are all strongly sensitive to bidi directionality." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+   <!-- The right-most "S" -->
+   <tr><td><!-- bottommost column -->111 2 &nbsp; 3 &nbsp; 4 &nbsp;</td><td>5&nbsp; 6&nbsp; 7&nbsp; 88</td><td><!-- topmost column -->&nbsp;9 &nbsp;0 &nbsp;1 22</td></tr>
+
+   <!-- The left-most "S" -->
+   <tr><td colspan="2"><!-- bottommost column -->3333&nbsp; 4 &nbsp;5&nbsp; 6 &nbsp;7&nbsp; 8 &nbsp;99</td><td><!-- topmost column -->&nbsp;1 &nbsp;2 &nbsp;3 44</td></tr>
+
+   <!-- The "A" -->
+   <tr><td><!-- bottommost column -->555 &nbsp;&nbsp; &nbsp;&nbsp; 666</td><td colspan="2"><!-- topmost column -->7777 8&nbsp; 9 0&nbsp; 1 2222</td></tr>
+
+   <!-- The "P" -->
+   <tr><td class="left-most-cell"><!-- bottommost column -->&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 333</td><td class="left-most-cell">44 5&nbsp; 6&nbsp; 77</td><td class="left-most-cell"><!-- topmost column -->88 &nbsp;9 &nbsp;0 11</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-column-order-005.xht b/testing/web-platform/tests/css/css-writing-modes/table-column-order-005.xht
new file mode 100644
index 0000000000..635714a2af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-column-order-005.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'direction: rtl' - table columns order and vertical-lr</title>
+
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-21 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the direction property" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that colspanned cells in a table with 'direction' set to 'rtl' are handled according to a bottom-to-top column direction. This test relies on right-to-left directionality applying to characters that are strongly sensitive to directionality. In this test, we use digits [0-9] and non-breaking spaces which are all strongly sensitive to bidi directionality." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+   <!-- The "P" -->
+   <tr><td class="left-most-cell"><!-- bottommost column -->111 &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td><td class="left-most-cell">22 3&nbsp; 4&nbsp; 55</td><td class="left-most-cell"><!-- topmost column -->66 &nbsp;7 &nbsp;8 99</td></tr>
+
+   <!-- The "A" -->
+   <tr><td colspan="2"><!-- bottommost column -->00000 &nbsp;&nbsp;&nbsp;1&nbsp; &nbsp;&nbsp;&nbsp;2&nbsp; 33333</td><td><!-- topmost column -->44 &nbsp;5 &nbsp;6 77</td></tr>
+
+   <!-- The left-most "S" -->
+   <tr><td><!-- bottommost column -->8 &nbsp; 9 &nbsp; 0 &nbsp; 111</td><td colspan="2"><!-- topmost column -->2222 3 &nbsp;4 5 &nbsp;6 7 &nbsp;8</td></tr>
+
+   <!-- The right-most "S" -->
+   <tr><td><!-- bottommost column -->9 &nbsp; 0 &nbsp; 1 &nbsp; 222</td><td>33 4&nbsp; 5&nbsp; 6&nbsp;</td><td><!-- topmost column -->77 &nbsp;8 &nbsp;9 &nbsp;0</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-column-order-slr-007.xht b/testing/web-platform/tests/css/css-writing-modes/table-column-order-slr-007.xht
new file mode 100644
index 0000000000..d145dd6620
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-column-order-slr-007.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'direction: rtl' - table columns order and sideways-lr</title>
+
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-22 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#direction" title="2.1 Specifying Directionality: the direction property" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table with 'writing-mode' set to 'sideways-lr' and with 'direction' set to 'rtl' will have its column displayed from top (1st column) to bottom (last column). This test relies on right-to-left directionality applying to characters that are strongly sensitive to directionality. In this test, we use digits [0-9] and non-breaking spaces which are all strongly sensitive to bidi directionality." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      direction: rtl;
+      writing-mode: sideways-lr;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+   <!-- The "P" -->
+   <tr><td class="left-most-cell"><!-- topmost column -->11 2&nbsp; 3&nbsp; 44</td><td class="left-most-cell">55 &nbsp;6 &nbsp;7 88</td><td class="left-most-cell"><!-- bottommost column -->999 &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td></tr>
+
+   <!-- The "A" -->
+   <tr><td><!-- topmost column -->00 1&nbsp; 2&nbsp; 33</td><td>44 &nbsp;5 &nbsp;6 77</td><td><!-- bottommost column -->888 &nbsp;&nbsp; &nbsp;&nbsp; 999</td></tr>
+
+   <!-- The left-most "S" -->
+   <tr><td><!-- topmost column -->00 1&nbsp; 2&nbsp; 3&nbsp;</td><td>44 &nbsp;5 &nbsp;6 &nbsp;7</td><td><!-- bottommost column -->&nbsp; 8 &nbsp; 9 &nbsp; 0 111</td></tr>
+
+   <!-- The right-most "S" -->
+   <tr><td><!-- topmost column -->22 3&nbsp; 4&nbsp; 5&nbsp;</td><td>66 &nbsp;7 &nbsp;8 &nbsp;9</td><td><!-- bottommost column -->&nbsp; 0 &nbsp; 1 &nbsp; 2 333</td></tr>
+
+  </table>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-column-order-srl-006.xht b/testing/web-platform/tests/css/css-writing-modes/table-column-order-srl-006.xht
new file mode 100644
index 0000000000..4c050e4291
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-column-order-srl-006.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'direction: rtl' - table columns order and sideways-rl</title>
+
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-22 -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#direction" title="2.1 Specifying Directionality: the direction property" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="block-flow-direction-001-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that a table with 'writing-mode' set to 'sideways-rl' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). This test relies on right-to-left directionality applying to characters that are strongly sensitive to directionality. In this test, we use digits [0-9] and non-breaking spaces which are all strongly sensitive to bidi directionality." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  body
+    {
+      color: yellow;
+      font: 20px/1 Ahem;
+    }
+
+  table
+    {
+      background-color: blue;
+      border-spacing: 0em;
+      border: blue solid 1em;
+      height: 7em;
+      direction: rtl;
+      writing-mode: sideways-rl;
+    }
+
+  td
+    {
+      padding-bottom: 0em;
+      padding-left: 1em;
+      padding-right: 0em;
+      padding-top: 0em;
+    }
+
+  td.left-most-cell
+    {
+      padding-left: 0em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+   <!-- The right-most "S" -->
+   <tr><td><!-- bottommost column -->111 2 &nbsp; 3 &nbsp; 4 &nbsp;</td><td>5&nbsp; 6&nbsp; 7&nbsp; 88</td><td><!-- topmost column -->&nbsp;9 &nbsp;0 &nbsp;1 22</td></tr>
+
+   <!-- The left-most "S" -->
+   <tr><td><!-- bottommost column -->333 4 &nbsp; 5 &nbsp; 6 &nbsp;</td><td>7&nbsp; 8&nbsp; 9&nbsp; 00</td><td><!-- topmost column -->&nbsp;1 &nbsp;2 &nbsp;3 44</td></tr>
+
+   <!-- The "A" -->
+   <tr><td><!-- bottommost column -->555 &nbsp;&nbsp; &nbsp;&nbsp; 666</td><td>77 8&nbsp; 9&nbsp; 00</td><td><!-- topmost column -->11 &nbsp;2 &nbsp;3 44</td></tr>
+
+   <!-- The "P" -->
+   <tr><td class="left-most-cell"><!-- bottommost column -->&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 555</td><td class="left-most-cell">66 7&nbsp; 8&nbsp; 99</td><td class="left-most-cell"><!-- topmost column -->00 &nbsp;1 &nbsp;2 33</td></tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-001-ref.html
new file mode 100644
index 0000000000..41aa1295ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-001-ref.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-15 -->
+
+<style>
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+  caption { background: green; }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table>
+  <caption></caption>
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan=3>
+    <td class="navy">
+  <tr>
+    <td rowspan=3>
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan=2>
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
+
+<table>
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan=3>
+    <td class="navy">
+  <tr>
+    <td rowspan=3>
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan=2>
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
+
+<table>
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan=3>
+    <td class="navy">
+  <tr>
+    <td rowspan=3>
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan=2>
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-002-ref.html
new file mode 100644
index 0000000000..37445460b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-002-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2016-01-15 -->
+
+<style>
+  table {
+    border-spacing: 0;
+    border: solid gray;
+    margin: 1em;
+    float: left;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+</style>
+
+<p>Test passes if the following patterned boxes all look identical.
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
+
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
+
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
+
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-001-ref.html
new file mode 100644
index 0000000000..0f772a3e72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-001-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style>
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+  caption { background: green; }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table>
+  <caption></caption>
+  <tr>
+    <td class="teal">
+    <td rowspan="3">
+    <td colspan="2" rowspan="2">
+    <td class="purp">
+    <td rowspan="2">
+  <tr>
+    <td class="aqua">
+    <td rowspan="2">
+  <tr>
+    <td rowspan="2">
+    <td class="yllw">
+    <td class="pink">
+    <td class="blue">
+
+  <tr>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+</table>
+
+<table>
+  <tr>
+    <td class="teal">
+    <td rowspan="3">
+    <td colspan="2" rowspan="2">
+    <td class="purp">
+    <td rowspan="2">
+  <tr>
+    <td class="aqua">
+    <td rowspan="2">
+  <tr>
+    <td rowspan="2">
+    <td class="yllw">
+    <td class="pink">
+    <td class="blue">
+
+  <tr>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+</table>
+
+<table>
+  <tr>
+    <td class="teal">
+    <td rowspan="3">
+    <td colspan="2" rowspan="2">
+    <td class="purp">
+    <td rowspan="2">
+  <tr>
+    <td class="aqua">
+    <td rowspan="2">
+  <tr>
+    <td rowspan="2">
+    <td class="yllw">
+    <td class="pink">
+    <td class="blue">
+
+  <tr>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-001.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-001.html
new file mode 100644
index 0000000000..25050b8e37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-001.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: sideways-lr Table Row/Rowgroup/Cell Ordering</title>
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="table-progression-slr-001-ref.html">
+<meta name="assert" content="This test checks that sideways-lr tables order rows/rowgroups left to right and cells bottom-to-top (LTR) or top-to-bottom (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+
+<style>
+  .test {
+    writing-mode: sideways-lr;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+
+
+  /* These rules must have no effect. */
+  .test thead,
+  .test tfoot,
+  .test tbody,
+  .test tr,
+  .test td {
+    writing-mode: horizontal-tb; /* For UAs not supporting vertical-rl */
+    writing-mode: sideways-rl;
+    direction: rtl;
+  }
+  .test[dir=rtl] thead,
+  .test[dir=rtl] tfoot,
+  .test[dir=rtl] tbody,
+  .test[dir=rtl] tr,
+  .test[dir=rtl] td {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table class="test">
+  <thead>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tfoot>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td class="yllw">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="pink">
+    <tr>
+      <td colspan=2>
+      <td class="purp">
+</table>
+
+<table dir=rtl class="test">
+  <thead>
+    <tr>
+      <td class="teal">
+      <td class="aqua">
+      <td colspan=2>
+  <tfoot>
+    <tr>
+      <td colspan=2>
+      <td class="blue">
+      <td class="navy">
+  <tbody>
+    <tr>
+      <td colspan=3>
+      <td class="orng">
+  <tbody>
+    <tr>
+      <td rowspan=2 colspan=2>
+      <td class="yllw">
+      <td rowspan=3>
+    <tr>
+      <td class="pink">
+    <tr>
+      <td class="purp">
+      <td colspan=2>
+</table>
+
+<table class="reference">
+  <tr>
+    <td class="teal">
+    <td rowspan="3">
+    <td colspan="2" rowspan="2">
+    <td class="purp">
+    <td rowspan="2">
+  <tr>
+    <td class="aqua">
+    <td rowspan="2">
+  <tr>
+    <td rowspan="2">
+    <td class="yllw">
+    <td class="pink">
+    <td class="blue">
+
+  <tr>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-002.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-002.html
new file mode 100644
index 0000000000..1525e2423d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-slr-002.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<title>CSS Test: sideways-lr Table Column/Colgroup Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="table-progression-002-ref.html">
+<meta name="assert" content="This test checks that sideways-lr tables order columns bottom-to-top (LTR) or top-to-bottom (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+
+<style>
+  .test {
+    writing-mode: sideways-lr;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+
+  table {
+    border-spacing: 0;
+    border: solid gray;
+    margin: 1em;
+    float: left;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+
+  /* These declarations must have no effect. */
+  .test col,
+  .test colgroup {
+    writing-mode: horizontal-tb;
+    writing-mode: sideways-rl;
+    direction: rtl;
+  }
+  .test[dir=rtl] col,
+  .test[dir=rtl] colgroup {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following patterned boxes all look identical.
+
+<table class="test">
+  <col span=2 class="aqua">
+  <col class="blue">
+  <col span=2 class="navy">
+  <tr><td><td><td><td><td>
+</table>
+<table class="test">
+  <colgroup span=2 class="aqua"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="navy">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table dir=rtl class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table dir=rtl class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-srl-001.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-srl-001.html
new file mode 100644
index 0000000000..b74b2caee5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-srl-001.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: sideways-rl Table Row/Rowgroup/Cell Ordering</title>
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="table-progression-001-ref.html">
+<meta name="assert" content="This test checks that sideways-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+
+<style>
+  .test {
+    writing-mode: sideways-rl;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+
+  /* These rules must have no effect. */
+  .test thead,
+  .test tfoot,
+  .test tbody,
+  .test tr,
+  .test td {
+    writing-mode: horizontal-tb; /* For UAs not supporting vertical-rl */
+    writing-mode: sideways-lr;
+    direction: rtl;
+  }
+  .test[dir=rtl] thead,
+  .test[dir=rtl] tfoot,
+  .test[dir=rtl] tbody,
+  .test[dir=rtl] tr,
+  .test[dir=rtl] td {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table class="test">
+  <thead>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tfoot>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td colspan=2>
+      <td class="purp">
+    <tr>
+      <td class="pink">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="yllw">
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+</table>
+
+<table dir=rtl class="test">
+  <thead>
+    <tr>
+      <td colspan=2>
+      <td class="blue">
+      <td class="navy">
+  <tfoot>
+    <tr>
+      <td class="teal">
+      <td class="aqua">
+      <td colspan=2>
+  <tbody>
+    <tr>
+      <td class="purp">
+      <td colspan=2>
+      <td rowspan=3>
+    <tr>
+      <td rowspan=2 colspan=2>
+      <td class="pink">
+    <tr>
+      <td class="yllw">
+  <tbody>
+    <tr>
+      <td colspan=3>
+      <td class="orng">
+</table>
+
+<table class="reference">
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+  <tr>
+    <td rowspan="3">
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan="2">
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-srl-002.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-srl-002.html
new file mode 100644
index 0000000000..7d5df32cc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-srl-002.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: sideways-rl Table Column/Colgroup Ordering</title>
+<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="table-progression-002-ref.html">
+<meta name="assert" content="This test checks that sideways-rl tables order columns top-to-bottom (LTR) or bottom-to-top (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+
+<style>
+  .test {
+    writing-mode: sideways-rl;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    border: solid gray;
+    margin: 1em;
+    float: left;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+
+  /* These declarations must have no effect. */
+  .test col,
+  .test colgroup {
+    writing-mode: horizontal-tb;
+    writing-mode: sideways-lr;
+    direction: rtl;
+  }
+  .test[dir=rtl] col,
+  .test[dir=rtl] colgroup {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following patterned boxes all look identical.
+
+<table class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table dir=rtl class="test">
+  <col span=2 class="aqua">
+  <col class="blue">
+  <col span=2 class="navy">
+  <tr><td><td><td><td><td>
+</table>
+<table dir=rtl class="test">
+  <colgroup span=2 class="aqua"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="navy">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-001.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-001.html
new file mode 100644
index 0000000000..6b9d3c1f44
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-001.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-lr Table Row/Rowgroup/Cell Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2016-01-15 -->
+<link rel="match" href="table-progression-001-ref.html">
+<meta name="assert" content="This test checks that vertical-lr tables order rows/rowgroups left to right and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+
+<style>
+  .test {
+    writing-mode: vertical-lr;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+
+
+  /* These rules must have no effect. */
+  .test thead,
+  .test tfoot,
+  .test tbody,
+  .test tr,
+  .test td {
+    writing-mode: horizontal-tb; /* For UAs not supporting vertical-rl */
+    writing-mode: vertical-rl;
+    direction: rtl;
+  }
+  .test[dir=rtl] thead,
+  .test[dir=rtl] tfoot,
+  .test[dir=rtl] tbody,
+  .test[dir=rtl] tr,
+  .test[dir=rtl] td {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table class="test">
+  <thead>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tfoot>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td class="yllw">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="pink">
+    <tr>
+      <td colspan=2>
+      <td class="purp">
+</table>
+
+<table dir=rtl class="test">
+  <thead>
+    <tr>
+      <td class="teal">
+      <td class="aqua">
+      <td colspan=2>
+  <tfoot>
+    <tr>
+      <td colspan=2>
+      <td class="blue">
+      <td class="navy">
+  <tbody>
+    <tr>
+      <td colspan=3>
+      <td class="orng">
+  <tbody>
+    <tr>
+      <td rowspan=2 colspan=2>
+      <td class="yllw">
+      <td rowspan=3>
+    <tr>
+      <td class="pink">
+    <tr>
+      <td class="purp">
+      <td colspan=2>
+</table>
+
+
+<table class="reference">
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan=3>
+    <td class="navy">
+
+  <tr>
+    <td rowspan=3>
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan=2>
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-002.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-002.html
new file mode 100644
index 0000000000..a3668178a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-002.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-lr Table Column/Colgroup Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2016-01-15 -->
+<link rel="match" href="table-progression-002-ref.html">
+<meta name="assert" content="This test checks that vertical-lr tables order columns top-to-bottom (LTR) or bottom-to-top (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction"z>
+
+<style>
+  .test {
+    writing-mode: vertical-lr;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+
+  table {
+    border-spacing: 0;
+    border: solid gray;
+    margin: 1em;
+    float: left;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+
+  /* These declarations must have no effect. */
+  .test col,
+  .test colgroup {
+    writing-mode: horizontal-tb;
+    writing-mode: vertical-rl;
+    direction: rtl;
+  }
+  .test[dir=rtl] col,
+  .test[dir=rtl] colgroup {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following patterned boxes all look identical.
+
+<table class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table dir=rtl class="test">
+  <col span=2 class="aqua">
+  <col class="blue">
+  <col span=2 class="navy">
+  <tr><td><td><td><td><td>
+</table>
+<table dir=rtl class="test">
+  <colgroup span=2 class="aqua"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="navy">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-003.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-003.html
new file mode 100644
index 0000000000..def5c3c36d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-003.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-lr upright orientation Table Row/Rowgroup/Cell Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2016-01-19 -->
+<link rel="match" href="table-progression-001-ref.html">
+<meta name="assert" content="This test checks that vertical-lr tables, whether LTR or RTL, order rows/rowgroups left to right and cells top-to-bottom when text-orientation is upright.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" title="5.1 Orienting Text: the 'text-orientation' property">
+
+<style>
+  .test {
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table class="test">
+  <thead>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tfoot>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td class="yllw">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="pink">
+    <tr>
+      <td colspan=2>
+      <td class="purp">
+</table>
+
+<table class="test" dir=rtl>
+  <thead>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tfoot>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td class="yllw">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="pink">
+    <tr>
+      <td colspan=2>
+      <td class="purp">
+</table>
+
+<table class="reference">
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+  <tr>
+    <td rowspan="3">
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan="2">
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-004.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-004.html
new file mode 100644
index 0000000000..dd444e35ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vlr-004.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-lr upright orientation Table Column/Colgroup Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="table-progression-002-ref.html">
+<meta name="assert" content="This test checks that vertical-lr tables, whether LTR or RTL, order columns top-to-bottom when text-orientation is upright.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction"z>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" title="5.1 Orienting Text: the 'text-orientation' property">
+
+<style>
+  .test {
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+
+  table {
+    border-spacing: 0;
+    border: solid gray;
+    margin: 1em;
+    float: left;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+</style>
+
+<p>Test passes if the following patterned boxes all look identical.
+
+<table class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table dir=rtl class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table dir=rtl class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-001.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-001.html
new file mode 100644
index 0000000000..c5c3090058
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-001.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-rl Table Row/Rowgroup/Cell Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2016-01-15 -->
+<link rel="match" href="table-progression-001-ref.html">
+<meta name="assert" content="This test checks that vertical-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+
+<style>
+  .test {
+    writing-mode: vertical-rl;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+
+  /* These rules must have no effect. */
+  .test thead,
+  .test tfoot,
+  .test tbody,
+  .test tr,
+  .test td {
+    writing-mode: horizontal-tb; /* For UAs not supporting vertical-rl */
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+  .test[dir=rtl] thead,
+  .test[dir=rtl] tfoot,
+  .test[dir=rtl] tbody,
+  .test[dir=rtl] tr,
+  .test[dir=rtl] td {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table class="test">
+  <thead>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tfoot>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td colspan=2>
+      <td class="purp">
+    <tr>
+      <td class="pink">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="yllw">
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+</table>
+
+<table dir=rtl class="test">
+  <thead>
+    <tr>
+      <td colspan=2>
+      <td class="blue">
+      <td class="navy">
+  <tfoot>
+    <tr>
+      <td class="teal">
+      <td class="aqua">
+      <td colspan=2>
+  <tbody>
+    <tr>
+      <td class="purp">
+      <td colspan=2>
+      <td rowspan=3>
+    <tr>
+      <td rowspan=2 colspan=2>
+      <td class="pink">
+    <tr>
+      <td class="yllw">
+  <tbody>
+    <tr>
+      <td colspan=3>
+      <td class="orng">
+</table>
+
+<table class="reference">
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+  <tr>
+    <td rowspan="3">
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan="2">
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-002.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-002.html
new file mode 100644
index 0000000000..99fe8153e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-002.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-rl Table Column/Colgroup Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2016-01-15 -->
+<link rel="match" href="table-progression-002-ref.html">
+<meta name="assert" content="This test checks that vertical-rl tables order columns top-to-bottom (LTR) or bottom-to-top (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+
+<style>
+  .test {
+    writing-mode: vertical-rl;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    border: solid gray;
+    margin: 1em;
+    float: left;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+
+  /* These declarations must have no effect. */
+  .test col,
+  .test colgroup {
+    writing-mode: horizontal-tb;
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+  .test[dir=rtl] col,
+  .test[dir=rtl] colgroup {
+    direction: ltr;
+  }
+</style>
+
+<p>Test passes if the following patterned boxes all look identical.
+
+<table class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table dir=rtl class="test">
+  <col span=2 class="aqua">
+  <col class="blue">
+  <col span=2 class="navy">
+  <tr><td><td><td><td><td>
+</table>
+<table dir=rtl class="test">
+  <colgroup span=2 class="aqua"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="navy">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-003.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-003.html
new file mode 100644
index 0000000000..3116f30a17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-003.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-rl upright orientation Table Row/Rowgroup/Cell Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2016-01-19 -->
+<link rel="match" href="table-progression-001-ref.html">
+<meta name="assert" content="This test checks that vertical-rl tables, whether LTR or RTL, order rows/rowgroups right to left and cells top-to-bottom when text-orientation is upright.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" title="5.1 Orienting Text: the 'text-orientation' property">
+
+<style>
+  .test {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    margin: 1em;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+    border: solid gray;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+  .purp { background: purple }
+  .pink { background: fuchsia }
+  .yllw { background: yellow }
+  .orng { background: orange }
+</style>
+
+<p>Test passes if the following three tables look identical.
+
+<table class="test">
+  <thead>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tfoot>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td colspan=2>
+      <td class="purp">
+    <tr>
+      <td class="pink">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="yllw">
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+</table>
+
+<table class="test" dir=rtl>
+  <thead>
+    <tr>
+      <td class="navy">
+      <td class="blue">
+      <td colspan=2>
+  <tfoot>
+    <tr>
+      <td colspan=2>
+      <td class="aqua">
+      <td class="teal">
+  <tbody>
+    <tr>
+      <td rowspan=3>
+      <td colspan=2>
+      <td class="purp">
+    <tr>
+      <td class="pink">
+      <td rowspan=2 colspan=2>
+    <tr>
+      <td class="yllw">
+  <tbody>
+    <tr>
+      <td class="orng">
+      <td colspan=3>
+</table>
+
+<table class="reference">
+  <tr>
+    <td rowspan=2>
+    <td class="orng">
+    <td colspan="3">
+    <td class="navy">
+  <tr>
+    <td rowspan="3">
+    <td class="yllw">
+    <td class="pink">
+    <td rowspan="2">
+    <td class="blue">
+  <tr>
+    <td class="aqua">
+    <td rowspan=2 colspan=2>
+    <td rowspan=2>
+  <tr>
+    <td class="teal">
+    <td class="purp">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-004.html b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-004.html
new file mode 100644
index 0000000000..bcafef13c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/table-progression-vrl-004.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: vertical-rl upright orientation Table Column/Colgroup Ordering</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="table-progression-002-ref.html">
+<meta name="assert" content="This test checks that vertical-rl tables, whether LTR or RTL, order columns top-to-bottom when text-orientation is upright.">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the 'direction' property">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" title="5.1 Orienting Text: the 'text-orientation' property">
+
+<style>
+  .test {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+  }
+  [dir=rtl] {
+    direction: rtl;
+  }
+
+  table {
+    border-spacing: 0;
+    border: solid gray;
+    margin: 1em;
+    float: left;
+  }
+  td {
+    width: 1em;
+    height: 1em;
+  }
+
+  .navy { background: navy}
+  .blue { background: blue }
+  .aqua { background: aqua }
+  .teal { background: teal }
+</style>
+
+<p>Test passes if the following patterned boxes all look identical.
+
+<table class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table dir=rtl class="test">
+  <col span=2 class="navy">
+  <col class="blue">
+  <col span=2 class="aqua">
+  <tr><td><td><td><td><td>
+</table>
+<table dir=rtl class="test">
+  <colgroup span=2 class="navy"></colgroup>
+  <colgroup>
+    <col class="blue">
+    <col span=2 class="aqua">
+  </colgroup>
+  <tr><td><td><td><td><td>
+</table>
+
+<table class="reference">
+  <tr><td class="navy">
+  <tr><td class="navy">
+  <tr><td class="blue">
+  <tr><td class="aqua">
+  <tr><td class="aqua">
+</table>
diff --git a/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-001.html b/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-001.html
new file mode 100644
index 0000000000..fd81fe91fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: white-space:normal space processing in text-combine-horizontal</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#text-combine-layout">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<link rel="match" href="reference/tcy-white-space-processing-001-ref.html">
+<meta name="assert" content="Spaces with white-space:normal in a text-combine horizontal is trimmed at the start and end, and collapsed in the middle.">
+<style>
+.v-rl {
+  writing-mode: vertical-rl;
+  width: 200px;
+}
+span {
+  -webkit-text-combine: horizontal; /*testing the layout text-combine, not it's support in general*/
+  text-combine-upright: all;
+  white-space: normal;
+}
+#test { color: blue; }
+#ref { color: orange; }
+</style>
+<p>Test passes if the blue and orange lines of text are identical.
+
+<div class=v-rl>
+  <div id=test>あ<span>  12</span>い<span>34  </span>う<span>5    6</span>えお</div>
+  <div id=ref>あ<span>12</span>い<span>34</span>う<span>5&nbsp;6</span>えお</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-002.html b/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-002.html
new file mode 100644
index 0000000000..58a8a61013
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: white-space:pre space processing in text-combine-horizontal</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#text-combine-layout">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<link rel="match" href="reference/tcy-white-space-processing-002-ref.html">
+<meta name="assert" content="Spaces with white-space:pre in a text-combine-upright are preserved">
+<style>
+.v-rl {
+  writing-mode: vertical-rl;
+  width: 200px;
+}
+span {
+  -webkit-text-combine: horizontal; /*testing the layout text-combine, not it's support in general*/
+  text-combine-upright: all;
+  white-space: pre;
+}
+#test { color: blue; }
+#ref { color: orange; }
+</style>
+<p>Test passes if the blue and orange lines of text are identical.
+
+<div class=v-rl>
+  <div id=test>あ<span>  12</span>い<span>34  </span>う<span>5    6</span>えお</div>
+  <div id=ref>あ<span>&nbsp;&nbsp;12</span>い<span>34&nbsp;&nbsp;</span>う<span>5&nbsp;&nbsp;&nbsp;&nbsp;6</span>えお</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-003.html b/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-003.html
new file mode 100644
index 0000000000..50b0650f8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/tcy-white-space-processing-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: white space only text-combine-horizontal</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#text-combine-layout">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<link rel="match" href="reference/tcy-white-space-processing-003-ref.html">
+<meta name="assert" content="a text-combine-upright with only white-space is preserved as a 1em square, including at the end of the containing line, regardless of the value of the white-space property">
+<style>
+.v-rl {
+  writing-mode: vertical-rl;
+  width: 200px;
+}
+#test span {
+  -webkit-text-combine: horizontal; /*testing the layout text-combine, not it's support in general*/
+  text-combine-upright: all;
+}
+#test2 span {
+  -webkit-text-combine: horizontal; /*testing the layout text-combine, not it's support in general*/
+  text-combine-upright: all;
+  white-space: pre;
+}
+#ref span {
+  display: inline-block;
+  height: 1em;
+}
+#test { color: blue; }
+#test2 { color: brown; }
+#ref { color: orange; }
+.v-rl > div {
+  display: inline-block;
+  border: solid;
+  margin: 0 5px;
+}
+</style>
+<p>Test passes if the blue, orange, brown boxes are identical.
+
+<div class=v-rl>
+  <div id=test>あいう<span> </span>えお<span> </span></div>
+  <br>
+  <div id=test2>あいう<span> </span>えお<span> </span></div>
+  <br>
+  <div id=ref>あいう<span></span>えお<span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-over_and_under-fail.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-over_and_under-fail.svg
new file mode 100644
index 0000000000..76b4849969
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-over_and_under-fail.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m24.0 200.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m24.0 24.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m216.0 63.244095l102.39371 0l0 113.51181l-102.39371 0z" fill-rule="nonzero"></path><path fill="#000000" d="m262.19684 107.549995q10.0 7.8125 17.1875 16.5625l-6.5625 6.8749924q-7.8125 -9.687492 -16.874985 -18.124992l6.2499847 -5.3125z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m107.43044 63.244095l102.3937 0l0 113.51181l-102.3937 0z" fill-rule="nonzero"></path><path fill="#000000" d="m153.62729 107.549995q10.0 7.8125 17.1875 16.5625l-6.5625 6.8749924q-7.8125 -9.687492 -16.875 -18.124992l6.25 -5.3125z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-over_and_under-pass.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-over_and_under-pass.svg
new file mode 100644
index 0000000000..fe24716121
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-over_and_under-pass.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m24.0 200.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m24.0 24.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m216.0 63.244095l102.39371 0l0 113.51181l-102.39371 0z" fill-rule="nonzero"></path><path fill="#000000" d="m262.19684 107.549995q10.0 7.8125 17.1875 16.5625l-6.5625 6.8749924q-7.8125 -9.687492 -16.874985 -18.124992l6.2499847 -5.3125z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-rendering-tcu.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-rendering-tcu.svg
new file mode 100644
index 0000000000..5b03e4264d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-rendering-tcu.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m63.885353 13.473236l115.87162 0l0 115.87163l-115.87162 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m63.885353 13.473236l115.87162 0l0 115.87163l-115.87162 0z" fill-rule="nonzero"></path><path fill="#000000" d="m110.18054 88.489044l9.09375 -12.9375l-8.421875 -11.953125l5.28125 0l3.8125 5.828125q1.078125 1.671875 1.734375 2.796875q1.03125 -1.546875 1.90625 -2.75l4.1875 -5.875l5.046875 0l-8.609375 11.71875l9.265625 13.171875l-5.1875 0l-5.109375 -7.734375l-1.359375 -2.09375l-6.53125 9.828125l-5.109375 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m224.5116 13.472183l115.880615 0l0 115.880615l-115.880615 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m224.5116 13.472183l115.880615 0l0 115.880615l-115.880615 0z" fill-rule="nonzero"></path><path fill="#000000" d="m286.99487 88.492485l-4.21875 0l0 -26.890625q-1.53125 1.453125 -4.0 2.90625q-2.46875 1.453125 -4.4375 2.1875l0 -4.078125q3.53125 -1.671875 6.171875 -4.03125q2.65625 -2.375 3.765625 -4.59375l2.71875 0l0 34.5z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m224.5116 129.3528l115.880615 0l0 115.8806l-115.880615 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m224.5116 129.3528l115.880615 0l0 115.8806l-115.880615 0z" fill-rule="nonzero"></path><path fill="#000000" d="m293.27612 200.3106l0 4.0625l-22.71875 0q-0.046875 -1.53125 0.5 -2.9375q0.859375 -2.3125 2.765625 -4.5625q1.921875 -2.25 5.53125 -5.203125q5.59375 -4.59375 7.5625 -7.28125q1.96875 -2.6875 1.96875 -5.078125q0 -2.5 -1.796875 -4.21875q-1.78125 -1.734375 -4.671875 -1.734375q-3.046875 0 -4.875 1.828125q-1.828125 1.828125 -1.84375 5.0625l-4.34375 -0.4375q0.453125 -4.859375 3.359375 -7.390625q2.90625 -2.546875 7.796875 -2.546875q4.953125 0 7.828125 2.75q2.890625 2.734375 2.890625 6.78125q0 2.0625 -0.84375 4.0625q-0.84375 1.984375 -2.8125 4.1875q-1.953125 2.203125 -6.5 6.046875q-3.796875 3.1875 -4.875 4.328125q-1.078125 1.140625 -1.78125 2.28125l16.859375 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m224.5116 245.2334l115.880615 0l0 115.880615l-115.880615 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m224.5116 245.2334l115.880615 0l0 115.880615l-115.880615 0z" fill-rule="nonzero"></path><path fill="#000000" d="m271.11987 311.17557l4.21875 -0.5625q0.734375 3.59375 2.46875 5.171875q1.75 1.578125 4.265625 1.578125q2.96875 0 5.015625 -2.0625q2.0625 -2.0625 2.0625 -5.109375q0 -2.90625 -1.90625 -4.78125q-1.890625 -1.890625 -4.828125 -1.890625q-1.1875 0 -2.96875 0.46875l0.46875 -3.703125q0.421875 0.046875 0.671875 0.046875q2.703125 0 4.859375 -1.40625q2.15625 -1.40625 2.15625 -4.34375q0 -2.3125 -1.578125 -3.828125q-1.5625 -1.53125 -4.046875 -1.53125q-2.46875 0 -4.109375 1.546875q-1.640625 1.546875 -2.109375 4.640625l-4.21875 -0.75q0.78125 -4.25 3.515625 -6.578125q2.75 -2.328125 6.828125 -2.328125q2.8125 0 5.171875 1.203125q2.375 1.203125 3.625 3.296875q1.25 2.078125 1.25 4.421875q0 2.234375 -1.203125 4.0625q-1.1875 1.828125 -3.53125 2.90625q3.046875 0.703125 4.734375 2.921875q1.6875 2.203125 1.6875 5.53125q0 4.5 -3.28125 7.640625q-3.28125 3.125 -8.296875 3.125q-4.515625 0 -7.515625 -2.6875q-2.984375 -2.703125 -3.40625 -7.0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m63.313194 417.94904l115.871635 0l0 115.87164l-115.871635 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m63.313194 417.94904l115.871635 0l0 115.87164l-115.871635 0z" fill-rule="nonzero"></path><path fill="#000000" d="m109.60838 492.96484l9.09375 -12.9375l-8.421875 -11.953125l5.28125 0l3.8125 5.828125q1.078125 1.671875 1.734375 2.796875q1.03125 -1.546875 1.90625 -2.75l4.1875 -5.875l5.046875 0l-8.609375 11.71875l9.265625 13.171875l-5.1875 0l-5.109375 -7.734375l-1.359375 -2.09375l-6.53125 9.828125l-5.109375 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m223.93929 417.94904l39.008408 0l0 115.87164l-39.008408 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m223.93929 417.94904l39.008408 0l0 115.87164l-39.008408 0z" fill-rule="nonzero"></path><path fill="#000000" d="m247.98647 492.96484l-4.21875 0l0 -26.890625q-1.53125 1.453125 -4.0 2.90625q-2.46875 1.453125 -4.4375 2.1875l0 -4.078125q3.53125 -1.671875 6.171875 -4.03125q2.65625 -2.375 3.765625 -4.59375l2.71875 0l0 34.5z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m262.9477 417.94904l39.008423 0l0 115.87164l-39.008423 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m262.9477 417.94904l39.008423 0l0 115.87164l-39.008423 0z" fill-rule="nonzero"></path><path fill="#000000" d="m293.27612 488.90234l0 4.0625l-22.71875 0q-0.046875 -1.53125 0.5 -2.9375q0.859375 -2.3125 2.765625 -4.5625q1.921875 -2.25 5.53125 -5.203125q5.59375 -4.59375 7.5625 -7.28125q1.96875 -2.6875 1.96875 -5.078125q0 -2.5 -1.796875 -4.21875q-1.78125 -1.734375 -4.671875 -1.734375q-3.046875 0 -4.875 1.828125q-1.828125 1.828125 -1.84375 5.0625l-4.34375 -0.4375q0.453125 -4.859375 3.359375 -7.390625q2.90625 -2.546875 7.796875 -2.546875q4.953125 0 7.828125 2.75q2.890625 2.734375 2.890625 6.78125q0 2.0625 -0.84375 4.0625q-0.84375 1.984375 -2.8125 4.1875q-1.953125 2.203125 -6.5 6.046875q-3.796875 3.1875 -4.875 4.328125q-1.078125 1.140625 -1.78125 2.28125l16.859375 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m301.95612 417.94904l39.008392 0l0 115.87164l-39.008392 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m301.95612 417.94904l39.008392 0l0 115.87164l-39.008392 0z" fill-rule="nonzero"></path><path fill="#000000" d="m310.1283 483.88672l4.21875 -0.5625q0.734375 3.59375 2.46875 5.171875q1.75 1.578125 4.265625 1.578125q2.96875 0 5.015625 -2.0625q2.0625 -2.0625 2.0625 -5.109375q0 -2.90625 -1.90625 -4.78125q-1.890625 -1.890625 -4.828125 -1.890625q-1.1875 0 -2.96875 0.46875l0.46875 -3.703125q0.421875 0.046875 0.671875 0.046875q2.703125 0 4.859375 -1.40625q2.15625 -1.40625 2.15625 -4.34375q0 -2.3125 -1.578125 -3.828125q-1.5625 -1.53125 -4.046875 -1.53125q-2.46875 0 -4.109375 1.546875q-1.640625 1.546875 -2.109375 4.640625l-4.21875 -0.75q0.78125 -4.25 3.515625 -6.578125q2.75 -2.328125 6.828125 -2.328125q2.8125 0 5.171875 1.203125q2.375 1.203125 3.625 3.296875q1.25 2.078125 1.25 4.421875q0 2.234375 -1.203125 4.0625q-1.1875 1.828125 -3.53125 2.90625q3.046875 0.703125 4.734375 2.921875q1.6875 2.203125 1.6875 5.53125q0 4.5 -3.28125 7.640625q-3.28125 3.125 -8.296875 3.125q-4.515625 0 -7.515625 -2.6875q-2.984375 -2.703125 -3.40625 -7.0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m63.293144 590.65405l115.90551 0l0 115.87402l-115.90551 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m63.293144 590.65405l115.90551 0l0 115.87402l-115.90551 0z" fill-rule="nonzero"></path><path fill="#000000" d="m109.60528 665.6711l9.09375 -12.9375l-8.421875 -11.953125l5.28125 0l3.8125 5.828125q1.078125 1.671875 1.734375 2.796875q1.03125 -1.546875 1.90625 -2.75l4.1875 -5.875l5.0468826 0l-8.609383 11.71875l9.265633 13.171875l-5.1875076 0l-5.109375 -7.734375l-1.359375 -2.09375l-6.53125 9.828125l-5.109375 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m225.0786 590.65405l115.9055 0l0 115.87402l-115.9055 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m225.0786 590.65405l115.9055 0l0 115.87402l-115.9055 0z" fill-rule="nonzero"></path><path fill="#000000" d="m271.39072 665.6711l9.09375 -12.9375l-8.421875 -11.953125l5.28125 0l3.8125 5.828125q1.078125 1.671875 1.734375 2.796875q1.03125 -1.546875 1.90625 -2.75l4.1875 -5.875l5.0469055 0l-8.6094055 11.71875l9.2656555 13.171875l-5.1875 0l-5.1094055 -7.734375l-1.359375 -2.09375l-6.53125 9.828125l-5.109375 0z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m411.0525 129.35564l506.5197 0l0 115.87402l-506.5197 0z" fill-rule="nonzero"></path><path fill="#000000" d="m424.27124 199.79564l0 -33.1875l5.0625 0l0 4.71875q3.65625 -5.46875 10.5625 -5.46875q3.0 0 5.515625 1.078125q2.515625 1.078125 3.765625 2.828125q1.25 1.75 1.75 4.15625q0.3125 1.5625 0.3125 5.46875l0 20.40625l-5.625 0l0 -20.1875q0 -3.4375 -0.65625 -5.140625q-0.65625 -1.703125 -2.328125 -2.71875q-1.671875 -1.015625 -3.921875 -1.015625q-3.59375 0 -6.203125 2.28125q-2.609375 2.28125 -2.609375 8.65625l0 18.125l-5.625 0zm33.5 -16.59375q0 -9.21875 5.125 -13.65625q4.28125 -3.6875 10.4375 -3.6875q6.84375 0 11.1875 4.484375q4.34375 4.484375 4.34375 12.390625q0 6.40625 -1.921875 10.078125q-1.921875 3.671875 -5.59375 5.703125q-3.671875 2.03125 -8.015625 2.03125q-6.96875 0 -11.265625 -4.46875q-4.296875 -4.46875 -4.296875 -12.875zm5.78125 0q0 6.375 2.78125 9.546875q2.78125 3.171875 7.0 3.171875q4.1875 0 6.96875 -3.1875q2.78125 -3.1875 2.78125 -9.71875q0 -6.15625 -2.796875 -9.328125q-2.796875 -3.171875 -6.953125 -3.171875q-4.21875 0 -7.0 3.15625q-2.78125 3.15625 -2.78125 9.53125zm61.96875 11.5625l0.8125 4.96875q-2.375 0.5 -4.25 0.5q-3.0625 0 -4.75 -0.96875q-1.6875 -0.96875 -2.375 -2.546875q-0.6875 -1.578125 -0.6875 -6.640625l0 -19.09375l-4.125 0l0 -4.375l4.125 0l0 -8.21875l5.59375 -3.375l0 11.59375l5.65625 0l0 4.375l-5.65625 0l0 19.40625q0 2.40625 0.296875 3.09375q0.296875 0.6875 0.96875 1.09375q0.671875 0.40625 1.921875 0.40625q0.9375 0 2.46875 -0.21875zm27.15625 -7.125l5.53125 0.71875q-0.90625 5.71875 -4.640625 8.953125q-3.734375 3.234375 -9.171875 3.234375q-6.8125 0 -10.953125 -4.453125q-4.140625 -4.453125 -4.140625 -12.765625q0 -5.375 1.78125 -9.40625q1.78125 -4.03125 5.421875 -6.046875q3.640625 -2.015625 7.921875 -2.015625q5.40625 0 8.84375 2.734375q3.4375 2.734375 4.40625 7.765625l-5.46875 0.84375q-0.78125 -3.34375 -2.765625 -5.03125q-1.984375 -1.6875 -4.796875 -1.6875q-4.25 0 -6.90625 3.046875q-2.65625 3.046875 -2.65625 9.640625q0 6.6875 2.5625 9.71875q2.5625 3.03125 6.6875 3.03125q3.3125 0 5.53125 -2.03125q2.21875 -2.03125 2.8125 -6.25zm32.09375 12.15625l0 -4.875q-3.875 5.625 -10.53125 5.625q-2.9375 0 -5.484375 -1.125q-2.546875 -1.125 -3.78125 -2.828125q-1.234375 -1.703125 -1.734375 -4.171875q-0.34375 -1.65625 -0.34375 -5.25l0 -20.5625l5.625 0l0 18.40625q0 4.40625 0.34375 5.9375q0.53125 2.21875 2.25 3.484375q1.71875 1.265625 4.25 1.265625q2.53125 0 4.75 -1.296875q2.21875 -1.296875 3.140625 -3.53125q0.921875 -2.234375 0.921875 -6.484375l0 -17.78125l5.625 0l0 33.1875l-5.03125 0zm11.65625 -13.75l0 -5.65625l17.28125 0l0 5.65625l-17.28125 0zm21.25 3.84375l5.5625 -0.875q0.46875 3.34375 2.609375 5.125q2.140625 1.78125 5.984375 1.78125q3.875 0 5.75 -1.578125q1.875 -1.578125 1.875 -3.703125q0 -1.90625 -1.65625 -3.0q-1.15625 -0.75 -5.75 -1.90625q-6.1875 -1.5625 -8.578125 -2.703125q-2.390625 -1.140625 -3.625 -3.15625q-1.234375 -2.015625 -1.234375 -4.453125q0 -2.21875 1.015625 -4.109375q1.015625 -1.890625 2.765625 -3.140625q1.3125 -0.96875 3.578125 -1.640625q2.265625 -0.671875 4.859375 -0.671875q3.90625 0 6.859375 1.125q2.953125 1.125 4.359375 3.046875q1.40625 1.921875 1.9375 5.140625l-5.5 0.75q-0.375 -2.5625 -2.171875 -4.0q-1.796875 -1.4375 -5.078125 -1.4375q-3.875 0 -5.53125 1.28125q-1.65625 1.28125 -1.65625 3.0q0 1.09375 0.6875 1.96875q0.6875 0.90625 2.15625 1.5q0.84375 0.3125 4.96875 1.4375q5.96875 1.59375 8.328125 2.609375q2.359375 1.015625 3.703125 2.953125q1.34375 1.9375 1.34375 4.8125q0 2.8125 -1.640625 5.296875q-1.640625 2.484375 -4.734375 3.84375q-3.09375 1.359375 -7.0 1.359375q-6.46875 0 -9.859375 -2.6875q-3.390625 -2.6875 -4.328125 -7.96875zm56.0 9.90625l0 -4.875q-3.875 5.625 -10.53125 5.625q-2.9375 0 -5.484375 -1.125q-2.546875 -1.125 -3.78125 -2.828125q-1.234375 -1.703125 -1.734375 -4.171875q-0.34375 -1.65625 -0.34375 -5.25l0 -20.5625l5.625 0l0 18.40625q0 4.40625 0.34375 5.9375q0.53125 2.21875 2.25 3.484375q1.71875 1.265625 4.25 1.265625q2.53125 0 4.75 -1.296875q2.21875 -1.296875 3.140625 -3.53125q0.921875 -2.234375 0.921875 -6.484375l0 -17.78125l5.625 0l0 33.1875l-5.03125 0zm13.84375 12.71875l0 -45.90625l5.125 0l0 4.3125q1.8125 -2.53125 4.09375 -3.796875q2.28125 -1.265625 5.53125 -1.265625q4.25 0 7.5 2.1875q3.25 2.1875 4.90625 6.171875q1.65625 3.984375 1.65625 8.734375q0 5.09375 -1.828125 9.171875q-1.828125 4.078125 -5.3125 6.25q-3.484375 2.171875 -7.328125 2.171875q-2.8125 0 -5.046875 -1.1875q-2.234375 -1.1875 -3.671875 -3.0l0 16.15625l-5.625 0zm5.09375 -29.125q0 6.40625 2.59375 9.46875q2.59375 3.0625 6.28125 3.0625q3.75 0 6.421875 -3.171875q2.671875 -3.171875 2.671875 -9.828125q0 -6.34375 -2.609375 -9.5q-2.609375 -3.15625 -6.234375 -3.15625q-3.59375 0 -6.359375 3.359375q-2.765625 3.359375 -2.765625 9.765625zm30.5 29.125l0 -45.90625l5.125 0l0 4.3125q1.8125 -2.53125 4.09375 -3.796875q2.28125 -1.265625 5.53125 -1.265625q4.25 0 7.5 2.1875q3.25 2.1875 4.90625 6.171875q1.65625 3.984375 1.65625 8.734375q0 5.09375 -1.828125 9.171875q-1.828125 4.078125 -5.3125 6.25q-3.484375 2.171875 -7.328125 2.171875q-2.8125 0 -5.046875 -1.1875q-2.234375 -1.1875 -3.671875 -3.0l0 16.15625l-5.625 0zm5.09375 -29.125q0 6.40625 2.59375 9.46875q2.59375 3.0625 6.28125 3.0625q3.75 0 6.421875 -3.171875q2.671875 -3.171875 2.671875 -9.828125q0 -6.34375 -2.609375 -9.5q-2.609375 -3.15625 -6.234375 -3.15625q-3.59375 0 -6.359375 3.359375q-2.765625 3.359375 -2.765625 9.765625zm28.40625 -0.1875q0 -9.21875 5.125 -13.65625q4.28125 -3.6875 10.4375 -3.6875q6.84375 0 11.1875 4.484375q4.34375 4.484375 4.34375 12.390625q0 6.40625 -1.921875 10.078125q-1.921875 3.671875 -5.59375 5.703125q-3.671875 2.03125 -8.015625 2.03125q-6.96875 0 -11.265625 -4.46875q-4.296875 -4.46875 -4.296875 -12.875zm5.78125 0q0 6.375 2.78125 9.546875q2.78125 3.171875 7.0 3.171875q4.1875 0 6.96875 -3.1875q2.78125 -3.1875 2.78125 -9.71875q0 -6.15625 -2.796875 -9.328125q-2.796875 -3.171875 -6.953125 -3.171875q-4.21875 0 -7.0 3.15625q-2.78125 3.15625 -2.78125 9.53125zm31.84375 16.59375l0 -33.1875l5.0625 0l0 5.03125q1.9375 -3.53125 3.578125 -4.65625q1.640625 -1.125 3.609375 -1.125q2.84375 0 5.78125 1.8125l-1.9375 5.21875q-2.0625 -1.21875 -4.125 -1.21875q-1.84375 0 -3.3125 1.109375q-1.46875 1.109375 -2.09375 3.078125q-0.9375 3.0 -0.9375 6.5625l0 17.375l-5.625 0zm33.65625 -5.03125l0.8125 4.96875q-2.375 0.5 -4.25 0.5q-3.0625 0 -4.75 -0.96875q-1.6875 -0.96875 -2.375 -2.546875q-0.6875 -1.578125 -0.6875 -6.640625l0 -19.09375l-4.125 0l0 -4.375l4.125 0l0 -8.21875l5.59375 -3.375l0 11.59375l5.65625 0l0 4.375l-5.65625 0l0 19.40625q0 2.40625 0.296875 3.09375q0.296875 0.6875 0.96875 1.09375q0.671875 0.40625 1.921875 0.40625q0.9375 0 2.46875 -0.21875z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m411.0525 417.9475l506.5197 0l0 115.87402l-506.5197 0z" fill-rule="nonzero"></path><path fill="#000000" d="m430.39624 488.3875l-10.15625 -33.1875l5.8125 0l5.28125 19.15625l1.96875 7.125q0.125 -0.53125 1.71875 -6.84375l5.28125 -19.4375l5.78125 0l4.96875 19.25l1.65625 6.34375l1.90625 -6.40625l5.6875 -19.1875l5.46875 0l-10.375 33.1875l-5.84375 0l-5.28125 -19.875l-1.28125 -5.65625l-6.71875 25.53125l-5.875 0zm40.125 -39.34375l0 -6.46875l5.625 0l0 6.46875l-5.625 0zm0 39.34375l0 -33.1875l5.625 0l0 33.1875l-5.625 0zm26.46875 -5.03125l0.8125 4.96875q-2.375 0.5 -4.25 0.5q-3.0625 0 -4.75 -0.96875q-1.6875 -0.96875 -2.375 -2.546875q-0.6875 -1.578125 -0.6875 -6.640625l0 -19.09375l-4.125 0l0 -4.375l4.125 0l0 -8.21875l5.59375 -3.375l0 11.59375l5.65625 0l0 4.375l-5.65625 0l0 19.40625q0 2.40625 0.296875 3.09375q0.296875 0.6875 0.96875 1.09375q0.671875 0.40625 1.921875 0.40625q0.9375 0 2.46875 -0.21875zm5.5 5.03125l0 -45.8125l5.625 0l0 16.4375q3.9375 -4.5625 9.9375 -4.5625q3.6875 0 6.40625 1.453125q2.71875 1.453125 3.890625 4.015625q1.171875 2.5625 1.171875 7.4375l0 21.03125l-5.625 0l0 -21.03125q0 -4.21875 -1.828125 -6.140625q-1.828125 -1.921875 -5.171875 -1.921875q-2.5 0 -4.703125 1.296875q-2.203125 1.296875 -3.140625 3.515625q-0.9375 2.21875 -0.9375 6.125l0 18.15625l-5.625 0zm65.65625 -5.03125l0.8125 4.96875q-2.375 0.5 -4.25 0.5q-3.0625 0 -4.75 -0.96875q-1.6875 -0.96875 -2.375 -2.546875q-0.6875 -1.578125 -0.6875 -6.640625l0 -19.09375l-4.125 0l0 -4.375l4.125 0l0 -8.21875l5.59375 -3.375l0 11.59375l5.65625 0l0 4.375l-5.65625 0l0 19.40625q0 2.40625 0.296875 3.09375q0.296875 0.6875 0.96875 1.09375q0.671875 0.40625 1.921875 0.40625q0.9375 0 2.46875 -0.21875zm27.15625 -7.125l5.53125 0.71875q-0.90625 5.71875 -4.640625 8.953125q-3.734375 3.234375 -9.171875 3.234375q-6.8125 0 -10.953125 -4.453125q-4.140625 -4.453125 -4.140625 -12.765625q0 -5.375 1.78125 -9.40625q1.78125 -4.03125 5.421875 -6.046875q3.640625 -2.015625 7.921875 -2.015625q5.40625 0 8.84375 2.734375q3.4375 2.734375 4.40625 7.765625l-5.46875 0.84375q-0.78125 -3.34375 -2.765625 -5.03125q-1.984375 -1.6875 -4.796875 -1.6875q-4.25 0 -6.90625 3.046875q-2.65625 3.046875 -2.65625 9.640625q0 6.6875 2.5625 9.71875q2.5625 3.03125 6.6875 3.03125q3.3125 0 5.53125 -2.03125q2.21875 -2.03125 2.8125 -6.25zm32.09375 12.15625l0 -4.875q-3.875 5.625 -10.53125 5.625q-2.9375 0 -5.484375 -1.125q-2.546875 -1.125 -3.78125 -2.828125q-1.234375 -1.703125 -1.734375 -4.171875q-0.34375 -1.65625 -0.34375 -5.25l0 -20.5625l5.625 0l0 18.40625q0 4.40625 0.34375 5.9375q0.53125 2.21875 2.25 3.484375q1.71875 1.265625 4.25 1.265625q2.53125 0 4.75 -1.296875q2.21875 -1.296875 3.140625 -3.53125q0.921875 -2.234375 0.921875 -6.484375l0 -17.78125l5.625 0l0 33.1875l-5.03125 0zm11.65625 -13.75l0 -5.65625l17.28125 0l0 5.65625l-17.28125 0zm21.25 3.84375l5.5625 -0.875q0.46875 3.34375 2.609375 5.125q2.140625 1.78125 5.984375 1.78125q3.875 0 5.75 -1.578125q1.875 -1.578125 1.875 -3.703125q0 -1.90625 -1.65625 -3.0q-1.15625 -0.75 -5.75 -1.90625q-6.1875 -1.5625 -8.578125 -2.703125q-2.390625 -1.140625 -3.625 -3.15625q-1.234375 -2.015625 -1.234375 -4.453125q0 -2.21875 1.015625 -4.109375q1.015625 -1.890625 2.765625 -3.140625q1.3125 -0.96875 3.578125 -1.640625q2.265625 -0.671875 4.859375 -0.671875q3.90625 0 6.859375 1.125q2.953125 1.125 4.359375 3.046875q1.40625 1.921875 1.9375 5.140625l-5.5 0.75q-0.375 -2.5625 -2.171875 -4.0q-1.796875 -1.4375 -5.078125 -1.4375q-3.875 0 -5.53125 1.28125q-1.65625 1.28125 -1.65625 3.0q0 1.09375 0.6875 1.96875q0.6875 0.90625 2.15625 1.5q0.84375 0.3125 4.96875 1.4375q5.96875 1.59375 8.328125 2.609375q2.359375 1.015625 3.703125 2.953125q1.34375 1.9375 1.34375 4.8125q0 2.8125 -1.640625 5.296875q-1.640625 2.484375 -4.734375 3.84375q-3.09375 1.359375 -7.0 1.359375q-6.46875 0 -9.859375 -2.6875q-3.390625 -2.6875 -4.328125 -7.96875zm56.0 9.90625l0 -4.875q-3.875 5.625 -10.53125 5.625q-2.9375 0 -5.484375 -1.125q-2.546875 -1.125 -3.78125 -2.828125q-1.234375 -1.703125 -1.734375 -4.171875q-0.34375 -1.65625 -0.34375 -5.25l0 -20.5625l5.625 0l0 18.40625q0 4.40625 0.34375 5.9375q0.53125 2.21875 2.25 3.484375q1.71875 1.265625 4.25 1.265625q2.53125 0 4.75 -1.296875q2.21875 -1.296875 3.140625 -3.53125q0.921875 -2.234375 0.921875 -6.484375l0 -17.78125l5.625 0l0 33.1875l-5.03125 0zm13.84375 12.71875l0 -45.90625l5.125 0l0 4.3125q1.8125 -2.53125 4.09375 -3.796875q2.28125 -1.265625 5.53125 -1.265625q4.25 0 7.5 2.1875q3.25 2.1875 4.90625 6.171875q1.65625 3.984375 1.65625 8.734375q0 5.09375 -1.828125 9.171875q-1.828125 4.078125 -5.3125 6.25q-3.484375 2.171875 -7.328125 2.171875q-2.8125 0 -5.046875 -1.1875q-2.234375 -1.1875 -3.671875 -3.0l0 16.15625l-5.625 0zm5.09375 -29.125q0 6.40625 2.59375 9.46875q2.59375 3.0625 6.28125 3.0625q3.75 0 6.421875 -3.171875q2.671875 -3.171875 2.671875 -9.828125q0 -6.34375 -2.609375 -9.5q-2.609375 -3.15625 -6.234375 -3.15625q-3.59375 0 -6.359375 3.359375q-2.765625 3.359375 -2.765625 9.765625zm30.5 29.125l0 -45.90625l5.125 0l0 4.3125q1.8125 -2.53125 4.09375 -3.796875q2.28125 -1.265625 5.53125 -1.265625q4.25 0 7.5 2.1875q3.25 2.1875 4.90625 6.171875q1.65625 3.984375 1.65625 8.734375q0 5.09375 -1.828125 9.171875q-1.828125 4.078125 -5.3125 6.25q-3.484375 2.171875 -7.328125 2.171875q-2.8125 0 -5.046875 -1.1875q-2.234375 -1.1875 -3.671875 -3.0l0 16.15625l-5.625 0zm5.09375 -29.125q0 6.40625 2.59375 9.46875q2.59375 3.0625 6.28125 3.0625q3.75 0 6.421875 -3.171875q2.671875 -3.171875 2.671875 -9.828125q0 -6.34375 -2.609375 -9.5q-2.609375 -3.15625 -6.234375 -3.15625q-3.59375 0 -6.359375 3.359375q-2.765625 3.359375 -2.765625 9.765625zm28.40625 -0.1875q0 -9.21875 5.125 -13.65625q4.28125 -3.6875 10.4375 -3.6875q6.84375 0 11.1875 4.484375q4.34375 4.484375 4.34375 12.390625q0 6.40625 -1.921875 10.078125q-1.921875 3.671875 -5.59375 5.703125q-3.671875 2.03125 -8.015625 2.03125q-6.96875 0 -11.265625 -4.46875q-4.296875 -4.46875 -4.296875 -12.875zm5.78125 0q0 6.375 2.78125 9.546875q2.78125 3.171875 7.0 3.171875q4.1875 0 6.96875 -3.1875q2.78125 -3.1875 2.78125 -9.71875q0 -6.15625 -2.796875 -9.328125q-2.796875 -3.171875 -6.953125 -3.171875q-4.21875 0 -7.0 3.15625q-2.78125 3.15625 -2.78125 9.53125zm31.84375 16.59375l0 -33.1875l5.0625 0l0 5.03125q1.9375 -3.53125 3.578125 -4.65625q1.640625 -1.125 3.609375 -1.125q2.84375 0 5.78125 1.8125l-1.9375 5.21875q-2.0625 -1.21875 -4.125 -1.21875q-1.84375 0 -3.3125 1.109375q-1.46875 1.109375 -2.09375 3.078125q-0.9375 3.0 -0.9375 6.5625l0 17.375l-5.625 0zm33.65625 -5.03125l0.8125 4.96875q-2.375 0.5 -4.25 0.5q-3.0625 0 -4.75 -0.96875q-1.6875 -0.96875 -2.375 -2.546875q-0.6875 -1.578125 -0.6875 -6.640625l0 -19.09375l-4.125 0l0 -4.375l4.125 0l0 -8.21875l5.59375 -3.375l0 11.59375l5.65625 0l0 4.375l-5.65625 0l0 19.40625q0 2.40625 0.296875 3.09375q0.296875 0.6875 0.96875 1.09375q0.671875 0.40625 1.921875 0.40625q0.9375 0 2.46875 -0.21875z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m411.0525 590.65356l506.5197 0l0 115.87402l-506.5197 0z" fill-rule="nonzero"></path><path fill="#000000" d="m424.20874 661.09357l0 -33.1875l5.0625 0l0 5.03125q1.9375 -3.53125 3.578125 -4.65625q1.640625 -1.125 3.609375 -1.125q2.84375 0 5.78125 1.8125l-1.9375 5.21875q-2.0625 -1.21875 -4.125 -1.21875q-1.84375 0 -3.3125 1.109375q-1.46875 1.109375 -2.09375 3.078125q-0.9375 3.0 -0.9375 6.5625l0 17.375l-5.625 0zm44.09375 -10.6875l5.8125 0.71875q-1.375 5.09375 -5.09375 7.90625q-3.71875 2.8125 -9.5 2.8125q-7.28125 0 -11.546875 -4.484375q-4.265625 -4.484375 -4.265625 -12.578125q0 -8.375 4.3125 -13.0q4.3125 -4.625 11.1875 -4.625q6.65625 0 10.875 4.53125q4.21875 4.53125 4.21875 12.75q0 0.5 -0.03125 1.5l-24.75 0q0.3125 5.46875 3.09375 8.375q2.78125 2.90625 6.9375 2.90625q3.09375 0 5.28125 -1.625q2.1875 -1.625 3.46875 -5.1875zm-18.46875 -9.09375l18.53125 0q-0.375 -4.1875 -2.125 -6.28125q-2.6875 -3.25 -6.96875 -3.25q-3.875 0 -6.515625 2.59375q-2.640625 2.59375 -2.921875 6.9375zm32.6875 19.78125l0 -28.8125l-4.96875 0l0 -4.375l4.96875 0l0 -3.53125q0 -3.34375 0.59375 -4.96875q0.8125 -2.1875 2.859375 -3.546875q2.046875 -1.359375 5.734375 -1.359375q2.375 0 5.25 0.5625l-0.84375 4.90625q-1.75 -0.3125 -3.3125 -0.3125q-2.5625 0 -3.625 1.09375q-1.0625 1.09375 -1.0625 4.09375l0 3.0625l6.46875 0l0 4.375l-6.46875 0l0 28.8125l-5.59375 0zm39.15625 -10.6875l5.8125 0.71875q-1.375 5.09375 -5.09375 7.90625q-3.71875 2.8125 -9.5 2.8125q-7.28125 0 -11.546875 -4.484375q-4.265625 -4.484375 -4.265625 -12.578125q0 -8.375 4.3125 -13.0q4.3125 -4.625 11.1875 -4.625q6.65625 0 10.875 4.53125q4.21875 4.53125 4.21875 12.75q0 0.5 -0.03125 1.5l-24.75 0q0.3125 5.46875 3.09375 8.375q2.78125 2.90625 6.9375 2.90625q3.09375 0 5.28125 -1.625q2.1875 -1.625 3.46875 -5.1875zm-18.46875 -9.09375l18.53125 0q-0.375 -4.1875 -2.125 -6.28125q-2.6875 -3.25 -6.96875 -3.25q-3.875 0 -6.515625 2.59375q-2.640625 2.59375 -2.921875 6.9375zm31.28125 19.78125l0 -33.1875l5.0625 0l0 5.03125q1.9375 -3.53125 3.578125 -4.65625q1.640625 -1.125 3.609375 -1.125q2.84375 0 5.78125 1.8125l-1.9375 5.21875q-2.0625 -1.21875 -4.125 -1.21875q-1.84375 0 -3.3125 1.109375q-1.46875 1.109375 -2.09375 3.078125q-0.9375 3.0 -0.9375 6.5625l0 17.375l-5.625 0zm44.09375 -10.6875l5.8125 0.71875q-1.375 5.09375 -5.09375 7.90625q-3.71875 2.8125 -9.5 2.8125q-7.28125 0 -11.546875 -4.484375q-4.265625 -4.484375 -4.265625 -12.578125q0 -8.375 4.3125 -13.0q4.3125 -4.625 11.1875 -4.625q6.65625 0 10.875 4.53125q4.21875 4.53125 4.21875 12.75q0 0.5 -0.03125 1.5l-24.75 0q0.3125 5.46875 3.09375 8.375q2.78125 2.90625 6.9375 2.90625q3.09375 0 5.28125 -1.625q2.1875 -1.625 3.46875 -5.1875zm-18.46875 -9.09375l18.53125 0q-0.375 -4.1875 -2.125 -6.28125q-2.6875 -3.25 -6.96875 -3.25q-3.875 0 -6.515625 2.59375q-2.640625 2.59375 -2.921875 6.9375zm31.34375 19.78125l0 -33.1875l5.0625 0l0 4.71875q3.65625 -5.46875 10.5625 -5.46875q3.0 0 5.515625 1.078125q2.515625 1.078125 3.765625 2.828125q1.25 1.75 1.75 4.15625q0.3125 1.5625 0.3125 5.46875l0 20.40625l-5.625 0l0 -20.1875q0 -3.4375 -0.65625 -5.140625q-0.65625 -1.703125 -2.328125 -2.71875q-1.671875 -1.015625 -3.921875 -1.015625q-3.59375 0 -6.203125 2.28125q-2.609375 2.28125 -2.609375 8.65625l0 18.125l-5.625 0zm57.25 -12.15625l5.53125 0.71875q-0.90625 5.71875 -4.640625 8.953125q-3.734375 3.234375 -9.171875 3.234375q-6.8125 0 -10.953125 -4.453125q-4.140625 -4.453125 -4.140625 -12.765625q0 -5.375 1.78125 -9.40625q1.78125 -4.03125 5.421875 -6.046875q3.640625 -2.015625 7.921875 -2.015625q5.40625 0 8.84375 2.734375q3.4375 2.734375 4.40625 7.765625l-5.46875 0.84375q-0.78125 -3.34375 -2.765625 -5.03125q-1.984375 -1.6875 -4.796875 -1.6875q-4.25 0 -6.90625 3.046875q-2.65625 3.046875 -2.65625 9.640625q0 6.6875 2.5625 9.71875q2.5625 3.03125 6.6875 3.03125q3.3125 0 5.53125 -2.03125q2.21875 -2.03125 2.8125 -6.25zm33.0625 1.46875l5.8125 0.71875q-1.375 5.09375 -5.09375 7.90625q-3.71875 2.8125 -9.5 2.8125q-7.28125 0 -11.546875 -4.484375q-4.265625 -4.484375 -4.265625 -12.578125q0 -8.375 4.3125 -13.0q4.3125 -4.625 11.1875 -4.625q6.65625 0 10.875 4.53125q4.21875 4.53125 4.21875 12.75q0 0.5 -0.03125 1.5l-24.75 0q0.3125 5.46875 3.09375 8.375q2.78125 2.90625 6.9375 2.90625q3.09375 0 5.28125 -1.625q2.1875 -1.625 3.46875 -5.1875zm-18.46875 -9.09375l18.53125 0q-0.375 -4.1875 -2.125 -6.28125q-2.6875 -3.25 -6.96875 -3.25q-3.875 0 -6.515625 2.59375q-2.640625 2.59375 -2.921875 6.9375z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-tcufont.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-tcufont.svg
new file mode 100644
index 0000000000..f0b3aa2df5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/figure-tcufont.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 720.0 540.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l720.0 0l0 540.0l-720.0 0l0 -540.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l720.0 0l0 540.0l-720.0 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m43.997375 105.64454l98.39371 0l0 98.393715l-98.39371 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m43.997375 105.64454l98.39371 0l0 98.393715l-98.39371 0z" fill-rule="nonzero"></path><path fill="#000000" d="m77.66298 177.78139l12.125 -17.25l-11.21875 -15.9375l7.03125 0l5.09375 7.78125q1.4375 2.21875 2.3125 3.71875q1.375 -2.0625 2.53125 -3.65625l5.59375 -7.84375l6.71875 0l-11.46875 15.625l12.34375 17.5625l-6.90625 0l-6.8125 -10.3125l-1.8125 -2.78125l-8.71875 13.09375l-6.8125 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m199.21577 105.64279l98.38435 0l0 98.38435l-98.38435 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m199.21577 105.64279l98.38435 0l0 98.38435l-98.38435 0z" fill-rule="nonzero"></path><path fill="#000000" d="m254.45482 177.77496l-5.625 0l0 -35.84375q-2.03125 1.9375 -5.328125 3.875q-3.296875 1.9375 -5.921875 2.90625l0 -5.4375q4.71875 -2.21875 8.25 -5.375q3.53125 -3.15625 5.0 -6.125l3.625 0l0 46.0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m199.21577 204.02715l98.38435 0l0 98.38435l-98.38435 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m199.21577 204.02715l98.38435 0l0 98.38435l-98.38435 0z" fill-rule="nonzero"></path><path fill="#000000" d="m262.82983 270.75305l0 5.40625l-30.281265 0q-0.0625 -2.03125 0.65625 -3.90625q1.15625 -3.09375 3.703125 -6.09375q2.546875 -3.0 7.359375 -6.9375q7.46875 -6.1249847 10.09375 -9.70311q2.6250153 -3.578125 2.6250153 -6.765625q0 -3.34375 -2.3906403 -5.640625q-2.390625 -2.296875 -6.234375 -2.296875q-4.0625 0 -6.5 2.4375q-2.4375 2.4375 -2.46875 6.75l-5.78125 -0.59375q0.59375 -6.46875 4.46875 -9.859375q3.875 -3.390625 10.40625 -3.390625q6.59375 0 10.437515 3.65625q3.84375 3.65625 3.84375 9.0625q0 2.75 -1.125 5.40625q-1.125 2.65625 -3.734375 5.59375q-2.6093903 2.9374847 -8.67189 8.062485q-5.0625 4.25 -6.5 5.765625q-1.4375 1.515625 -2.375 3.046875l22.468765 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m199.21577 302.4115l98.38435 0l0 98.38434l-98.38435 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m199.21577 302.4115l98.38435 0l0 98.38434l-98.38435 0z" fill-rule="nonzero"></path><path fill="#000000" d="m233.29857 362.44992l5.625 -0.75q0.96875 4.78125 3.296875 6.890625q2.328125 2.109375 5.671875 2.109375q3.96875 0 6.703125 -2.75q2.7343903 -2.75 2.7343903 -6.8125q0 -3.875 -2.5312653 -6.390625q-2.53125 -2.515625 -6.4375 -2.515625q-1.59375 0 -3.96875 0.625l0.625 -4.9375q0.5625 0.0625 0.90625 0.0625q3.59375 0 6.46875 -1.875q2.875 -1.875 2.875 -5.78125q0 -3.09375 -2.09375 -5.125q-2.09375 -2.03125 -5.40625 -2.03125q-3.28125 0 -5.46875 2.0625q-2.1875 2.0625 -2.8125 6.1875l-5.625 -1.0q1.03125 -5.65625 4.6875 -8.765625q3.65625 -3.109375 9.09375 -3.109375q3.75 0 6.90625 1.609375q3.1562653 1.609375 4.8281403 4.390625q1.671875 2.78125 1.671875 5.90625q0 2.96875 -1.59375 5.40625q-1.59375 2.4375 -4.7187653 3.875q4.0625153 0.9375 6.3125153 3.890625q2.2499695 2.953125 2.2499695 7.390625q0 6.0 -4.3749695 10.171875q-4.3750153 4.171875 -11.062515 4.171875q-6.03125 0 -10.015625 -3.59375q-3.984375 -3.59375 -4.546875 -9.3125z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m577.6097 105.64454l98.39374 0l0 98.393715l-98.39374 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m577.6097 105.64454l98.39374 0l0 98.393715l-98.39374 0z" fill-rule="nonzero"></path><path fill="#000000" d="m611.2753 177.78139l12.125 -17.25l-11.21875 -15.9375l7.03125 0l5.09375 7.78125q1.4375 2.21875 2.3125 3.71875q1.375 -2.0625 2.53125 -3.65625l5.59375 -7.84375l6.71875 0l-11.46875 15.625l12.34375 17.5625l-6.90625 0l-6.8125 -10.3125l-1.8125 -2.78125l-8.71875 13.09375l-6.8125 0z" fill-rule="nonzero"></path><path fill="#cfe2f3" d="m419.72928 105.64454l98.39371 0l0 98.393715l-98.39371 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m419.72928 105.64454l98.39371 0l0 98.393715l-98.39371 0z" fill-rule="nonzero"></path><path fill="#000000" d="m453.3949 177.78139l12.125 -17.25l-11.21875 -15.9375l7.03125 0l5.09375 7.78125q1.4375 2.21875 2.3125 3.71875q1.375 -2.0625 2.53125 -3.65625l5.59375 -7.84375l6.71875 0l-11.46875 15.625l12.34375 17.5625l-6.90625 0l-6.8125 -10.3125l-1.8125 -2.78125l-8.71875 13.09375l-6.8125 0z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m57.50656 20.08399l240.09448 0l0 79.55906l-240.09448 0z" fill-rule="nonzero"></path><path fill="#000000" d="m93.881935 71.38274l0.609375 3.734375q-1.78125 0.375 -3.1875 0.375q-2.296875 0 -3.5625 -0.71875q-1.265625 -0.734375 -1.78125 -1.921875q-0.515625 -1.1875 -0.515625 -4.984375l0 -14.3125l-3.09375 0l0 -3.28125l3.09375 0l0 -6.171875l4.203125 -2.53125l0 8.703125l4.234375 0l0 3.28125l-4.234375 0l0 14.546875q0 1.8125 0.21875 2.328125q0.21875 0.515625 0.71875 0.828125q0.515625 0.296875 1.453125 0.296875q0.703125 0 1.84375 -0.171875zm21.164062 -4.234375l4.359375 0.53125q-1.03125 3.828125 -3.828125 5.9375q-2.78125 2.109375 -7.109375 2.109375q-5.46875 0 -8.671875 -3.359375q-3.1875 -3.375 -3.1875 -9.4375q0 -6.28125 3.234375 -9.75q3.234375 -3.46875 8.390625 -3.46875q4.984375 0 8.140625 3.40625q3.171875 3.390625 3.171875 9.546875q0 0.375 -0.015625 1.125l-18.5625 0q0.234375 4.109375 2.3125 6.296875q2.09375 2.171875 5.203125 2.171875q2.328125 0 3.96875 -1.21875q1.640625 -1.21875 2.59375 -3.890625zm-13.84375 -6.828125l13.890625 0q-0.28125 -3.140625 -1.59375 -4.703125q-2.015625 -2.4375 -5.21875 -2.4375q-2.90625 0 -4.890625 1.953125q-1.984375 1.9375 -2.1875 5.1875zm21.820312 7.40625l4.171875 -0.65625q0.34375 2.515625 1.9531326 3.859375q1.609375 1.328125 4.484375 1.328125q2.90625 0 4.3125 -1.1875q1.40625 -1.1875 1.40625 -2.78125q0 -1.421875 -1.234375 -2.25q-0.875 -0.5625 -4.3125 -1.421875q-4.640625 -1.171875 -6.4375076 -2.03125q-1.796875 -0.859375 -2.71875 -2.359375q-0.921875 -1.515625 -0.921875 -3.34375q0 -1.671875 0.75 -3.078125q0.765625 -1.421875 2.078125 -2.359375q0.984375 -0.734375 2.6875076 -1.234375q1.703125 -0.5 3.640625 -0.5q2.9375 0 5.140625 0.84375q2.21875 0.84375 3.265625 2.28125q1.0625 1.4375 1.46875 3.859375l-4.125 0.5625q-0.28125 -1.921875 -1.640625 -3.0q-1.34375 -1.078125 -3.796875 -1.078125q-2.90625 0 -4.15625 0.96875q-1.2343826 0.953125 -1.2343826 2.234375q0 0.828125 0.5156326 1.484375q0.515625 0.671875 1.609375 1.125q0.640625 0.234375 3.734375 1.078125q4.46875 1.1875 6.234375 1.953125q1.78125 0.765625 2.78125 2.21875q1.015625 1.453125 1.015625 3.609375q0 2.109375 -1.234375 3.96875q-1.234375 1.859375 -3.5625 2.890625q-2.3125 1.015625 -5.234375 1.015625q-4.859375 0 -7.4062576 -2.015625q-2.53125 -2.015625 -3.234375 -5.984375zm34.890633 3.65625l0.609375 3.734375q-1.78125 0.375 -3.1875 0.375q-2.296875 0 -3.5625 -0.71875q-1.265625 -0.734375 -1.78125 -1.921875q-0.515625 -1.1875 -0.515625 -4.984375l0 -14.3125l-3.09375 0l0 -3.28125l3.09375 0l0 -6.171875l4.203125 -2.53125l0 8.703125l4.234375 0l0 3.28125l-4.234375 0l0 14.546875q0 1.8125 0.21875 2.328125q0.21875 0.515625 0.71875 0.828125q0.515625 0.296875 1.453125 0.296875q0.703125 0 1.84375 -0.171875zm33.70311 -5.34375l4.15625 0.546875q-0.6875 4.28125 -3.484375 6.71875q-2.796875 2.421875 -6.8749847 2.421875q-5.109375 0 -8.21875 -3.34375q-3.109375 -3.34375 -3.109375 -9.578125q0 -4.03125 1.328125 -7.046875q1.34375 -3.03125 4.078125 -4.53125q2.734375 -1.515625 5.9375 -1.515625q4.0624847 0 6.6406097 2.046875q2.578125 2.046875 3.296875 5.828125l-4.09375 0.625q-0.59375 -2.5 -2.078125 -3.765625q-1.484375 -1.265625 -3.59375 -1.265625q-3.1874847 0 -5.1874847 2.28125q-1.984375 2.28125 -1.984375 7.234375q0 5.015625 1.921875 7.296875q1.921875 2.265625 5.015625 2.265625q2.4843597 0 4.1406097 -1.515625q1.671875 -1.53125 2.109375 -4.703125zm24.0 6.046875q-2.34375 2.0 -4.515625 2.828125q-2.15625 0.8125 -4.640625 0.8125q-4.109375 0 -6.3125 -2.0q-2.203125 -2.015625 -2.203125 -5.125q0 -1.828125 0.828125 -3.34375q0.84375 -1.515625 2.1875 -2.421875q1.34375 -0.921875 3.03125 -1.390625q1.25 -0.328125 3.75 -0.625q5.109375 -0.609375 7.53125 -1.453125q0.015625 -0.875 0.015625 -1.109375q0 -2.578125 -1.1875 -3.625q-1.625 -1.4375 -4.8125 -1.4375q-2.96875 0 -4.390625 1.046875q-1.421875 1.046875 -2.09375 3.6875l-4.125 -0.5625q0.5625 -2.640625 1.84375 -4.265625q1.296875 -1.640625 3.734375 -2.515625q2.4375 -0.875 5.640625 -0.875q3.1875 0 5.171875 0.75q2.0 0.75 2.9375 1.890625q0.9375 1.125 1.3125 2.859375q0.21875 1.078125 0.21875 3.890625l0 5.625q0 5.890625 0.265625 7.453125q0.265625 1.546875 1.0625 2.984375l-4.40625 0q-0.65625 -1.3125 -0.84375 -3.078125zm-0.34375 -9.421875q-2.296875 0.9375 -6.890625 1.59375q-2.609375 0.375 -3.6875 0.84375q-1.078125 0.46875 -1.671875 1.375q-0.578125 0.90625 -0.578125 2.0q0 1.6875 1.28125 2.8125q1.28125 1.125 3.734375 1.125q2.4375 0 4.328125 -1.0625q1.90625 -1.0625 2.796875 -2.921875q0.6875 -1.421875 0.6875 -4.21875l0 -1.546875zm9.1171875 5.0625l4.171875 -0.65625q0.34375 2.515625 1.953125 3.859375q1.609375 1.328125 4.484375 1.328125q2.90625 0 4.3125 -1.1875q1.40625 -1.1875 1.40625 -2.78125q0 -1.421875 -1.234375 -2.25q-0.875 -0.5625 -4.3125 -1.421875q-4.640625 -1.171875 -6.4375 -2.03125q-1.796875 -0.859375 -2.71875 -2.359375q-0.921875 -1.515625 -0.921875 -3.34375q0 -1.671875 0.75 -3.078125q0.765625 -1.421875 2.078125 -2.359375q0.984375 -0.734375 2.6875 -1.234375q1.703125 -0.5 3.640625 -0.5q2.9375 0 5.140625 0.84375q2.21875 0.84375 3.265625 2.28125q1.0625 1.4375 1.46875 3.859375l-4.125 0.5625q-0.28125 -1.921875 -1.640625 -3.0q-1.34375 -1.078125 -3.796875 -1.078125q-2.90625 0 -4.15625 0.96875q-1.234375 0.953125 -1.234375 2.234375q0 0.828125 0.515625 1.484375q0.515625 0.671875 1.609375 1.125q0.640625 0.234375 3.734375 1.078125q4.46875 1.1875 6.234375 1.953125q1.78125 0.765625 2.78125 2.21875q1.015625 1.453125 1.015625 3.609375q0 2.109375 -1.234375 3.96875q-1.234375 1.859375 -3.5625 2.890625q-2.3125 1.015625 -5.234375 1.015625q-4.859375 0 -7.40625 -2.015625q-2.53125 -2.015625 -3.234375 -5.984375zm42.71875 -0.578125l4.359375 0.53125q-1.03125 3.828125 -3.828125 5.9375q-2.78125 2.109375 -7.109375 2.109375q-5.46875 0 -8.671875 -3.359375q-3.1875 -3.375 -3.1875 -9.4375q0 -6.28125 3.234375 -9.75q3.234375 -3.46875 8.390625 -3.46875q4.984375 0 8.140625 3.40625q3.171875 3.390625 3.171875 9.546875q0 0.375 -0.015625 1.125l-18.5625 0q0.234375 4.109375 2.3125 6.296875q2.09375 2.171875 5.203125 2.171875q2.328125 0 3.96875 -1.21875q1.640625 -1.21875 2.59375 -3.890625zm-13.84375 -6.828125l13.890625 0q-0.28125 -3.140625 -1.59375 -4.703125q-2.015625 -2.4375 -5.21875 -2.4375q-2.90625 0 -4.890625 1.953125q-1.984375 1.9375 -2.1875 5.1875z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m435.90814 20.08399l240.09448 0l0 79.55906l-240.09448 0z" fill-rule="nonzero"></path><path fill="#000000" d="m457.68976 75.16399l0 -24.890625l3.796875 0l0 3.765625q1.453125 -2.640625 2.671875 -3.484375q1.234375 -0.84375 2.71875 -0.84375q2.125 0 4.328125 1.359375l-1.453125 3.90625q-1.546875 -0.90625 -3.09375 -0.90625q-1.375 0 -2.484375 0.828125q-1.09375 0.828125 -1.5625 2.3125q-0.703125 2.25 -0.703125 4.921875l0 13.03125l-4.21875 0zm33.0625 -8.015625l4.359375 0.53125q-1.03125 3.828125 -3.828125 5.9375q-2.78125 2.109375 -7.109375 2.109375q-5.46875 0 -8.671875 -3.359375q-3.1875 -3.375 -3.1875 -9.4375q0 -6.28125 3.234375 -9.75q3.234375 -3.46875 8.390625 -3.46875q4.984375 0 8.140625 3.40625q3.171875 3.390625 3.171875 9.546875q0 0.375 -0.015625 1.125l-18.5625 0q0.234375 4.109375 2.3125 6.296875q2.09375 2.171875 5.203125 2.171875q2.328125 0 3.96875 -1.21875q1.640625 -1.21875 2.59375 -3.890625zm-13.84375 -6.828125l13.890625 0q-0.28125 -3.140625 -1.59375 -4.703125q-2.015625 -2.4375 -5.21875 -2.4375q-2.90625 0 -4.890625 1.953125q-1.984375 1.9375 -2.1875 5.1875zm24.507812 14.84375l0 -21.609375l-3.71875 0l0 -3.28125l3.71875 0l0 -2.65625q0 -2.5 0.453125 -3.71875q0.609375 -1.640625 2.140625 -2.65625q1.53125 -1.03125 4.296875 -1.03125q1.78125 0 3.9375 0.421875l-0.625 3.6875q-1.3125 -0.234375 -2.484375 -0.234375q-1.921875 0 -2.71875 0.828125q-0.796875 0.8125 -0.796875 3.0625l0 2.296875l4.84375 0l0 3.28125l-4.84375 0l0 21.609375l-4.203125 0zm29.367188 -8.015625l4.359375 0.53125q-1.03125 3.828125 -3.828125 5.9375q-2.78125 2.109375 -7.109375 2.109375q-5.46875 0 -8.671875 -3.359375q-3.1875 -3.375 -3.1875 -9.4375q0 -6.28125 3.234375 -9.75q3.234375 -3.46875 8.390625 -3.46875q4.984375 0 8.140625 3.40625q3.171875 3.390625 3.171875 9.546875q0 0.375 -0.015625 1.125l-18.5625 0q0.234375 4.109375 2.3125 6.296875q2.09375 2.171875 5.203125 2.171875q2.328125 0 3.96875 -1.21875q1.640625 -1.21875 2.59375 -3.890625zm-13.84375 -6.828125l13.890625 0q-0.28125 -3.140625 -1.59375 -4.703125q-2.015625 -2.4375 -5.21875 -2.4375q-2.90625 0 -4.890625 1.953125q-1.984375 1.9375 -2.1875 5.1875zm23.460938 14.84375l0 -24.890625l3.796875 0l0 3.765625q1.453125 -2.640625 2.671875 -3.484375q1.234375 -0.84375 2.71875 -0.84375q2.125 0 4.328125 1.359375l-1.453125 3.90625q-1.546875 -0.90625 -3.09375 -0.90625q-1.375 0 -2.484375 0.828125q-1.09375 0.828125 -1.5625 2.3125q-0.703125 2.25 -0.703125 4.921875l0 13.03125l-4.21875 0zm33.0625 -8.015625l4.359375 0.53125q-1.03125 3.828125 -3.828125 5.9375q-2.78125 2.109375 -7.109375 2.109375q-5.46875 0 -8.671875 -3.359375q-3.1875 -3.375 -3.1875 -9.4375q0 -6.28125 3.234375 -9.75q3.234375 -3.46875 8.390625 -3.46875q4.984375 0 8.140625 3.40625q3.171875 3.390625 3.171875 9.546875q0 0.375 -0.015625 1.125l-18.5625 0q0.234375 4.109375 2.3125 6.296875q2.09375 2.171875 5.203125 2.171875q2.328125 0 3.96875 -1.21875q1.640625 -1.21875 2.59375 -3.890625zm-13.84375 -6.828125l13.890625 0q-0.28125 -3.140625 -1.59375 -4.703125q-2.015625 -2.4375 -5.21875 -2.4375q-2.90625 0 -4.890625 1.953125q-1.984375 1.9375 -2.1875 5.1875zm23.507812 14.84375l0 -24.890625l3.796875 0l0 3.53125q2.734375 -4.09375 7.921875 -4.09375q2.25 0 4.125 0.8125q1.890625 0.796875 2.828125 2.109375q0.9375 1.3125 1.3125 3.125q0.234375 1.171875 0.234375 4.09375l0 15.3125l-4.21875 0l0 -15.140625q0 -2.578125 -0.5 -3.859375q-0.484375 -1.28125 -1.734375 -2.03125q-1.25 -0.765625 -2.9375 -0.765625q-2.703125 0 -4.65625 1.71875q-1.953125 1.703125 -1.953125 6.484375l0 13.59375l-4.21875 0zm42.929688 -9.125l4.15625 0.546875q-0.6875 4.28125 -3.484375 6.71875q-2.796875 2.421875 -6.875 2.421875q-5.109375 0 -8.21875 -3.34375q-3.109375 -3.34375 -3.109375 -9.578125q0 -4.03125 1.328125 -7.046875q1.34375 -3.03125 4.078125 -4.53125q2.734375 -1.515625 5.9375 -1.515625q4.0625 0 6.640625 2.046875q2.578125 2.046875 3.296875 5.828125l-4.09375 0.625q-0.59375 -2.5 -2.078125 -3.765625q-1.484375 -1.265625 -3.59375 -1.265625q-3.1875 0 -5.1875 2.28125q-1.984375 2.28125 -1.984375 7.234375q0 5.015625 1.921875 7.296875q1.921875 2.265625 5.015625 2.265625q2.484375 0 4.140625 -1.515625q1.671875 -1.53125 2.109375 -4.703125zm24.796875 1.109375l4.359375 0.53125q-1.03125 3.828125 -3.828125 5.9375q-2.78125 2.109375 -7.109375 2.109375q-5.46875 0 -8.671875 -3.359375q-3.1875 -3.375 -3.1875 -9.4375q0 -6.28125 3.234375 -9.75q3.234375 -3.46875 8.390625 -3.46875q4.984375 0 8.140625 3.40625q3.171875 3.390625 3.171875 9.546875q0 0.375 -0.015625 1.125l-18.5625 0q0.234375 4.109375 2.3125 6.296875q2.09375 2.171875 5.203125 2.171875q2.328125 0 3.96875 -1.21875q1.640625 -1.21875 2.59375 -3.890625zm-13.84375 -6.828125l13.890625 0q-0.28125 -3.140625 -1.59375 -4.703125q-2.015625 -2.4375 -5.21875 -2.4375q-2.90625 0 -4.890625 1.953125q-1.984375 1.9375 -2.1875 5.1875z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/heavy_h.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/heavy_h.svg
new file mode 100644
index 0000000000..29aa998860
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/heavy_h.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 1152.0 1152.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l1152.0 0l0 1152.0l-1152.0 0l0 -1152.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l1152.0 0l0 1152.0l-1152.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m418.51968 418.51968l314.9606 0l0 314.9606l-314.9606 0z" fill-rule="nonzero"></path><path stroke="#09f" stroke-width="24.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="40.0,30.0" d="m418.51968 418.51968l314.9606 0l0 314.9606l-314.9606 0z" fill-rule="nonzero"></path><path fill="#000000" d="m103.55905 103.55905l314.96063 0l0 944.88184l-314.96063 0z" fill-rule="nonzero"></path><path fill="#000000" d="m733.4803 103.55905l314.96063 0l0 944.88184l-314.96063 0z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/heavy_h_rotated.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/heavy_h_rotated.svg
new file mode 100644
index 0000000000..4616bf3260
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/heavy_h_rotated.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 1152.0 1152.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l1152.0 0l0 1152.0l-1152.0 0l0 -1152.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l1152.0 0l0 1152.0l-1152.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m733.4803 418.51968l0 314.9606l-314.9606 0l0 -314.9606z" fill-rule="nonzero"></path><path stroke="#09f" stroke-width="24.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="40.0,30.0" d="m733.4803 418.51968l0 314.9606l-314.9606 0l0 -314.9606z" fill-rule="nonzero"></path><path fill="#000000" d="m1048.4409 103.55905l0 314.96063l-944.88184 0l0 -314.96063z" fill-rule="nonzero"></path><path fill="#000000" d="m1048.4409 733.4803l0 314.96063l-944.88184 0l0 -314.96063z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/over_and_under.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/over_and_under.svg
new file mode 100644
index 0000000000..29b3c17d16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/over_and_under.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m104.0 200.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m104.0 24.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/pointing_right.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/pointing_right.svg
new file mode 100644
index 0000000000..9e5dd37601
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/pointing_right.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m153.37007 66.07874l93.25986 53.921257l-93.25986 53.921265z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/pointing_up.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/pointing_up.svg
new file mode 100644
index 0000000000..1abffd4936
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/pointing_up.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m146.07874 166.62993l53.921265 -93.25985l53.921265 93.25985z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/square_black.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/square_black.svg
new file mode 100644
index 0000000000..9198fe5dbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/square_black.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/square_blank.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/square_blank.svg
new file mode 100644
index 0000000000..14a2b3eef2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/square_blank.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m104.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_double.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_double.svg
new file mode 100644
index 0000000000..9b4f5df950
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_double.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m44.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m44.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m44.0 200.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m44.0 168.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m260.0 24.0l96.0 0l0 192.0l-96.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m260.0 24.0l96.0 0l0 192.0l-96.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m260.0 200.0l96.0 0l0 16.0l-96.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m260.0 168.0l96.0 0l0 16.0l-96.0 0z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_quad.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_quad.svg
new file mode 100644
index 0000000000..64c47fabcd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_quad.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m68.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m68.0 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m68.0 200.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m68.0 168.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m68.0 136.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m68.0 104.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m284.0 24.0l48.0 0l0 192.0l-48.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m284.0 24.0l48.0 0l0 192.0l-48.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m284.0 200.0l48.0 0l0 16.0l-48.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m284.0 168.0l48.0 0l0 16.0l-48.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m284.0 136.0l48.0 0l0 16.0l-48.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m284.0 104.0l48.0 0l0 16.0l-48.0 0z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_triple.svg b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_triple.svg
new file mode 100644
index 0000000000..9a2ef793c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/img/stripe_triple.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+
+<svg version="1.1" viewBox="0.0 0.0 400.0 240.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l400.0 0l0 240.0l-400.0 0l0 -240.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l400.0 0l0 240.0l-400.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m60.0036 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m60.0036 24.0l192.0 0l0 192.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m60.0036 200.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m60.0036 168.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#000000" d="m60.0036 136.0l192.0 0l0 16.0l-192.0 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m276.0028 24.0l63.99359 0l0 192.0l-63.99359 0z" fill-rule="nonzero"></path><path stroke="#000000" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="8.0,6.0" d="m276.0028 24.0l63.99359 0l0 192.0l-63.99359 0z" fill-rule="nonzero"></path><path fill="#000000" d="m276.0028 200.0l63.99359 0l0 16.0l-63.99359 0z" fill-rule="nonzero"></path><path fill="#000000" d="m276.0028 168.0l63.99359 0l0 16.0l-63.99359 0z" fill-rule="nonzero"></path><path fill="#000000" d="m276.0028 136.0l63.99359 0l0 16.0l-63.99359 0z" fill-rule="nonzero"></path></g></svg>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/index.html b/testing/web-platform/tests/css/css-writing-modes/test-plan/index.html
new file mode 100644
index 0000000000..926b62e997
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/index.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Writing Modes testing strategy</title>
+    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
+    <!--
+      === NOTA BENE ===
+      For the three scripts below, if your spec resides on dev.w3 you can check them
+      out in the same tree and use relative links so that they'll work offline,
+     -->
+    <script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
+    <script class='remove'>
+      var respecConfig = {
+          specStatus: "unofficial",
+          shortName: "css3-writingmodes-test-strategy",
+          editors: [
+            {
+              name: "Shinsuke Matsuki", mailto: "shinsuke.matsuki@access-company.com",
+              company: "ACCESS", companyURL: ""
+            },
+            {
+              name: "Masataka Yakura", mailto: "masataka.yakura@gmail.com",
+              company: "", companyURL: ""
+            },
+          ],
+          testSuiteURI: "http://test.csswg.org/suites/css3-writing-modes/nightly-unstable/",
+      };
+    </script>
+    <style>
+    a.bibref,
+    #references dt {
+      text-transform: uppercase;
+    }
+    </style>
+
+    <style>
+      table
+      {
+        border-collapse:collapse;
+      }
+      table, td, th
+      {
+        border:1px solid black;
+        padding: 13px;
+      }
+      table
+      {
+        width: 100%;
+      }
+      img
+      {
+        width: 400px;
+      }
+    </style>
+  <style>/*****************************************************************
+ * ReSpec 3 CSS
+ * Robin Berjon - http://berjon.com/
+ *****************************************************************/
+
+/* --- INLINES --- */
+em.rfc2119 {
+    text-transform:     lowercase;
+    font-variant:       small-caps;
+    font-style:         normal;
+    color:              #900;
+}
+
+h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
+h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
+    border: none;
+}
+
+dfn {
+    font-weight:    bold;
+}
+
+a.internalDFN {
+    color:  inherit;
+    border-bottom:  1px solid #99c;
+    text-decoration:    none;
+}
+
+a.externalDFN {
+    color:  inherit;
+    border-bottom:  1px dotted #ccc;
+    text-decoration:    none;
+}
+
+a.bibref {
+    text-decoration:    none;
+}
+
+cite .bibref {
+    font-style: normal;
+}
+
+code {
+    color:  #ff4500;
+}
+
+/* --- TOC --- */
+.toc a, .tof a {
+    text-decoration:    none;
+}
+
+a .secno, a .figno {
+    color:  #000;
+}
+
+ul.tof, ol.tof {
+    list-style: none outside none;
+}
+
+.caption {
+    margin-top: 0.5em;
+    font-style:   italic;
+}
+
+/* --- TABLE --- */
+table.simple {
+    border-spacing: 0;
+    border-collapse:    collapse;
+    border-bottom:  3px solid #005a9c;
+}
+
+.simple th {
+    background: #005a9c;
+    color:  #fff;
+    padding:    3px 5px;
+    text-align: left;
+}
+
+.simple th[scope="row"] {
+    background: inherit;
+    color:  inherit;
+    border-top: 1px solid #ddd;
+}
+
+.simple td {
+    padding:    3px 10px;
+    border-top: 1px solid #ddd;
+}
+
+.simple tr:nth-child(even) {
+    background: #f0f6ff;
+}
+
+/* --- DL --- */
+.section dd > p:first-child {
+    margin-top: 0;
+}
+
+.section dd > p:last-child {
+    margin-bottom: 0;
+}
+
+.section dd {
+    margin-bottom:  1em;
+}
+
+.section dl.attrs dd, .section dl.eldef dd {
+    margin-bottom:  0;
+}
+</style><link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/w3c-unofficial"><!--[if lt IE 9]><script src='https://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]-->
+
+  </head>
+  <body>
+    <section id='abstract'>
+      <p>
+        This document is intended to be used as a guideline for the testing
+        activities related to the CSS Writing Modes spec [[!css3-writing-modes]]. Its main
+        goal is to provide an overview of the general testing areas, possible
+        caveats and testing aspects not immediately apparent from the spec.
+        Also, it provides a means of tracking the progress of the CSS Writing Modes
+        spec testing.
+      </p>
+      <p>
+        This document is not meant to replace the spec in determining the
+        normative and non-normative assertions to be tested, but rather
+        complement it.
+      </p>
+    </section>
+
+    <section>
+      <h2>Introduction</h2>
+      <p>
+        As CSS moved away from the monolithic development of CSS 2.1 to the
+        modular development of CSS 3, the number of proposed new features and
+        the complexity of the layout landscape have increased dramatically.
+        While this directly translates to increased flexibility and agility in
+        adopting and implementing new CSS features, it also increases the
+        complexity of testing CSS features and the need for coordinating the
+        testing efforts. Also, the need for testing coordination increases as
+        crowd-sourcing efforts like
+        <a href="http://testthewebforward.org/" target="_blank">Test the Web
+        Forward</a> present people less familiar with the processes and policies
+        of the W3C with the opportunity to contribute new tests.
+      </p>
+      <p>
+        Except when defining new behaviors or redefining old behaviors, the
+        implicit assumption for new CSS modules is that they play nicely with
+        other modules or properties defined in CSS&nbsp;2.1 [[CSS21]]. As CSS
+        Writing Modes is a spec that touches many aspects of layout, styling and CSSOM,
+        it's not unreasonable to want to test the spec against these implicit
+        assumptions, too.
+      </p>
+      <p>
+        This testing strategy document is meant to complement the CSS Writing Modes
+        spec and the existing test suite by providing an overview of the testing
+        areas (especially the less apparent ones) and tracking the progress of
+        the testing activities against these test areas.
+      </p>
+    </section>
+    <section>
+      <h2>Goals</h2>
+      <p>
+        To ensure a comprehensive test suite with useful, high quality tests, a
+        number of goals are proposed. They range from process goals (how to
+        conduct testing) to implementation goals (how to write good tests).
+      </p>
+      <section>
+        <h3>Enabling easy test contribution</h3>
+        <p>
+          An important vector in successfully testing CSS Writing Modes is to
+          enable easy test contributions, both from W3C partners and from
+          non-W3C members that wish to contribute. This is achieved by clearly
+          marking and explaining the areas that need testing, linked to existing
+          tests and general testing progress.
+        </p>
+      </section>
+      <section>
+        <h3>Providing guidance on testing</h3>
+        <p>
+          In order to increase the quality of the test contributions, this
+          document offers a set of guidelines for conducting testing (see
+          <a href="#approach" class="sectionRef"></a>) and a testing progress
+          tracker to increase the surface coverage of tests (see
+          <a href="#test-progress-tracking" class="sectionRef"></a>).
+        </p>
+      </section>
+      <section>
+        <h3>Creating automation-friendly tests</h3>
+        <p>
+          In terms of actual tests produced for the CSS Writing Modes, the main goal
+          is to ensure that most tests are automatable (i.e. they're either
+          reftests or use <code>testharness.js</code>). Even where manual tests
+          are absolutely necessary they should be written so that they can be
+          easily automated &ndash; as there are on-going efforts to make
+          WebDriver [[webdriver]] automated tests a first class citized in W3C
+          testing. This means that even if a manual test requires user
+          interaction, the validation or PASS/FAIL conditions should still be
+          clear enough as to allow automatic validation if said interaction is
+          later automated.
+        </p>
+
+        <p>
+          In particular need a special font in the test of CSS Writing Modes. Since these are is assumed of many tests, people who try to create the test now, check to see whether any available font.
+        </p>
+      </section>
+    </section>
+    <section>
+      <h2>Risks and mitigation</h2>
+      <p>
+        There are a number of risks associated with creating a high-quality
+        test suite for CSS Writing Modes. The most important ones are listed below.
+      </p>
+      <section>
+        <h3>Implicit interactions with a lot of other specs (and commonly accepted
+          browser behavior)</h3>
+        <p>
+          The CSS Writing Modes spec introduces a significant change in the way layout
+          can be done and as a consequence, many of the assumptions that hold in
+          the context of CSS&nbsp;2.1 must be re-validated in the context of CSS
+          Writing Modes. In the meanwhile, a lot of new layout modules have been
+          proposed, with various degrees of implementer support and maturity.
+          Also, non-CSS specific specs introduced concepts that affect how style
+          is propagated (e.g. Shadow DOM [[shadow-dom]]) or how elements are
+          rendered and interact with their containing documents (e.g.
+          <code>&lt;iframe seamless&gt;</code> in HTML 5 [[HTML5]]).
+        </p>
+        <p>
+          All the above factors increase the testing surface and the number of
+          the possible cases that might need an explicitly specified behavior in
+          order to ensure intuitive and predictable results as well as stable
+          interaction with widely used browser features (that might not be <em>yet</em>
+          so strictly specified).
+        </p>
+        <p>
+          In terms of specifying the expected behavior, the current approach is
+          to try and specify it for specs that are final or nearly-final and to
+          just make a note of the possible interactions and unspecified behaviors
+          in the case of specs that are still in flux. In exceptional cases, a
+          new spec might be created to cater for the needs of multiple specs
+          (e.g. the CSS Fragmentation spec [[css3-break]]).
+        </p>
+      </section>
+      <section>
+        <h3>Big number of tests required</h3>
+        <div class="note">
+          Add here the estimation of tests required produced by
+          <a href="https://github.com/web-platform-tests/wpt/tree/master/tools/coverage" target="_blank">W3C test coverage</a>
+          tool. If possible, provide a better informed guess on the number of tests.
+        </div>
+        <p>
+          Given the complexity of the spec, a big number of tests will need to
+          be created to produce a test suite that can ensure interoperability
+          between implementations.
+        </p>
+        <p>
+          In this context, the main purpose of this document is to provide
+          useful informations for creating and contributing tests in an effective
+          manner in terms of coverage and test quality.
+        </p>
+      </section>
+      <section>
+        <h3>Special fonts required</h3>
+        <p>
+          For building reftest, several special fonts are necessary.
+          If could not get some fonts, a test will be manual or reftest waiting fonts.
+        </p>
+      </section>
+    </section>
+    <section>
+      <h2>Approach</h2>
+      <p>
+        As spec testing cannot be realistically separated from testing a
+        particular implementation (except for the very simple cases), the
+        approach proposed for testing is one that tries to first cover as many
+        areas as possible, instead of deep diving on a certain feature or aspect
+        of the spec first. A side benefit of this approach is that the spec
+        tests can be used at any time to gauge the level of support of a certain
+        implementation.
+      </p>
+      <p>
+        Having this <em>breadth-first</em> approach in mind, tests will be
+        created for the testing areas listed in <a href="#testing-areas"
+        class="sectionRef"></a>. Testing will be done in multiple passes, each
+        aimed at covering more specific edge-cases.
+      </p>
+      <p>
+        The selection of test data, in terms of parsing, rendering, choose only one typical values from the data set on the same effect (It is a test technique known "equivalence partitioning").
+      </p>
+
+    </section>
+    <section>
+      <h2>Testing areas</h2>
+      <section>
+        <h3>Explicit testing areas</h3>
+        <p>
+          These are testing areas normatively defined by the spec. They cover
+          things explicitly or implicitly defined in the CSS Writing Modes spec.
+          Please note that while detailed, this list is not necessarily
+          exhaustive and normative behaviors may not be contained in it.
+          When in doubt, consult the CSS Writing Modes spec or ask a question on the
+          <a href="http://lists.w3.org/Archives/Public/www-style/">mailing
+          list</a>.
+        </p>
+        <p>
+        <h4>Overview</h4>
+          Below is the list of explicit testing areas:
+          <ol>
+            <li>
+              Proper parsing of the CSS properties and rules, rendering
+              according to the spec.
+              <ul>
+                <li><code>direction</code></li>
+                <li><code>unicode-bidi</code></li>
+                <li><code>writing-mode</code></li>
+                <li><code>text-orientation</code></li>
+                <li><code>caption-side</code></li>
+                <li><code>text-combine-upright</code></li>
+              </ul>
+            </li>
+              Test the following set of elements as a group to the 'Applies to' description.
+              <ul>
+                <li>inline element, inline block, replaced elements, block element, list-item
+, table, inline-table, table-header-group, table-footer-group, table-cell, table-caption</li>
+                <li><code>display:none</code></li>
+                <li>inherit</li>
+              </ul>
+              Selected as a representative following four frequently used as 'replace element'.
+                <ul>
+                  <li><code>button</code></li>
+                  <li><code>input:text</code></li>
+                  <li><code>select</code></li>
+                  <li><code>text-area</code></li>
+                </ul>
+            </li>
+            <li>
+              Box related specifications that are affected as specified by <code>writing-mode</code>, <code>text-orientation</code>. The original definition about 'Box model' see [[CSS21]] for details. Calculation of the following in particular:
+                <ul>
+                  <li><code>margin</code></li>
+                  <li><code>border</code></li>
+                  <li><code>padding</code></li>
+                </ul>
+            </li>
+            <li>
+              Compression of the glyph in horizontal-in-vertical(tate-chu-yoko) when using the text-transform [[!css3-text]] and OpenType properties.
+            </li>
+            <li>
+              Positioning, sizing and Auto-sizing of the box in orthogonal flows.
+            </li>
+            <li>
+              Text Baselines in vertical writing mode.
+                <ul>
+                  <li>alphabetic</li>
+                  <li>central</li>
+                </ul>
+            </li>
+          </ol>
+        </p>
+        <h3>Each Section</h3>
+        <ol>
+            <h3>Sec 2.Inline Direction and Bidirectionality</h3>
+            <p>
+              Parse, Rendering fundamental when combined the <code>direction</code> property and the <code>unicode-bidi</code> property. Applying Unicode bidirectional algorithm, behavior when the value is a newline. Placement of split inline-box. Calculation positioning of the box element.
+            </p>
+            <h3>Sec 3.Introduction to Vertical Text</h3>
+            <p>
+              Parse, Rendering fundamental for the <code>writing-mode</code> property. Character should be considered in particular the placement in vertical writing mode(Punctuation, etc. Onbiki in Japanese). Rendering for principal writing mode. Handling of child block in the case of line feed direction different from the container block. Converte value of the SVG in the writing-mode.
+            </p>
+
+            <h3>Sec 4.Inline-level Alignment</h3>
+            <p>
+              Consider baseline alphabetic, central in this specification. Baseline in vertical alignment for glyph, processing of dominant baseline.
+              <div class="note">
+                'dominant baseline' testing in CSS21 side?
+              </div>
+            </p>
+            <h3>Sec 5.Introduction to Vertical Text Layout</h3>
+            <p>
+              Parse, Rendering fundamental for the <code>text-orientation</code> property. rendering when the vertical writing mode. Rules of Appendix C.
+            </p>
+            <h3>Sec 6.Abstract Box Terminology</h3>
+            <p>
+              Processing over and under in line-relative directions. left, right adding in vertical writing mode to line-box. The processing of before, after, start, end of each block-level-element, inline-level-element in flow-relative directions.
+            </p>
+            <h3>Sec 7.Abstract Box Layout</h3>
+            <p>
+              Layout rule that refers to property in the box when in vertical writing mode and margin collapsing. Sizing, auto-sizing of the writing modes in Orthogonal Flow. Margin calculation in the case of Flow-Relative. Position calculation in the case of Line-Relative. Properties that do not affect the WritingMode. rendering and parsing of <code>caption-side</code> property.
+            </p>
+            <h3>Sec 8.Page Flow: the page progression direction</h3>
+            <p>
+              It is a page feed flow specification of UA, is beyond the scope of the current test environment.
+            </p>
+            <h3>Sec 9.Glyph Composition</h3>
+            <p>
+              Parse, Rendering fundamental for the <code>text-combine-upright</code> property. rendering when the vertical writing mode.  Interrupted by a box boundary in text run-rules. Glyph of centering in 1em box. Several algorithms to compress the 1em glyph of multiple.
+            </p>
+        </ol>
+
+      </section>
+      <section>
+        <h3>Implicit testing areas</h3>
+        <p>
+          These are testing areas either normatively defined in other specs
+          that explicitly refer to the CSS Writing Modes spec (e.g. [[css3-text]])
+          or simply not explicitly defined, but implied by various aspects of
+          the spec (e.g. processing model, CSS 2.1 compliance, etc.).
+          Please note that while detailed, this list is not necessarily
+          exhaustive and normative behaviors may not be contained in it.
+          When in doubt, consult the CSS Writing Modes spec or ask a question on the
+          <a href="http://lists.w3.org/Archives/Public/www-style/">mailing
+          list</a>.
+        </p>
+        <p>
+          Below is the list of implicit testing areas:
+          <ol>
+            <li>
+              CSS Writing Modes and layout modules:
+              <ul>
+                <li><code>overflow</code></li>
+                <li><code>clip</code></li>
+                <li><code>line-height</code></li>
+                <li>the <code>alt</code> attribute </li>
+              </ul>
+            </li>
+          </ol>
+        </p>
+      </section>
+    </section>
+    <section>
+      <h2>People and responsibilities</h2>
+      <p>
+        Below is a list of people you should reach out to if you have any
+        questions related to this document or testing CSS Writing Modes in general:
+        <ul>
+          <li>fantasai &ndash; editor for CSS Writing Modes spec</li>
+          <li>Koji Ishii &ndash; editor for CSS Writing Modes spec</li>
+          <li>Rebecca Hauck &ndash; CSSWG testing owner</li>
+        </ul>
+      </p>
+    </section>
+    <section>
+      <h2>Test progress tracking</h2>
+      <p>
+        Currently test progress tracking is done via gitHub
+        <a href="https://github.com/w3c/csswg-test/issues/milestones?with_issues=yes">milestones</a>
+        and <a href="https://github.com/w3c/csswg-test/issues?milestone=9&state=open">issues</a>.
+      </p>
+    </section>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/test-plan/req-tcu-font.html b/testing/web-platform/tests/css/css-writing-modes/test-plan/req-tcu-font.html
new file mode 100644
index 0000000000..d329eea041
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/test-plan/req-tcu-font.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Requirements for fonts for testing text-combine-upright</title>
+<meta charset='utf-8'>
+<script class='remove'>
+var respecConfig = {
+  specStatus: "unofficial",
+  shortName: "req-tcu-font",
+  editors: [ { name: "Masataka Yakura", url: "https://google.com/+MasatakaYakura" } ],
+  publishDate:  "2015-01-28",
+};
+</script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+/*****************************************************************
+ * ReSpec 3 CSS
+ * Robin Berjon - http://berjon.com/
+ *****************************************************************/
+
+/* --- INLINES --- */
+em.rfc2119 { text-transform: lowercase; font-variant: small-caps; font-style: normal; color: #900; }
+h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr { border: none; }
+dfn { font-weight: bold; }
+a.internalDFN { color: inherit; border-bottom: 1px solid #99c; text-decoration: none; }
+a.externalDFN { color: inherit; border-bottom: 1px dotted #ccc; text-decoration: none; }
+a.bibref { text-decoration: none; }
+cite .bibref { font-style: normal; }
+code { color: #C83500; }
+
+/* --- TOC --- */
+.toc a, .tof a { text-decoration: none; }
+a .secno, a .figno { color: #000; }
+ul.tof, ol.tof { list-style: none outside none; }
+.caption { margin-top: 0.5em; font-style: italic; }
+
+/* --- TABLE --- */
+table.simple { border-spacing: 0; border-collapse: collapse; border-bottom: 3px solid #005a9c; }
+.simple th { background: #005a9c; color:  #fff; padding: 3px 5px; text-align: left; }
+.simple th[scope="row"] { background: inherit; color:  inherit; border-top: 1px solid #ddd; }
+.simple td { padding: 3px 10px; border-top: 1px solid #ddd; }
+.simple tr:nth-child(even) { background: #f0f6ff; }
+
+/* --- DL --- */
+.section dd > p:first-child { margin-top: 0; }
+.section dd > p:last-child { margin-bottom: 0; }
+.section dd { margin-bottom: 1em; }
+.section dl.attrs dd, .section dl.eldef dd { margin-bottom: 0; }
+
+@media print { .removeOnSave { display: none; } }
+</style>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>/* --- ISSUES/NOTES --- */
+div.issue-title, div.note-title { padding-right: 1em; min-width: 7.5em; color: #b9ab2d; }
+div.issue-title { color: #e05252; }
+div.note-title { color: #2b2; }
+div.issue-title span, div.note-title span { text-transform: uppercase; }
+div.note, div.issue { margin-top: 1em; margin-bottom: 1em; }
+.note > p:first-child, .issue > p:first-child { margin-top: 0 }
+.issue, .note { padding: .5em; border-left-width: .5em; border-left-style: solid; }
+div.issue, div.note { padding: 1em 1.2em 0.5em; margin: 1em 0; position: relative; clear: both; }
+span.note, span.issue { padding: .1em .5em .15em; }
+.issue { border-color: #e05252; background: #fbe9e9; }
+.note { border-color: #52e052; background: #e9fbe9; }
+</style>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>/* HIGHLIGHTS */
+code.prettyprint { color: inherit; }
+
+/* this from google-code-prettify */
+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
+</style>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/w3c-unofficial">
+</head>
+<body>
+
+<section id="abstract">
+<p>The <a href="https://drafts.csswg.org/css-writing-modes/">CSS Writing Modes</a> specification defines a property <code>text-combine-upright</code> which enables a <i>tate-chu-yoko</i> (<span lang="ja">縦中横</span>) effect; applying the property to a span of text will combine the text inside it horizontally so that it looks a single character in vertical writing modes.
+
+<p>While invesitigating the specification for developing test suite, test authors found the need for a new font specifically designed to test the property. This document gives a fairly basic guide to CSS testing and testing <code>text-combine-upright</code> specifically, and lists the requiremnts of the font needed to test the property.
+</section>
+
+<section>
+<h2>CSS testing terminology</h2>
+<p>Before getting into the requirements of fonts, let me explain some terms specific to CSS testing.
+
+<section>
+<h3>Reftests (reference tests)</h3>
+<p>A <a href="http://testthewebforward.org/docs/reftests.html">reftest</a> are one of the testing format used in W3C and browser vendors for testing features that add visual effects to a page such as CSS and SVG. A reftest are madte of two (or more) files: a test case made using features to test, and reference file(s) made using widely-implemented-and-deployed features (e.g. CSS2). On conforming implementation the reference and the test case will visually match.
+<p>For ease of testing, references often use simple geometric shapes such as <a href="http://test.csswg.org/source/css-flexbox-1/reference/flexbox-flex-wrap-nowrap-ref.htm">green square</a>.
+<figure>
+<iframe src="../../css-flexbox-1/reference/flexbox-flex-wrap-nowrap-ref.htm" frameborder="0" width="400" height="200"></iframe>
+<figcaption>A reference of green rectangle, used for a flexbox test</figcaption>
+</figure>
+</section>
+
+<section>
+<h3>The Ahem font</h3>
+<p>In order to test CSS features, it is required to install the <a href="http://www.w3.org/Style/CSS/Test/Fonts/Ahem/">Ahem font</a> in a testing system. The Ahem font only contains simple geometric glyphs such as a square and rectangles. With those simple glyphs it is easy to craft references and test cases. Here's a design specification of Ahem quoting from the README file:
+<blockquote cite="http://www.w3.org/Style/CSS/Test/Fonts/Ahem/">
+<pre>The font's em square is exactly square.
+Its ascent and descent is exactly the size of the em square. This
+means that the font's extent is exactly the same as its line-height,
+meaning that it can be exactly aligned with padding, borders, margins,
+and so forth.
+
+The font's alphabetic baseline is 0.2em above its bottom, and 0.8em
+below its top. The font has an x-height of 0.8em.
+
+The font has four glyphs:
+
+  'X' U+0058 A square exactly 1em in height and width.
+
+  'p' U+0070 A rectangle exactly 0.2em high, 1em wide, and aligned so
+             that its top is flush with the baseline.
+
+  'É' U+00C9 A rectangle exactly 0.8em high, 1em wide, and aligned so
+             that its bottom is flush with the baseline.
+
+  ' ' U+0020 A transparent space exactly 1em high and wide.
+
+Most other US-ASCII characters in the font have the same glyph as X.</pre>
+</blockquote>
+</section>
+
+</section>
+
+
+<section>
+<h2>Testing <code>text-combine-upright</code></h2>
+<p>The <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-upright"><code>text-combine-upright</code></a> property combines a short run of text horizontally in vertical writing modes. The resulting effect is called <i>tate-chu-yoko</i> (<span lang="ja">縦中横</span>, sometimes abbreviated as <abbr>TCY</abbr> in CSSWG mailing lists) and used for short digits in vertical Japanese layout.
+<figure class="example">
+<img src="https://drafts.csswg.org/css-writing-modes/tate-chu-yoko.png">
+<figcaption>Example of tate-chu-yoko (borrowed from the Writing Modes spec). The digits "20" and "16" are aligned horizontally. Also the digit "4" is rotated upright even it looks an ASCII digit; this is because "4" is also composed thus rotated.</figcaption>
+</figure>
+<p>In order to make reftests, it needs a font which contains geometric glyphs designed so that horizontally-combined glyphs and the reference would look the same (e.g. a 1em &times; 1em square glyph). With such font, a test can be written as follows:
+<pre class="highlight"><code>&lt;style&gt;
+.test {
+  writing-mode: vertical-rl;
+  font-family: Ahem;
+}
+.tcy {
+  text-combine-upright: all;
+}
+&lt;/style&gt;
+
+&lt;p&gt;Test passes if the following is identical:&lt;/p&gt;
+
+&lt;div class="test"&gt;
+  &lt;p&gt;&lt;span class="tcy"&gt;123&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;x&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+<p>In conforming user agent with the font installed on the system, the span "123" will be combined horizontally thus rendered as a single square, resulting to match the reference. In non-conforming user agents the span will neither be combined nor be compressed as a single square, it will thus not match the reference rendering.
+<figure class="example">
+<img src="img/figure-rendering-tcu.svg" width="480">
+<figcaption>An illustration of output from ① no-tcu-support UA, ② conforming UA, ③ reference file</figcaption>
+</figure>
+
+<p>The above example uses Ahem; some tests can be written using Ahem. However, many features of <code>text-combine-upright</code> cannot be tested with only a black square glyph. Also the spec requires UAs with OpenType support to use OpenType features on rendering particular properties; to test this, the font must be an OpenType font with required fetures.
+</section>
+
+
+</section>
+
+<section>
+<h2>Glyphs</h2>
+
+<p>This section describes requirements for glyphs that the font needs and gives some ideas of glyphs.
+
+
+<section>
+<h3>Glyphs that can be used as an alternative to Ahem glyphs</h3>
+<p>In the prior section we demonstrate how we can test <code>text-combine-upright</code> using Ahem. In some cases tests can be written only using Ahem, but there are cases where we need additional glyphs.
+<ul>
+  <li>A black square is a 1em &times; 1em square glyph; it is pretty much the same as Ahem's glyph for <code>x</code>
+  <li>A blank of 1em &times; 1em
+</ul>
+<figure>
+<img src="img/square_black.svg" width="300">
+<img src="img/square_blank.svg" width="300">
+</figure>
+
+<p class="note">It might be okay with just using Ahem if tests needing black square only contain codepoints in ASCII-range.
+</section>
+
+
+<section>
+<h3>Glyphs to check whether a character is rotated or not</h3>
+<p><code>text-combine-upright</code> combines a span of text horizontally and make the resulting compression rendered upright, even when the element has just one character.
+<p>If the element contains two or more characters, Ahem can be used to check if user agents support composition effect. However, if it is just a single character, Ahem cannot be used since most character in Ahem is a 1em square and thus cannot figure out whether the resulting coposition is rendered upright or not.
+<p>Therefore, we need two glyphs where:
+<ul>
+<li>their widths and heights are 1em
+<li>one matches another visually when another rotated 90&deg; counterclockwise
+</ul>
+<figure>
+<img src="img/pointing_right.svg" width="300">
+<img src="img/pointing_up.svg" width="300">
+<figcaption>example glyphs that satisfy the requirements above: "pointing-right" on left and "pointing-up" on right</figcaption>
+</figure>
+<p class="note">Yes, I stole the glyph idea from <a href="http://blogs.adobe.com/CCJKType/2013/05/css-orientation-test-opentype-fonts.html">CSS Orientation Test</a> font.
+<figure>
+<pre class="highlight"><code>&lt;style&gt;
+body {
+  writing-mode: vertical-rl;
+  font-family: SomeFont;
+}
+.test {
+  text-combine-upright: all;
+}
+.reference {
+  text-orientaiton: upright;
+}
+&lt;/style&gt;
+
+&lt;p class="test"&gt;A&lt;/p&gt;
+&lt;p class="reference"&gt;B&lt;/p&gt;</code></pre>
+<figcaption>Test code might look like this</figcaption>
+</figure>
+
+<p class="note">These glyphs are not directly related to TCY so perhaps it should go to CSS Orientation Test font.
+</section>
+
+
+<section>
+<h3>Glyph to check whether the composition has no text decoration inside it</h3>
+<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">Section 9.1.2 Layout Rules</a> it says:
+<blockquote>
+When combining text as for text-combine-upright: all, the glyphs of the combined text are composed horizontally (<mark>ignoring letter-spacing and any forced line breaks, but using the specified font settings</mark>), similar to the contents of an inline-box with a horizontal writing mode and a line-height of 1em.
+</blockquote>
+<p>Later in the section it says:
+<blockquote>
+For other text layout purposes, e.g. emphasis marks, text-decoration, spacing, etc. the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC.
+</blockquote>
+<p>So we need to test if user agents ignore spacing, emphasis marks, decorations applied to <em>each</em> character inside the composition but rather apply those effects to the resulting composition, treating as if it were a single characeter.
+<p>The test should be written to check if there is no emphasis mark or ruby character inside the composition. To make this easy to observe, we need a glyph where:
+<ul>
+<li>it does not overlap ruby text, emphasis mark, or any decoration
+</ul>
+<p>The following is an idea for such glyph: it draws overline and underline but does not do so in between them.
+<figure>
+<img src="img/over_and_under.svg" width="300">
+</figure>
+<p>With such glyph, the test would be written as:
+<figure>
+<pre class="highlight"><code>&lt;style&gt;
+.test {
+  writing-mode: vertical-rl;
+  font-family: TCU-test;
+}
+.tcy {
+  text-combine-upright: all;
+  text-emphasis: sesame;
+}
+&lt;/style&gt;
+
+&lt;p&gt;&lt;span class="tcy"&gt;AB&lt;/span&gt;&lt;/p&gt;</code></pre>
+</figure>
+<p>This will make the test reftestable.
+<figure>
+<img src="img/figure-over_and_under-pass.svg" width="300">
+<img src="img/figure-over_and_under-fail.svg" width="300">
+<figcaption>Conforming user agents apply text-emphasis as if the content inside <code>&lt;span class="tcy"&gt;</code> were a single character (left). Non-conforming user agents might apply text-emphasis to each character inside <code>&lt;span class="tcy"&gt;</code> (right)</figcaption>
+</figure>
+<p class="issue">This glyph cannot cover the assertion <q>the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC</q>. Test authors are not sure if that will cause a visual effect that can be tested.
+</section>
+
+
+<section>
+<h3>Glyphs that is larger than 1em square</h3>
+<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">9.1.2 Layout Rules</a> the spec says:
+<blockquote>
+The effective size of the composition is assumed to be 1em square; anything outside the square is not measured for layout purposes.
+</blockquote>
+<p>Hence, we need a glyph where:
+<ul>
+<li>its size is greater than 1em square
+</ul>
+<figure>
+<img src="img/heavy_h.svg" width="200">
+<!-- <img src="img/heavy_h_rotated.svg" width="200"> -->
+<figcaption>The "Heavy H". The dashed region in the center of the glyph indicates the 1em square and the lines besides the square has the length of 3em and the thickness of 1em.</figcaption>
+</figure>
+<p>By using this glyph with two square glyphs we can make a 3em square.
+<figure>
+<pre class="highlight"><code>&lt;style&gt;
+body {
+  writing-mode: vertical-rl;
+  font-family: SomeFont;
+}
+.tcy {
+  text-combine-upright: all;
+}
+.reference {
+  font-size: 3em;
+  margin: 2em 0;
+}
+&lt;/style&gt;
+
+&lt;div class="test"&gt;
+  &lt;p&gt;x&lt;span class="tcy"&gt;H&lt;/span&gt;x&lt;/p&gt;
+  &lt;p class="reference"&gt;x&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+<figcaption>The test code might look like this: it assumes that a black square glyph maps to <code>x</code> and the "Heavy H" glyph maps to <code>H</code></figcaption>
+</figure>
+</section>
+
+<section>
+<h3>TBD</h3>
+<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">9.1.2 Layout Rules</a> the spec says:
+<blockquote>
+The UA should center the glyphs horizontally and vertically within the measured 1em square.
+</blockquote>
+<p class="issue">work in progress. test authors are struggling with the look of shape(s) to use to create a reftest
+<!--
+<p>
+<ul>
+<li>
+</ul>
+<figure>
+<img src="">
+<figcaption></figcaption>
+</figure>
+<p>
+-->
+</section>
+
+
+<section>
+<h3>Glyphs to check whether <code><var>n</var>wid</code> OpenType features are used</h3>
+<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-compression">9.1.3 Compression Rules</a> the spec says:
+<blockquote>
+OpenType implementations must use width-specific variants (OpenType features hwid/twid/qwid; other glyph-width features such as fwid or pwid are not included) to compress text in cases where those variants are available for all characters in the composition.
+</blockquote>
+<p>In order to test this, we need glyphs for hwid, twid, and qwid; they need to be distinguishable from each other and also distinguishable from fwid/pwid glyphs. For the use in reference, we also need "extended" versions of hwid/twid/qwid glyphs; the widths of the extended version are all 1em.
+</ul>
+
+<section>
+<h4>A double stripe</h4>
+<p>Used for the <i>hwid</i> feature.
+<figure>
+<img src="img/stripe_double.svg" width="300">
+<figcaption>double stripe. reference glyph on left, hwid glyph on right.</figure>
+</figure>
+</section>
+
+<section>
+<h4>A triple stripe</h4>
+<p>Used for the <i>twid</i> feature.
+<figure>
+<img src="img/stripe_triple.svg" width="300">
+<figcaption>triple stripe. reference glyph on left, twid glyph on right.</figure>
+</figure>
+</section>
+
+<section>
+<h4>A quadruple stripe</h4>
+<p>Used for the <i>qwid</i> feature.
+<figure>
+<img src="img/stripe_quad.svg" width="300">
+<figcaption>quadruple stripe. reference glyph on left, qwid glyph on right.</figure>
+</figure>
+</section>
+
+<p class="note">There might be cases where a character inside TCY does not have all features, the font need to have characters that only have (or miss) hwid/twid/qwid feature. Tests need to check combination of characters with different feature sets.
+
+<p class="issue">Since the processing details of compression rules are up to User Agents, when the resulting glyphs from composition differs from each other, the test can only be verified using negative references.
+</section>
+
+
+<section>
+<h3>Glyphs to check the optional processing regarding U+6C34</h3>
+<p>The last paragraph in <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-compression">9.1.3 Compression Rules</a> says:
+<blockquote>
+In some fonts, the ideographic glyphs are given a compressed design such that they are 1em wide but shorter than 1em tall. To accommodate such fonts, the UA may vertically scale the the composition to match the advance height of 水 U+6C34.
+</blockquote>
+<p>We need two glyphs:
+<ul>
+<li>a glyph of horizontal rectangle (e.g. 1em &times; .8em), mapping to 0x6C34
+<li>a glyph of thinner horizontal rectangle (e.g. 1em &times; .3em), mapping to a certain codepoint
+</ul>
+
+<p class="note">There is <a href="http://lists.w3.org/Archives/Public/www-style/2014Jul/0310.html">a spec issue</a>.
+</section>
+
+
+</section>
+
+
+<section>
+<h2>Glyph mappings</h2>
+
+<p>This section describes which glyph should map to which code points.
+
+<p class="note">This section is work-in-progress.</p>
+
+<section>
+<h3>Font A <span class="issue">TODO: Name</span></h3>
+
+<p>Font A contains all glyphs except ones for checking <a href="#glyphs-to-check-whether-nwid-opentype-features-are-used">width-related features</a>.</p>
+
+<p class="note">Unless otherwise specified, glyphs are mapped to both in horizontal and in vetical (using the <code>vert</code> feature) modes.</p>
+
+<table class="simple" border>
+<tr>
+<th>Code Point
+<th>Glyph
+<th>Note
+
+<tr>
+<td>x (U+0078)
+<td>Black
+<td>
+
+<tr>
+<td>SPACE (U+0020)
+<td>Blank
+<td>
+
+<tr>
+<td>R (U+0052)
+<td>Pointing Right
+<td>
+
+<tr>
+<td>U (U+0055)
+<td>Pointing Up
+<td>
+
+<tr>
+<td>O (U+004F)
+<td>Overline+Underline
+<td>
+
+<tr>
+<td>h (U+0048)
+<td>Heavy H
+<td>
+
+<tr>
+<td>r (U+072)
+<td>Pointing Right and Pointing Up
+<td>
+default: Pointing Right<br>
+vert: Pointing Up
+</table>
+
+</section>
+
+<section>
+<h3>Fonts to test width-variant features</h3>
+
+<p>These fonts test the <a href="#glyphs-to-check-whether-nwid-opentype-features-are-used">width-related features</a>. One font contains only <code>hwid</code> feature, and another contains all the five features (<code>hwid</code>, <code>twid</code>, <code>qwid</code>, <code>fwid</code>, and <code>pwid</code>).</p>
+
+<p>Below is a table for the latter font; the former (only contains <code>hwid</code> feature) lacks other four features.</p>
+
+<table class="simple" border>
+<tr>
+<th>Code Point
+<th>Glyph
+<th>Note
+
+<tr>
+<td>a (U+0078)
+<td>Double Stripe<br>Triple Stripe<br>Quadruple Stripe<br>Black
+<td>
+hwid: Double Stripe<br>
+twid: Triple Stripe<br>
+qwid: Quadruple Stripe<br>
+fwid: Black<br>
+pwid: Black<br>
+
+<tr>
+<td>H (U+0078)
+<td>Double Stripe
+<td>
+Used in reference
+
+<tr>
+<td>T (U+0078)
+<td>Triple Stripe
+<td>
+Used in reference
+
+<tr>
+<td>Q (U+0078)
+<td>Quadruple Stripe
+<td>
+Used in reference
+</table>
+
+</section>
+
+</section>
+
+
+
+<section>
+<h2>Acknowledgements</h2>
+<p>Special thnks goes to the current and former editors of the Writing Modes specification: fantasai, Koji Ishii, and Shinyu Murakami
+<p>In addition to the editors, this work wouldn't have been possible without help from: Taichi Kawabata
+</section>
+
+
+<script src='http://www.w3.org/Tools/respec/respec-w3c-common' async class='remove'></script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-003.xht
new file mode 100644
index 0000000000..795bf7ba24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-003.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: left' - 'vertical-lr' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-top-200x300.png");
+      direction: ltr;
+      text-align: left;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-005.xht
new file mode 100644
index 0000000000..d53615e113
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-005.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: left' - 'vertical-lr' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: left' aligns an inline box within a line box with respect to the line box's logical left side (line-left side). Here, 'direction: rtl' has no impact, no influence on such alignment." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-top-200x300.png");
+      direction: rtl;
+      text-align: left;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-007.xht
new file mode 100644
index 0000000000..977e518fa4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-007.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: left' - 'vertical-lr' and initial, default 'direction'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-top-200x300.png");
+      text-align: left;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-009-ref.xht
new file mode 100644
index 0000000000..b5ae7a99a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-009-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><img src="support/left-center-green-200x300.png" width="200" height="300" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-009.xht
new file mode 100644
index 0000000000..e53efd3ab1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-009.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: center' - 'vertical-lr' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="text-align-vlr-009-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-center-200x300.png");
+      direction: ltr;
+      text-align: center;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>C</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-011.xht
new file mode 100644
index 0000000000..01fe0f2ae8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-011.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: center' - 'vertical-lr' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="text-align-vlr-009-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: center' centers an inline box within a line box with respect to the line box's logical left and right sides (line-left and line-right sides)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-center-200x300.png");
+      direction: rtl;
+      text-align: center;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>C</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-013.xht
new file mode 100644
index 0000000000..f3e3a3417c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-013.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: center' - 'vertical-lr' and initial, default 'direction'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="text-align-vlr-009-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-center-200x300.png");
+      text-align: center;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>C</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-015.xht
new file mode 100644
index 0000000000..c6ad449f0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-015.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: right' - 'vertical-lr' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vlr-003-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-bottom-200x300.png");
+      direction: ltr;
+      text-align: right;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-017.xht
new file mode 100644
index 0000000000..a25544c455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-017.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: right' - 'vertical-lr' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vlr-003-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: right' aligns an inline box within a line box with respect to the line box's logical right side (line-right side). Here, 'direction: rtl' has no impact, no influence on such alignment." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-bottom-200x300.png");
+      direction: rtl;
+      text-align: right;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-019.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-019.xht
new file mode 100644
index 0000000000..02d7865d4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vlr-019.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: right' - 'vertical-lr' and initial, default 'direction'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vlr-003-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: right' aligns an inline box within a line box with respect to such line box's logical right side (line-right side)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/left-bottom-200x300.png");
+      text-align: right;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-002.xht
new file mode 100644
index 0000000000..b5bf39c57f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-002.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: left' - 'vertical-rl' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: left' aligns an inline box within a line box with respect to such line box's logical left side (line-left side)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-top-200x300.png");
+      direction: ltr;
+      text-align: left;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-004.xht
new file mode 100644
index 0000000000..5f68b46553
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-004.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: left' - 'vertical-rl' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: left' aligns an inline box within a line box with respect to the line box's logical left side (line-left side). Here, 'direction: rtl' has no impact, no influence on such alignment." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-top-200x300.png");
+      direction: rtl;
+      text-align: left;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-006.xht
new file mode 100644
index 0000000000..dccc71bf6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-006.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: left' - 'vertical-rl' and initial, default 'direction'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: left' aligns an inline box within a line box with respect to such line box's logical left side (line-left side)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-top-200x300.png");
+      text-align: left;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>T</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-008-ref.xht
new file mode 100644
index 0000000000..b4b0e9f20a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-008-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div><img src="support/right-center-green-200x300.png" width="200" height="300" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-008.xht
new file mode 100644
index 0000000000..97582148bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-008.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: center' - 'vertical-rl' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="text-align-vrl-008-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: center' centers an inline box within a line box with respect to such line box's logical left and right sides (line-left and line-right sides)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-center-200x300.png");
+      direction: ltr;
+      text-align: center;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>C</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-010.xht
new file mode 100644
index 0000000000..d493243df7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-010.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: center' - 'vertical-rl' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="text-align-vrl-008-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: center' centers an inline box within a line box with respect to the line box's logical left and right sides (line-left and line-right sides)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-center-200x300.png");
+      direction: rtl;
+      text-align: center;
+      writing-mode: vertical-rl;
+    }
+
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>C</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-012.xht
new file mode 100644
index 0000000000..9abf3ee6c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-012.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: center' - 'vertical-rl' and initial, default 'direction'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="text-align-vrl-008-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: center' centers an inline box within a line box with respect to the line box's logical left and right sides (line-left and line-right sides)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-center-200x300.png");
+      text-align: center;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>C</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-014.xht
new file mode 100644
index 0000000000..fe60871ba8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-014.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: right' - 'vertical-rl' and 'direction: ltr'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vrl-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: right' aligns an inline box within a line box with respect to such line box's logical right side (line-right side)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-bottom-200x300.png");
+      direction: ltr;
+      text-align: right;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-016.xht
new file mode 100644
index 0000000000..ee37bdcd7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-016.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: right' - 'vertical-rl' and 'direction: rtl'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vrl-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: right' aligns an inline box within a line box with respect to the line box's logical right side (line-right side). Here, 'direction: rtl' has no impact, no influence on such alignment." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-bottom-200x300.png");
+      direction: rtl;
+      text-align: right;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-018.xht b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-018.xht
new file mode 100644
index 0000000000..9c9640535f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-align-vrl-018.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-align: right' - 'vertical-rl' and initial, default 'direction'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="direction-vrl-002-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-align: right' aligns an inline box within a line box with respect to such line box's logical right side (line-right side)." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 100px/1 Ahem; /* computes to 100px/100px */
+      height: 300px;
+      width: 200px;
+    }
+
+  div
+    {
+      background: red url("support/right-bottom-200x300.png");
+      text-align: right;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div>B</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-slr-009-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-slr-009-ref.xht
new file mode 100644
index 0000000000..6b4bb02de0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-slr-009-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+ <meta name="flags" content="image" />
+ <style type="text/css"><![CDATA[
+
+  img
+ {
+  padding-left: 78px;
+  vertical-align: top;
+ }
+
+ img + br + img
+ {
+  padding-left: 30px;
+ }
+
+ img + br + img + br + img
+ {
+  padding-left: 102px;
+ }
+ ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div><img src="support/swatch-fuchsia.png" width="48" height="60" alt="Image download support must be enabled" /><br /><img src="support/swatch-fuchsia.png" width="96" height="120" alt="Image download support must be enabled" /><br /><img src="support/swatch-fuchsia.png" width="24" height="30" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-slr-009.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-slr-009.xht
new file mode 100644
index 0000000000..1861d69891
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-slr-009.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-05 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-4/#text-baselines" />
+    <link rel="match" href="text-baseline-slr-009-ref.xht" />
+    <meta name="assert" content="When 'writing-mode' is 'sideways-lr', then the alphabetic baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      color: fuchsia;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: sideways-lr;
+    }
+
+    span#fuchsia120
+    {
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#fuchsia30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="slr"><span id="fuchsia30">É</span><span id="fuchsia120">É</span>É</div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-srl-008.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-srl-008.xht
new file mode 100644
index 0000000000..979e06a92f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-srl-008.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-05 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-4/#text-baselines" />
+    <link rel="match" href="text-baseline-vrl-006-ref.xht" />
+    <meta name="assert" content="When 'writing-mode' is 'sideways-rl', then the alphabetic baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      color: fuchsia;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: sideways-rl;
+    }
+
+    span#fuchsia120
+    {
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#fuchsia30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="srl">É<span id="fuchsia120">É</span><span id="fuchsia30">É</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-003.xht
new file mode 100644
index 0000000000..9dfdb31a58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-003.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" />
+    <link rel="match" href="text-baseline-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-mixed
+    {
+      color: orange;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+
+    span#blue120
+    {
+      color: blue;
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="lr-mixed">A<span id="blue120">B</span><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-005.xht
new file mode 100644
index 0000000000..f09f0e68f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-005.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" />
+    <link rel="match" href="text-baseline-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-upright
+    {
+      color: orange;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+    }
+
+    span#blue120
+    {
+      color: blue;
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="lr-upright">A<span id="blue120">B</span><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-007.xht
new file mode 100644
index 0000000000..2fe5b0e5d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vlr-007.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" />
+    <link rel="match" href="text-baseline-vrl-006-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-sideways
+    {
+      color: fuchsia;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+    }
+
+    span#fuchsia120
+    {
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#fuchsia30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="lr-sideways">É<span id="fuchsia120">É</span><span id="fuchsia30">É</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-002-ref.xht
new file mode 100644
index 0000000000..b352055e98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-002-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-01-29 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img
+    {
+      padding-left: 60px;
+    }
+
+    img + br + img
+    {
+      padding-left: 30px;
+    }
+
+    img + br + img + br + img
+    {
+      padding-left: 75px;
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+<div><img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-002.xht
new file mode 100644
index 0000000000..0696387f0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-002.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" />
+    <link rel="match" href="text-baseline-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      color: orange;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    span#blue120
+    {
+      color: blue;
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="rl-mixed">A<span id="blue120">B</span><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-004.xht
new file mode 100644
index 0000000000..e55227d3bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-004.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - central alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" />
+    <link rel="match" href="text-baseline-vrl-002-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      color: orange;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+
+    span#blue120
+    {
+      color: blue;
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
+
+  <div id="rl-upright">A<span id="blue120">B</span><span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-006-ref.xht
new file mode 100644
index 0000000000..d055313d4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-006-ref.xht
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-01-29 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+
+  img
+  {
+    padding-left: 54px;
+    vertical-align: top;
+  }
+  ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div><img src="support/swatch-fuchsia.png" width="48" height="60" alt="Image download support must be enabled" /><br /><img src="support/swatch-fuchsia.png" width="96" height="120" alt="Image download support must be enabled" /><br /><img src="support/swatch-fuchsia.png" width="24" height="30" alt="Image download support must be enabled" /></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-006.xht
new file mode 100644
index 0000000000..b676aee52d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-baseline-vrl-006.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-26 -->
+    <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines" />
+    <link rel="match" href="text-baseline-vrl-006-ref.xht" />
+    <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-sideways
+    {
+      color: fuchsia;
+      font: 60px/1.5 Ahem; /* computes to 60px/90px */
+      writing-mode: vertical-rl;
+      text-orientation: sideways;
+    }
+
+    span#fuchsia120
+    {
+      font-size: 2em; /* computes to 120px */
+    }
+
+    span#fuchsia30
+    {
+      font-size: 0.5em; /* computes to 30px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-sideways">É<span id="fuchsia120">É</span><span id="fuchsia30">É</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-all-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-all-001-manual.html
new file mode 100644
index 0000000000..32d7d48598
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-all-001-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>text-combine-upright:all (up to 2 chars)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright"/>
+<meta name="assert" content="text-combine-upright:digits will display two-character numbers and text horizontally."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/CSSTest/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; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+.test span { text-combine-upright: all; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if all numbers and the text GI are upright and not more than one cell wide.</p>
+<div class="test">
+<p lang="ja"><span>今日</span>は<span>5</span>月<span>12</span>日です。<span>GI</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-all-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-all-002-manual.html
new file mode 100644
index 0000000000..1ef4ec06c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-all-002-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>text-combine-upright:all (up to 4 chars)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright"/>
+<meta name="assert" content="text-combine-upright:all will display up to four-character numbers horizontally."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/CSSTest/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; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+.test span { text-combine-upright: all; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if all four numbers are upright and not more than one cell wide.</p>
+<div class="test">
+<p lang="ja"><span>W3C</span>会議は<span>2016</span>年<span>5</span>月<span>12</span>日です。<span>242</span>日目です。</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001-ref.html
new file mode 100644
index 0000000000..9c6745667e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no line break</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001.html
new file mode 100644
index 0000000000..5248c076df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, whitespace inside tcy with insufficient line space</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
+<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
+<meta name="assert" content="line should never be broken inside text-combine-upright text node">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+  <p>XXXXX<span class="tcy">X X</span>XXXXX</p>
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001a.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001a.html
new file mode 100644
index 0000000000..d4c4bd649e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-break-inside-001a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, white-space: pre with new line</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
+<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
+<meta name="assert" content="line should never be broken inside text-combine-upright text node">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy { white-space: pre; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+  <p>XXXXX<span class="tcy">X
+X</span>XXXXX</p>
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-001-ref.html
new file mode 100644
index 0000000000..b1971474e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no compression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical zeros in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">0</span></p>
+  <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-001.html
new file mode 100644
index 0000000000..304431bdaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-001-ref.html">
+<meta name="assert" content="text-combine-upright with character not wider than 1em should not trigger compression.">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical zeros in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">0</span></p>
+  <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-002-ref.html
new file mode 100644
index 0000000000..dd05022c07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of two characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">22</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-002.html
new file mode 100644
index 0000000000..2be48da2d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of two characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-002-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'hwid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">00</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-003-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-003-ref.html
new file mode 100644
index 0000000000..6c6ea736fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-003-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of three characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">333</span></p>
+  <p><span class="fake-tcy">333</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-003.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-003.html
new file mode 100644
index 0000000000..5b22fb3650
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of three characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-003-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'twid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">000</span></p>
+  <p><span class="fake-tcy">333</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-004-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-004-ref.html
new file mode 100644
index 0000000000..cb6aa00359
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-004-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of four characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">4444</span></p>
+  <p><span class="fake-tcy">4444</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-004.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-004.html
new file mode 100644
index 0000000000..c6bcb02320
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of four characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-004-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'qwid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">0000</span></p>
+  <p><span class="fake-tcy">4444</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005-ref.html
new file mode 100644
index 0000000000..a158be2647
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no compression for single full-width character</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">０</span></p>
+  <p><span class="fake-tcy">０</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005.html
new file mode 100644
index 0000000000..dbcb810abf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression for single full-width character</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-005-ref.html">
+<meta name="assert" content="text-combine-upright should not change a single full-width character">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">０</span></p>
+  <p><span class="fake-tcy">０</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005a.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005a.html
new file mode 100644
index 0000000000..918140e83c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-005a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression for single character with full-width transform</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-005-ref.html">
+<meta name="assert" content="text-combine-upright should not change a single full-width character">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+.tcy { text-transform: full-width; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">0</span></p>
+  <p><span class="fake-tcy">０</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006-ref.html
new file mode 100644
index 0000000000..8a083f6806
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression for two full-width characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">22</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006.html
new file mode 100644
index 0000000000..8ba98db9c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression for two full-width characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-006-ref.html">
+<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">００</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006a.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006a.html
new file mode 100644
index 0000000000..bebda644ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-006a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression for two characters with full-width transform</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-006-ref.html">
+<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+.tcy { text-transform: full-width; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">00</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-007-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-007-ref.html
new file mode 100644
index 0000000000..a0cba009aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-007-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright: all, fit any number of characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; height: 3.5em; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if the contents in the two blocks are identical.</p>
+<div class="test">
+  <p>一<span class="fake-tcy"></span>十</p>
+  <p>一<span class="fake-tcy"></span>十</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-007.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-007.html
new file mode 100644
index 0000000000..ca943f311c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-compression-007.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright: all, fit any number of characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-007-ref.html">
+<meta name="assert" content="text-combine-upright: all should allow any amount of text to be compressed in a 1em square">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; height: 3.5em; }
+.test > p { border: 1px solid black; }
+.tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the contents in the two blocks are identical.</p>
+<div class="test">
+  <p>一<span class="tcy">ニ三四五六七八九</span>十</p>
+  <p>一<span class="fake-tcy"></span>十</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-decorations-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-decorations-001.html
new file mode 100644
index 0000000000..49a03934de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-decorations-001.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes Test: The resulting composition is treated as a signel glyph for decorations</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout" title="9.1.2. Layout Rules">
+<link rel="match" href="reference/text-combine-upright-decorations-001.html">
+<meta name="assert" content="The resulting composition is treated as a signel glyph for decorations">
+<meta name="flags" content="ahem">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+    font: 50px/1 Ahem;
+    text-decoration-skip-ink: none;
+}
+.vlr {
+    writing-mode:vertical-lr;
+}
+.vrl {
+    writing-mode:vertical-rl;
+}
+.test, .ref {
+    border:solid thin;
+    margin:.2em;
+}
+p {
+    margin:0 .5em;
+}
+.tcy {
+    text-combine-upright:all;
+}
+.underline {
+    text-decoration:underline;
+}
+.overline {
+    text-decoration:overline;
+}
+.emphasis {
+    text-emphasis:filled;
+}
+</style>
+<p>This test asserts the resulting composition is treated as a single glyph for decorations.
+<p>Test passes if the following two boxes in each row are identical.
+<div id=container>
+    <div class=vlr>
+        <div class=test>
+            <p class=underline>X<span class=tcy>&#xA0;</span>X
+            <p class=overline>X<span class=tcy>&#xA0;</span>X
+            <p class=emphasis>X<span class=tcy>X</span>X
+        </div>
+        <div class=ref>
+            <p class=underline>X&#xA0;X
+            <p class=overline>X&#xA0;X
+            <p class=emphasis>XXX
+        </div>
+    </div>
+    <div class=vrl>
+        <div class=test>
+            <p class=underline>X<span class=tcy>&#xA0;</span>X
+            <p class=overline>X<span class=tcy>&#xA0;</span>X
+            <p class=emphasis>X<span class=tcy>X</span>X
+        </div>
+        <div class=ref>
+            <p class=underline>X&#xA0;X
+            <p class=overline>X&#xA0;X
+            <p class=emphasis>XXX
+        </div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-001-manual.html
new file mode 100644
index 0000000000..76a1798e48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-001-manual.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>text-combine-upright:digits</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#text-combine-upright"/>
+<meta name="assert" content="text-combine-upright:digits will display two-digit numbers horizontally, but not others."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/CSSTest/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; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; text-combine-upright: digits; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if 5 and 12 are upright, and 2016 and 242 are not.</p>
+<div class="test">
+<p lang="ja">今日は2016年5月12日です。242日目です。</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-002-manual.html
new file mode 100644
index 0000000000..1977d070e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-002-manual.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>text-combine-upright:digits 2</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#text-combine-upright"/>
+<meta name="assert" content="text-combine-upright:digits 2 will display two-digit numbers horizontally, but not others."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/CSSTest/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; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; text-combine-upright: digits 2; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if 5 and 12 are upright, and 2016 and 242 are not.</p>
+<div class="test">
+<p lang="ja">今日は2016年5月12日です。242日目です。</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-004-manual.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-004-manual.html
new file mode 100644
index 0000000000..b681a8a9a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-digits-004-manual.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>text-combine-upright:digits 4</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#text-combine-upright"/>
+<meta name="assert" content="text-combine-upright:digits 4 will display all numbers up to four digits long horizontally."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/CSSTest/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; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; text-combine-upright: digits 4; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if all numbers are upright.</p>
+<div class="test">
+<p lang="ja">今日は2016年5月12日です。242日目です。</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-inherit-all-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-inherit-all-001.html
new file mode 100644
index 0000000000..6bb0a13b39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-inherit-all-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes Test: text-combine-upright:all inherits</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<link rel="match" href="reference/text-combine-upright-inherit-all-001.html">
+<meta name="assert" content="This test checks text-combine-upright:all inherits">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+#container {
+    font-size:50px;
+}
+.vrl {
+    writing-mode:vertical-rl;
+}
+.tcy {
+    text-combine-upright:all;
+}
+</style>
+<p>Test passes if all two-digit numbers are <b>upright</b> in <b>horizontal</b> flow.
+<div id=container>
+    <div>66</div>
+    <div class=vrl><span class=tcy>66</span></div>
+    <div class=vrl><span class=tcy><span>66</span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-inherit-all-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-inherit-all-002.html
new file mode 100644
index 0000000000..f461c3e33e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-inherit-all-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Writing Modes Test: text-combine-upright :all</title>
+    <link rel="author" title="Shinsuke Matsuki" href="mailto:shinsuke.matsuki@access-company.com">
+    <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+    <link rel="match" href="reference/text-combine-upright-inherit-all-002.html">
+    <meta name="assert" content="This test checks text-combine-upright:all inherits through the containment hierarchy and interrupted (by a box boundary) text runs">
+    <style>
+    #container {
+        font-size:50px;
+    }
+    .vrl {
+        writing-mode:vertical-rl;
+    }
+    .tcy {
+        text-combine-upright:all;
+    }
+    </style>
+</head>
+<body>
+    <p>Test passes if the <b>line breaks</b> before <q>56</q>, and all digits are in<b>upright</b> in <b>horizontal</b> flow.
+    <div id=container>
+        <div class="vrl tcy">
+            <table>
+                <tr>
+                    <td>
+                        <div style="display: inline-table">
+                            <div style="display: inline-block">
+                                <div>12<span>56</span></div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-layout-rules-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-layout-rules-001.html
new file mode 100644
index 0000000000..71c08171b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-layout-rules-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: Layout rules of text-combine-upright</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-layout">
+<link rel="match" href="reference/text-combine-upright-layout-rules-001-ref.html">
+<meta name="assert" content="Anything outside the 1em-composition does not affect layout.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  writing-mode: vertical-rl;
+  font: 50px/1 Ahem;
+}
+#container > div {
+  margin:.2em;
+}
+.tcy {
+  text-combine-upright: all;
+  color:transparent;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there are 2 <strong>identical</strong> hollow squares.</p>
+<div id="container">
+  <div>AAA<br>A<span class="tcy">12345</span>A<br>AAA</div>
+  <div>AAA<br>A A<br>AAA</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-line-breaking-rules-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-line-breaking-rules-001-ref.html
new file mode 100644
index 0000000000..e1b7b34b56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-line-breaking-rules-001-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: line-breaking-rules</title>
+<link rel="author" title="Shinsuke Matsuki" href="mailto:shinsuke.matsuki@access-company.com">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+.vrl {
+    border:solid;
+    font-family:orientation;
+    font-size:60px;
+    height:2em;
+    margin:.2em;
+    writing-mode:vertical-rl;
+}
+.tcy {
+    text-combine-upright:all;
+}
+.ref {
+  white-space: nowrap;
+}
+</style>
+</head>
+<body>
+<p>Test passes two blocks look identical.
+If the right most columns do not match, the test is invalid.</p>
+<div class="vrl ref">ああああああああ<br>あああああああ<br>「<span class=tcy>12</span></div>
+<div class="vrl ref">ああああああああ<br>あああああああ<br>「<span class=tcy>12</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-line-breaking-rules-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-line-breaking-rules-001.html
new file mode 100644
index 0000000000..1cf8a7d622
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-line-breaking-rules-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: line-breaking-rules</title>
+<link rel="author" title="Shinsuke Matsuki" href="mailto:shinsuke.matsuki@access-company.com">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout" title="9.1.2. Layout Rules">
+<link rel="match" href="text-combine-upright-line-breaking-rules-001-ref.html">
+<meta name="assert" content="The bracket should be combined with following characters.">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+.vrl {
+    border:solid;
+    font-family:orientation;
+    font-size:60px;
+    height:2em;
+    margin:.2em;
+    writing-mode:vertical-rl;
+}
+.tcy {
+    text-combine-upright:all;
+}
+.ref {
+  white-space: nowrap;
+}
+</style>
+</head>
+<body>
+<p>Test passes two blocks look identical.
+If the right most columns do not match, the test is invalid.</p>
+<div class=vrl>あああああああああああああああ「<span class=tcy>12</span></div>
+<div class="vrl ref">ああああああああ<br>あああああああ<br>「<span class=tcy>12</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-digits-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-digits-001.html
new file mode 100644
index 0000000000..4f083c870b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-digits-001.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: parsing text-combine-upright for digits</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<meta name="assert" content="text-combine-upright supports `none`, `all`, `digits`, and `digits` followed by a digit in the range from 2 to 4.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#valid_digits {
+  text-combine-upright: digits;
+}
+
+#valid_digits_2 {
+  text-combine-upright: digits 2;
+}
+
+#valid_digits_3 {
+  text-combine-upright: digits 3;
+}
+
+#valid_digits_4 {
+  text-combine-upright: digits 4;
+}
+
+#valid_digits_positive2 {
+  text-combine-upright: digits +2;
+}
+
+#valid_digits_positive3_nospace {
+  text-combine-upright: digits+3;
+}
+
+#valid_digits_tab_4_nospace {
+  text-combine-upright: digits	4;
+}
+
+#valid_digits_lf_2_nospace {
+  text-combine-upright: digits
+2;
+}
+
+#valid_digits_tab_3 {
+  text-combine-upright: digits 	3;
+}
+
+#valid_digits_tab_lf_4_nospace {
+  text-combine-upright: digits
+4;
+}
+</style>
+</head>
+<body>
+
+<div id="valid_digits"></div>
+<div id="valid_digits_2"></div>
+<div id="valid_digits_3"></div>
+<div id="valid_digits_4"></div>
+<div id="valid_digits_positive2"></div>
+<div id="valid_digits_positive3_nospace"></div>
+<div id="valid_digits_tab_4_nospace"></div>
+<div id="valid_digits_lf_2_nospace"></div>
+<div id="valid_digits_tab_3"></div>
+<div id="valid_digits_tab_lf_4_nospace"></div>
+
+<div id="log"></div>
+
+<script>
+var getComputedValueFor = function (id) {
+  var element = document.getElementById(id);
+  return window.getComputedStyle(element).textCombineUpright;
+};
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_2'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits 2` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_3'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits 3` is `digits 3`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_4'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits 4` is `digits 4`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_positive2'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits +2` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_positive3_nospace'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits+3` is `digits 3`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_tab_4_nospace'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits[TAB]4` is `digits 4`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_lf_2_nospace'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits[LF]2` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_tab_3'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits [TAB]3` is `digits 3`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_tab_lf_4_nospace'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits[TAB][LF]4` is `digits 4`');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-digits-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-digits-002.html
new file mode 100644
index 0000000000..327ebdda11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-digits-002.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: parsing text-combine-upright with digits plus calc() computing to valid digits</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="help" href="http://www.w3.org/TR/css-values-3/#calc-notation">
+<meta name="assert" content="User Agents support text-combine-upright with values `digits calc(...)` if the expression inside `calc()` computes to a valid integer, which is either 2, 3, or 4.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#valid_digits_calc_1_plus_1 {
+  text-combine-upright: digits calc(1 + 1);
+}
+
+#valid_digits_calc_1_plus_1_plus_1 {
+  text-combine-upright: digits calc(1 + 1 + 1);
+}
+
+#valid_digits_calc_2_plus_2 {
+  text-combine-upright: digits calc(2 + 2);
+}
+
+#valid_digits_calc_4_minus_2 {
+  text-combine-upright: digits calc(4 - 2);
+}
+
+#valid_digits_calc_6_minus_3 {
+  text-combine-upright: digits calc(6 - 3);
+}
+
+#valid_digits_calc_7_minus_1_minus_2 {
+  text-combine-upright: digits calc(7 - 1 - 2);
+}
+
+#valid_digits_calc_2_times_1 {
+  text-combine-upright: digits calc(2 * 1);
+}
+
+#valid_digits_calc_3_times_1 {
+  text-combine-upright: digits calc(3 * 1);
+}
+
+#valid_digits_calc_2_times_2_times_1 {
+  text-combine-upright: digits calc(2 * 2 * 1);
+}
+
+#valid_digits_calc_4_dividedby_2 {
+  text-combine-upright: digits calc(4 / 2);
+}
+
+#valid_digits_calc_4_dividedby_2 {
+  text-combine-upright: digits calc(6 / 2);
+}
+
+#valid_digits_calc_24_dividedby_3_dividedby_2 {
+  text-combine-upright: digits calc(24 / 3 / 2);
+}
+
+</style>
+</head>
+<body>
+
+<div id="valid_digits_calc_1_plus_1"></div>
+<div id="valid_digits_calc_1_plus_1_plus_1"></div>
+<div id="valid_digits_calc_2_plus_2"></div>
+<div id="valid_digits_calc_4_minus_2"></div>
+<div id="valid_digits_calc_6_minus_3"></div>
+<div id="valid_digits_calc_7_minus_1_minus_2"></div>
+<div id="valid_digits_calc_2_times_1"></div>
+<div id="valid_digits_calc_3_times_1"></div>
+<div id="valid_digits_calc_2_times_2_times_1"></div>
+<div id="valid_digits_calc_4_dividedby_2"></div>
+<div id="valid_digits_calc_4_dividedby_2"></div>
+<div id="valid_digits_calc_24_dividedby_3_dividedby_2"></div>
+
+<div id="log"></div>
+
+<script>
+var getComputedValueFor = function (id) {
+  var element = document.getElementById(id);
+  return window.getComputedStyle(element).textCombineUpright;
+};
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_1_plus_1'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits calc(1 + 1)` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_1_plus_1_plus_1'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits calc(1 + 1 + 1)` is `digits 3`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_2_plus_2'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits calc(2 + 2)` is `digits 4`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_4_minus_2'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits calc(4 - 2)` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_6_minus_3'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits calc(6 - 3)` is `digits 3`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_7_minus_1_minus_2'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits calc(7 - 1 - 2)` is `digits 4`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_2_times_1'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits calc(2 * 1)` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_3_times_1'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits calc(3 * 1)` is `digits 3`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_2_times_2_times_1'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits calc(2 * 2 * 1)` is `digits 4`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_4_dividedby_2'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits calc(4 / 2)` is `digits 2`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_4_dividedby_2'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits calc(6 / 2)` is `digits 3`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_digits_calc_24_dividedby_3_dividedby_2'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits calc(24 / 3 / 2)` is `digits 4`');
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-invalid-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-invalid-001.html
new file mode 100644
index 0000000000..beb54108a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-invalid-001.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: parsing text-combine-upright with invalid values</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<meta name="assert" content="text-combine-upright doesn't support undefined keywords and out-of-range integer, and numbers.">
+<meta name="flags" content="dom invalid">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#invalid_foo {
+  text-decoration-upright: foo;
+}
+
+#invalid_all_none {
+  text-decoration-upright: all none;
+}
+
+#invalid_none_digits {
+  text-decoration-upright: none digits;
+}
+
+#invalid_digits_bar {
+  text-decoration-upright: digits bar;
+}
+
+#invalid_digits_4_none {
+  text-decoration-upright: digits 4 none;
+}
+
+#invalid_digits2 {
+  text-decoration-upright: digits2;
+}
+
+#invalid_digits_1 {
+  text-decoration-upright: digits 1;
+}
+
+#invalid_digits_positive5 {
+  text-decoration-upright: digits +5;
+}
+
+#invalid_digits_2_00 {
+  text-decoration-upright: digits 2.00;
+}
+
+#invalid_digits_2_e_0 {
+  text-decoration-upright: digits 2e0;
+}
+
+#invalid_digits_positive2_e_0 {
+  text-decoration-upright: digits +2e0;
+}
+
+#invalid_digits_3_e_positive0 {
+  text-decoration-upright: digits 3e+0;
+}
+
+#invalid_digits_3_e_negative0 {
+  text-decoration-upright: digits 3e-0;
+}
+
+#invalid_digits_positive4_e_positive0 {
+  text-decoration-upright: digits +4e+0;
+}
+
+#invalid_digits_positive4_e_negative0 {
+  text-decoration-upright: digits +4e-0;
+}
+</style>
+</head>
+<body>
+
+<div id="invalid_foo"></div>
+<div id="invalid_all_none"></div>
+<div id="invalid_none_digits"></div>
+<div id="invalid_digits_bar"></div>
+<div id="invalid_digits_4_none"></div>
+<div id="invalid_digits2"></div>
+<div id="invalid_digits_1"></div>
+<div id="invalid_digits_positive5"></div>
+<div id="invalid_digits_2_00"></div>
+<div id="invalid_digits_2_e_0"></div>
+<div id="invalid_digits_positive2_e_0"></div>
+<div id="invalid_digits_3_e_positive0"></div>
+<div id="invalid_digits_3_e_negative0"></div>
+<div id="invalid_digits_positive4_e_positive0"></div>
+<div id="invalid_digits_positive4_e_negative0"></div>
+
+<div id="log"></div>
+
+<script>
+var getComputedValueFor = function (id) {
+  var element = document.getElementById(id);
+  return window.getComputedStyle(element).textCombineUpright;
+};
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_foo'), 'none');
+}, 'Computed value for `text-combine-upright: foo` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_all_none'), 'none');
+}, 'Computed value for `text-combine-upright: all none` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_none_digits'), 'none');
+}, 'Computed value for `text-combine-upright: none digits` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_bar'), 'none');
+}, 'Computed value for `text-combine-upright: digits bar` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_4_none'), 'none');
+}, 'Computed value for `text-combine-upright: digits 4 none` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits2'), 'none');
+}, 'Computed value for `text-combine-upright: digits2` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_1'), 'none');
+}, 'Computed value for `text-combine-upright: digits 1` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_positive5'), 'none');
+}, 'Computed value for `text-combine-upright: digits +5` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_2_00'), 'none');
+}, 'Computed value for `text-combine-upright: digits 2.00` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_2_e_0'), 'none');
+  assert_not_equals(getComputedValueFor('invalid_digits_2_e_0'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits 2e0` is not `digits 2` but `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_positive2_e_0'), 'none');
+  assert_not_equals(getComputedValueFor('invalid_digits_positive2_e_0'), 'digits 2');
+}, 'Computed value for `text-combine-upright: digits +2e0` is not `digits 2` but `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_3_e_positive0'), 'none');
+  assert_not_equals(getComputedValueFor('invalid_digits_3_e_positive0'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits 3e+0` is not `digits 3` but `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_3_e_negative0'), 'none');
+  assert_not_equals(getComputedValueFor('invalid_digits_3_e_negative0'), 'digits 3');
+}, 'Computed value for `text-combine-upright: digits 3e-0` is not `digits 3` but `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_positive4_e_positive0'), 'none');
+  assert_not_equals(getComputedValueFor('invalid_digits_positive4_e_positive0'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits +4e+0` is not `digits 4` but `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_positive4_e_negative0'), 'none');
+  assert_not_equals(getComputedValueFor('invalid_digits_positive4_e_negative0'), 'digits 4');
+}, 'Computed value for `text-combine-upright: digits +4e-0` is not `digits 4` but `none`');
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-invalid-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-invalid-002.html
new file mode 100644
index 0000000000..08a0978eaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-invalid-002.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: parsing text-combine-upright with digits plus calc() computing to invalid digits</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="help" href="http://www.w3.org/TR/css-values-3/#calc-notation">
+<meta name="assert" content="User Agents ignore text-combine-upright with values `digits calc(...)` if the expression inside `calc()` computes to either numbers or out-of-range integers.">
+<meta name="flags" content="dom invalid">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#invalid_digits_calc_0_plus_1 {
+  text-combine-upright: digits calc(0 + 1);
+}
+
+#invalid_digits_calc_2_plus_3 {
+  text-combine-upright: digits calc(2 + 3);
+}
+
+#invalid_digits_calc_4_minus_3 {
+  text-combine-upright: digits calc(4 - 3);
+}
+
+#invalid_digits_calc_10_minus_3 {
+  text-combine-upright: digits calc(10 - 3);
+}
+
+#invalid_digits_calc_3_times_1_0 {
+  text-combine-upright: digits calc(3 * 1.0);
+}
+
+#invalid_digits_calc_2_0_times_2 {
+  text-combine-upright: digits calc(2.0 * 2);
+}
+
+#invalid_digits_calc_2_dividedby_1_0 {
+  text-combine-upright: digits calc(2 / 1.0);
+}
+
+#invalid_digits_calc_4_0_dividedby_2 {
+  text-combine-upright: digits calc(4.0 / 2);
+}
+
+#invalid_digits_calc_2_e_0_times_2_e_positive0 {
+  text-combine-upright: digits calc(2e0 * 2e+0);
+}
+
+#invalid_digits_calc_2_e_2_times_2_e_negative2 {
+  text-combine-upright: digits calc(2e2 * 2e-2);
+}
+
+#invalid_digits_calc_4_e_positive2_dividedby_positive2_e_2 {
+  text-combine-upright: digits calc(4e+2 / +2e2);
+}
+</style>
+</head>
+<body>
+
+<div id="invalid_digits_calc_0_plus_1"></div>
+<div id="invalid_digits_calc_2_plus_3"></div>
+<div id="invalid_digits_calc_4_minus_3"></div>
+<div id="invalid_digits_calc_10_minus_3"></div>
+<div id="invalid_digits_calc_3_times_1_0"></div>
+<div id="invalid_digits_calc_2_0_times_2"></div>
+<div id="invalid_digits_calc_2_dividedby_1_0"></div>
+<div id="invalid_digits_calc_4_0_dividedby_2"></div>
+<div id="invalid_digits_calc_2_e_0_times_2_e_positive0"></div>
+<div id="invalid_digits_calc_2_e_2_times_2_e_negative2"></div>
+<div id="invalid_digits_calc_4_e_positive2_dividedby_positive2_e_2"></div>
+
+<div id="log"></div>
+
+<script>
+var getComputedValueFor = function (id) {
+  var element = document.getElementById(id);
+  return window.getComputedStyle(element).textCombineUpright;
+};
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_0_plus_1'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(0 + 1)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_2_plus_3'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(2 + 3)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_4_minus_3'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(4 - 3)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_10_minus_3'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(10 - 3)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_3_times_1_0'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(3 * 1.0)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_2_0_times_2'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(2.0 * 2)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_2_dividedby_1_0'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(2 / 1.0)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_4_0_dividedby_2'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(4.0 / 2)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_2_e_0_times_2_e_positive0'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(2e0 * 2e+0)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_2_e_2_times_2_e_negative2'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(2e2 * 2e-2)` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('invalid_digits_calc_4_e_positive2_dividedby_positive2_e_2'), 'none');
+}, 'Computed value for `text-combine-upright: digits calc(4e+2 / +2e2)` is `none`');
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-valid-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-valid-001.html
new file mode 100644
index 0000000000..f66ffbd40e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-parsing-valid-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: parsing text-combine-upright with valid values</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<meta name="assert" content="text-combine-upright supports `none`, `all`, `digits`, and `digits` followed by a digit in the range from 2 to 4.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#valid_none {
+  text-combine-upright: none;
+}
+
+#valid_all {
+  text-combine-upright: all;
+}
+
+#valid_initial {
+  text-combine-upright: initial;
+}
+
+#valid_inherit_outer {
+  text-combine-upright: all;
+}
+
+#valid_inherit_inner {
+  text-combine-upright: inherit;
+}
+
+#valid_unset_outer {
+  text-combine-upright: all;
+}
+
+#valid_unset_inner {
+  text-combine-upright: unset;
+}
+</style>
+</head>
+<body>
+
+<div id="valid_none"></div>
+<div id="valid_all"></div>
+
+<div id="valid_initial"></div>
+
+<div id="valid_inherit_outer">
+  <div id="valid_inherit_inner"></div>
+</div>
+
+<div id="valid_unset_outer">
+  <div id="valid_unset_inner"></div>
+</div>
+
+<div id="log"></div>
+
+<script>
+var getComputedValueFor = function (id) {
+  var element = document.getElementById(id);
+  return window.getComputedStyle(element).textCombineUpright;
+};
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_none'), 'none');
+}, 'Computed value for `text-combine-upright: none` is `none`');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_all'), 'all');
+}, 'Computed value for `text-combine-upright: all` is `all`');
+
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_initial'), 'none');
+}, 'Computed value for `text-combine-upright: initial` is `none`');
+
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_inherit_outer'), 'all');
+  assert_equals(getComputedValueFor('valid_inherit_inner'), 'all');
+}, 'Computed value for `text-combine-upright: inherit` is `all` which is inherited from the parent element');
+
+test(function () {
+  assert_equals(getComputedValueFor('valid_unset_outer'), 'all');
+  assert_equals(getComputedValueFor('valid_unset_inner'), 'all');
+}, 'Computed value for `text-combine-upright: unset` is `all` which is inherited from the parent element');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-001-ref.html
new file mode 100644
index 0000000000..e3b1b1b6b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-001-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS Writing Modes reference</title>
+
+<style>
+div {
+  writing-mode: vertical-rl;
+  font: 32px serif;
+  margin: 1em;
+  padding: .25em;
+  border: 1px solid gray;
+}
+span {
+  text-combine-upright: all;
+}
+</style>
+
+Both boxes should render the same:
+
+<div>
+<p>foo<span>1</span>bar</p>
+<p>foo<span>12</span>bar</p>
+<p>foo<span>123</span>bar</p>
+<p>foo<span>1234</span>bar</p>
+</div>
+
+<div>
+<p>foo<span>1</span>bar</p>
+<p>foo<span>12</span>bar</p>
+<p>foo<span>123</span>bar</p>
+<p>foo<span>1234</span>bar</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-001.html
new file mode 100644
index 0000000000..d67e3cc2ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS Writing Modes test: text-combine-upright with RTL text</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright"/>
+<link rel="match" href="text-combine-upright-rtl-001-ref.html"/>
+<meta name="assert" content="text-combine-upright renders RTL content in the proper place"/>
+
+<style>
+div {
+  writing-mode: vertical-rl;
+  font: 32px serif;
+  margin: 1em;
+  padding: .25em;
+  border: 1px solid gray;
+}
+span {
+  text-combine-upright: all;
+}
+#test span {
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}
+</style>
+
+Both boxes should render the same:
+
+<div>
+<p>foo<span>1</span>bar</p>
+<p>foo<span>12</span>bar</p>
+<p>foo<span>123</span>bar</p>
+<p>foo<span>1234</span>bar</p>
+</div>
+
+<div id=test>
+<p>foo<span>1</span>bar</p>
+<p>foo<span>21</span>bar</p>
+<p>foo<span>321</span>bar</p>
+<p>foo<span>4321</span>bar</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-002-ref.html
new file mode 100644
index 0000000000..6fb4feae9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-002-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS Writing Modes reference</title>
+
+<style>
+div {
+  writing-mode: vertical-rl;
+  font: 32px serif;
+  margin: 1em;
+  padding: .25em;
+  border: 1px solid gray;
+}
+span {
+  text-combine-upright: all;
+}
+#ref span {
+  unicode-bidi: bidi-override;
+  direction: ltr;
+}
+</style>
+
+Both boxes should render the same:
+
+<div id=ref>
+<p>foo<span>א</span>bar</p>
+<p>foo<span>בא</span>bar</p>
+<p>foo<span>גבא</span>bar</p>
+<p>foo<span>דגבא</span>bar</p>
+</div>
+
+<div id=ref>
+<p>foo<span>א</span>bar</p>
+<p>foo<span>בא</span>bar</p>
+<p>foo<span>גבא</span>bar</p>
+<p>foo<span>דגבא</span>bar</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-002.html
new file mode 100644
index 0000000000..f4e2dc193e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-rtl-002.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS Writing Modes test: text-combine-upright with RTL text</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright"/>
+<link rel="match" href="text-combine-upright-rtl-002-ref.html"/>
+<meta name="assert" content="text-combine-upright renders RTL content in the proper place"/>
+
+<style>
+div {
+  writing-mode: vertical-rl;
+  font: 32px serif;
+  margin: 1em;
+  padding: .25em;
+  border: 1px solid gray;
+}
+span {
+  text-combine-upright: all;
+}
+#ref span {
+  unicode-bidi: bidi-override;
+  direction: ltr;
+}
+</style>
+
+Both boxes should render the same:
+
+<div id=ref>
+<p>foo<span>א</span>bar</p>
+<p>foo<span>בא</span>bar</p>
+<p>foo<span>גבא</span>bar</p>
+<p>foo<span>דגבא</span>bar</p>
+</div>
+
+<div>
+<p>foo<span>א</span>bar</p>
+<p>foo<span>אב</span>bar</p>
+<p>foo<span>אבג</span>bar</p>
+<p>foo<span>אבגד</span>bar</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-shadow-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-shadow-ref.html
new file mode 100644
index 0000000000..c56fb9d034
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-shadow-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Reference: text-combine-upright: all with text-shadow</title>
+    <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+    <link rel="stylesheet" href="support/tcy.css">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+    div {
+        text-shadow: 4px 10px 0px red;
+        font: 50px/1 Ahem;
+        writing-mode: vertical-rl;
+    }
+    </style>
+</head>
+<body>
+    <p>PASS if the text-shadow (red) is placed at the lower right of the text (black).</p>
+    <div>XX<span class="fake-tcy">X</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-shadow.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-shadow.html
new file mode 100644
index 0000000000..6b72ea34aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-shadow.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>text-combine-upright: all with text-shadow</title>
+    <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+    <link rel="stylesheet" href="support/tcy.css">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout" title="9.1.2. Layout Rules">
+    <link rel="match" href="text-combine-upright-shadow-ref.html">
+    <style>
+    div {
+        text-shadow: 4px 10px 0px red;
+        font: 50px/1 Ahem;
+        writing-mode: vertical-rl;
+    }
+    </style>
+</head>
+<body>
+    <p>PASS if the text-shadow (red) is placed at the lower right of the text (black).</p>
+    <div>XX<span class="tcy">X</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-sideways-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-sideways-001.html
new file mode 100644
index 0000000000..8fa22a7df8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-sideways-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS test: text-combine-upright has no effect in sideways writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright"/>
+<link rel="match" href="reference/text-combine-upright-sideways-001-ref.html"/>
+<style>
+.test {
+  font: 32px sans-serif;
+  writing-mode: sideways-rl;
+}
+.combined {
+  text-combine-upright: all;
+}
+</style>
+<body lang="zh">
+<p>Test passes if the digits are NOT rotated or compressed to appear horizontally</p>
+<div class="test">中文<span class="combined">1234</span>中文</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-sideways-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-sideways-002.html
new file mode 100644
index 0000000000..4d56220bba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-sideways-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS test: text-combine-upright has no effect in sideways writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright"/>
+<link rel="match" href="reference/text-combine-upright-sideways-002-ref.html"/>
+<style>
+.test {
+  font: 32px sans-serif;
+  writing-mode: sideways-lr;
+}
+.combined {
+  text-combine-upright: all;
+}
+</style>
+<body>
+<p>Test passes if the digits are NOT rotated or compressed to appear horizontally</p>
+<div class="test">AB<span class="combined">123</span>CD</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-001.html
new file mode 100644
index 0000000000..4c7788d36c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: all</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<link rel="match" href="reference/text-combine-upright-value-single-character.html">
+<meta name="assert" content="'text-combine-upright: all' rotates the composition even if tate-chu-yoko">
+<style>
+@font-face {
+  font-family: tcu-font;
+  src: url("/fonts/tcu-font.woff");
+}
+
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  font-family: tcu-font;
+}
+
+.tcy {
+  text-combine-upright: all;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> white triangles.</p>
+
+<div class="test">
+  <p><span class="tcy">2</span></p>
+  <p>3</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-002.html
new file mode 100644
index 0000000000..14360bdb92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: all</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x1-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x1-notref.html">
+<meta name="assert" content="'text-combine-upright: all' combines all characters inside the element which the declaration applied horizontally.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: all;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p><span class="tcy">ABC</span></p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-003.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-003.html
new file mode 100644
index 0000000000..2f0de9bd8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-all-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: all</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x1-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x1-notref.html">
+<meta name="assert" content="'text-combine-upright: all' combines all characters inside the element which the declaration applied horizontally.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: all;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p><span class="tcy">ABCDE</span></p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-001.html
new file mode 100644
index 0000000000..cde3b8e44e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 2</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/text-combine-upright-value-single-character.html">
+<meta name="assert" content="the 'digits' values in text-combine-upright rotates the composition even if there is only one character inside tate-chu-yoko.">
+<style>
+@font-face {
+  font-family: tcu-font;
+  src: url("/fonts/tcu-font.woff");
+}
+
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  font-family: tcu-font;
+}
+
+.tcy {
+  text-combine-upright: digits 2;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> white triangles.</p>
+
+<div class="test">
+  <p><span class="tcy">2</span></p>
+  <p>3</p>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-002.html
new file mode 100644
index 0000000000..7d39b121a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 2 + two digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x1-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x1-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 2' combines two ASCII digits horizontally.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 2;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p><span class="tcy">12</span></p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-003.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-003.html
new file mode 100644
index 0000000000..8505e95498
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits2-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 2 + three digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x3-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x3-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 2' does not combine digits that are greater than two.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 2;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p><span class="tcy">123</span></p>
+  <p>xxx</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-001.html
new file mode 100644
index 0000000000..1cdd1a6a74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 3 + two digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x1-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x1-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 3' combines two ASCII digits horizontally.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 3;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p><span class="tcy">12</span></p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-002.html
new file mode 100644
index 0000000000..8c9a8844bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 3 + three digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x1-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x1-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 3' combines three ASCII digits horizontally.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 3;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p><span class="tcy">123</span></p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-003.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-003.html
new file mode 100644
index 0000000000..ec8181926c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits3-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 3 + four digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x4-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x4-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 3' does not combine digits that are greater than three.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 3;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p><span class="tcy">1234</span></p>
+  <p>xxxx</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-001.html
new file mode 100644
index 0000000000..768d476e23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 4 + three digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x1-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x1-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 4' combines three ASCII digits horizontally.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 4;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p><span class="tcy">123</span></p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-002.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-002.html
new file mode 100644
index 0000000000..e4cf8433eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 4 + four digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x1-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x1-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 4' combines four ASCII digits horizontally.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 4;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black squares.</p>
+
+<div class="test">
+  <p><span class="tcy">1234</span></p>
+  <p>x</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-003.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-003.html
new file mode 100644
index 0000000000..a05fc974aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-digits4-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: digits 4 + five digits</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x5-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x5-notref.html">
+<meta name="assert" content="'text-combine-upright: digits 4' does not combine digits that are greater than four.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: digits 4;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p><span class="tcy">12345</span></p>
+  <p>xxxxx</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-none-001.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-none-001.html
new file mode 100644
index 0000000000..032e89a90c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-upright-value-none-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright: none</title>
+<link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<link rel="match" href="reference/vertical-ahem-1x3-ref.html">
+<link rel="mismatch" href="reference/horizontal-ahem-1x3-notref.html">
+<meta name="assert" content="'text-combine-upright: none' does not combine any characters in any circumstance.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  font-size: 5em;
+  line-height: 1;
+  font-family: Ahem;
+}
+
+.tcy {
+  text-combine-upright: none;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if there are 2 <strong>identical</strong> black rectangles.</p>
+
+<div class="test">
+  <p><span class="tcy">A01</span></p>
+  <p>xxx</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-combine-webkit-crash.html b/testing/web-platform/tests/css/css-writing-modes/text-combine-webkit-crash.html
new file mode 100644
index 0000000000..228f066f23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-combine-webkit-crash.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>text-combine-upright and -webkit-text-combine do not crash when used together</title>
+<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"/>
+<link rel="help" href="https://crbug.com/1355087"/>
+<body>
+<div id="div"></div>
+<script>
+  div.style.setProperty("-webkit-text-combine", "none");
+  div.style.setProperty("text-combine-upright", "all");
+  div.style.setProperty("background-color", "white");
+  div.offsetTop;
+  div.style.setProperty("background-color", "black");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-003.xht
new file mode 100644
index 0000000000..86ce41e825
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-003.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' and 'text-orientation: sideways' in a 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: underline' generates a line on the lefthand side of text when 'text-orientation' is set to 'sideways' in a 'vertical-lr' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: underline;
+      text-orientation: sideways;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are rotated 90° clockwise and if a vertical straight blue line is on their <strong>lefthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-005.xht
new file mode 100644
index 0000000000..70a514d0c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-005.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: overline' and 'text-orientation: sideways' in a 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: overline' generates a line on the righthand side of text when 'text-orientation' is set to 'sideways' in a 'vertical-lr' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: overline;
+      text-orientation: sideways;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are rotated 90° clockwise and if a vertical straight blue line is on their <strong>righthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-007.xht
new file mode 100644
index 0000000000..6ba8a6a1fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vlr-007.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: line-through' and 'text-orientation: sideways' in a 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: line-through' generates a line that passes through the middle of glyphs when 'text-orientation' is set to 'sideways' in a 'vertical-lr' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: line-through;
+      text-orientation: sideways;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are rotated 90° clockwise and if a vertical straight blue line passes <strong>through the middle</strong> of those glyphs.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-002.xht
new file mode 100644
index 0000000000..8e2df36d40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-002.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' and 'text-orientation: sideways' in a 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: underline' generates a line on the lefthand side of text when 'text-orientation' is set to 'sideways' in a 'vertical-rl' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: underline;
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are rotated 90° clockwise and if a vertical straight blue line is on their <strong>lefthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-004.xht
new file mode 100644
index 0000000000..30ee88ae20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-004.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: overline' and 'text-orientation: sideways' in a 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: overline' generates a line on the righthand side of text when 'text-orientation' is set to 'sideways' in a 'vertical-rl' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: overline;
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are rotated 90° clockwise and if a vertical straight blue line is on their <strong>righthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-006.xht
new file mode 100644
index 0000000000..9728ce6ae1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-sideways-vrl-006.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: line-through' and 'text-orientation: sideways' in a 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: line-through' generates a line that passes through the middle of glyphs when 'text-orientation' is set to 'sideways' in a 'vertical-rl' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: line-through;
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are rotated 90° clockwise and if a vertical straight blue line passes <strong>through the middle</strong> of those glyphs.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-003.xht
new file mode 100644
index 0000000000..bf91d7fe5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-003.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' and 'text-orientation: upright' in a 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: underline' generates a line on the lefthand side of text when 'text-orientation' is set to 'upright' in a 'vertical-lr' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: underline;
+      text-orientation: upright;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are translated in a vertical axis and if a vertical straight blue line is on their <strong>lefthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-005.xht
new file mode 100644
index 0000000000..3f83366ef6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-005.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: overline' and 'text-orientation: upright' in a 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: overline' generates a line on the righthand side of text when 'text-orientation' is set to 'upright' in a 'vertical-lr' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: overline;
+      text-orientation: upright;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are translated in a vertical axis and if a vertical straight blue line is on their <strong>righthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-007.xht
new file mode 100644
index 0000000000..3bfff8bc35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vlr-007.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: line-through' and 'text-orientation: upright' in a 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: line-through' generates a line that passes through the middle of glyphs when 'text-orientation' is set to 'upright' in a 'vertical-lr' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: line-through;
+      text-orientation: upright;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are translated in a vertical axis and if a vertical straight blue line passes <strong>through the middle</strong> of those glyphs.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-002.xht
new file mode 100644
index 0000000000..7948b099fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-002.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' and 'text-orientation: upright' in a 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: underline' generates a line on the lefthand side of text when 'text-orientation' is set to 'upright' in a 'vertical-rl' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: underline;
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are translated in a vertical axis and if a vertical straight blue line is on their <strong>lefthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-004.xht
new file mode 100644
index 0000000000..1f46c91e5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-004.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: overline' and 'text-orientation: upright' in a 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: overline' generates a line on the righthand side of text when 'text-orientation' is set to 'upright' in a 'vertical-rl' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: overline;
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are translated in a vertical axis and if a vertical straight blue line is on their <strong>righthand side</strong>.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-006.xht
new file mode 100644
index 0000000000..d4d9691153
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-decoration-upright-vrl-006.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: line-through' and 'text-orientation: upright' in a 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />
+
+  <meta content="This test checks that 'text-decoration: line-through' generates a line that passes through the middle of glyphs when 'text-orientation' is set to 'upright' in a 'vertical-rl' writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: blue;
+      font: 2.5em/1.5 serif; /* computes to 40px/60px */
+      text-decoration: line-through;
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if glyphs of the words "Text sample" are translated in a vertical axis and if a vertical straight blue line passes <strong>through the middle</strong> of those glyphs.</p>
+
+  <div><span>Text sample</span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-003-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-003-ref.xht
new file mode 100644
index 0000000000..12473d5b17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-003-ref.xht
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      position: relative;
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-003.xht
new file mode 100644
index 0000000000..dfae9913f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-003.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: ltr' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-003-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: ltr' and with 'writing-mode: vertical-lr' starts at top toward the bottom and progress toward the bottom." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-1col-2row-320x320.png");
+      direction: ltr;
+      text-indent: 80px;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-005-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-005-ref.xht
new file mode 100644
index 0000000000..7bb9810e9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-005-ref.xht
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      position: relative;
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-005.xht
new file mode 100644
index 0000000000..06e723c52f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-005.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: rtl' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-005-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-lr' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-1col-3row-320x320.png");
+      direction: rtl;
+      text-indent: 80px;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-007.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-007.xht
new file mode 100644
index 0000000000..a1e757a9d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-007.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: ltr' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-003-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-1col-2row-320x320.png");
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-009.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-009.xht
new file mode 100644
index 0000000000..b4c16483d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-009.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: rtl' in 'vertical-lr' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-005-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height. 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-lr' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-1col-3row-320x320.png");
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-011-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-011-ref.xht
new file mode 100644
index 0000000000..7f08b08d60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-011-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      left: 16px; /* p's margin-left (1em) */
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-011.xht
new file mode 100644
index 0000000000..f28a4124e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-011.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: ltr' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-011-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: ltr' and with 'writing-mode: vertical-lr' starts at top toward the bottom and progress toward the bottom." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-1col-2row-320x320.png");
+      direction: ltr;
+      text-indent: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-013-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-013-ref.xht
new file mode 100644
index 0000000000..96ae0f152d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-013-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      margin-left: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      left: 16px; /* p's margin-left (1em) */
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-013.xht
new file mode 100644
index 0000000000..24cd43d1dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-013.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: rtl' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-013-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-lr' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-1col-3row-320x320.png");
+      direction: rtl;
+      text-indent: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-015.xht
new file mode 100644
index 0000000000..3eebadc212
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-015.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: ltr' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-011-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-1col-2row-320x320.png");
+      direction: ltr;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-017.xht
new file mode 100644
index 0000000000..5940955acc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vlr-017.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: rtl' in 'vertical-lr' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vlr-013-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height. 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-lr' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-1col-3row-320x320.png");
+      direction: rtl;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-002-ref.xht
new file mode 100644
index 0000000000..1234fe64b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-002-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      left: 240px;
+      position: relative;
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-002.xht
new file mode 100644
index 0000000000..ec76b6c4e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-002.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: ltr' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vrl-002-ref.xht" />
+
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: ltr' and with 'writing-mode: vertical-rl' starts at top toward the bottom and progress toward the bottom." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-4col-2row-320x320.png");
+      direction: ltr;
+      text-indent: 80px;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-004-ref.xht
new file mode 100644
index 0000000000..a491531c57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-004-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      left: 240px;
+      position: relative;
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-004.xht
new file mode 100644
index 0000000000..736fd74821
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-004.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: rtl' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vrl-004-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-rl' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-4col-3row-320x320.png");
+      direction: rtl;
+      text-indent: 80px;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-006.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-006.xht
new file mode 100644
index 0000000000..cfd7a6daee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-006.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: ltr' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-009-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-4col-2row-320x320.png") top right;
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-008-ref.xht
new file mode 100644
index 0000000000..2c269fa096
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-008-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+    img#green-square
+    {
+      left: 80px;
+      position: relative;
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-008.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-008.xht
new file mode 100644
index 0000000000..7e5eee802a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-008.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: rtl' in 'vertical-rl' writing-mode (orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vrl-008-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height. 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-rl' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-4col-3row-320x320.png") top right;
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-010-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-010-ref.xht
new file mode 100644
index 0000000000..f39e0ca401
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-010-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      right: 16px; /* p's margin-left (1em) */
+      top: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-010.xht
new file mode 100644
index 0000000000..383ea8aeef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-010.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: ltr' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vrl-010-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: ltr' and with 'writing-mode: vertical-rl' starts at top toward the bottom and progress toward the bottom." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-4col-2row-320x320.png");
+      direction: ltr;
+      text-indent: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-012-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-012-ref.xht
new file mode 100644
index 0000000000..f074e57292
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-012-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      direction: rtl;
+    }
+
+  div
+    {
+      margin-right: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img#green-square
+    {
+      position: relative;
+      right: 16px; /* p's margin-left (1em) */
+      top: 160px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img id="green-square" src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-012.xht
new file mode 100644
index 0000000000..ba28784288
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-012.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with absolute unit, 'direction: rtl' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vrl-012-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-rl' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 320px;
+    }
+
+  div
+    {
+      background: red url("support/bg-red-4col-3row-320x320.png");
+      direction: rtl;
+      text-indent: 80px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div>A</div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-014.xht
new file mode 100644
index 0000000000..ae62b759e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-014.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: ltr' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vrl-010-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-4col-2row-320x320.png") top right;
+      direction: ltr;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-016.xht
new file mode 100644
index 0000000000..b11df2824d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-indent-vrl-016.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-indent' with percentage unit, 'direction: rtl' in 'vertical-rl' writing-mode (non-orthogonal)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="text-indent-vrl-012-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that 'text-indent' set with a percentage unit will be a percentage of the containing block height. 'text-indent' will indent the first line of text at line-start. Text of a line box in 'direction: rtl' and with 'writing-mode: vertical-rl' starts at bottom toward the top and progress toward the top." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#containing-block
+    {
+      color: green;
+      font: 80px/1 Ahem; /* computes to 80px/80px */
+      height: 320px;
+      width: 160px;
+    }
+
+  div#containing-block
+    {
+      background: red url("support/bg-red-4col-3row-320x320.png") top right;
+      direction: rtl;
+    }
+
+  div#child
+    {
+      text-indent: 25%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <div id="containing-block">
+    <div id="child">A</div>
+  </div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-010.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-010.xht
new file mode 100644
index 0000000000..39da55615a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-010.xht
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Writing Modes Test: text-orientation - mixed</title>
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+		<link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
+		<meta name="flags" content="image" />
+		<meta name="assert" content="This test checks that 'text-orientation: mixed' causes characters from horizontal-only scripts are set sideways, i.e. rotated 90° clockwise from their standard orientation in horizontal text. Characters from vertical scripts are set according to their intrinsic orientation (Vertical Orientation Property as given by UTR50)." />
+		<style type="text/css">
+				@font-face
+				{
+					font-family: "mplus-1p-regular";
+					src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				}
+
+				div
+				{
+					font-family: "mplus-1p-regular";
+					font-size: 32px;
+					line-height: 1.5; /* computes to 48px */
+					margin-bottom: 10px;
+					writing-mode: vertical-rl;
+				}
+
+				div#test
+				{
+					border: 1px solid gray;
+				}
+
+				span
+				{
+					text-orientation: mixed;					/* The property to be tested */
+				}
+
+		</style>
+	</head>
+	<body>
+
+		<p>Test passes if characters of both rectangles have the <strong>same order</strong>, <strong>same layout</strong> and the <strong>same orientation</strong>. Note that a different inter-character spacing is considered as PASS.</p>
+
+		<div xml:lang="ja" id="test"><span>月火水Abc<br />def木金土</span></div>
+
+		<div id="control"><img src="support/text-orientation-010.png" width="98" height="192" alt="Image download support must be enabled" /></div>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-011.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-011.xht
new file mode 100644
index 0000000000..90e880c9e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-011.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: text-orientation - upright</title>
+
+  <link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1 Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
+
+  <meta name="assert" content="This test checks that 'text-orientation: upright' causes characters from horizontal-only scripts to be rendered upright, i.e. in their standard horizontal orientation, in vertical writing modes." />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "CSS Full-Width Orientation Test";
+      src: url("/fonts/adobe-fonts/CSSFWOrientationTest.otf") format("opentype");
+    }
+
+  div
+    {
+      color: blue;
+      font-family: "CSS Full-Width Orientation Test";
+      font-size: 180px;
+      line-height: 3;
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 2 rectangles with a white <strong>triangle pointing up</strong> and if the orange rectangle is below the blue rectangle.</p>
+
+  <div>F<span>A</span></div>
+
+  <!--
+  Unfortunately, we can not compare text with images even with web-fonts. Rendering varies
+  by platform, like Retina (high-res) Mac will fail if you compare text with
+  pre-rendered image. Koji Ishii, 2016-01-17
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-012.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-012.xht
new file mode 100644
index 0000000000..59d815aeae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-012.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: text-orientation - upright</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
+
+  <meta name="flags" content="image" />
+
+  <meta name="assert" content="This test checks that 'text-orientation: upright' causes characters from horizontal-only scripts and from vertical scripts to be translated upright." />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "mplus-1p-regular";
+      src: url("/fonts/mplus-1p-regular.woff") format("woff");
+    }
+
+  div
+    {
+      border: gray solid 1px;
+      float: left;
+      font-family: "mplus-1p-regular";
+      font-size: 32px;
+      line-height: 1.5; /* computes to 48px */
+      margin-right: 1em;
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  div#reference
+    {
+      border-bottom: white none 0px;
+      border-right: white none 0px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if characters of both rectangles have the <strong>same order</strong>, <strong>same layout</strong> and the <strong>same orientation</strong>. Note that a different inter-character spacing is considered as PASS.</p>
+
+  <div id="test">月火水Abc<br />def木金土</div>
+
+  <div id="reference"><img src="support/text-orientation-012.png" width="96" height="264" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-016-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-016-ref.xht
new file mode 100644
index 0000000000..0010955e40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-016-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      border-bottom: blue solid 15px;
+      border-top: blue solid 15px;
+      margin-top: 8px;
+      width: 200px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if both blue-and-yellow rectangles are <strong>identical</strong>.</p>
+
+  <div><img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="8" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="58" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" />
+
+<img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="50" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" />
+
+<img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="58" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="8" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" /></div>
+
+
+  <div><img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="8" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="58" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" />
+
+<img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="50" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" />
+
+<img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="58" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="8" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-016.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-016.xht
new file mode 100644
index 0000000000..6248de6fa6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-016.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: text-orientation - sideways</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
+  <link rel="match" href="text-orientation-016-ref.xht" />
+
+  <meta content="ahem image" name="flags" />
+  <meta content="This test checks that sideways-oriented latin text is baseline-aligned alphabetically within the line box and not baseline-aligned centrally. This test uses exclusively 'p' and 'É' glyphs to verify this." name="assert" />
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style type="text/css"><![CDATA[
+  div
+    {
+      border-bottom: blue solid 15px;
+      border-top: blue solid 15px;
+    }
+
+  div#test
+    {
+      background-color: blue;
+      color: yellow;
+      font-family: Ahem;
+      font-size: 20px;
+      line-height: 2;
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+
+  span#p80
+    {
+      font-size: 4em; /* computes to 80px */
+    }
+
+  span#p40
+    {
+      font-size: 2em; /* computes to 40px */
+    }
+
+  span#E10
+    {
+      font-size: 0.5em; /* computes to 10px */
+    }
+
+  span#E20
+    {
+      font-size: 1em; /* computes to 20px */
+    }
+
+  div#reference
+    {
+      margin-top: 8px;
+      width: 200px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if both blue-and-yellow rectangles are <strong>identical</strong>.</p>
+
+  <div id="test"><span id="p80">p</span><span id="p40">p</span><br /><span id="E10">ÉÉÉÉ</span><span id="E20">ÉÉÉÉ</span></div>
+
+  <div id="reference"><img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="8" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="58" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" />
+
+<img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="50" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" />
+
+<img src="support/swatch-blue.png" width="14" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="58" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="8" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="104" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-initial-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-initial-ref.html
new file mode 100644
index 0000000000..322dde323e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-initial-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<div style="writing-mode:vertical-rl">
+  <div>
+    vertical
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-initial.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-initial.html
new file mode 100644
index 0000000000..434e14ccb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-initial.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel=help href="https://drafts.csswg.org/css-writing-modes-4/#text-orientation">
+<link rel=help href="https://crbug.com/1081659">
+<link rel="match" href="text-orientation-initial-ref.html">
+<div style="writing-mode:vertical-rl;text-orientation:upright">
+  <div style="text-orientation:initial">
+    vertical
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-slr-015.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-slr-015.xht
new file mode 100644
index 0000000000..c1d57ef124
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-slr-015.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' - 'text-orientation: mixed' has no effect</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-4/#text-orientation" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="This test checks that when 'writing-mode' is set to 'sideways-lr', then a 'text-orientation: mixed' declaration has no effect: the alphabetical baseline is used as the dominant baseline and all the glyphs remain rotated 90 degrees counter-clockwise. The typographic mode for 'sideways-lr' is horizontal and 'text-orientation' has no effect on boxes in horizontal typographic modes." />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "mplus-1p-regular";
+      src: url("/fonts/mplus-1p-regular.woff") format("woff");
+      /* filesize: 803300 bytes (784.5 KBytes) */
+    }
+
+    div#slr
+    {
+      border: gray solid 1px;
+      font: bold 26px/32px "mplus-1p-regular";
+      margin-bottom: 4px;
+      writing-mode: sideways-lr;
+      text-orientation: mixed;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the glyphs in both rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>.</p>
+
+  <div id="slr">月火水Abc<br />def木金土</div>
+
+  <div><img id="reference" src="support/text-orientation-sideways-lr.png" width="66" height="133" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-srl-016-ref.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-srl-016-ref.xht
new file mode 100644
index 0000000000..bae223a995
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-srl-016-ref.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "mplus-1p-regular";
+      src: url("/fonts/mplus-1p-regular.woff") format("woff");
+      /* filesize: 803300 bytes (784.5 KBytes) */
+    }
+
+  div
+    {
+      border: gray solid 1px;
+      font: bold 26px/32px "mplus-1p-regular";
+      margin-bottom: 4px;
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the glyphs in both rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>.</p>
+
+  <div>月火水Abc<br />def木金土</div>
+
+  <div>月火水Abc<br />def木金土</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-srl-016.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-srl-016.xht
new file mode 100644
index 0000000000..4ce3ea5887
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-srl-016.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' - 'text-orientation: mixed' has no effect</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-4/#text-orientation" />
+  <link rel="match" href="text-orientation-mixed-srl-016-ref.xht" />
+
+  <meta name="assert" content="This test checks that when 'writing-mode' is set to 'sideways-rl', then a 'text-orientation: mixed' declaration has no effect: the alphabetical baseline is used as the dominant baseline because the typographic mode for 'sideways-rl' is horizontal and 'text-orientation' has no effect on boxes in horizontal typographic modes." />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "mplus-1p-regular";
+      src: url("/fonts/mplus-1p-regular.woff") format("woff");
+      /* filesize: 803300 bytes (784.5 KBytes) */
+    }
+
+  div
+    {
+      border: gray solid 1px;
+      font: bold 26px/32px "mplus-1p-regular";
+      margin-bottom: 4px;
+    }
+
+  div#test-srl
+    {
+      writing-mode: sideways-rl;
+      text-orientation: mixed;
+    }
+
+  div#ref-vrl-sideways
+    {
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the glyphs in both rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>.</p>
+
+  <div id="test-srl">月火水Abc<br />def木金土</div>
+
+  <div id="ref-vrl-sideways">月火水Abc<br />def木金土</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vlr-100-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vlr-100-ref.html
new file mode 100644
index 0000000000..d5f1d56627
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vlr-100-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: mixed.</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-lr;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: mixed;
+    text-autospace: no-autospace;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">国国国国国国国国国国国国A国国国国国国国国国国国国国国AAA国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vlr-100.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vlr-100.html
new file mode 100644
index 0000000000..e2f2bedb1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vlr-100.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: mixed.</title>
+<link rel="match" href="text-orientation-mixed-vlr-100-ref.html">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-lr;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: mixed;
+    text-autospace: no-autospace;
+  }
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line"> !&#34;#$%&amp;&#39;()*+,-./0123456789:;=?@A</div>
+<div class="line">BCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a</div>
+<div class="line">bcdefghijklmnopqrstuvwxyz{|}~</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">　、。〃〄々〆〇〈〉《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟</div>
+<div class="line">〠〡〢〣〤〥〦〧〨〩〰〱〲〳〴〵〶〷〸〹〺〻〼〽〾〿ぁあぃいぅう</div>
+<div class="line">ぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづて</div>
+<div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆ</div>
+<div class="line">ょよらりるれろゎわゐゑをんゔゕゖ゛゜ゝゞゟ゠ァアィイゥウェエォオ</div>
+<div class="line">カガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナ</div>
+<div class="line">ニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリ</div>
+<div class="line">ルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">一丁丂七丄丅丆万丈三上下丌不与丏丐丑丒专且丕世丗丘丙业丛东丝丞丟</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠</div>
+<div class="line">ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀</div>
+<div class="line">ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～｟｠</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-002.xht
new file mode 100644
index 0000000000..506b9d7ff6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-002.xht
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Writing Modes Test: text-orientation - mixed in vertical-rl writing mode</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+		<link rel="help" title="5.1 Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
+		<meta name="flags" content="image" />
+		<meta name="assert" content="This test checks that when 'text-orientation' is set to 'mixed', then latin alphabet characters are displayed sideways (rotated 90 degrees clockwise). In this test, the 'FULLWIDTH LATIN CAPITAL LETTER T' must be typeset upright." />
+		<style type="text/css"><![CDATA[
+			@font-face
+				{
+					font-family: "mplus-1p-regular";
+					src: url("/fonts/mplus-1p-regular.woff") format("woff");
+					/* filesize: 803300 bytes (784.5 KBytes) */
+				}
+
+			div
+				{
+					float: left;
+					color: blue;
+					font-family: "mplus-1p-regular";
+					font-size: 30px;
+					line-height: 1.4; /* equivalent to 42px:
+					so that top-half-leading outside content area is 6px
+					and bottom-half-leading outside content area is 6px */
+					margin: 10px;
+				}
+
+			div#vertical
+				{
+					border: 1px solid gray;
+					text-orientation:	mixed;
+					writing-mode:	vertical-rl;
+				}
+
+			img {vertical-align: top;}
+
+		]]></style>
+	</head>
+	<body>
+
+	<p>Test passes if characters in both "Text sample" rectangles have the <strong>same order</strong>, <strong>same layout</strong> and the <strong>same orientation</strong>: "T" should be upright and "ext sample" should be rotated 90&deg; clockwise.</p>
+
+	<div id="vertical">&#65332;ext sample</div>
+	<!--
+	HTML Entity (decimal) &#65332; or HTML Entity (hex) &#xff34; is Unicode Character 'FULLWIDTH LATIN CAPITAL LETTER T'
+	More info:
+	http://lists.w3.org/Archives/Public/public-css-testsuite/2015Dec/0008.html
+	-->
+
+	<div><img src="support/text-orientation-mixed-vrl-002.png" width="44" height="198" alt="Image download support must be enabled" /></div>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-100-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-100-ref.html
new file mode 100644
index 0000000000..15d74eb246
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-100-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: mixed.</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-rl;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: mixed;
+    text-autospace: no-autospace;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">国国国国国国国国国国国国A国国国国国国国国国国国国国国AAA国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-100.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-100.html
new file mode 100644
index 0000000000..355857463d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-mixed-vrl-100.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: mixed.</title>
+<link rel="match" href="text-orientation-mixed-vrl-100-ref.html">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-rl;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: mixed;
+    text-autospace: no-autospace;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line"> !&#34;#$%&amp;&#39;()*+,-./0123456789:;=?@A</div>
+<div class="line">BCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a</div>
+<div class="line">bcdefghijklmnopqrstuvwxyz{|}~</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">　、。〃〄々〆〇〈〉《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟</div>
+<div class="line">〠〡〢〣〤〥〦〧〨〩〰〱〲〳〴〵〶〷〸〹〺〻〼〽〾〿ぁあぃいぅう</div>
+<div class="line">ぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづて</div>
+<div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆ</div>
+<div class="line">ょよらりるれろゎわゐゑをんゔゕゖ゛゜ゝゞゟ゠ァアィイゥウェエォオ</div>
+<div class="line">カガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナ</div>
+<div class="line">ニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリ</div>
+<div class="line">ルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">一丁丂七丄丅丆万丈三上下丌不与丏丐丑丒专且丕世丗丘丙业丛东丝丞丟</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠</div>
+<div class="line">ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀</div>
+<div class="line">ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～｟｠</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-parsing-001.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-parsing-001.html
new file mode 100644
index 0000000000..9da7dd3305
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-parsing-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing text-orientation</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the text-orientation property.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div
+  data-expected="mixed" title="text-orientation initial value"></div>
+
+<div style="text-orientation: upright"
+  data-expected="upright"></div>
+<div style="text-orientation: sideways"
+  data-expected="sideways"></div>
+
+<div style="text-orientation: upright">
+  <div
+    data-expected="upright" title="text-orientation should inherit"></div>
+
+  <div style="text-orientation: mixed"
+    data-expected="mixed"></div>
+
+  <div style="text-orientation: initial"
+    data-expected="mixed"></div>
+  <div style="text-orientation: inherit"
+    data-expected="upright"></div>
+
+  <div style="text-orientation: foo"
+    data-expected="upright"></div>
+</div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).textOrientation;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-parsing-sideways-right-001.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-parsing-sideways-right-001.html
new file mode 100644
index 0000000000..848c581cb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-parsing-sideways-right-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing text-orientation</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the text-orientation property.">
+<meta name="flags" content="dom may">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="text-orientation: sideways-right"
+  data-expected="sideways"></div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).textOrientation;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-001.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-001.xht
new file mode 100644
index 0000000000..377f8f9d35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-001.xht
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Writing Modes Test: text-orientation - sideways in vertical-rl writing mode</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="5.1. Orienting Text" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
+		<meta name="flags" content="image" />
+		<meta name="assert" content="This test checks that general horizontal text (include Japanese,etc) rotates 90 degrees clockwise, and it is verified whether the characters are aligned in the vertical direction." />
+		<style type="text/css"><![CDATA[
+			@font-face
+			{
+				font-family: "DejaVuSerifBook";
+				src: url("support/DejaVuSerif-webfont.woff") format("woff");
+				/* Filesize: 18096 bytes (17.7 KBytes) */
+			}
+
+			div {
+				border: 1px solid gray;
+				float: left;
+				color: blue;
+				font-family: "DejaVuSerifBook";
+				font-size: 30px;
+				line-height: 1.4; /* equivalent to 42px:
+				so that top-half-leading outside content is 6px
+				and bottom-half-leading outside content is 6px */
+				margin: 10px;
+			}
+
+			div#vertical
+			{
+				writing-mode: 				vertical-rl;
+				text-orientation:			sideways;
+			}
+
+		    img {vertical-align: top;}
+
+		]]></style>
+	</head>
+	<body>
+
+	<p>Test passes if both "Text sample" rectangles
+		have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>:
+		"Text sample" should be displayed rotates 90 degrees clockwise.</p>
+
+	<div id="vertical">Ｔext sample</div>
+
+	<div><img src="./support/text-orientation-sideways-right-001.png" width="42" height="184" alt="Image download support must be enabled" /></div>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-slr-019.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-slr-019.xht
new file mode 100644
index 0000000000..9751a850ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-slr-019.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' - 'text-orientation: sideways' has no effect</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-4/#text-orientation" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="This test checks that when 'writing-mode' is set to 'sideways-lr', then a 'text-orientation: sideways' declaration has no effect: the alphabetical baseline is used as the dominant baseline and all the glyphs remain rotated 90 degrees counter-clockwise. The typographic mode for 'sideways-lr' is horizontal and 'text-orientation' has no effect on boxes in horizontal typographic modes." />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "mplus-1p-regular";
+      src: url("/fonts/mplus-1p-regular.woff") format("woff");
+      /* filesize: 803300 bytes (784.5 KBytes) */
+    }
+
+    div#slr
+    {
+      border: gray solid 1px;
+      font: bold 26px/32px "mplus-1p-regular";
+      margin-bottom: 4px;
+      writing-mode: sideways-lr;
+      text-orientation: sideways;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the glyphs in both rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>.</p>
+
+  <div id="slr">月火水Abc<br />def木金土</div>
+
+  <div><img id="reference" src="support/text-orientation-sideways-lr.png" width="66" height="133" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vlr-100-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vlr-100-ref.html
new file mode 100644
index 0000000000..5b186ca3d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vlr-100-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: sideways.</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-lr;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: sideways;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vlr-100.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vlr-100.html
new file mode 100644
index 0000000000..2060c865ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vlr-100.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: sideways.</title>
+<link rel="match" href="text-orientation-sideways-vlr-100-ref.html">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-lr;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: sideways;
+    text-autospace: no-autospace;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line"> !&#34;#$%&amp;&#39;()*+,-./0123456789:;=?@A</div>
+<div class="line">BCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a</div>
+<div class="line">bcdefghijklmnopqrstuvwxyz{|}~</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">　、。〃〄々〆〇〈〉《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟</div>
+<div class="line">〠〡〢〣〤〥〦〧〨〩〰〱〲〳〴〵〶〷〸〹〺〻〼〽〾〿ぁあぃいぅう</div>
+<div class="line">ぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづて</div>
+<div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆ</div>
+<div class="line">ょよらりるれろゎわゐゑをんゔゕゖ゛゜ゝゞゟ゠ァアィイゥウェエォオ</div>
+<div class="line">カガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナ</div>
+<div class="line">ニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリ</div>
+<div class="line">ルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">一丁丂七丄丅丆万丈三上下丌不与丏丐丑丒专且丕世丗丘丙业丛东丝丞丟</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠</div>
+<div class="line">ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀</div>
+<div class="line">ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～｟｠</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vrl-100-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vrl-100-ref.html
new file mode 100644
index 0000000000..255efc8e9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vrl-100-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: sideways.</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-rl;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: sideways;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+<div class="line">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vrl-100.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vrl-100.html
new file mode 100644
index 0000000000..ada168e27b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-sideways-vrl-100.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: sideways.</title>
+<link rel="match" href="text-orientation-sideways-vrl-100-ref.html">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-rl;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: sideways;
+    text-autospace: no-autospace;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line"> !&#34;#$%&amp;&#39;()*+,-./0123456789:;=?@A</div>
+<div class="line">BCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a</div>
+<div class="line">bcdefghijklmnopqrstuvwxyz{|}~</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">　、。〃〄々〆〇〈〉《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟</div>
+<div class="line">〠〡〢〣〤〥〦〧〨〩〰〱〲〳〴〵〶〷〸〹〺〻〼〽〾〿ぁあぃいぅう</div>
+<div class="line">ぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづて</div>
+<div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆ</div>
+<div class="line">ょよらりるれろゎわゐゑをんゔゕゖ゛゜ゝゞゟ゠ァアィイゥウェエォオ</div>
+<div class="line">カガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナ</div>
+<div class="line">ニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリ</div>
+<div class="line">ルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">一丁丂七丄丅丆万丈三上下丌不与丏丐丑丒专且丕世丗丘丙业丛东丝丞丟</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠</div>
+<div class="line">ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀</div>
+<div class="line">ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～｟｠</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-directionality-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-directionality-001-ref.html
new file mode 100644
index 0000000000..5e7c1e2f7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-directionality-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Reference: text-orientation:upright in sideways-* writing modes</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
+</head>
+<body style="font: 24px sans-serif">
+<p>The two sideways-rl lines should be identical:
+<div style="writing-mode:sideways-rl">
+  <p>hello العربي world עברית</p>
+  <p>hello العربي world עברית</p>
+</div>
+<p>The two sideways-lr lines should be identical:
+<div style="writing-mode:sideways-lr">
+  <p>hello العربي world עברית</p>
+  <p>hello العربي world עברית</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-directionality-001.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-directionality-001.html
new file mode 100644
index 0000000000..695e489df3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-directionality-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test: text-orientation:upright in sideways-* writing modes</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
+<link rel="match" href="text-orientation-upright-directionality-001-ref.html">
+<meta name="assert" content="text-orientation has no effect in horizontal typographic modes">
+</head>
+<body style="font: 24px sans-serif">
+<p>The two sideways-rl lines should be identical:
+<div style="writing-mode:sideways-rl">
+  <p>hello العربي world עברית</p>
+  <p style="text-orientation:upright">hello العربي world עברית</p>
+</div>
+<p>The two sideways-lr lines should be identical:
+<div style="writing-mode:sideways-lr">
+  <p>hello العربي world עברית</p>
+  <p style="text-orientation:upright">hello العربي world עברית</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-slr-017.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-slr-017.xht
new file mode 100644
index 0000000000..eb67dde8ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-slr-017.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' - 'text-orientation: upright' has no effect</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-4/#text-orientation" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="This test checks that when 'writing-mode' is set to 'sideways-lr', then a 'text-orientation: upright' declaration has no effect: the alphabetical baseline is used as the dominant baseline and all the glyphs remain rotated 90 degrees counter-clockwise. The typographic mode for 'sideways-lr' is horizontal and 'text-orientation' has no effect on boxes in horizontal typographic modes." />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "mplus-1p-regular";
+      src: url("/fonts/mplus-1p-regular.woff") format("woff");
+      /* filesize: 803300 bytes (784.5 KBytes) */
+    }
+
+    div#slr
+    {
+      border: gray solid 1px;
+      font: bold 26px/32px "mplus-1p-regular";
+      margin-bottom: 4px;
+      writing-mode: sideways-lr;
+      text-orientation: upright;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the glyphs in both rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>.</p>
+
+  <div id="slr">月火水Abc<br />def木金土</div>
+
+  <div><img id="reference" src="support/text-orientation-sideways-lr.png" width="66" height="133" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-srl-018.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-srl-018.xht
new file mode 100644
index 0000000000..b7ab7c2050
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-srl-018.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' - 'text-orientation: upright' has no effect</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" title="5.1. Orienting Text: the 'text-orientation' property" href="http://www.w3.org/TR/css-writing-modes-4/#text-orientation" />
+  <link rel="match" href="text-orientation-mixed-srl-016-ref.xht" />
+
+  <meta name="assert" content="This test checks that when 'writing-mode' is set to 'sideways-rl', then a 'text-orientation: upright' declaration has no effect: the alphabetical baseline is used as the dominant baseline and all the glyphs remain rotated 90 degrees clockwise. The typographic mode for 'sideways-rl' is horizontal and 'text-orientation' has no effect on boxes in horizontal typographic modes." />
+
+  <style type="text/css"><![CDATA[
+  @font-face
+    {
+      font-family: "mplus-1p-regular";
+      src: url("/fonts/mplus-1p-regular.woff") format("woff");
+      /* filesize: 803300 bytes (784.5 KBytes) */
+    }
+
+  div
+    {
+      border: gray solid 1px;
+      font: bold 26px/32px "mplus-1p-regular";
+      margin-bottom: 4px;
+    }
+
+  div#test-srl
+    {
+      writing-mode: sideways-rl;
+      text-orientation: upright;
+    }
+
+  div#ref-vrl-sideways
+    {
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the glyphs in both rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>.</p>
+
+  <div id="test-srl">月火水Abc<br />def木金土</div>
+
+  <div id="ref-vrl-sideways">月火水Abc<br />def木金土</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vlr-100-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vlr-100-ref.html
new file mode 100644
index 0000000000..b99ca51a8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vlr-100-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: upright.</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-lr;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: upright;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vlr-100.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vlr-100.html
new file mode 100644
index 0000000000..a0c59c46b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vlr-100.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: upright.</title>
+<link rel="match" href="text-orientation-upright-vlr-100-ref.html">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-lr;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: upright;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line"> !&#34;#$%&amp;&#39;()*+,-./0123456789:;=?@A</div>
+<div class="line">BCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a</div>
+<div class="line">bcdefghijklmnopqrstuvwxyz{|}~</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">　、。〃〄々〆〇〈〉《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟</div>
+<div class="line">〠〡〢〣〤〥〦〧〨〩〰〱〲〳〴〵〶〷〸〹〺〻〼〽〾〿ぁあぃいぅう</div>
+<div class="line">ぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづて</div>
+<div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆ</div>
+<div class="line">ょよらりるれろゎわゐゑをんゔゕゖ゛゜ゝゞゟ゠ァアィイゥウェエォオ</div>
+<div class="line">カガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナ</div>
+<div class="line">ニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリ</div>
+<div class="line">ルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">一丁丂七丄丅丆万丈三上下丌不与丏丐丑丒专且丕世丗丘丙业丛东丝丞丟</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠</div>
+<div class="line">ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀</div>
+<div class="line">ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～｟｠</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-002.xht
new file mode 100644
index 0000000000..511854d653
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-002.xht
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Writing Modes Test: text-orientation - upright in vertical-rl writing mode</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-24 and 2016-12-11 -->
+		<link rel="help" title="5.1. Orienting Text" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
+		<meta name="flags" content="image" />
+		<meta name="assert" content="This test checks that latin alphabet characters are translated upright (and not rotated sideways)." />
+		<style type="text/css"><![CDATA[
+			@font-face
+			{
+					font-family: "mplus-1p-regular";
+					src: url("/fonts/mplus-1p-regular.woff") format("woff");
+			}
+
+			div {
+				float: left;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				font-size: 24px; /* we must try to avoid a too tall div which could generate 2 line boxes; so we use a smaller font size */
+				line-height: 1.5; /* equivalent to 36px:
+				so that top-half-leading outside content is 6px
+				and bottom-half-leading outside content is 6px */
+				margin: 10px;
+			}
+
+			div#vertical
+			{
+				border: 1px solid gray;
+				writing-mode: 				vertical-rl;
+				text-orientation:   		upright;
+			}
+
+		    img {vertical-align: top;}
+
+		]]></style>
+	</head>
+	<body>
+
+	<p>Test passes if characters in both "Text sample" rectangles have the <strong>same order</strong> and the <strong>same orientation</strong>: both "Text sample" should be translated upright. Note that a different inter-character spacing is considered as PASS.</p>
+
+	<div id="vertical">&#65332;ext sample</div>
+
+	<!--
+	HTML Entity (decimal) &#65332; or HTML Entity (hex) &#xff34; is Unicode Character 'FULLWIDTH LATIN CAPITAL LETTER T'
+	More info:
+	http://lists.w3.org/Archives/Public/public-css-testsuite/2015Dec/0008.html
+	-->
+
+	<div><img src="support/text-orientation-upright-vrl-002.png" width="38" height="376" alt="Image download support must be enabled" /></div>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-100-ref.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-100-ref.html
new file mode 100644
index 0000000000..350526f6d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-100-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: upright.</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-rl;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: upright;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+<div class="line">国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国国</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-100.html b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-100.html
new file mode 100644
index 0000000000..566d046692
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-orientation-upright-vrl-100.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: upright.</title>
+<link rel="match" href="text-orientation-upright-vrl-100-ref.html">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+@font-face {
+    font-family: "orientation";
+    src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
+}
+html {
+    writing-mode: vertical-rl;
+}
+.test {
+    font: 20px/1 "orientation";
+    height: 17em;
+    text-orientation: upright;
+}
+.line {
+    white-space: pre;
+}
+</style>
+<body>
+<div id="container">
+<div>U+0020-007E<div class="test">
+<div class="line"> !&#34;#$%&amp;&#39;()*+,-./0123456789:;=?@A</div>
+<div class="line">BCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a</div>
+<div class="line">bcdefghijklmnopqrstuvwxyz{|}~</div>
+</div></div>
+<div>U+3000-30FF<div class="test">
+<div class="line">　、。〃〄々〆〇〈〉《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟</div>
+<div class="line">〠〡〢〣〤〥〦〧〨〩〰〱〲〳〴〵〶〷〸〹〺〻〼〽〾〿ぁあぃいぅう</div>
+<div class="line">ぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづて</div>
+<div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆ</div>
+<div class="line">ょよらりるれろゎわゐゑをんゔゕゖ゛゜ゝゞゟ゠ァアィイゥウェエォオ</div>
+<div class="line">カガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナ</div>
+<div class="line">ニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリ</div>
+<div class="line">ルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ</div>
+</div></div>
+<div>U+4E00-4E1F<div class="test">
+<div class="line">一丁丂七丄丅丆万丈三上下丌不与丏丐丑丒专且丕世丗丘丙业丛东丝丞丟</div>
+</div></div>
+<div>U+FF01-FF60<div class="test">
+<div class="line">！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠</div>
+<div class="line">ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀</div>
+<div class="line">ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～｟｠</div>
+</div></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-shadow-orientation-upright-001.html b/testing/web-platform/tests/css/css-writing-modes/text-shadow-orientation-upright-001.html
new file mode 100644
index 0000000000..faa5b0acc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-shadow-orientation-upright-001.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'text-shadow' and upright text orientation</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#physical-only">
+  <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">
+  <link rel="match" href="reference/text-shadow-orientation-upright-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <!--
+
+  Issue 229211: text-shadow is drawn at the invalid position in vertical writing mode
+  on Chromium for Mac
+  https://bugs.chromium.org/p/chromium/issues/detail?id=229211#c8
+
+  -->
+
+  <meta content="This test checks that text-shadow offsets are purely physical and do not change with vertical writing mode.">
+
+  <style>
+  div
+    {
+      color: yellow;
+      font-family: Ahem;
+      font-size: 100px;
+      line-height: 1;
+      margin: calc(1em + 8px) auto auto 1em;
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+
+      text-shadow: 0em -1em purple, 1em 0em blue, 0em 1em fuchsia, -1em 0em orange;
+    }
+
+  /*
+
+  Value: [ <color>? && <length>{2,3} ]#
+
+  color: color of text-shadow
+
+  1st <length>
+    Specifies the horizontal offset
+    of the shadow. A positive value draws a shadow that is
+    offset to the right of the box, a negative length to the
+    left.
+
+  2nd <length>
+    Specifies the vertical offset
+    of the shadow. A positive value offsets the shadow down,
+    a negative one up.
+
+  */
+
+  </style>
+
+  <div>A</div>
+
+  <!--
+
+                  .........
+                  .       .
+                  .       . <-purple
+                  .       .
+           .......................
+           .      .       .      .
+  orange-> .      .  yel  .      . <-blue
+           .      .  low  .      .
+           .......................
+                  .       .
+                  .       . <-fuchsia
+                  .       .
+                  .........
+
+  -->
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-underline-position-alphabetic-001.xht b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-alphabetic-001.xht
new file mode 100644
index 0000000000..48a8aa1023
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-alphabetic-001.xht
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Decoration Test: text-underline-position - alphabetic</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This tests checks that there is underline in a position to cross the descenders." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+
+			span#ahem_text
+			{
+				position: absolute;
+				left: 0;
+				border: 1px dashed silver;
+
+				font-family: ahem;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+				color: orange;
+			}
+
+			span#sample_text_underline
+			{
+				position: absolute;
+				left: 0;
+				text-decoration: underline;
+				text-underline-position: alphabetic;
+				color:blue;
+			}
+
+			span#sample_text
+			{
+				color: silver;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+			}
+
+		]]></style>
+	</head>
+
+	<body>
+		<p>Test passes if there is a blue line inside the orange region.</p>
+
+		<span id="ahem_text">ppp</span>
+		<span id="sample_text_underline">
+			<span id="sample_text">sample</span>
+		</span>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-underline-position-auto-001.xht b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-auto-001.xht
new file mode 100644
index 0000000000..40fd5bf51b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-auto-001.xht
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Decoration Test: text-underline-position - auto</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This tests checks that there is underline under the baseline." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+
+			span#ahem_text
+			{
+				position: absolute;
+				left: 0;
+				border: 1px dashed silver;
+
+				font-family: ahem;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+				color: orange;
+			}
+
+			span#sample_text_underline
+			{
+				position: absolute;
+				left: 0;
+				text-decoration: underline;
+				text-underline-position: auto;
+				color:blue;
+			}
+
+			span#sample_text
+			{
+				color: silver;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+			}
+
+
+		]]></style>
+	</head>
+
+	<body>
+		<p>Test passes if a blue line is the inside of an orange region, or below the bottom of an orange region.</p>
+
+		<span id="ahem_text">ppp</span>
+		<span id="sample_text_underline">
+			<span id="sample_text">sample</span>
+		</span>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-underline-position-left-001.xht b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-left-001.xht
new file mode 100644
index 0000000000..e9168a1de0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-left-001.xht
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Decoration Test: text-underline-position - left</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This tests checks that there is underline in a position under the descenders." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+
+			span#ahem_text
+			{
+				position: absolute;
+				left: 0;
+				border: 1px dashed silver;
+
+				font-family: ahem;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+				color: orange;
+			}
+
+			span#sample_text_underline
+			{
+				position: absolute;
+				left: 0;
+				text-decoration: underline;
+				text-underline-position: left;
+				color:blue;
+			}
+
+			span#sample_text
+			{
+				color: silver;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+			}
+
+		]]></style>
+	</head>
+	<body>
+		<p>Test passes if there is a blue line inside the orange region.</p>
+
+		<span id="ahem_text">ppp</span>
+		<span id="sample_text_underline">
+			<span id="sample_text">sample</span>
+		</span>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-underline-position-left-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-left-002.xht
new file mode 100644
index 0000000000..8284aae764
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-left-002.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Decoration Test: text-underline-position - left in vertical writing mode</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This tests checks that there is underline to the left of the text in vertical writing mode." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+
+			div
+			{
+				writing-mode: 				vertical-rl;
+			}
+
+
+			span#ahem_text
+			{
+				position: absolute;
+				left: 0;
+				border: 1px dashed silver;
+
+				font-family: ahem;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+				color: orange;
+			}
+
+			span#sample_text_underline
+			{
+				position: absolute;
+				left: 0;
+				color:blue;
+
+				text-decoration: underline;
+				text-underline-position: left;
+			}
+
+			span#sample_text
+			{
+				color: silver;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+			}
+
+
+		]]></style>
+	</head>
+	<body>
+		<p>Test passes if there is a blue vertical line inside the orange region.</p>
+
+		<div>
+			<span id="ahem_text">ppp</span>
+			<span id="sample_text_underline">
+				<span id="sample_text">sample</span>
+			</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-underline-position-right-001.xht b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-right-001.xht
new file mode 100644
index 0000000000..2ccea903a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-right-001.xht
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Decoration Test: text-underline-position - right</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This tests checks that there is underline in a position under the descenders." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+
+			span#ahem_text
+			{
+				position: absolute;
+				left: 0;
+				border: 1px dashed silver;
+
+				font-family: ahem;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+				color: orange;
+			}
+
+			span#sample_text_underline
+			{
+				position: absolute;
+				left: 0;
+				text-decoration: underline;
+				text-underline-position: right;
+				color:blue;
+			}
+
+			span#sample_text
+			{
+				color: silver;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+			}
+
+		]]></style>
+	</head>
+	<body>
+		<p>Test passes if there is a blue line inside the orange region.</p>
+
+		<span id="ahem_text">ppp</span>
+		<span id="sample_text_underline">
+			<span id="sample_text">sample</span>
+		</span>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-underline-position-right-002.xht b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-right-002.xht
new file mode 100644
index 0000000000..343f1453e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-right-002.xht
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Decoration Test: text-underline-position - right in vertical writing mode</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This tests checks that there is underline to the right of the text in vertical writing mode." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+
+			div
+			{
+				writing-mode: 				vertical-rl;
+
+			}
+
+			span#ahem_text
+			{
+				position: absolute;
+				left: 0;
+				border: 1px dashed silver;
+
+				font-family: ahem;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+				color: orange;
+			}
+
+			span#sample_text_underline
+			{
+				position: absolute;
+				left: 0;
+				color:blue;
+
+				text-decoration: underline;
+				text-underline-position: right;
+			}
+
+			span#sample_text
+			{
+				color: silver;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+			}
+
+
+		]]></style>
+	</head>
+	<body>
+		<p>Test passes if there is a blue vertical line on the right side of the orange region.</p>
+
+		<div>
+			<span id="ahem_text">ÉÉÉ</span>
+			<span id="sample_text_underline">
+				<span id="sample_text">sample</span>
+			</span>
+		</div>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/text-underline-position-under-001.xht b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-under-001.xht
new file mode 100644
index 0000000000..a18f415dd7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/text-underline-position-under-001.xht
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Decoration Test: text-underline-position - under</title>
+		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
+		<link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" />
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="This tests checks that there is underline in a position under the descenders." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+
+			span#ahem_text
+			{
+				position: absolute;
+				left: 0;
+				border: 1px dashed silver;
+
+				font-family: ahem;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+				color: orange;
+			}
+
+			span#sample_text_underline
+			{
+				position: absolute;
+				left: 0;
+				text-decoration: underline;
+				text-underline-position: under;
+				color:blue;
+			}
+
+			span#sample_text
+			{
+				color: silver;
+				font-size: 6.25em; /* equivalent to 100px */
+				line-height: 1.0;
+			}
+
+
+		]]></style>
+	</head>
+	<body>
+		<p>Test passes if a blue line is below the bottom of orange region.</p>
+		<span id="ahem_text">ppp</span>
+		<span id="sample_text_underline">
+			<span id="sample_text">sample</span>
+		</span>
+	</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/three-levels-of-orthogonal-flows.html b/testing/web-platform/tests/css/css-writing-modes/three-levels-of-orthogonal-flows.html
new file mode 100644
index 0000000000..d69a328e8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/three-levels-of-orthogonal-flows.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Three levels of writing mode roots with text inside, no constraints</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic" title="4. Intrinsic Size Determination">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1. Available Space in Orthogonal Flows">
+<link rel="match" href="reference/three-levels-of-orthogonal-flows.html">
+<p>The yellow box should be in the top right corner of the hotpink box.</p>
+<div style="writing-mode:vertical-rl; width:30em; height:30em; background:hotpink;">
+  <div style="writing-mode:horizontal-tb;">
+    <div style="writing-mode:vertical-rl; background:yellow;">
+      <div style="visibility:hidden;">
+        Roses are red,<br>
+        violets are blue.<br>
+        All my base<br>
+        are belong to you.<br>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/tools/generators/generate.py b/testing/web-platform/tests/css/css-writing-modes/tools/generators/generate.py
new file mode 100755
index 0000000000..6d54eebc05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/tools/generators/generate.py
@@ -0,0 +1,86 @@
+#!/usr/bin/env python3
+import os
+import string
+
+from typing import List, Tuple
+
+test_template = """<h3>{number}: {title}</h3>
+<div class="test">
+    {html}
+</div>"""
+
+
+def generate_test_list() -> List[Tuple[str, str]]:
+    test_list = [];
+    outers = [
+        ["inline-block", '<div class="inline-block">', '</div><span class="next">ZZ</span>'],
+        ["float", '<div class="float">', '</div><span class="next">ZZ</span>'],
+        ["table-cell", '<table><tr><td>', '</td><td class="next">ZZ</td></tr></table>']];
+    middles = [
+        None,
+        ["inline-block", '<div class="inline-block">', '</div>']];
+    targets = [
+        ["block", '<div class="target">HH</div>'],
+        ["inline", '<span class="target">HH</span>'],
+        ["block with borders", '<div class="target border">HHH</div>'],
+        ["inline with borders", '<span class="target border">HHH</span>']];
+    for outer in outers:
+        for middle in middles:
+            for target in targets:
+                title = target[0];
+                html = target[1];
+                if middle is not None:
+                    title += " in " + middle[0];
+                    html = middle[1] + html + middle[2];
+                title = "Shrink-to-fit " + outer[0] + " with a child of orthogonal " + title;
+                html = outer[1] + html + outer[2];
+                test_list.append((title, html));
+    return test_list
+
+
+def read_template() -> str:
+    with open("template.html") as f:
+        return f.read()
+
+
+def main():
+    template = read_template()
+    test_list = generate_test_list()
+
+    dest_dir = os.path.abspath(
+        os.path.join(os.path.dirname(os.path.abspath(__file__)),
+                     os.path.pardir,
+                     os.path.pardir))
+
+    for index in range(-1, len(test_list)):
+        if index == -1:
+            offset = 0
+            suffix = ""
+            tests = test_list
+            title = "Shrink-to-fit with orthogonal children"
+            flags = " combo"
+        else:
+            offset = index
+            suffix = string.ascii_letters[index]
+            tests = [test_list[index]]
+            title = tests[0][0]
+            flags = ""
+
+        filename = f"orthogonal-parent-shrink-to-fit-001{suffix}.html"
+
+        tests_data = []
+        for idx, (test_title, html) in enumerate(tests):
+            number = offset + idx + 1
+            tests_data.append(test_template.format(number=number,
+                                                   title=test_title,
+                                                   html=html))
+
+        output = template.replace("{{title}}", title)
+        output = output.replace("{{flags}}", flags)
+        output = output.replace("{{tests}}", "\n".join(tests_data))
+        with open(os.path.join(dest_dir, filename), "w") as f:
+            f.write(output)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/testing/web-platform/tests/css/css-writing-modes/tools/generators/template.html b/testing/web-platform/tests/css/css-writing-modes/tools/generators/template.html
new file mode 100644
index 0000000000..74fc185232
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/tools/generators/template.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: {{title}}</title>
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
+<meta name="assert" content="{{title}}">
+<meta name="flags" content="ahem dom{{flags}}">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border:thin solid;
+    font:20px/1 Ahem;
+}
+.target {
+    color:blue;
+    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
+    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
+    writing-mode:vertical-rl;
+}
+.border {
+    border-right:blue solid .5em;
+}
+.next {
+    color:orange;
+}
+.inline-block {
+    display:inline-block;
+}
+.float {
+    float:left;
+}
+h3 {
+    clear:both;
+}
+h3.fail {
+    color:red;
+}
+table {
+    border-spacing:0px;
+}
+td {
+    padding:0px;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
+<p>If script is enabled, there should be one or more PASS and no FAIL.
+{{tests}}
+</div>
+<script>
+if (window.location.search == "?wait") {
+    console.log("Sleeping 5 secs for debug");
+    setup({explicit_done:true});
+    window.setTimeout(run, 5000);
+} else {
+    run();
+}
+
+function run() {
+    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
+        var title = node.previousElementSibling.textContent;
+        test(function () {
+            try {
+                var targetNode = node.querySelector(".target");
+                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
+                var targetBounds = targetNode.getBoundingClientRect();
+                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
+                var nextNode = node.querySelector(".next");
+                var nextBounds = nextNode.getBoundingClientRect();
+                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
+            } catch (e) {
+                node.previousElementSibling.classList.add("fail");
+                throw e;
+            }
+        }, title);
+    });
+    done();
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/tooltip-display-vertical-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/tooltip-display-vertical-001-manual.html
new file mode 100644
index 0000000000..0ad209aeb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/tooltip-display-vertical-001-manual.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: tooltip should display in the writing mode of associated element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
+
+  <!--
+
+  Bug 1183691: Tooltips should display in the writing mode of the associated element
+  https://bugzilla.mozilla.org/show_bug.cgi?id=1183691
+
+  Issue 703011: Tooltip should be displayed according to the writing mode of associated element
+  https://bugs.chromium.org/p/chromium/issues/detail?id=703011
+
+  -->
+
+  <meta content="may interact" name="flags">
+
+  <style>
+  h3#vrl
+    {
+      float: right;
+      writing-mode: vertical-rl;
+    }
+
+  h3#vlr
+    {
+      float: left;
+      writing-mode: vertical-lr;
+    }
+  </style>
+
+  <h3 title="Test passes if tooltip is vertical and if tooltip text is rotated 90°" id="vrl">Hover pointing device over this text</h3>
+
+  <h3 title="Test passes if tooltip is vertical and if tooltip text is rotated 90°" id="vlr">Hover pointing device over this text</h3>
diff --git a/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows-fixed.html b/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows-fixed.html
new file mode 100644
index 0000000000..d9e7d74984
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows-fixed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Two levels of writing mode roots with text inside, fixed available inline size for inner on outer</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic" title="4. Intrinsic Size Determination">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1. Available Space in Orthogonal Flows">
+<link rel="match" href="reference/two-levels-of-orthogonal-flows-fixed.html">
+<div style="writing-mode:vertical-rl; width:10em; border:solid; background:red;">
+  <div style="writing-mode:horizontal-tb; padding:3px; background:yellow;">
+    This text should be inside a box with a yellow background and a black border. There should be no red.
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows-percentage.html b/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows-percentage.html
new file mode 100644
index 0000000000..ff65534e78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows-percentage.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Two levels of writing mode roots with text inside, percentage inline size on inner</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic" title="4. Intrinsic Size Determination">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1. Available Space in Orthogonal Flows">
+<link rel="match" href="reference/two-levels-of-orthogonal-flows-percentage.html">
+<p>There should be three lines below. The middle line should have a yellow
+  background that takes up about 50% of the viewport width (but otherwise be
+  exactly like the two others, i.e. no extra height or anything like that).</p>
+A B C D E F G
+<div style="writing-mode:vertical-rl; background:yellow;">
+  <div style="writing-mode:horizontal-tb; width:50%;">
+    A B C D E F G
+  </div>
+</div>
+A B C D E F G
diff --git a/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows.html b/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows.html
new file mode 100644
index 0000000000..da7df0481d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/two-levels-of-orthogonal-flows.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Two levels of writing mode roots with text inside, no constraints</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic" title="4. Intrinsic Size Determination">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1. Available Space in Orthogonal Flows">
+<link rel="match" href="reference/two-levels-of-orthogonal-flows.html">
+<p>There should be three lines below. The middle line should have a
+  yellow background (but otherwise be exactly like the two others,
+  i.e. no extra height or anything like that)</p>
+A B C D E F G
+<div style="writing-mode:vertical-rl; background:yellow;">
+  <div style="writing-mode:horizontal-tb;">
+    A B C D E F G
+  </div>
+</div>
+A B C D E F G
diff --git a/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vlr-003.xht
new file mode 100644
index 0000000000..42d34cbaf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vlr-003.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
+  <link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="" />
+
+  <meta content="This test checks that when mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#vrl
+    {
+      font-size: 4em;
+      margin-left: 2em;
+      writing-mode: vertical-lr;
+    }
+
+  span#parent
+    {
+      text-decoration: underline;
+    }
+
+  span#child
+    {
+      color: transparent;
+    }
+
+  span#larger
+    {
+      font-size: 1.5em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
+
+  <div id="vrl"><span id="parent"><span id="child" lang="mn">ᠨ<span id="larger">ᠨᠨ</span>ᠨ</span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vlr-005.xht b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vlr-005.xht
new file mode 100644
index 0000000000..c636f068cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vlr-005.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes and mixed text</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
+
+  <meta content="This test checks that when latin and mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#vrl
+    {
+      font-size: 4em;
+      margin-left: 2em;
+      writing-mode: vertical-lr;
+    }
+
+  span#parent
+    {
+      text-decoration: underline;
+    }
+
+  span#child
+    {
+      color: transparent;
+    }
+
+  span#larger
+    {
+      font-size: 1.5em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
+
+  <div id="vrl"><span id="parent"><span id="child" lang="mn">ᠨ<span id="larger" lang="en">AB</span>ᠨ</span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vrl-002.xht
new file mode 100644
index 0000000000..6ee9e80161
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vrl-002.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
+  <link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="" />
+
+  <meta content="This test checks that when east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#vrl
+    {
+      font-size: 4em;
+      margin-left: 2em;
+      writing-mode: vertical-rl;
+    }
+
+  span#parent
+    {
+      text-decoration: underline;
+    }
+
+  span#child
+    {
+      color: transparent;
+    }
+
+  span#larger
+    {
+      font-size: 1.5em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
+
+  <div id="vrl"><span id="parent"><span id="child" lang="ja">方<span id="larger">方方</span>方</span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vrl-004.xht b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vrl-004.xht
new file mode 100644
index 0000000000..5d65e52c1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/underline-font-size-vrl-004.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes and mixed text</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
+
+  <meta content="This test checks that when latin and east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#vrl
+    {
+      font-size: 4em;
+      margin-left: 2em;
+      writing-mode: vertical-rl;
+    }
+
+  span#parent
+    {
+      text-decoration: underline;
+    }
+
+  span#child
+    {
+      color: transparent;
+    }
+
+  span#larger
+    {
+      font-size: 1.5em;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
+
+  <div id="vrl"><span id="parent"><span id="child" lang="ja">方<span id="larger" lang="en">AB</span>方</span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/underline-mixed-vlr-003.xht b/testing/web-platform/tests/css/css-writing-modes/underline-mixed-vlr-003.xht
new file mode 100644
index 0000000000..20d3ed3c96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/underline-mixed-vlr-003.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' and mixed text</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
+
+  <meta content="This test checks that when latin and mongolian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#vrl
+    {
+      font-size: 4em;
+      margin-left: 2em;
+      writing-mode: vertical-lr;
+    }
+
+  span#parent
+    {
+      text-decoration: underline;
+    }
+
+  span#child
+    {
+      color: transparent;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
+
+  <div id="vrl"><span id="parent"><span id="child" lang="mn">ᠨ<span lang="en">AB</span>ᠨ</span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/underline-mixed-vrl-002.xht b/testing/web-platform/tests/css/css-writing-modes/underline-mixed-vrl-002.xht
new file mode 100644
index 0000000000..6ec124ce43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/underline-mixed-vrl-002.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'text-decoration: underline' and mixed text</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings" />
+  <link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
+
+  <meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#vrl
+    {
+      font-size: 4em;
+      margin-left: 2em;
+      writing-mode: vertical-rl;
+    }
+
+  span#parent
+    {
+      text-decoration: underline;
+    }
+
+  span#child
+    {
+      color: transparent;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
+
+  <div id="vrl"><span id="parent"><span id="child" lang="ja">方<span lang="en">AB</span>方</span></span></div>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/unicode-bidi-parsing-001.html b/testing/web-platform/tests/css/css-writing-modes/unicode-bidi-parsing-001.html
new file mode 100644
index 0000000000..4c9558c11a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/unicode-bidi-parsing-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing unicode-bidi: normal, embed, bidi-override</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#direction">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#unicode-bidi">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the unicode-bidi: normal, embed, bidi-override.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<span title="Initial value of unicode-bidi"
+  data-expected="normal"></span>
+
+<div style="unicode-bidi: embed; unicode-bidi: normal"
+  data-expected="normal"></div>
+<div style="unicode-bidi: embed"
+  data-expected="embed"></div>
+<div style="unicode-bidi: bidi-override"
+  data-expected="bidi-override"></div>
+
+<div style="unicode-bidi: embed">
+  <span title="unicode-bidi should not inherit"
+    data-expected="normal"></span>
+</div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).unicodeBidi;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/unicode-bidi-parsing-002.html b/testing/web-platform/tests/css/css-writing-modes/unicode-bidi-parsing-002.html
new file mode 100644
index 0000000000..2136d79996
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/unicode-bidi-parsing-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing unicode-bidi: isolate, isolate-override, plaintext</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#unicode-bidi">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the unicode-bidi: isolate, isolate-override, plaintext.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="unicode-bidi: isolate"
+  data-expected="isolate"></div>
+<div style="unicode-bidi: isolate-override"
+  data-expected="isolate-override"></div>
+<div style="unicode-bidi: plaintext"
+  data-expected="plaintext"></div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).unicodeBidi;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-002-ref.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-002-ref.xht
new file mode 100644
index 0000000000..d665f7078f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-002-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img#blue
+    {
+      padding-left: 60px; /* = the position of blue square */
+    }
+
+    img#orange
+    {
+      margin-top: 30px;
+    }
+
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
+
+<div>
+   <img id="blue" src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled" /><!--
+--><img id="orange" src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" />
+</div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-002.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-002.xht
new file mode 100644
index 0000000000..70b6af18c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-002.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'top', the physical right (logical top) edge of an inline non-replaced box is aligned with the physical right (logical top) edge of its line box." />
+    <link rel="match" href="vertical-alignment-002-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: top;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
+
+  <div id="rl">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-003.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-003.xht
new file mode 100644
index 0000000000..80ca678d26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-003.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'top', the physical right (logical top) edge of an inline non-replaced box is aligned with the physical right (logical top) edge of its line box." />
+    <link rel="match" href="vertical-alignment-002-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: top;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
+
+  <div id="lr">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-004-ref.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-004-ref.xht
new file mode 100644
index 0000000000..d14124c57e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-004-ref.xht
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-01 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img
+    {
+      padding-left: 60px; /* =  position of orange squares */
+    }
+
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+<div>
+   <img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br/><!--
+--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-004.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-004.xht
new file mode 100644
index 0000000000..b03203e402
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-004.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-01 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area." />
+    <link rel="match" href="vertical-alignment-004-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: vertical-rl;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-top;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="rl">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-005.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-005.xht
new file mode 100644
index 0000000000..d511b6c1cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-005.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-top' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area." />
+    <link rel="match" href="vertical-alignment-004-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: vertical-lr;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-top;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="lr">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-006-ref.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-006-ref.xht
new file mode 100644
index 0000000000..f335c3bb74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-006-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      vertical-align: top;
+    }
+
+    img
+    {
+      padding-left: 60px; /* = the position of first orange square */
+    }
+
+    img + br + img
+    {
+      padding-left: 90px; /* = the position of second orange square*/
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+<div>
+   <img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br/><!--
+--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-006.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-006.xht
new file mode 100644
index 0000000000..da22c5b9fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-006.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-bottom' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area." />
+    <link rel="match" href="vertical-alignment-006-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: vertical-rl;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-bottom;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="rl">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-007.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-007.xht
new file mode 100644
index 0000000000..9984364835
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-007.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-bottom' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area." />
+    <link rel="match" href="vertical-alignment-006-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: vertical-lr;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-bottom;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="lr">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-008-ref.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-008-ref.xht
new file mode 100644
index 0000000000..0eab9b6df9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-008-ref.xht
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img#orange
+    {
+      padding-left: 30px;
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
+
+<div>
+  <img id="orange" src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /><!--
+--><img src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-008.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-008.xht
new file mode 100644
index 0000000000..510b06fb9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-008.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+   <title>CSS Writing Modes Test: vertical-align - 'bottom' and vertical-rl writing-mode</title>
+   <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+   <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+   <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+   <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+   <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the physical left (logical bottom) edge of its line box." />
+    <link rel="match" href="vertical-alignment-008-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: bottom;
+      margin-top: -1em;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
+
+  <div id="rl">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-009.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-009.xht
new file mode 100644
index 0000000000..3229972145
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-009.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'bottom' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-03 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the physical left (logical bottom) edge of its line box." />
+    <link rel="match" href="vertical-alignment-008-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: bottom;
+      margin-top: -1em;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
+
+  <div id="lr">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-029.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-029.xht
new file mode 100644
index 0000000000..f14078f6c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-029.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and sideways-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'top', the physical left (logical top) edge of an inline non-replaced box is aligned with the physical left (logical top) edge of its line box." />
+    <link rel="match" href="vertical-alignment-008-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      writing-mode: sideways-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+      margin-top: 46px; /* 30px (height of orange square) + 16px (p's margin-bottom) */
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: top;
+      margin-bottom: -2em;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
+
+  <div id="slr">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-031.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-031.xht
new file mode 100644
index 0000000000..e578a7177e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-031.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-top' and sideways-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'text-top', the physical left (logical top) edge of an inline non-replaced box is aligned with the left side (logical top) of parent's content area." />
+    <link rel="match" href="vertical-alignment-006-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: sideways-lr;
+      margin-top: 76px; /* 60px (height of A) + 16px (p's margin-bottom) */
+    }
+
+    span#orange30
+    {
+      margin-bottom: -3em; /* computes to -90px */
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-top;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="slr">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-033.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-033.xht
new file mode 100644
index 0000000000..a832bb960e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-033.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-bottom' and sideways-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'text-bottom', the physical right (logical bottom) edge of an inline non-replaced box is aligned with the right side (logical bottom) of parent's content area." />
+    <link rel="match" href="vertical-alignment-004-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: sideways-lr;
+      margin-top: 76px; /* 60px (height of A) + 16px (p's margin-bottom) */
+    }
+
+    span#orange30
+    {
+      margin-bottom: -3em; /* computes to -90px */
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-bottom;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="slr">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-035.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-035.xht
new file mode 100644
index 0000000000..e6a7f2378a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-035.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'bottom' and sideways-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'bottom', the physical right (logical bottom) edge of an inline non-replaced box is aligned with the physical right (logical bottom) edge of its line box." />
+    <link rel="match" href="vertical-alignment-002-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      writing-mode: sideways-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+      margin-top: 46px; /* 30px (height of orange square) + 16px (p's margin-bottom) */
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: bottom;
+      margin-bottom: -2em; /* computes to -60px */
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
+
+  <div id="slr">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-037.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-037.xht
new file mode 100644
index 0000000000..150e78449a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-037.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and sideways-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr' and 'vertical-align' is 'super', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      writing-mode: sideways-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-bottom: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="slr">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-039.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-039.xht
new file mode 100644
index 0000000000..e5d516bc93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-039.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and sideways-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr' and 'vertical-align' is 'sub', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      writing-mode: sideways-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-bottom: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="slr">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-041.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-041.xht
new file mode 100644
index 0000000000..6fada25e03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-041.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and sideways-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-slr-049-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#slr
+    {
+      writing-mode: sideways-lr;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+    }
+
+    span
+    {
+      font-size: 0.8em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="slr">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-049-ref.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-049-ref.xht
new file mode 100644
index 0000000000..20f6252df5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-slr-049-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      padding-left: 100px;
+      vertical-align: top;
+    }
+    img + br + img
+    {
+      padding-left: 100px;
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div>
+  <img src="support/swatch-blue.png" width="80" height="80" alt="Image download support must be enabled" /><br /><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-028.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-028.xht
new file mode 100644
index 0000000000..7aa9130187
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-028.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and sideways-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'top', the physical right (logical top) edge of an inline non-replaced box is aligned with the physical right (logical top) edge of its line box." />
+    <link rel="match" href="vertical-alignment-002-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      writing-mode: sideways-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: top;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
+
+  <div id="srl">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-030.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-030.xht
new file mode 100644
index 0000000000..4255e88144
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-030.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-top' and sideways-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area." />
+    <link rel="match" href="vertical-alignment-004-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: sideways-rl;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-top;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="srl">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-032.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-032.xht
new file mode 100644
index 0000000000..fc557904c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-032.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'text-bottom' and sideways-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area." />
+    <link rel="match" href="vertical-alignment-006-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      color: orange;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      writing-mode: sideways-rl;
+    }
+
+    span#orange30
+    {
+      font-size: 0.5em; /* computes to 30px */
+      vertical-align: text-bottom;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
+
+  <div id="srl">A<span id="orange30">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-034.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-034.xht
new file mode 100644
index 0000000000..80524735ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-034.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+   <title>CSS Writing Modes Test: vertical-align - 'bottom' and sideways-rl writing-mode</title>
+   <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+   <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+   <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+   <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+   <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the physical left (logical bottom) edge of its line box." />
+    <link rel="match" href="vertical-alignment-008-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      writing-mode: sideways-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+    }
+
+    span#orange
+    {
+      font-size: 0.5em;
+      color: orange;
+      vertical-align: bottom;
+      margin-top: -1em;
+    }
+
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
+
+  <div id="srl">A<span id="orange">O</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-036.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-036.xht
new file mode 100644
index 0000000000..8072f2d98c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-036.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and sideways-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      writing-mode: sideways-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="srl">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-038.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-038.xht
new file mode 100644
index 0000000000..5b8b8e46ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-038.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and sideways-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      writing-mode: sideways-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="srl">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-040.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-040.xht
new file mode 100644
index 0000000000..f0a207a736
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-srl-040.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and sideways-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-12-11 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-4/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-vrl-026-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#srl
+    {
+      writing-mode: sideways-rl;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+    }
+
+    span
+    {
+      font-size: 0.8em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="srl">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-011.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-011.xht
new file mode 100644
index 0000000000..010dd63aa3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-011.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-mixed
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="lr-mixed">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-013.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-013.xht
new file mode 100644
index 0000000000..0c104c1477
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-013.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-upright
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="lr-upright">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-015.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-015.xht
new file mode 100644
index 0000000000..b6c6e4ed72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-015.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'sideways', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-sideways
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="lr-sideways">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-017.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-017.xht
new file mode 100644
index 0000000000..304ce1dbef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-017.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-mixed
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="lr-mixed">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-019.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-019.xht
new file mode 100644
index 0000000000..a99301a3ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-019.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-upright
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="lr-upright">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-021.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-021.xht
new file mode 100644
index 0000000000..e2229b183e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-021.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'sideways', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-sideways
+    {
+      writing-mode: vertical-lr;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="lr-sideways">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-023.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-023.xht
new file mode 100644
index 0000000000..6a6b62e338
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-023.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-vrl-022-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-upright
+    {
+      writing-mode: vertical-lr;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      font-size: 0.2em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="lr-upright">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-025.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-025.xht
new file mode 100644
index 0000000000..03d0f671d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-025.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-31 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-vrl-022-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-mixed
+    {
+      writing-mode: vertical-lr;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      font-size: 0.2em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="lr-mixed">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-027.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-027.xht
new file mode 100644
index 0000000000..9c4c13e429
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vlr-027.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-lr writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-29 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'text-orientation' is 'sideways', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-vrl-026-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#lr-sideways
+    {
+      writing-mode: vertical-lr;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      font-size: 0.8em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="lr-sideways">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-010.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-010.xht
new file mode 100644
index 0000000000..94e0d331de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-010.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="rl-mixed">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-012.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-012.xht
new file mode 100644
index 0000000000..7c91b9109c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-012.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="rl-upright">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-014.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-014.xht
new file mode 100644
index 0000000000..30d15b2163
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-014.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'super' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-sideways
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="rl-sideways">X<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-016.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-016.xht
new file mode 100644
index 0000000000..9e1ae86f96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-016.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="rl-mixed">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-018.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-018.xht
new file mode 100644
index 0000000000..fa664b0ec2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-018.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="rl-upright">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-020.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-020.xht
new file mode 100644
index 0000000000..0f9494810c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-020.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-sideways
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="rl-sideways">O<span>2</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-022-ref.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-022-ref.xht
new file mode 100644
index 0000000000..115b536c64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-022-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      padding-left: 100px;
+      vertical-align: top;
+    }
+    img + br + img
+    {
+      padding-left: 180px; /* 100 px (padding-left) + 80 px (the position of small blue box)*/
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div>
+  <img class="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled" /><br/><img class="blue" src="support/swatch-blue.png" width="20" height="20" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-022.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-022.xht
new file mode 100644
index 0000000000..6d74d25efd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-022.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-vrl-022-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      writing-mode: vertical-rl;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      font-size: 0.2em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-upright">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-024.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-024.xht
new file mode 100644
index 0000000000..cf382cecb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-024.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-31 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-vrl-022-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      writing-mode: vertical-rl;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      font-size: 0.2em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-mixed">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-026-ref.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-026-ref.xht
new file mode 100644
index 0000000000..09bb6f0e1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-026-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      padding-left: 100px;
+      vertical-align: top;
+    }
+    img + br + img
+    {
+      padding-left: 120px;
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div>
+  <img class="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled" /><br/><img class="blue" src="support/swatch-blue.png" width="80" height="80" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-026.xht b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-026.xht
new file mode 100644
index 0000000000..35560e940b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vertical-alignment-vrl-026.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-10-26 -->
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways, 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-vrl-026-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+    div#rl-sideways
+    {
+      writing-mode: vertical-rl;
+      font: 100px/3 Ahem; /* computes to 100px/300px */
+      color: blue;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      font-size: 0.8em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-sideways">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats-ref.html b/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats-ref.html
new file mode 100644
index 0000000000..17af7ea5a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a text-orientation:sideways block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-lr;
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats.html b/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats.html
new file mode 100644
index 0000000000..b381a50e98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a text-orientation:sideways block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="vlr-text-orientation-sideways-alongside-vlr-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="This test verifies that the orange block box, which should not create a new block formatting context, should flow next to the first float." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-lr;
+    text-orientation: sideways; /* Should not create block formatting context */
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vrl-inline-paint-invalidation.html b/testing/web-platform/tests/css/css-writing-modes/vrl-inline-paint-invalidation.html
new file mode 100644
index 0000000000..a804e4d7c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vrl-inline-paint-invalidation.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1206914">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="font: 100px/1 Ahem; color: green; width: 50px; height: 100px; writing-mode: vertical-rl; line-height: 0; background: red;">
+  <div style="width: 100%;">
+    <span style="position: relative; left: -50px;">X</span>
+  </div>
+</div>
+<script>
+waitForAtLeastOneFrame().then(function() {
+  document.getElementById('target').style.width = '100px';
+  takeScreenshot();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats-ref.html b/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats-ref.html
new file mode 100644
index 0000000000..52c0a9bf1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a text-orientation:sideways block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-rl;
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats.html b/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats.html
new file mode 100644
index 0000000000..cf0c3124a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a text-orientation:sideways block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="vrl-text-orientation-sideways-alongside-vrl-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="This test verifies that the orange block box, which should not create a new block formatting context, should flow next to the first float." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-rl;
+    text-orientation: sideways; /* Should not create block formatting context */
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-001-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-001-ref.html
new file mode 100644
index 0000000000..2e8df84f21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-001-ref.html
@@ -0,0 +1,22 @@
+<html>
+  <meta chartset=utf-8>
+  <title>Test Reference</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+html {
+  writing-mode: vertical-rl;
+}
+body {
+  writing-mode: vertical-rl;
+  width: 0; height: 0;
+}
+html::before {
+  content: "This text must be vertical.";
+}
+html::after {
+  content: "This text must be horizontal.";
+  display: block;
+  writing-mode: horizontal-tb;
+}
+</style>
+<body></body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-001.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-001.html
new file mode 100644
index 0000000000..a86d32f3ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-001.html
@@ -0,0 +1,29 @@
+<html>
+  <meta chartset=utf-8>
+  <title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
+  <link rel="match" href="wm-propagation-001-ref.html">
+  <meta name=assert content="the writing mode of the body must be propagated to the root, but the computed value must not change.">
+<style>
+html {
+  writing-mode: horizontal-tb;
+}
+body {
+  writing-mode: vertical-rl;
+  width: 0; height: 0;
+}
+html::after {
+  content: "This text must be horizontal.";
+  display: block;
+  /* The writing mode inherited from the root must be horizontal
+  since the root's computed value should be horizontal */
+
+}
+</style>
+<script>
+  document.documentElement.append("This text must be vertical.");
+  /* This is direct content of the root,
+     and should therefore be vertical,
+     as the root's used value is vertical */
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-002-ref.html
new file mode 100644
index 0000000000..cd692dbffd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-002-ref.html
@@ -0,0 +1,21 @@
+<html>
+  <meta chartset=utf-8>
+  <title>Test reference</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+html {
+  direction: rtl;
+}
+body {
+  height: 0;
+}
+html::before {
+  content: "This text must be on the right";
+}
+html::after {
+  content: "This text must be on the left";
+  display: block;
+  direction: ltr;
+}
+</style>
+<body></body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-002.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-002.html
new file mode 100644
index 0000000000..42f5b1b3fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-002.html
@@ -0,0 +1,21 @@
+<html>
+  <meta chartset=utf-8>
+  <title>CSS-Writing Modes Test: propagation of the direction property from body to root</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
+  <link rel="match" href="wm-propagation-002-ref.html">
+  <meta name=assert content="the 'direction' of the body must be propagated to the root, but the computed value must not change.">
+<style>
+body {
+  direction: rtl;
+  height: 0;
+}
+html::before {
+  content: "This text must be on the right";
+}
+html::after {
+  content: "This text must be on the left";
+  display: block;
+}
+</style>
+<body></body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-032.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-032.html
new file mode 100644
index 0000000000..94e3b24ab1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-032.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  body
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-033-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-033-ref.html
new file mode 100644
index 0000000000..766c85701d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-033-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      padding-left: 1em;
+    }
+  </style>
+
+  <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-033.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-033.html
new file mode 100644
index 0000000000..8b9b67229f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-033.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-033-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html::before
+    {
+      background-color: orange;
+      content: "";
+      display: block;
+      height: 100px;
+      margin-left: 8px;
+      margin-top: 8px;
+      margin-right: 1em;
+      width: 100px;
+    }
+
+  body
+    {
+      writing-mode: vertical-lr;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-034.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-034.html
new file mode 100644
index 0000000000..48191a0847
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-034.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  body
+    {
+      writing-mode: sideways-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-035-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-035-ref.html
new file mode 100644
index 0000000000..c3fdba1b74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-035-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      bottom: 8px;
+      left: auto;
+      position: absolute;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      padding-left: 1em;
+    }
+  </style>
+
+  <div><img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is a teal square in
+  the <strong>lower-left corner</strong> of the page.
+  -->
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-035.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-035.html
new file mode 100644
index 0000000000..e4e4e2db94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-035.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-035-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  body
+    {
+      writing-mode: sideways-lr;
+    }
+
+  div
+    {
+      background-color: teal;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a teal square in
+  the <strong>lower-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-036.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-036.html
new file mode 100644
index 0000000000..f16fd087cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-036.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102175" title="Bug 1102175: &lt;body&gt; with writing-mode: vertical-rl does not align children to the right ">
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  body
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-037.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-037.html
new file mode 100644
index 0000000000..296922a6b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-037.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-033-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  html::before
+    {
+      background-color: orange;
+      content: "";
+      display: block;
+      height: 100px;
+      margin-left: 8px;
+      margin-top: 8px;
+      margin-right: 1em;
+      width: 100px;
+    }
+
+  body
+    {
+      writing-mode: vertical-lr;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-038.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-038.html
new file mode 100644
index 0000000000..85902725b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-038.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  body
+    {
+      writing-mode: sideways-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-039.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-039.html
new file mode 100644
index 0000000000..b2c5958705
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-039.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-035-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  body
+    {
+      writing-mode: sideways-lr;
+    }
+
+  div
+    {
+      background-color: teal;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a teal square in
+  the <strong>lower-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-040.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-040.html
new file mode 100644
index 0000000000..edbb1ca51e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-040.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-033-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  img#orange-square
+    {
+      height: 100px;
+      padding-right: 1em;
+      vertical-align: top;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-041.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-041.html
new file mode 100644
index 0000000000..f42370b852
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-041.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-033-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      background-color: orange;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-042-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-042-ref.html
new file mode 100644
index 0000000000..d86e926463
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-042-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+  </style>
+
+  <img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <p style=margin-top:-8px>This text must be written sideways: vertically, with letters rotated 90 degrees.
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-042.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-042.html
new file mode 100644
index 0000000000..267ec97609
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-042.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-042-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'sideways-rl', the test checks that a simple text is not affected by 'text-orientation: upright' since 'text-orientation: upright' should have no impact and no rendering effect on it.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  html::after
+    {
+      content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
+      text-orientation: upright;
+      /* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
+    }
+
+  body
+    {
+      writing-mode: sideways-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-043.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-043.html
new file mode 100644
index 0000000000..9b2bf0c20c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-043.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-035-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      writing-mode: sideways-lr;
+    }
+
+  div
+    {
+      background-color: teal;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a teal square in
+  the <strong>lower-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-044-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-044-ref.html
new file mode 100644
index 0000000000..9cf46c0b21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-044-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+
+  img#orange-square
+    {
+      padding-right: 16px;
+      vertical-align: top;
+    }
+  div
+    {
+      margin-left: -8px;
+      writing-mode: vertical-rl;
+    }
+  </style>
+
+
+  <p><img id="orange-square" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <div>This text must be written vertically, below the orange square.</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-044.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-044.html
new file mode 100644
index 0000000000..d7a3f46f3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-044.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-044-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. We also check that the computed value is unaffected by inheriting it into a pseudo element.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  html::after
+    {
+      content: "This text must be written vertically, below the orange square.";
+      display: block;
+    }
+
+  body
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  img#orange-square
+    {
+      height: 100px;
+      padding-right: 1em;
+      vertical-align: top;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <p><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></p>
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-045.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-045.html
new file mode 100644
index 0000000000..cb75fe69af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-045.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-046.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-046.html
new file mode 100644
index 0000000000..e6e2c5789d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-046.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      writing-mode: sideways-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-047-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-047-ref.html
new file mode 100644
index 0000000000..80e95b35be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-047-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  html
+    {
+      writing-mode: sideways-lr;div
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  div
+    {
+      margin-left: 1em;
+      margin-bottom: -8px;
+    }
+  </style>
+
+  <img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled">
+  <p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></p>
+
+  <!--
+  The image says:
+  Test passes if there is a teal square in
+  the <strong>lower-left corner</strong> of the page.
+  -->
+
+  <div>This text must be written sideways: vertically, with letters rotated 90 degrees.</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-047.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-047.html
new file mode 100644
index 0000000000..cd217bfcb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-047.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-047-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      writing-mode: sideways-lr;
+    }
+
+  html::after
+    {
+      content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
+      text-orientation: upright; /* this has no effect with sideways-rl, but does with vertical-rl*/
+    }
+
+  div
+    {
+      background-color: teal;
+      height: 100px;
+      width: 100px;
+    }
+  img
+    {
+      display: block;
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a teal square in
+  the <strong>lower-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-048.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-048.html
new file mode 100644
index 0000000000..04f842281d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-048.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-033-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+
+  body
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  img#orange-square
+    {
+      height: 100px;
+      padding-right: 1em;
+      vertical-align: top;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-049-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-049-ref.html
new file mode 100644
index 0000000000..fb5f2a3c47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-049-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      margin: 0px;
+    }
+
+  p
+    {
+      text-orientation: upright;
+    }
+
+  img
+    {
+      padding-top: 8px;
+    }
+
+  img#blue
+    {
+      padding-left: 16px;
+      padding-right: 8px;
+    }
+  </style>
+
+
+  <img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
+
+  <div><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <p>This text must be vertical, with letters upright.
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-049.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-049.html
new file mode 100644
index 0000000000..92de2a28b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-049.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-049-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-rl', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+
+  html::after
+    {
+      content: "This text must be vertical, with letters upright.";
+      text-orientation: upright;
+      /* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
+    }
+
+  body
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-050.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-050.html
new file mode 100644
index 0000000000..19086d5708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-050.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-033-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+
+  body
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      background-color: orange;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-051.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-051.html
new file mode 100644
index 0000000000..4f43a7d995
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-051.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-035-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-rl;
+    }
+
+  body
+    {
+      writing-mode: sideways-lr;
+    }
+
+  div
+    {
+      background-color: teal;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a teal square in
+  the <strong>lower-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-052.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-052.html
new file mode 100644
index 0000000000..a574f3099d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-052.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-033-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+
+  body
+    {
+      writing-mode: horizontal-tb;
+    }
+
+  img#orange-square
+    {
+      height: 100px;
+      padding-right: 1em;
+      vertical-align: top;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-053.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-053.html
new file mode 100644
index 0000000000..514a4df445
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-053.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+
+  body
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-054-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-054-ref.html
new file mode 100644
index 0000000000..1e6f6343b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-054-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      text-orientation: upright;
+    }
+  </style>
+
+
+  <img id="orange" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled">
+
+  <p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <div>This text must be vertical, with letters upright.</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-054.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-054.html
new file mode 100644
index 0000000000..e02508732a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-054.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="wm-propagation-body-054-ref.html">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-lr', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+
+  html::after
+    {
+      content: "This text must be vertical, with letters upright.";
+      text-orientation: upright;
+      /* 'text-orientation: upright' has no effect with 'sideways-lr', but does with 'vertical-lr' */
+      margin-top: 8px;
+    }
+
+  body
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div
+    {
+      background-color: orange;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is an orange square
+  in the <strong>upper-left corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-055.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-055.html
new file mode 100644
index 0000000000..5128ec709f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-055.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+
+  <meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
+
+  <!--
+  Tests 032 to 035: html's writing-mode is not specified
+
+  Tests 036 to 039: html's writing-mode is specified as horizontal-tb
+
+  Tests 040 to 043: html's writing-mode is specified as vertical-rl
+
+  Tests 044 to 047: html's writing-mode is specified as vertical-lr
+
+  Tests 048 to 051: html's writing-mode is specified as sideways-rl
+
+  Tests 052 to 055: html's writing-mode is specified as sideways-lr
+  -->
+
+  <style>
+  html
+    {
+      writing-mode: sideways-lr;
+    }
+
+  body
+    {
+      writing-mode: sideways-rl;
+    }
+
+  div
+    {
+      background-color: blue;
+      height: 100px;
+      width: 100px;
+    }
+
+  h1#second-test-condition
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function verifyComputedValueDocRoot()
+  {
+  if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
+    {
+    document.getElementById("second-test-condition").style.display = "none";
+    };
+
+    /*
+    If the computed value of 'writing-mode' of the root element
+    itself is not affected by such propagation, then the big FAIL
+    word will not be displayed.
+    */
+  }
+  </script>
+
+ <body onload="verifyComputedValueDocRoot();">
+
+  <div></div>
+
+  <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
+
+  <!--
+  The image says:
+  Test passes if there is a blue square in the
+  <strong>upper-right corner</strong> of the page.
+  -->
+
+  <h1 id="second-test-condition">FAIL</h1>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-direction-001.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-direction-001.html
new file mode 100644
index 0000000000..035f608165
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-direction-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: computed 'direction' of root element when 'writing-mode' for &lt;body&gt; propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+
+  <meta name="assert" content="When the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of 'writing-mode' and 'direction' on such first child element instead of taken from the root element. In this test, a small script verifies that the computed value of 'direction' of the root element itself is not affected by such propagation.">
+
+  <!--
+  This test *only* verifies the computed value of 'direction' of the
+  root element.
+
+  This test does *not* verify if the 'writing-mode' value of
+  the body element propagates to the root element.
+  -->
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <style>
+  html
+    {
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+  </style>
+
+  <script>
+  function startTesting()
+  {
+
+    test(function()
+      {
+
+      assert_equals(getComputedStyle(document.documentElement).direction, "rtl" );
+
+      }, "First test on computed value of 'direction' of root element.");
+
+  }
+
+  startTesting();
+
+  </script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-direction-002.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-direction-002.html
new file mode 100644
index 0000000000..e83da48474
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-direction-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Writing Modes Test: computed 'direction' of root element when 'writing-mode' for &lt;body&gt; propagates to viewport</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">
+  <!--
+  Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
+  element cause an orthogonal flow?
+  https://github.com/w3c/csswg-drafts/issues/3066
+  -->
+
+  <meta name="assert" content="When the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of 'writing-mode' and 'direction' on such first child element instead of taken from the root element. In this test, a small script verifies that the computed value of 'direction' of the root element itself is not affected by such propagation.">
+
+  <!--
+  This test *only* verifies the computed value of 'direction' of the
+  root element.
+
+  This test does *not* verify if the 'writing-mode' value of
+  the body element propagates to the root element.
+  -->
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <style>
+  html
+    {
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+  </style>
+
+  <script>
+  function startTesting()
+  {
+
+    test(function()
+      {
+
+      assert_equals(getComputedStyle(document.documentElement).direction, "ltr" );
+
+      }, "Second test on computed value of 'direction' of root element.");
+
+  }
+
+  startTesting();
+
+  </script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-root.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-root.html
new file mode 100644
index 0000000000..7741ac7051
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-computed-root.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Writing Modes Test: Computed writing-mode for html element when writing mode for body propagated to viewport</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">
+<meta name="assert" content="Test that propagating writing-mode from body to viewport does not affect the computed writing-mode of the html element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .vertical-lr { writing-mode: vertical-lr }
+</style>
+<body class="vertical-lr">
+<script>
+  test(function() {
+    assert_equals(getComputedStyle(document.body).writingMode, "vertical-lr");
+  }, "Check computed writing-mode for body element.");
+
+  test(function() {
+    assert_not_equals(getComputedStyle(document.documentElement).writingMode, "vertical-lr");
+  }, "Check computed writing-mode for html root element.");
+
+  test(function() {
+    document.body.className = "";
+    assert_not_equals(getComputedStyle(document.body).writingMode, "vertical-lr");
+  }, "Check computed writing-mode for body element when style no longer applies.");
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-contain-root-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-contain-root-ref.html
new file mode 100644
index 0000000000..150eba8bc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-contain-root-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<div style="writing-mode:vertical-rl">This text should run vertically on the left side</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-contain-root.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-contain-root.html
new file mode 100644
index 0000000000..af743ef017
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-contain-root.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Do not propagate writing-mode from body when html root is contained</title>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#principal-flow">
+<link rel="match" href="wm-propagation-body-contain-root-ref.html">
+<style>
+  html { contain: paint; }
+  body { writing-mode: vertical-rl; }
+</style>
+<body>This text should run vertically on the left side</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-001.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-001.html
new file mode 100644
index 0000000000..f8a39119f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
+  <link rel="match" href="block-flow-direction-025-ref.xht">
+  <meta name=assert content="The writing mode of the body must be propagated to the root with the dynamic change.">
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+    document.body.style.writingMode = "vertical-rl";
+  }
+  </script>
+
+  <style>
+  div {
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+  </style>
+
+  <body onload="runTest();">
+    <div></div>
+
+    <p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if there is a blue square in the
+         <strong>upper-right corner</strong> of the page.
+    -->
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-002-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-002-ref.html
new file mode 100644
index 0000000000..8399795c50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-002-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  main {
+    writing-mode: horizontal-tb;
+    inline-size: 100px;
+  }
+
+  div {
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+  </style>
+
+  <main>
+    <div></div>
+    <p>Test passes if you see a blue square in the upper-right corner of the page</p>
+  </main>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-002.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-002.html
new file mode 100644
index 0000000000..4690de1891
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-002.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
+  <link rel="match" href="wm-propagation-body-dynamic-change-002-ref.html">
+  <meta name=assert content="The writing mode of the newly inserted body must be propagated to the root.">
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    var newBody = document.createElement("body");
+    newBody.id = "new-body";
+    var oldBody = document.getElementById("old-body");
+
+    /* Insert a new <body> before the old one, which should become the primary <body>. */
+    document.documentElement.insertBefore(newBody, oldBody);
+  }
+  </script>
+
+  <style>
+  #new-body {
+    /* This writing-mode should propagate to the root element. */
+    writing-mode: vertical-rl;
+    margin: 0;
+  }
+
+  #old-body {
+    writing-mode: horizontal-tb;
+    inline-size: 100px;
+  }
+
+  div {
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+  </style>
+
+  <body id="old-body" onload="runTest();">
+    <div></div>
+    <p>Test passes if you see a blue square in the upper-right corner of the page</p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-003-ref.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-003-ref.html
new file mode 100644
index 0000000000..30e72f0df7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-003-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<body style="margin:0">This text must be horizontal.</body>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-003.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-003.html
new file mode 100644
index 0000000000..8e8bf03c31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-dynamic-change-003.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: propagation of the writing-mode property from body to root with text children</title>
+<link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
+<link rel="match" href="wm-propagation-body-dynamic-change-003-ref.html">
+<body style="writing-mode: vertical-rl"></body>
+<script>
+  document.documentElement.insertBefore(
+    document.createTextNode("This text must be horizontal."), document.body);
+  document.body.offsetTop;
+  document.body.style.writingMode = "horizontal-tb";
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-scroll-offset-vertical-lr.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-scroll-offset-vertical-lr.html
new file mode 100644
index 0000000000..ecab4a84e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-scroll-offset-vertical-lr.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Writing Modes Test: body vertical-lr propagated to viewport - scroll direction</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">
+<meta name="assert" content="Test that propagating writing-mode from body to viewport affects scroll direction">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  html { writing-mode: vertical-rl; }
+  body { writing-mode: vertical-lr; width: 10000px; }
+
+  .result-wm, .result-wm > body {
+    writing-mode: horizontal-tb;
+    width: auto;
+  }
+</style>
+<body>
+<script>
+  test(function() {
+    assert_equals(document.scrollingElement.scrollLeft, 0, "scrollLeft should be 0.");
+  }, "Check initial scroll position of viewport.");
+
+  test(function() {
+    document.scrollingElement.scrollLeft = -1000;
+    assert_equals(document.scrollingElement.scrollLeft, 0, "scrollLeft should be 0.");
+  }, "Scroll to scrollLeft = -1000 should not be possible.");
+
+  test(function() {
+    document.scrollingElement.scrollLeft = 1000;
+    assert_equals(document.scrollingElement.scrollLeft, 1000, "scrollLeft should be 1000.");
+  }, "Scroll to scrollLeft = 1000 should be possible.");
+
+  // Reset back to horizontal-tb to make the result readable on-screen.
+  document.scrollingElement.className = "result-wm";
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-scroll-offset-vertical-rl.html b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-scroll-offset-vertical-rl.html
new file mode 100644
index 0000000000..eb327b00c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-body-scroll-offset-vertical-rl.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Writing Modes Test: body vertical-rl propagated to viewport - scroll direction</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">
+<meta name="assert" content="Test that propagating writing-mode from body to viewport affects scroll direction">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  html { writing-mode: vertical-lr; }
+  body { writing-mode: vertical-rl; width: 10000px; }
+
+  .result-wm, .result-wm > body {
+    writing-mode: horizontal-tb;
+    width: auto;
+  }
+</style>
+<body>
+<script>
+  test(function() {
+    assert_equals(document.scrollingElement.scrollLeft, 0, "scrollLeft should be 0.");
+  }, "Check initial scroll position of viewport.");
+
+  test(function() {
+    document.scrollingElement.scrollLeft = -1000;
+    assert_equals(document.scrollingElement.scrollLeft, -1000, "scrollLeft should be -1000.");
+  }, "Scroll to scrollLeft = -1000 should be possible.");
+
+  test(function() {
+    document.scrollingElement.scrollLeft = 1000;
+    assert_equals(document.scrollingElement.scrollLeft, 0, "scrollLeft should be 0.");
+  }, "Scroll to scrollLeft = 1000 should not be possible.");
+
+  // Reset back to horizontal-tb to make the result readable on-screen.
+  document.scrollingElement.className = "result-wm";
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/wm-propagation-svg-root-scrollbar.svg b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-svg-root-scrollbar.svg
new file mode 100644
index 0000000000..bb86217904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/wm-propagation-svg-root-scrollbar.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="2000px" height="100px" style="direction: rtl;">
+  <g id="testmeta">
+    <title>CSS-Writing Modes Test: Principal Writing Mode</title>
+    <html:link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"/>
+    <html:link rel="author" title="Mozilla" href="https://mozilla.org/"/>
+    <html:link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow"/>
+    <html:link rel="mismatch" href="../reference/blank.html"/>
+    <decs class="assert">This test verifies setting "direction:rtl" on the svg root
+    with a large width can generate a horizontal scroll bar.</decs>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-horizontal-001l.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-horizontal-001l.html
new file mode 100644
index 0000000000..44ef05db12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-horizontal-001l.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright in horizontal writing mode</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<link rel="match" href="reference/writing-mode-horizontal-001l-ref.html">
+<meta name="assert" content="text-combine-upright does not have an effect in horizontal writing modes.">
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  font-size: 5em;
+  line-height: 1;
+}
+
+.tcy {
+  text-combine-upright: all;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if the following texts are identical:</p>
+
+<div class="test">
+  <p><span class="tcy">2014</span></p>
+  <p>2014</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-horizontal-001r.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-horizontal-001r.html
new file mode 100644
index 0000000000..1e3cfcf69f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-horizontal-001r.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Writing Modes: text-combine-upright in horizontal writing mode</title>
+<link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura">
+<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
+<link rel="match" href="reference/writing-mode-horizontal-001r-ref.html">
+<meta name="assert" content="text-combine-upright does not have an effect in horizontal writing modes.">
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  font-size: 5em;
+  line-height: 1;
+  direction: rtl;
+}
+
+.tcy {
+  text-combine-upright: all;
+}
+</style>
+</head>
+<body>
+
+<p>Test passes if the following texts are identical:</p>
+
+<div class="test">
+  <p><span class="tcy">2014</span></p>
+  <p>2014</p>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-initial-ref.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-initial-ref.html
new file mode 100644
index 0000000000..6f7b84fa72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-initial-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<div>
+  <div>
+    horizontal
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-initial.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-initial.html
new file mode 100644
index 0000000000..2e7c927285
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-initial.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel=help href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<link rel=help href="https://crbug.com/1081659">
+<link rel="match" href="writing-mode-initial-ref.html">
+<div style="writing-mode:vertical-rl">
+  <div style="writing-mode:initial">
+    horizontal
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-001.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-001.html
new file mode 100644
index 0000000000..02d4bc8418
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing writing-mode</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the writing-mode property.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div
+  data-expected="horizontal-tb" title="writing-mode initial value"></div>
+
+<div style="writing-mode: vertical-rl"
+  data-expected="vertical-rl"></div>
+<div style="writing-mode: vertical-lr"
+  data-expected="vertical-lr"></div>
+
+<div style="writing-mode: vertical-rl">
+  <div
+    data-expected="vertical-rl" title="writing-mode should inherit"></div>
+
+  <div style="writing-mode: horizontal-tb"
+    data-expected="horizontal-tb"></div>
+
+  <div style="writing-mode: initial"
+    data-expected="horizontal-tb"></div>
+  <div style="writing-mode: inherit"
+    data-expected="vertical-rl"></div>
+  <div style="writing-mode: horizontal-tb; writing-mode: inherit"
+    data-expected="vertical-rl"></div>
+
+  <div style="writing-mode: foo"
+    data-expected="vertical-rl"></div>
+</div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).writingMode;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-sideways-lr-001.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-sideways-lr-001.html
new file mode 100644
index 0000000000..0997dae95c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-sideways-lr-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing writing-mode: sideways-lr</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the writing-mode: sideways-lr.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="writing-mode: sideways-lr"
+  data-expected="sideways-lr"></div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).writingMode;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-sideways-rl-001.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-sideways-rl-001.html
new file mode 100644
index 0000000000..dfd6f4b3cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-sideways-rl-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing writing-mode: sideways-rl</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the writing-mode: sideways-rl.">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="writing-mode: sideways-rl"
+  data-expected="sideways-rl"></div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).writingMode;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-svg1-001.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-svg1-001.html
new file mode 100644
index 0000000000..c78d21d99d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-parsing-svg1-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSS Writing Modes: parsing SVG 1.1 writing-mode values</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#svg-writing-mode">
+<meta name="assert" content="This test asserts the parser and getComputedStyle works correctly for the SVG 1.1 writing-mode values.">
+<meta name="flags" content="dom svg may">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="writing-mode: lr"
+  data-expected="horizontal-tb"></div>
+<div style="writing-mode: lr-tb"
+  data-expected="horizontal-tb"></div>
+<div style="writing-mode: rl"
+  data-expected="horizontal-tb"></div>
+<div style="writing-mode: rl-tb"
+  data-expected="horizontal-tb"></div>
+
+<div style="writing-mode: tb"
+  data-expected="vertical-rl"></div>
+<div style="writing-mode: tb-rl"
+  data-expected="vertical-rl"></div>
+
+<script>
+Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
+  test(function () {
+    var actual = getComputedStyle(element).writingMode;
+    assert_equals(actual, element.dataset.expected);
+  }, element.title || element.getAttribute("style"));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-lr-002.xht b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-lr-002.xht
new file mode 100644
index 0000000000..7e03cefd3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-lr-002.xht
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: writing-mode: vertical-lr - basic inline case</title>
+    <link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp" />
+    <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
+    <link rel="help" title="CSS3 Writing modes: 3.1. Block Flow Direction: the 'writing-mode' property" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" />
+    <link rel="match" href="reference/writing-mode-vertical-lr-002-ref.xht"/>
+    <meta name="flags" content="ahem" />
+    <meta content="This tests the block flow direction. The writing mode is vertical, and the block flow is left to right." />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+        div
+        {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            white-space: pre;
+            width: 6em;
+        }
+
+        #test
+        {
+            writing-mode: vertical-lr;
+        }
+    ]]></style>
+</head>
+<body>
+    <p>The upper block is identical to the lower block including each character positions.</p>
+    <div id="test">a bc
+d e fg
+hi
+j klm
+n oq r
+st uv</div>
+<div id="control">adhjns
+  i  t
+be ko
+c  lqu
+ f m v
+ g  r</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-001.xht b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-001.xht
new file mode 100644
index 0000000000..976bcd9125
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-001.xht
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: writing-mode: vertical-rl - basic inline case</title>
+    <link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp" />
+    <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
+    <link rel="help" title="CSS3 Writing modes: 3.1. Block Flow Direction: the 'writing-mode' property" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" />
+    <link rel="match" href="reference/writing-mode-vertical-rl-001-ref.xht"/>
+    <meta name="flags" content="ahem" />
+    <meta content="This tests the block flow direction. The writing mode is vertical, and the block flow is right to left." />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+        div
+        {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            white-space: pre;
+            width: 6em;
+        }
+
+        #test
+        {
+            writing-mode: vertical-rl;
+        }
+    ]]></style>
+</head>
+<body>
+    <p>The upper block is identical to the lower block including each character positions.</p>
+    <div id="test">ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</div>
+<div id="control">tomiea
+  n  b
+uq jf
+v  kgc
+ r l d
+ s  h</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-002.xht b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-002.xht
new file mode 100644
index 0000000000..7fcfca7081
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-002.xht
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: writing-mode: vertical-rl - basic inline case</title>
+    <link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp" />
+    <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
+    <link rel="help" title="CSS3 Writing modes: 3.1. Block Flow Direction: the 'writing-mode' property" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" />
+    <link rel="match" href="reference/writing-mode-vertical-rl-002-ref.xht"/>
+    <meta name="flags" content="ahem" />
+    <meta content="This tests the block flow direction. The writing mode is vertical, and the block flow is right to left." />
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css"><![CDATA[
+        div
+        {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            width: 6em;
+        }
+
+        #test
+        {
+            writing-mode: vertical-rl;
+        }
+    ]]></style>
+</head>
+<body>
+    <p>The upper block is identical to the lower block including each character positions.</p>
+    <div id="test">ab cd
+e fg h
+i jkl
+mn o q
+rs t
+uv</div>
+<div id="control">urmiea
+vsn&nbsp;&nbsp;x
+&nbsp;&nbsp;&nbsp;jf
+&nbsp;tokgc
+&nbsp;&nbsp;&nbsp;l d
+&nbsp;&nbsp;q h</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-003-ref.htm b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-003-ref.htm
new file mode 100644
index 0000000000..19c3343297
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-003-ref.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="KISAKA Toshihiro" href="mailto:toshihiro@kisaka.jp">
+    <meta name="flags" content="ahem">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css">
+        div {
+            writing-mode: vertical-rl;
+        }
+
+        div p {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            white-space: pre;
+            width: 6em;
+        }
+
+        div p:nth-child(2) {
+            background: pink;
+        }
+    </style>
+</head>
+<body>
+    <p>Upper three blocks are identical to the lower three blocks including each character positions.</p>
+
+    <div>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+        <p> h  s
+d l r
+cgk  v
+ fj qu
+b  n
+aeimot</p>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+    </div>
+
+    <div>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+        <p> h  s
+d l r
+cgk  v
+ fj qu
+b  n
+aeimot</p>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-003.htm b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-003.htm
new file mode 100644
index 0000000000..615ba667cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-003.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Writing Modes Test: writing-mode: horizontal-tb nested in vertical-rl</title>
+    <link rel="author" title="KISAKA Toshihiro" href="mailto:toshihiro@kisaka.jp">
+    <!-- You must have at least one spec link, but may have as many as are covered in the test. -->
+    <!-- Be sure to make the main testing area first in the order -->
+    <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
+    <!-- The match link is only required if this is a reftest -->
+    <link rel="match" href="writing-mode-vertical-rl-003-ref.htm">
+    <meta name="flags" content="ahem">
+    <meta name="assert" content="when child block has its own writing-mode, child block's writing-mode overwrites parent block's writing-mode.">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css">
+        div {
+            writing-mode: vertical-rl;
+        }
+
+        div p {
+            background: yellow;
+            color: blue;
+            font: 20px/1 Ahem;
+            height: 6em;
+            margin: 10px;
+            white-space: pre;
+            width: 6em;
+        }
+
+        div p:nth-child(2) {
+            background: pink;
+        }
+
+        p#test {
+            writing-mode: horizontal-tb;
+        }
+    </style>
+</head>
+<body>
+    <p>Upper three blocks are identical to the lower three blocks including each character positions.</p>
+
+    <div>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+        <p id="test">ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+    </div>
+
+    <div>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+        <p> h  s
+d l r
+cgk  v
+ fj qu
+b  n
+aeimot</p>
+        <p>ab cd
+e fg h
+i jkl
+mn
+o q rs
+t uv</p>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-001-manual.html
new file mode 100644
index 0000000000..ac5adb13f4
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-002-manual.html
new file mode 100644
index 0000000000..588d56d02c
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-003-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-003-manual.html
new file mode 100644
index 0000000000..0092129906
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-005-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-005-manual.html
new file mode 100644
index 0000000000..cd7b313add
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-006-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-006-manual.html
new file mode 100644
index 0000000000..bc09501ead
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-007-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-007-manual.html
new file mode 100644
index 0000000000..2e725addd3
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-008-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-008-manual.html
new file mode 100644
index 0000000000..30a3299890
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-009-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-009-manual.html
new file mode 100644
index 0000000000..287036dafe
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-010-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-010-manual.html
new file mode 100644
index 0000000000..8f5baee8ff
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-012-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-012-manual.html
new file mode 100644
index 0000000000..78ba92258a
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-014-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-014-manual.html
new file mode 100644
index 0000000000..0bcdb1f87b
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-015-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-015-manual.html
new file mode 100644
index 0000000000..c7c080e77d
--- /dev/null
+++ b/testing/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.png" alt="ref image"/> ᠤᠯᠤᠰ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-table-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-table-001-manual.html
new file mode 100644
index 0000000000..f323ed008c
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-table-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vlr-table-002-manual.html
new file mode 100644
index 0000000000..3a41d1fa60
--- /dev/null
+++ b/testing/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>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-001-manual.html
new file mode 100644
index 0000000000..8cea8b8b83
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-002-manual.html
new file mode 100644
index 0000000000..086f77e8b4
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-003-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-003-manual.html
new file mode 100644
index 0000000000..a0129a3d1b
--- /dev/null
+++ b/testing/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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-005-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-005-manual.html
new file mode 100644
index 0000000000..835ddaac79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-005-manual.html
@@ -0,0 +1,22 @@
+<!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">
+.test, .ref { 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="zh">国际化活动万维网联盟</div>
+<div class="ref"><img src="support/zh-orientation.png" alt="ref image"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-007-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-007-manual.html
new file mode 100644
index 0000000000..5574a100ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-007-manual.html
@@ -0,0 +1,23 @@
+<!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">
+.test { 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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-008-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-008-manual.html
new file mode 100644
index 0000000000..7401d6e78c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-008-manual.html
@@ -0,0 +1,23 @@
+<!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">
+.test, .ref { 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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-009-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-009-manual.html
new file mode 100644
index 0000000000..0486ac6f5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-009-manual.html
@@ -0,0 +1,23 @@
+<!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">
+.test, .ref { 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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-010-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-010-manual.html
new file mode 100644
index 0000000000..05f8de14ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-010-manual.html
@@ -0,0 +1,23 @@
+<!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">
+.test, .ref { 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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-012-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-012-manual.html
new file mode 100644
index 0000000000..71907e822a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-012-manual.html
@@ -0,0 +1,29 @@
+<!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">
+.test, .ref { font-size: 24px; float: left; margin-right: 30px; height: 200px; 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="200" 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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-014-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-014-manual.html
new file mode 100644
index 0000000000..2dcf570916
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-014-manual.html
@@ -0,0 +1,29 @@
+<!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">
+.test, .ref { 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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-015-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-015-manual.html
new file mode 100644
index 0000000000..e1a6f023a8
--- /dev/null
+++ b/testing/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.png" alt="ref image"/>万维网联盟</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html
new file mode 100644
index 0000000000..6963541d38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html
@@ -0,0 +1,30 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html
new file mode 100644
index 0000000000..f7c1b0f69a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html
@@ -0,0 +1,30 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html
new file mode 100644
index 0000000000..6e960b876f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html
@@ -0,0 +1,30 @@
+<!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="flags" content="should"/>
+<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>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-004-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-004-manual.html
new file mode 100644
index 0000000000..bebdf9ca16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-004-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, textarea placeholder</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="flags" content="should"/>
+<meta name="assert" content="writing-mode:vertical-rl will display a textarea field vertically, and with vertical placeholder text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+textarea { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<textarea rows="3" placeholder="国际化活动W3C i18n万维网联盟"></textarea>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-005-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-005-manual.html
new file mode 100644
index 0000000000..dfad4e00f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-005-manual.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, select, selected item</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="flags" content="should"/>
+<meta name="assert" content="writing-mode:vertical-rl will display a select box vertically, and the selected item will be displayed vertically."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+select { font-family: webfont; font-size: 24px; }
+.test { text-align: center; vertical-align: middle; width: 100%; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the displayed selection area is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<select>
+<option value="1">国际化活动item1万维网联盟</option>
+<option value="2">国际化活动item2万维网联盟</option>
+<option value="3">国际化活动item3万维网联盟</option>
+</select>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-006-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-006-manual.html
new file mode 100644
index 0000000000..8d03c4dfcb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-forms-006-manual.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, select, options</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will display selection options vertically."/>
+<meta name="flags" content="should"/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+select { font-family: webfont; font-size: 24px; }
+.test { text-align: center; vertical-align: middle; width: 100%; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the selection options displayed when you click on the selector are vertical.</p>
+<div class="test">
+<select>
+<option value="1">国际化活动item1万维网联盟</option>
+<option value="2">国际化活动item2万维网联盟</option>
+<option value="3">国际化活动item3万维网联盟</option>
+</select>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-table-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-table-001-manual.html
new file mode 100644
index 0000000000..d3bc966452
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-table-001-manual.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, vertical lines</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will display a line of text vertically within a table cell."/>
+<style type="text/css">
+@font-face {
+    font-family: "webfont";
+    src: url("/fonts/mplus-1p-regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { font-family: webfont, serif; font-size: 14px; height: 300px; width: 300px; }
+.test span { background-color:orange; color:orange;  }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if you see 4 tall, thin orange rectangles.</p>
+<div class="test">
+<table><tbody>
+<tr><th><span lang="zh">国际化活动</span></th><td><span lang="zh">国际化活动</span></td></tr>
+<tr><th><span lang="zh">国际化活动</span></th><td><span lang="zh">国际化活动</span></td></tr>
+</tbody></table>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-table-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-table-002-manual.html
new file mode 100644
index 0000000000..0f1c1d1997
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/writing-mode-vrl-table-002-manual.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-rl, table cell order</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-rl will display table columns horizontally, with the top of the table on the right."/>
+<style type="text/css">
+.test { font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p class="instructions" dir="ltr">Test passes if the numbers increase top-to-bottom, starting on the right.</p>
+<div class="test">
+<table><tbody>
+<tr><th>1</th><th>2</th></tr>
+<tr><td>3</td><td>4</td></tr>
+</tbody></table>
+</div>
+</body>
+</html>
+\ No newline at end of file