1 files changed, 86 insertions, 0 deletions
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>