| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 .test { |
| 6 font:25px Ahem; |
| 7 clear:both; |
| 8 margin-top:.2em; |
| 9 } |
| 10 .target { |
| 11 color:blue; |
| 12 -webkit-writing-mode:vertical-rl; |
| 13 } |
| 14 .border { |
| 15 border-right:blue solid 1em; |
| 16 } |
| 17 .next { |
| 18 color:orange; |
| 19 } |
| 20 .inline-block { |
| 21 display:inline-block; |
| 22 } |
| 23 .float { |
| 24 float:left; |
| 25 } |
| 26 table { |
| 27 border-spacing:0px; |
| 28 } |
| 29 td { |
| 30 padding:0px; |
| 31 } |
| 32 </style> |
| 33 <div id="container"> |
| 34 <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. |
| 35 There should be no spaces nor overlaps. |
| 36 <p>If script is enabled, there should be one or more PASS and no FAIL. |
| 37 <div class="test" title="Orthogonal block in inline-block"> |
| 38 <div class="inline-block"><div class="target">XX</div></div><span class="nex
t">YY</span> |
| 39 </div> |
| 40 <div class="test" title="Orthogonal inline in inline-block"> |
| 41 <div class="inline-block"><span class="target">XX</span></div><span class="n
ext">YY</span> |
| 42 </div> |
| 43 <div class="test" title="Orthogonal inline in float"> |
| 44 <div class="float"><span class="target">XX</span></div><span class="next">YY
</span> |
| 45 </div> |
| 46 <div class="test" title="Orthogonal block in float"> |
| 47 <div class="float"><div class="target">XX</div></div><span class="next">YY</
span> |
| 48 </div> |
| 49 <div class="test" title="Orthogonal block in table-cell"> |
| 50 <table> |
| 51 <tr> |
| 52 <td><div class="target">XX</div></td> |
| 53 <td class="next">YY</td> |
| 54 </tr> |
| 55 </table> |
| 56 </div> |
| 57 <div class="test" title="Orthogonal inline in table-cell"> |
| 58 <table> |
| 59 <tr> |
| 60 <td><span class="target">XX</span></td> |
| 61 <td class="next">YY</td> |
| 62 </tr> |
| 63 </table> |
| 64 </div> |
| 65 <div class="test" title="Orthogonal block with borders in inline-block"> |
| 66 <div class="inline-block"><div class="target border">XX</div></div><span cla
ss="next">YY</span> |
| 67 </div> |
| 68 </div> |
| 69 <script> |
| 70 runTests(); |
| 71 function runTests() { |
| 72 Array.prototype.forEach.call(document.querySelectorAll(".test"), function (n
ode) { |
| 73 test(function () { |
| 74 var targetNode = node.querySelector(".target"); |
| 75 var targetBounds = targetNode.getBoundingClientRect(); |
| 76 var border = parseFloat(getComputedStyle(targetNode).borderRightWidt
h); |
| 77 assert_equals(targetBounds.height, (targetBounds.width - border) * 2
, "writing-mode is vertical") |
| 78 var nextNode = node.querySelector(".next"); |
| 79 var nextBounds = nextNode.getBoundingClientRect(); |
| 80 assert_equals(nextBounds.left - targetBounds.right, 0, "the left edg
e of the orange box touches the right edge of the blue box"); |
| 81 }, node.title); |
| 82 }); |
| 83 if (window.testRunner) |
| 84 container.style.display = "none"; |
| 85 done(); |
| 86 } |
| 87 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1121173002:
Fix shrink-to-fit when children's writing-mode is orthogonal (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master