| <!DOCTYPE html> |
| <style> |
| section { |
| display: inline-block; |
| vertical-align: top; |
| border: 1px solid blue; |
| } |
| div { |
| font-family: Ahem; |
| font-size: 20px; |
| width: 5em; |
| } |
| span.target { |
| writing-mode: vertical-rl; |
| vertical-align: top; |
| } |
| span.em { |
| display: inline-block; |
| vertical-align: top; |
| width: 1em; |
| height: 1em; |
| background-color: blue; |
| } |
| span.target span.em { |
| background-color: orange; |
| } |
| </style> |
| <body> |
| <p>This tests margins, borders, and padding in inline blocks with orthogonal writing modes.</p> |
| <template id=template><div><span class=target><span class=em></span></span><span class=em></span></div></template> |
| <section id=left></section> |
| <section id=top></section> |
| <section id=right></section> |
| <section id=bottom></section> |
| <script> |
| let template = document.getElementById('template').content.firstChild; |
| generateTests(); |
| |
| function generateTests() { |
| let left = document.getElementById('left'); |
| let top = document.getElementById('top'); |
| let right = document.getElementById('right'); |
| let bottom = document.getElementById('bottom'); |
| |
| generate('margin-left: 1em', left); |
| generate('margin-top: 1em', top); |
| generate('margin-right: 1em', right); |
| generate('margin-bottom: 1em', bottom); |
| generate('margin-block-start: 1em', right); |
| generate('margin-block-end: 1em', left); |
| generate('margin-inline-start: 1em', top); |
| generate('margin-inline-end: 1em', bottom); |
| |
| generate('border-left: 1em transparent solid', left); |
| generate('border-top: 1em transparent solid', top); |
| generate('border-right: 1em transparent solid', right); |
| generate('border-bottom: 1em transparent solid', bottom); |
| generate('border-block-start: 1em transparent solid', right); |
| generate('border-block-end: 1em transparent solid', left); |
| generate('border-inline-start: 1em transparent solid', top); |
| generate('border-inline-end: 1em transparent solid', bottom); |
| |
| generate('padding-left: 1em', left); |
| generate('padding-top: 1em', top); |
| generate('padding-right: 1em', right); |
| generate('padding-bottom: 1em', bottom); |
| generate('padding-block-start: 1em', right); |
| generate('padding-block-end: 1em', left); |
| generate('padding-inline-start: 1em', top); |
| generate('padding-inline-end: 1em', bottom); |
| |
| generate('margin-left: 20%', left); |
| generate('margin-top: 20%', top); |
| generate('margin-right: 20%', right); |
| generate('margin-bottom: 20%', bottom); |
| generate('margin-block-start: 20%', right); |
| generate('margin-block-end: 20%', left); |
| generate('margin-inline-start: 20%', top); |
| generate('margin-inline-end: 20%', bottom); |
| |
| generate('padding-left: 20%', left); |
| generate('padding-top: 20%', top); |
| generate('padding-right: 20%', right); |
| generate('padding-bottom: 20%', bottom); |
| generate('padding-block-start: 20%', right); |
| generate('padding-block-end: 20%', left); |
| generate('padding-inline-start: 20%', top); |
| generate('padding-inline-end: 20%', bottom); |
| } |
| |
| function generate(inline_block_style, expected_direction) { |
| let container = template.cloneNode(true); |
| container.title = inline_block_style; |
| container.dataset['direction'] = expected_direction; |
| let span = container.firstChild; |
| span.style = inline_block_style; |
| expected_direction.appendChild(container); |
| } |
| </script> |
| </body> |
