<!DOCTYPE html>
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"
  title="3.1 Block Flow Direction: the writing-mode property">
<link rel="match" href="inline-box-orthogonal-child-with-margins-ref.html">
<meta content="This test checks that the correct margins of orthogonal children are used to compute the container's shrink to fit size. The test PASS if both children are rendered inside the container's blue border." name="assert" />
 <style>
.container {
  border: 1px dashed blue;
  height: 200px;
  display: inline-block;
}
.container > div {
  float: left;
  width: 40px;
  margin:       10px 20px 30px 40px;
  border-width: 20px 30px 40px 50px;
  padding:      30px 40px 50px 60px;
  border-style: dotted;
}
.container > div:nth-child(1) { background: yellow; }
.container > div:nth-child(2) { background: purple; }

</style>

<div class="container">
  <div></div>
  <div style="writing-mode: vertical-lr;"></div>
</div>