| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>CSS Writing Modes Test: Orthogonal parent shrink-to-fit</title> |
| 3 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flow
s"> |
| 4 <meta name="assert" content="Parent's min-content width in orthorgonal flows"> |
| 5 <meta name="flags" content="combo ahem"> |
| 6 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> |
| 7 <script src="../../../resources/testharness.js"></script> |
| 8 <script src="../../../resources/testharnessreport.js"></script> |
| 9 <link rel="stylesheet" href="../../../resources/testharness.css"> |
| 10 <style> |
| 11 .test { |
| 12 border:thin solid; |
| 13 font:20px/1 Ahem; |
| 14 } |
| 15 .target { |
| 16 color:blue; |
| 17 -webkit-writing-mode:vertical-rl; |
| 18 } |
| 19 .border { |
| 20 border-right:blue solid .5em; |
| 21 } |
| 22 .next { |
| 23 color:orange; |
| 24 } |
| 25 .inline-block { |
| 26 display:inline-block; |
| 27 } |
| 28 .float { |
| 29 float:left; |
| 30 } |
| 31 h3 { |
| 32 clear:both; |
| 33 } |
| 34 h3.fail { |
| 35 color:red; |
| 36 } |
| 37 table { |
| 38 border-spacing:0px; |
| 39 } |
| 40 td { |
| 41 padding:0px; |
| 42 } |
| 43 </style> |
| 44 <div id="container"> |
| 45 <p>Test passes if the <b>left</b> edge of the orange box <b>touches</b> the <b>r
ight</b> edge of the blue box. |
| 46 There should be no spaces nor overlaps. |
| 47 <p>The blue box must be <b>tall</b>, the height should be as twice as the width. |
| 48 <p>If script is enabled, there should be one or more PASS and no FAIL. |
| 49 <h3>Orthogonal block in inline-block</h3> |
| 50 <div class="test"> |
| 51 <div class="inline-block"><div class="target">XX</div></div><span class="nex
t">YY</span> |
| 52 </div> |
| 53 <h3>Orthogonal inline in inline-block</h3> |
| 54 <div class="test"> |
| 55 <div class="inline-block"><span class="target">XX</span></div><span class="n
ext">YY</span> |
| 56 </div> |
| 57 <h3>Orthogonal inline in float</h3> |
| 58 <div class="test"> |
| 59 <div class="float"><span class="target">XX</span></div><span class="next">YY
</span> |
| 60 </div> |
| 61 <h3>Orthogonal block in float</h3> |
| 62 <div class="test"> |
| 63 <div class="float"><div class="target">XX</div></div><span class="next">YY</
span> |
| 64 </div> |
| 65 <h3>Orthogonal block in table-cell</h3> |
| 66 <div class="test"> |
| 67 <table><tr><td><div class="target">XX</div></td><td class="next">YY</td></tr
></table> |
| 68 </div> |
| 69 <h3>Orthogonal inline in table-cell</h3> |
| 70 <div class="test"> |
| 71 <table><tr><td><span class="target">XX</span></td><td class="next">YY</td></
tr></table> |
| 72 </div> |
| 73 <h3>Orthogonal block with borders in inline-block</h3> |
| 74 <div class="test"> |
| 75 <div class="inline-block"><div class="target border">XXX</div></div><span cl
ass="next">YY</span> |
| 76 </div> |
| 77 <h3>Orthogonal inline with borders in inline-block</h3> |
| 78 <div class="test"> |
| 79 <div class="inline-block"><span class="target border">XXX</span></div><span
class="next">YY</span> |
| 80 </div> |
| 81 <h3>Orthogonal inline with borders in float</h3> |
| 82 <div class="test"> |
| 83 <div class="float"><span class="target border">XXX</span></div><span class="
next">YY</span> |
| 84 </div> |
| 85 <h3>Orthogonal block with borders in float</h3> |
| 86 <div class="test"> |
| 87 <div class="float"><div class="target border">XXX</div></div><span class="ne
xt">YY</span> |
| 88 </div> |
| 89 <h3>Orthogonal block with borders in table-cell</h3> |
| 90 <div class="test"> |
| 91 <table><tr><td><div class="target border">XXX</div></td><td class="next">YY<
/td></tr></table> |
| 92 </div> |
| 93 <h3>Orthogonal inline with borders in table-cell</h3> |
| 94 <div class="test"> |
| 95 <table><tr><td><span class="target border">XXX</span></td><td class="next">Y
Y</td></tr></table> |
| 96 </div> |
| 97 <h3>Orthogonal block in inline-block in inline-block</h3> |
| 98 <div class="test"> |
| 99 <div class="inline-block"><div class="inline-block"><div class="target">XX</
div></div></div><span class="next">YY</span> |
| 100 </div> |
| 101 <h3>Orthogonal inline in inline-block in inline-block</h3> |
| 102 <div class="test"> |
| 103 <div class="inline-block"><div class="inline-block"><span class="target">XX<
/span></div></div><span class="next">YY</span> |
| 104 </div> |
| 105 |
| 106 </div> |
| 107 <script> |
| 108 if (window.location.search == "?wait") { |
| 109 console.log("Sleeping 5 secs for debug"); |
| 110 setup({explicit_done:true}); |
| 111 window.setTimeout(run, 5000); |
| 112 } else { |
| 113 run(); |
| 114 } |
| 115 |
| 116 function run() { |
| 117 Array.prototype.forEach.call(document.querySelectorAll(".test"), function (n
ode) { |
| 118 var title = node.previousElementSibling.innerText; |
| 119 test(function () { |
| 120 try { |
| 121 var targetNode = node.querySelector(".target"); |
| 122 var targetBounds = targetNode.getBoundingClientRect(); |
| 123 assert_approx_equals(targetBounds.height, targetBounds.width * 2
, .01, "writing-mode is vertical") |
| 124 var nextNode = node.querySelector(".next"); |
| 125 var nextBounds = nextNode.getBoundingClientRect(); |
| 126 assert_equals(nextBounds.left - targetBounds.right, 0, "the left
edge of the orange box touches the right edge of the blue box"); |
| 127 } catch (e) { |
| 128 node.previousElementSibling.classList.add("fail"); |
| 129 throw e; |
| 130 } |
| 131 }, title); |
| 132 }); |
| 133 if (window.testRunner) |
| 134 container.style.display = "none"; |
| 135 done(); |
| 136 } |
| 137 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1161223002:
Import csswg-test/css-writing-modes-3/ (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master