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 margin-top:.2em; |
| 8 } |
| 9 .target { |
| 10 color:blue; |
| 11 -webkit-writing-mode:vertical-rl; |
| 12 } |
| 13 .border { |
| 14 border-right:blue solid 1em; |
| 15 } |
| 16 .next { |
| 17 color:orange; |
| 18 } |
| 19 .inline-block { |
| 20 display:inline-block; |
| 21 } |
| 22 table { |
| 23 border-spacing:0px; |
| 24 } |
| 25 td { |
| 26 padding:0px; |
| 27 } |
| 28 </style> |
| 29 <div id="container"> |
| 30 <p>Test passes if the <b>left</b> edge of orange box touch the <b>right</b> edge
of blue box. |
| 31 There should be no spaces nor overlaps. |
| 32 <p>If script is enabled, there should be one or more PASS and no FAIL. |
| 33 <div class="test" title="Orthogonal block in inline-block"> |
| 34 <div class="inline-block"><div class="target">XX</div></div><span class="nex
t">YY</span> |
| 35 </div> |
| 36 <div class="test" title="Orthogonal block with borders in inline-block"> |
| 37 <div class="inline-block"><div class="target border">XX</div></div><span cla
ss="next">YY</span> |
| 38 </div> |
| 39 <div class="test" title="Orthogonal inline in inline-block"> |
| 40 <div class="inline-block"><span class="target">XX</span></div><span class="n
ext">YY</span> |
| 41 </div> |
| 42 <div class="test" title="Orthogonal block in table-cell"> |
| 43 <table> |
| 44 <tr> |
| 45 <td><div class="target">XX</div></td> |
| 46 <td class="next">YY</td> |
| 47 </tr> |
| 48 </table> |
| 49 </div> |
| 50 <div class="test" title="Orthogonal inline in table-cell"> |
| 51 <table> |
| 52 <tr> |
| 53 <td><span class="target">XX</span></td> |
| 54 <td class="next">YY</td> |
| 55 </tr> |
| 56 </table> |
| 57 </div> |
| 58 </div> |
| 59 <script> |
| 60 var nodes = document.querySelectorAll(".test"); |
| 61 for (var i = 0; i < nodes.length; i++) { |
| 62 var node = nodes[i]; |
| 63 test(function () { |
| 64 var targetNode = node.querySelector(".target"); |
| 65 var targetBounds = targetNode.getBoundingClientRect(); |
| 66 var nextNode = node.querySelector(".next"); |
| 67 var nextBounds = nextNode.getBoundingClientRect(); |
| 68 assert_equals(nextBounds.left - targetBounds.right, 0); |
| 69 }, node.title); |
| 70 } |
| 71 |
| 72 if (window.testRunner) |
| 73 container.style.display = "none"; |
| 74 </script> |
OLD | NEW |