| <!DOCTYPE html> |
| <style> |
| section { |
| display: inline-block; |
| vertical-align: top; |
| border: 1px solid blue; |
| } |
| span.target { |
| display: inline-block; |
| vertical-align: top; |
| } |
| div { |
| font-family: Ahem; |
| font-size: 20px; |
| width: 5em; |
| } |
| span.em { |
| display: inline-block; |
| vertical-align: top; |
| width: 1em; |
| height: 1em; |
| background-color: blue; |
| } |
| span.target span.em { |
| background-color: orange; |
| } |
| #left .target { margin-left: 1em; } |
| #top .target { margin-top: 1em; } |
| #right .target { margin-right: 1em; } |
| #bottom .target { margin-bottom: 1em; } |
| </style> |
| <body> |
| <p>This tests margins, borders, and padding in inline blocks with orthogonal writing modes.</p> |
| <section id=left> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| </section> |
| <section id=top> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| </section> |
| <section id=right> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| </section> |
| <section id=bottom> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| <div><span class=target><span class=em></span></span><span class=em></span></div> |
| </section> |
| </body> |
