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