float-avoids-padding-inline-ancestors.html

<!DOCTYPE html>
<script src="../../resources/ahem.js"></script>
<style>
body {
  margin: 0px;
  padding: 0px;
  font: 20px/20px Ahem;
}
.container {
  width: 300px;
  border: 2px solid black;
}
.padded {
  border: 2px dotted lime;
  background: yellow;
}
.float {
  float: right;
  width: 50px;
  border: 2px dotted red;
}
</style>
<script src="../../resources/check-layout.js"></script>
<div class="container">
  <span class="padded" style="padding-right: 160px;">
  <span class="padded" style="padding-right: 100px;">
    a
    <span class="float" data-offset-y=22>Float</span>
  </span>
  </span>
</div>
<br>
<div class="container">
  <span class="padded" style="padding-right: 260px;">
    a
    <span class="float" data-offset-y=66>Float</span>
  </span>
</div>
<br>
<div class="container">
  <span class="padded" style="border-right: 160px solid lime;">
  <span class="padded" style="border-right: 100px solid lime;">
    a
    <span class="float" data-offset-y=110>Float</span>
  </span>
  </span>
</div>
<br>
<div class="container">
  <span class="padded" style="border-right: 260px solid lime;">
    a
    <span class="float" data-offset-y=154>Float</span>
  </span>
</div>
<br>
<div class="container">
  <span class="padded" style="margin-right: 160px;">
  <span class="padded" style="margin-right: 100px;">
    a
    <span class="float" data-offset-y=198>Float</span>
  </span>
  </span>
</div>
<br>
<div class="container">
  <span class="padded" style="margin-right: 260px;">
    a
    <span class="float" data-offset-y=242>Float</span>
  </span>
</div>
<p>crbug.com/754136: Floats should account for border/padding/margin on inline ancestors when deciding when they fit.</p>
<script>
    checkLayout(".float");
</script>
chromium/third_party/blink/web_tests/fast/block/float-avoids-padding-inline-ancestors.html
