/LayoutTests/imported/csswg-test/css-writing-modes-3/orthogonal-parent-shrink-to-fit-001j.html
HTML | 88 lines | 87 code | 1 blank | 0 comment | 0 complexity | a9bda89bae9fd894507b6bbcbb91b3b0 MD5 | raw file
- <!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" href="../../../resources/testharness.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);
- });
- if (window.testRunner)
- container.style.display = "none";
- done();
- }
- </script>