| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 #outer > div { margin: 0 25px; } | 3 #outer > div { margin: 25px 0; } |
| 4 </style> | 4 </style> |
| 5 <div id="outer" style=" | 5 <div id="outer" style=" |
| 6 outline: dashed lightblue; | 6 outline: dashed lightblue; |
| 7 width: 150px; | 7 height: 150px; |
| 8 padding: 25px; | 8 padding: 25px; |
| 9 -webkit-writing-mode: horizontal-bt; | 9 writing-mode: vertical-rl; |
| 10 "> | 10 "> |
| 11 <div id="before-before" style=" | 11 <div id="before-before" style=" |
| 12 background-color: purple; | 12 background-color: purple; |
| 13 height: 10px; | 13 width: 10px; |
| 14 "></div> | 14 "></div> |
| 15 <div id="before" style=" | 15 <div id="before" style=" |
| 16 background-color: silver; | 16 background-color: silver; |
| 17 height: 15px; | 17 width: 15px; |
| 18 "></div> | 18 "></div> |
| 19 <div id="middle" style=" | 19 <div id="middle" style=" |
| 20 background-color: blue; | 20 background-color: blue; |
| 21 height: 100px; | 21 width: 100px; |
| 22 "></div> | 22 "></div> |
| 23 <div id="after" style=" | 23 <div id="after" style=" |
| 24 background-color: silver; | 24 background-color: silver; |
| 25 height: 15px; | 25 width: 15px; |
| 26 "></div> | 26 "></div> |
| 27 <div id="after-after" style=" | 27 <div id="after-after" style=" |
| 28 background-color: purple; | 28 background-color: purple; |
| 29 height: 10px; | 29 width: 10px; |
| 30 "></div> | 30 "></div> |
| 31 </div> | 31 </div> |
| 32 <table id="results"> | 32 <table id="results"> |
| 33 <thead> | 33 <thead> |
| 34 <tr> | 34 <tr> |
| 35 <th>x</th> |
| 35 <th>y</th> | 36 <th>y</th> |
| 36 <th>x</th> | |
| 37 <th>element</th> | 37 <th>element</th> |
| 38 <th>range start container</th> | 38 <th>range start container</th> |
| 39 </tr> | 39 </tr> |
| 40 </thead> | 40 </thead> |
| 41 <tbody id="table-body"> | 41 <tbody id="table-body"> |
| 42 </tbody> | 42 </tbody> |
| 43 </table> | 43 </table> |
| 44 <script> | 44 <script> |
| 45 if (window.testRunner) | 45 if (window.testRunner) |
| 46 testRunner.dumpAsText(); | 46 testRunner.dumpAsText(); |
| 47 | 47 |
| 48 function addCell(row, text) | 48 function addCell(row, text) |
| 49 { | 49 { |
| 50 row.appendChild(document.createElement("td")).appendChild(document.creat
eTextNode(text)); | 50 row.appendChild(document.createElement("td")).appendChild(document.creat
eTextNode(text)); |
| 51 } | 51 } |
| 52 | 52 |
| 53 function test(x, y) | 53 function test(y, x) |
| 54 { | 54 { |
| 55 var row = document.getElementById("table-body").appendChild(document.cre
ateElement("tr")); | 55 var row = document.getElementById("table-body").appendChild(document.cre
ateElement("tr")); |
| 56 addCell(row, x); |
| 56 addCell(row, y); | 57 addCell(row, y); |
| 57 addCell(row, x); | |
| 58 addCell(row, document.elementFromPoint(8 + x, 8 + y).id); | 58 addCell(row, document.elementFromPoint(8 + x, 8 + y).id); |
| 59 addCell(row, document.caretRangeFromPoint(8 + x, 8 + y).startContainer.i
d); | 59 addCell(row, document.caretRangeFromPoint(8 + x, 8 + y).startContainer.i
d); |
| 60 } | 60 } |
| 61 | 61 |
| 62 test(25, 25); | 62 test(25, 25); |
| 63 test(100, 25); | 63 test(100, 25); |
| 64 test(25, 49); | 64 test(25, 49); |
| 65 test(100, 49); | 65 test(100, 49); |
| 66 test(25, 50); | 66 test(25, 50); |
| 67 test(100, 50); | 67 test(100, 50); |
| 68 test(25, 149); | 68 test(25, 149); |
| 69 test(100, 149); | 69 test(100, 149); |
| 70 test(25, 150); | 70 test(25, 150); |
| 71 test(100, 150); | 71 test(100, 150); |
| 72 test(25, 165); | 72 test(25, 165); |
| 73 test(100, 165); | 73 test(100, 165); |
| 74 </script> | 74 </script> |
| OLD | NEW |