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 |