| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <% |
| var testlist = []; |
| var 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>']]; |
| var middles = [ |
| null, |
| ["inline-block", '<div class="inline-block">', '</div>']]; |
| var 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 (var outer of outers) { |
| for (var middle of middles) { |
| for (var target of targets) { |
| var title = target[0]; |
| var html = target[1]; |
| if (middle) { |
| 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]; |
| testlist.push([title, html]); |
| } |
| } |
| } |
| var min, limit, title; |
| if (index < 0) { |
| min = 0; |
| limit = testlist.length; |
| title = "Shrink-to-fit with orthogonal children" |
| } else { |
| min = index; |
| limit = index + 1; |
| title = testlist[index][0]; |
| } |
| %><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<%= index < 0 ? ' 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. |
| <% for (var i = min; i < limit; ++i) { |
| var test = testlist[i]; |
| %><h3><%= (i + 1) + ": " + test[0] %></h3> |
| <div class="test"> |
| <%- test[1] %> |
| </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> |