| <!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> |
