orthogonal-inline-block.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/writing-mode/orthogonal-inline-block.html
