yoga/gentest/fixtures/YGBoxSizingTest.html

<div id="box_sizing_content_box_simple"
  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
</div>

<div id="box_sizing_border_box_simple"
  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
</div>

<div id="box_sizing_content_box_percent" style="width: 100px; height: 100px;">
  <div style="width: 50%; height: 25%; padding: 4px; border-width: 16px; box-sizing: content-box">
  </div>
</div>

<div id="box_sizing_border_box_percent" style="width: 100px; height: 100px;">
  <div style="width: 50%; height: 25%; padding: 4px; border-width: 16px; box-sizing: border-box">
  </div>
</div>

<div id="box_sizing_content_box_absolute" style="width: 100px; height: 100px;">
  <div style="width: 50; height: 25%; padding: 12px; border-width: 8px; box-sizing: content-box; position: absolute;">
  </div>
</div>

<div id="box_sizing_border_box_absolute" style="width: 100px; height: 100px;">
  <div style="width: 50; height: 25%; padding: 12px; border-width: 8px; box-sizing: border-box; position: absolute;">
  </div>
</div>

<div id="box_sizing_content_box_comtaining_block"
  style="width: 100px; height: 100px; padding: 12px; border-width: 8px; box-sizing: content-box; ">
  <div style="width: 75; height: 75; position: static;">
    <div style="width: 50px; height: 25%; position: absolute;">
    </div>
  </div>
</div>

<div id="box_sizing_border_box_comtaining_block"
  style="width: 100px; height: 100px;  padding: 12px; border-width: 8px; box-sizing: border-box; ">
  <div style="width: 75; height: 75; position: static;">
    <div style="width: 50px; height: 25%; position: absolute;">
    </div>
  </div>
</div>

<div id="box_sizing_content_box_padding_only"
  style="width: 100px; height: 100px; padding: 5px; box-sizing: content-box">
</div>

<div id="box_sizing_content_box_padding_only_percent" style="width: 100px; height: 150px;">
  <div style="width: 50px; height: 75px; padding: 10%; box-sizing: content-box">
  </div>
</div>

<div id="box_sizing_border_box_padding_only" style="width: 100px; height: 100px; padding: 5px; box-sizing: border-box">
</div>

<div id="box_sizing_border_box_padding_only_percent" style="width: 100px; height: 150px;">
  <div style="width: 50px; height: 75px; padding: 10%; box-sizing: border-box">
  </div>
</div>

<div id="box_sizing_content_box_border_only"
  style="width: 100px; height: 100px; border-width: 10px; box-sizing: content-box">
</div>

<div id="box_sizing_content_box_border_only_percent" style="width: 100px; height: 100px;">
  <div style="width: 50%; height: 75; border-width: 10%; box-sizing: content-box">
  </div>
</div>

<div id="box_sizing_border_box_border_only"
  style="width: 100px; height: 100px; border-width: 10px; box-sizing: border-box">
</div>

<div id="box_sizing_border_box_border_only_percent" style="width: 100px; height: 100px;">
  <div style="width: 50%; height: 75; border-width: 10%; box-sizing: border-box">
  </div>
</div>

<div id="box_sizing_content_box_no_padding_no_border" style="width: 100px; height: 100px; box-sizing: content-box">
</div>

<div id="box_sizing_border_box_no_padding_no_border" style="width: 100px; height: 100px; box-sizing: border-box">
</div>

<div id="box_sizing_content_box_children"
  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_border_box_children"
  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_content_box_siblings" style="width: 100px; height: 100px;">
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px; box-sizing: content-box; padding: 10px; border-width: 10px"></div>
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_border_box_siblings" style="width: 100px; height: 100px;">
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px; box-sizing: border-box; padding: 10px; border-width: 10px"></div>
  <div style="width: 25px; height: 25px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_content_box_max_width" style="width: 100px; height: 100px;">
  <div style="max-width: 50px; height: 25px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_border_box_max_width" style="width: 100px; height: 100px;">
  <div style="max-width: 50px; height: 25px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_content_box_max_height" style="width: 100px; height: 100px;">
  <div style="width: 50px; max-height: 50px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_border_box_max_height" style="width: 100px; height: 100px;">
  <div style="width: 50px; max-height: 50px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_content_box_min_width" style="width: 100px; height: 100px;">
  <div style="min-width: 50px; height: 25px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_border_box_min_width" style="width: 100px; height: 100px;">
  <div style="min-width: 50px; height: 25px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_content_box_min_height" style="width: 100px; height: 100px;">
  <div style="width: 50px; min-height: 50px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_border_box_min_height" style="width: 100px; height: 100px;">
  <div style="width: 50px; min-height: 50px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
  <div style="width: 25px; height: 25px"></div>
</div>

<div id="box_sizing_content_box_no_height_no_width" style="width: 100px; height: 100px;">
  <div style="box-sizing: content-box; padding: 2px; border-width: 7px">
  </div>
</div>

<div id="box_sizing_border_box_no_height_no_width" style="width: 100px; height: 100px;">
  <div style="box-sizing: border-box; padding: 2px; border-width: 7px">
  </div>
</div>

<div id="box_sizing_content_box_nested"
  style="width: 100px; height: 100px; box-sizing: content-box; padding: 15px; border-width: 3px;">
  <div style="width: 20px; height: 20px; box-sizing: content-box; padding: 2px; border-width: 7px">
    <div style="width: 10px; height: 5px; box-sizing: content-box; padding: 1px; border-width: 2px"></div>
  </div>
</div>

<div id="box_sizing_border_box_nested"
  style="width: 100px; height: 100px; box-sizing: border-box; padding: 15px; border-width: 3px;">
  <div style="width: 20px; height: 20px; box-sizing: border-box; padding: 2px; border-width: 7px">
    <div style="width: 10px; height: 5px; box-sizing: border-box; padding: 1px; border-width: 2px"></div>
  </div>
</div>

<div id="box_sizing_content_box_nested_alternating"
  style="width: 100px; height: 100px; box-sizing: content-box; padding: 3px; border-width: 2px;">
  <div style="width: 40px; height: 40px; box-sizing: border-box; padding: 8px; border-width: 2px">
    <div style="width: 20px; height: 25px; box-sizing: content-box; padding: 3px; border-width: 6px">
      <div style="width: 10px; height: 5px; box-sizing: border-box; padding: 1px; border-width: 1px">
      </div>
    </div>
  </div>
</div>

<div id="box_sizing_border_box_nested_alternating"
  style="width: 100px; height: 100px; box-sizing: border-box; padding: 3px; border-width: 2px;">
  <div style="width: 40px; height: 40px; box-sizing: content-box; padding: 8px; border-width: 2px">
    <div style="width: 20px; height: 25px; box-sizing: border-box; padding: 3px; border-width: 6px">
      <div style="width: 10px; height: 5px; box-sizing: content-box; padding: 1px; border-width: 1px">
      </div>
    </div>
  </div>
</div>

<div data-disabled="true" id="box_sizing_content_box_flex_basis_row"
  style="width: 100px; height: 100px; flex-direction: row;">
  <div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: content-box">
  </div>
</div>

<div id="box_sizing_border_box_flex_basis_row" style="width: 100px; height: 100px; flex-direction: row;">
  <div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: border-box">
  </div>
</div>

<div data-disabled="true" id="box_sizing_content_box_flex_basis_column"
  style="width: 100px; height: 100px; flex-direction: column;">
  <div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: content-box">
  </div>
</div>

<div id="box_sizing_border_box_flex_basis_column" style="width: 100px; height: 100px; flex-direction: column;">
  <div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: border-box">
  </div>
</div>

<div id="box_sizing_content_box_padding_start"
  style="width: 100px; height: 100px; padding-start: 5px; box-sizing: content-box">
</div>

<div id="box_sizing_border_box_padding_start"
  style="width: 100px; height: 100px; padding-start: 5px; box-sizing: border-box">
</div>

<div id="box_sizing_content_box_padding_end"
  style="width: 100px; height: 100px; padding-end: 5px; box-sizing: content-box">
</div>

<div id="box_sizing_border_box_padding_end"
  style="width: 100px; height: 100px; padding-end: 5px; box-sizing: border-box">
</div>

<div id="box_sizing_content_box_border_start"
  style="width: 100px; height: 100px; border-start-width: 5px; box-sizing: content-box">
</div>

<div id="box_sizing_border_box_border_start"
  style="width: 100px; height: 100px; border-start-width: 5px; box-sizing: border-box">
</div>

<div id="box_sizing_content_box_border_end"
  style="width: 100px; height: 100px; border-end-width: 5px; box-sizing: content-box">
</div>

<div id="box_sizing_border_box_border_end"
  style="width: 100px; height: 100px; border-end-width: 5px; box-sizing: border-box">
</div>