<!DOCTYPE html>
<html>
<style>
body {
    margin: 0;
}
.flexbox {
    width: 600px;
    display: flex;
    background-color: grey;
}
.flexbox div {
    height: 20px;
    border: 0;
}

.rtl {
    direction: rtl;
}

.horizontal-tb {
    writing-mode:horizontal-tb;
}


.vertical-rl, .vertical-lr {
    height: 600px;
}

:-webkit-any(.vertical-rl, .vertical-lr) div {
    width: 20px;
}
.vertical-rl {
    writing-mode: vertical-rl;
}

.vertical-lr {
    writing-mode: vertical-lr;
}

.flexbox > :nth-child(1) {
    background-color: blue;
}
.flexbox > :nth-child(2) {
    background-color: green;
}
.flexbox > :nth-child(3) {
    background-color: red;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>

<div class="flexbox rtl">
  <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
  <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding: 0 100px;"></div>
  <div data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-left: 100px;"></div>
</div>

<div class="flexbox rtl">
  <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
  <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding: 0 100px;"></div>
  <div data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin-inline-start: 100px;"></div>
</div>

<div class="flexbox rtl" style="margin-inline-start: 20px;margin-inline-end: 50px;">
  <div data-expected-width="75" data-offset-x="575" style="flex: 1 0 0; margin: 0 auto;"></div>
  <div data-expected-width="350" data-offset-x="225" style="flex: 2 0 0; padding: 0 100px;"></div>
  <div data-expected-width="75" data-offset-x="50" style="flex: 1 0 0; margin-inline-start: 100px;"></div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
  <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="flex: 1 0 0; margin: 0 100px 0 50px;"></div>
  <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
  <div data-expected-height="300" data-offset-y="150" class="horizontal-tb" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="450" data-offset-y="0" style="flex: 1 0 0;padding-inline-start:200px;padding-inline-end:200px;padding-block-start:100px;padding-block-end:100px;"></div>
  <div data-expected-height="100" data-offset-y="450" style="flex: 2 0 0;"></div>
  <div data-expected-height="50" data-offset-y="550" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="300" data-offset-y="0" class="horizontal-tb" style="flex: 1 0 0;padding-inline-start:200px;padding-inline-end:200px;padding-block-start:100px;padding-block-end:100px;"></div>
  <div data-expected-height="200" data-offset-y="300" style="flex: 2 0 0;"></div>
  <div data-expected-height="100" data-offset-y="500" style="flex: 1 0 0;"></div>
</div>
</div>


<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 0;"></div>
  <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: auto 0;"></div>
  <div data-expected-height="450" data-offset-y="75" style="flex: 2 0 auto; height: auto;"><div data-offset-y="75" style="width:200px;height:300px;background-color:orange;"></div></div>
  <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: auto 0;"></div>
  <div data-expected-height="450" data-offset-y="75" class="horizontal-tb" style="flex: 2 0 auto; height: auto;"><div style="width:200px;height:300px;background-color:orange;"></div></div>
  <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;margin-inline-start:auto;margin-inline-end:auto;margin-block-start:0;margin-block-end:0;;"></div>
  <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr">
  <div data-expected-height="150" data-offset-y="0" class="horizontal-tb" style="flex: 1 0 0;margin-inline-start:auto;margin-inline-end:auto;margin-block-start:0;margin-block-end:0;;"></div>
  <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-lr rtl">
  <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0; margin: auto 0;"></div>
  <div data-expected-height="350" data-offset-y="175" class="horizontal-tb" style="flex: 2 0 0; padding: 100px 0;"></div>
  <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0; margin-inline-start: 100px;"></div>
</div>
</div>

<div class="flexbox vertical-lr">
  <div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></div>
  <div data-expected-height="250" style="flex: 1 1 400px;"></div>
</div>

<div style="position:relative">
<div class="flexbox vertical-rl">
  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="flex: 1 0 0;"></div>
  <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position:relative">
<div class="flexbox vertical-rl">
  <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="flex: 1 0 0; margin: 0 100px 0 50px;"></div>
  <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="flex: 2 0 0;"></div>
  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0;"></div>
</div>
</div>

<div style="position: relative;">
    <div data-expected-width="600" style="direction: rtl; display: flex; margin-left: 10px; margin-right:20px;" class="flexbox">
      <div data-expected-width="75" data-offset-x="535" style="flex: 1 0 0; margin: 0 auto;"></div>
      <div data-expected-width="350" data-offset-x="185" style="flex: 2 0 0; padding: 0 100px;"></div>
      <div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin-right: 100px;"></div>
    </div>
</div>

<div style="position: relative;">
    <div data-expected-width="700" style="direction: rtl; display: flex; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
      <div data-expected-width="75" data-offset-x="565" style="flex: 1 0 0; margin: 0 auto;"></div>
      <div data-expected-width="350" data-offset-x="215" style="flex: 2 0 0; padding: 0 100px;"></div>
      <div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin-right: 100px;"></div>
    </div>
</div>

</body>
</html>
