PageRenderTime 140ms CodeModel.GetById 92ms app.highlight 44ms RepoModel.GetById 1ms app.codeStats 0ms

/third_party/WebKit/LayoutTests/imported/csswg-test/css-writing-modes-3/orthogonal-parent-shrink-to-fit-001i.html

https://gitlab.com/0072016/Facebook-SDK-
HTML | 88 lines | 87 code | 1 blank | 0 comment | 0 complexity | eb7a73e8a9ed14c1caf0e757d650f18b MD5 | raw file
 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" href="../../../resources/testharness.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}
35h3 {
36    clear:both;
37}
38h3.fail {
39    color:red;
40}
41table {
42    border-spacing:0px;
43}
44td {
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>
58if (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
66function 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    if (window.testRunner)
85        container.style.display = "none";
86    done();
87}
88</script>