orthogonal-inline-block-expected.html

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