| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <title>Differing writing modes test for positioned elements and their containing
blocks</title> | 3 <title>Differing writing modes test for positioned elements and their containing
blocks</title> |
| 4 <style> | 4 <style> |
| 5 .htb { -webkit-writing-mode: horizontal-tb } | 5 .htb { -webkit-writing-mode: horizontal-tb } |
| 6 .hbt { -webkit-writing-mode: horizontal-bt } | |
| 7 .vlr { -webkit-writing-mode: vertical-lr } | 6 .vlr { -webkit-writing-mode: vertical-lr } |
| 8 .vrl { -webkit-writing-mode: vertical-rl } | 7 .vrl { -webkit-writing-mode: vertical-rl } |
| 9 | 8 |
| 10 .tl { top: 0; left: 0 } | 9 .tl { top: 0; left: 0 } |
| 11 .tr { top: 0; right: 0 } | 10 .tr { top: 0; right: 0 } |
| 12 .bl { bottom: 0; left: 0 } | 11 .bl { bottom: 0; left: 0 } |
| 13 .br { bottom: 0; right: 0 } | 12 .br { bottom: 0; right: 0 } |
| 14 | 13 |
| 15 .container { margin:5px; display: inline-block; position: relative; width:50px;
height:50px; border-top:1px solid black; border-right:2px solid black; border-bo
ttom:3px solid black; border-left:4px solid black; padding:1px 2px 3px 4px } | 14 .container { margin:5px; display: inline-block; position: relative; width:50px;
height:50px; border-top:1px solid black; border-right:2px solid black; border-bo
ttom:3px solid black; border-left:4px solid black; padding:1px 2px 3px 4px } |
| 16 .child { position:absolute; width:20px; height:20px; background-color:green } | 15 .child { position:absolute; width:20px; height:20px; background-color:green } |
| (...skipping 15 matching lines...) Expand all Loading... |
| 32 | 31 |
| 33 <br> | 32 <br> |
| 34 | 33 |
| 35 The test boxes: | 34 The test boxes: |
| 36 | 35 |
| 37 <br> | 36 <br> |
| 38 <div class="container htb"> | 37 <div class="container htb"> |
| 39 <div class="child htb tl"></div> | 38 <div class="child htb tl"></div> |
| 40 <div class="child vlr tr"></div> | 39 <div class="child vlr tr"></div> |
| 41 <div class="child vrl bl"></div> | 40 <div class="child vrl bl"></div> |
| 42 <div class="child hbt br"></div> | 41 <div class="child htb br"></div> |
| 43 </div> | 42 </div> |
| 44 | 43 |
| 45 <div class="container vlr"> | 44 <div class="container vlr"> |
| 46 <div class="child htb tl"></div> | 45 <div class="child htb tl"></div> |
| 47 <div class="child vlr tr"></div> | 46 <div class="child vlr tr"></div> |
| 48 <div class="child vrl bl"></div> | 47 <div class="child vrl bl"></div> |
| 49 <div class="child hbt br"></div> | 48 <div class="child htb br"></div> |
| 50 </div> | |
| 51 | |
| 52 <div class="container hbt"> | |
| 53 <div class="child htb tl"></div> | |
| 54 <div class="child vlr tr"></div> | |
| 55 <div class="child vrl bl"></div> | |
| 56 <div class="child hbt br"></div> | |
| 57 </div> | 49 </div> |
| 58 | 50 |
| 59 <div class="container vrl"> | 51 <div class="container vrl"> |
| 60 <div class="child htb tl"></div> | 52 <div class="child htb tl"></div> |
| 61 <div class="child vlr tr"></div> | 53 <div class="child vlr tr"></div> |
| 62 <div class="child vrl bl"></div> | 54 <div class="child vrl bl"></div> |
| 63 <div class="child hbt br"></div> | 55 <div class="child htb br"></div> |
| 64 </div> | 56 </div> |
| 65 | 57 |
| 66 <br> | 58 <br> |
| 67 | 59 |
| 68 <div class="container htb"> | 60 <div class="container htb"> |
| 69 <div class="child htb tr"></div> | 61 <div class="child htb tr"></div> |
| 70 <div class="child vlr bl"></div> | 62 <div class="child vlr bl"></div> |
| 71 <div class="child vrl br"></div> | 63 <div class="child vrl br"></div> |
| 72 <div class="child hbt tl"></div> | 64 <div class="child htb tl"></div> |
| 73 </div> | 65 </div> |
| 74 | 66 |
| 75 <div class="container vlr"> | 67 <div class="container vlr"> |
| 76 <div class="child htb tr"></div> | 68 <div class="child htb tr"></div> |
| 77 <div class="child vlr bl"></div> | 69 <div class="child vlr bl"></div> |
| 78 <div class="child vrl br"></div> | 70 <div class="child vrl br"></div> |
| 79 <div class="child hbt tl"></div> | 71 <div class="child htb tl"></div> |
| 80 </div> | |
| 81 | |
| 82 <div class="container hbt"> | |
| 83 <div class="child htb tr"></div> | |
| 84 <div class="child vlr bl"></div> | |
| 85 <div class="child vrl br"></div> | |
| 86 <div class="child hbt tl"></div> | |
| 87 </div> | 72 </div> |
| 88 | 73 |
| 89 <div class="container vrl"> | 74 <div class="container vrl"> |
| 90 <div class="child htb tr"></div> | 75 <div class="child htb tr"></div> |
| 91 <div class="child vlr bl"></div> | 76 <div class="child vlr bl"></div> |
| 92 <div class="child vrl br"></div> | 77 <div class="child vrl br"></div> |
| 93 <div class="child hbt tl"></div> | 78 <div class="child htb tl"></div> |
| 94 </div> | 79 </div> |
| 95 | 80 |
| 96 <br> | 81 <br> |
| 97 | 82 |
| 98 <div class="container htb"> | 83 <div class="container htb"> |
| 99 <div class="child htb bl"></div> | 84 <div class="child htb bl"></div> |
| 100 <div class="child vlr br"></div> | 85 <div class="child vlr br"></div> |
| 101 <div class="child vrl tl"></div> | 86 <div class="child vrl tl"></div> |
| 102 <div class="child hbt tr"></div> | 87 <div class="child htb tr"></div> |
| 103 </div> | 88 </div> |
| 104 | 89 |
| 105 <div class="container vlr"> | 90 <div class="container vlr"> |
| 106 <div class="child htb bl"></div> | 91 <div class="child htb bl"></div> |
| 107 <div class="child vlr br"></div> | 92 <div class="child vlr br"></div> |
| 108 <div class="child vrl tl"></div> | 93 <div class="child vrl tl"></div> |
| 109 <div class="child hbt tr"></div> | 94 <div class="child htb tr"></div> |
| 110 </div> | |
| 111 | |
| 112 <div class="container hbt"> | |
| 113 <div class="child htb bl"></div> | |
| 114 <div class="child vlr br"></div> | |
| 115 <div class="child vrl tl"></div> | |
| 116 <div class="child hbt tr"></div> | |
| 117 </div> | 95 </div> |
| 118 | 96 |
| 119 <div class="container vrl"> | 97 <div class="container vrl"> |
| 120 <div class="child htb bl"></div> | 98 <div class="child htb bl"></div> |
| 121 <div class="child vlr br"></div> | 99 <div class="child vlr br"></div> |
| 122 <div class="child vrl tl"></div> | 100 <div class="child vrl tl"></div> |
| 123 <div class="child hbt tr"></div> | 101 <div class="child htb tr"></div> |
| 124 </div> | 102 </div> |
| 125 | 103 |
| 126 <br> | 104 <br> |
| 127 | 105 |
| 128 <div class="container htb"> | 106 <div class="container htb"> |
| 129 <div class="child htb br"></div> | 107 <div class="child htb br"></div> |
| 130 <div class="child vlr tl"></div> | 108 <div class="child vlr tl"></div> |
| 131 <div class="child vrl tr"></div> | 109 <div class="child vrl tr"></div> |
| 132 <div class="child hbt bl"></div> | 110 <div class="child htb bl"></div> |
| 133 </div> | 111 </div> |
| 134 | 112 |
| 135 <div class="container vlr"> | 113 <div class="container vlr"> |
| 136 <div class="child htb br"></div> | 114 <div class="child htb br"></div> |
| 137 <div class="child vlr tl"></div> | 115 <div class="child vlr tl"></div> |
| 138 <div class="child vrl tr"></div> | 116 <div class="child vrl tr"></div> |
| 139 <div class="child hbt bl"></div> | 117 <div class="child htb bl"></div> |
| 140 </div> | |
| 141 | |
| 142 <div class="container hbt"> | |
| 143 <div class="child htb br"></div> | |
| 144 <div class="child vlr tl"></div> | |
| 145 <div class="child vrl tr"></div> | |
| 146 <div class="child hbt bl"></div> | |
| 147 </div> | 118 </div> |
| 148 | 119 |
| 149 <div class="container vrl"> | 120 <div class="container vrl"> |
| 150 <div class="child htb br"></div> | 121 <div class="child htb br"></div> |
| 151 <div class="child vlr tl"></div> | 122 <div class="child vlr tl"></div> |
| 152 <div class="child vrl tr"></div> | 123 <div class="child vrl tr"></div> |
| 153 <div class="child hbt bl"></div> | 124 <div class="child htb bl"></div> |
| 154 </div> | 125 </div> |
| 155 | 126 |
| 156 </body> | 127 </body> |
| 157 </html> | 128 </html> |
| 158 | 129 |
| 159 | 130 |
| OLD | NEW |