tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

orthogonal-parent-shrink-to-fit-001i.html (2903B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal block</title>
      4 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
      5 <meta name="assert" content="Shrink-to-fit float with a child of orthogonal block">
      6 <meta name="flags" content="ahem dom">
      7 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
      8 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     12 <style>
     13 .test {
     14    border:thin solid;
     15    font:20px/1 Ahem;
     16 }
     17 .target {
     18    color:blue;
     19    height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
     20    not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
     21    writing-mode:vertical-rl;
     22 }
     23 .border {
     24    border-right:blue solid .5em;
     25 }
     26 .next {
     27    color:orange;
     28 }
     29 .inline-block {
     30    display:inline-block;
     31 }
     32 .float {
     33    float:left;
     34 }
     35 h3 {
     36    clear:both;
     37 }
     38 h3.fail {
     39    color:red;
     40 }
     41 table {
     42    border-spacing:0px;
     43 }
     44 td {
     45    padding:0px;
     46 }
     47 </style>
     48 <div id="log"></div>
     49 <div id="container">
     50 <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.
     51 <p>If script is enabled, there should be one or more PASS and no FAIL.
     52 <h3>9: Shrink-to-fit float with a child of orthogonal block</h3>
     53 <div class="test">
     54    <div class="float"><div class="target">HH</div></div><span class="next">ZZ</span>
     55 </div>
     56 </div>
     57 <script>
     58 if (window.location.search == "?wait") {
     59    console.log("Sleeping 5 secs for debug");
     60    setup({explicit_done:true});
     61    window.setTimeout(run, 5000);
     62 } else {
     63    run();
     64 }
     65 
     66 function run() {
     67    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
     68        var title = node.previousElementSibling.textContent;
     69        test(function () {
     70            try {
     71                var targetNode = node.querySelector(".target");
     72                var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
     73                var targetBounds = targetNode.getBoundingClientRect();
     74                assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
     75                var nextNode = node.querySelector(".next");
     76                var nextBounds = nextNode.getBoundingClientRect();
     77                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
     78            } catch (e) {
     79                node.previousElementSibling.classList.add("fail");
     80                throw e;
     81            }
     82        }, title);
     83    });
     84    done();
     85 }
     86 </script>