<style>
.container {
    display: inline-block;
    border: 5px solid salmon;
}
.min-content {
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: -ie-min-content;
    min-width: min-content;
}
.max-content {
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: -ie-max-content;
    min-width: max-content;
}
</style>
<p>Test the effect of percentages widths on the preferred widths of replaced elements.</p>

<div style="width: 0; position: relative">

<div class="container" data-expected-width=130 data-expected-height=130>
    <img class="min-content" src="resources/square-blue-100x100.png" style="width: 10px; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
</div>

<div class="container" data-expected-width=130 data-expected-height=130>
    <img class="max-content" src="resources/square-blue-100x100.png" style="width: 10px; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
</div>

<div class="container" data-expected-width=130 data-expected-height=130>
    <img class="min-content" src="resources/square-blue-100x100.png" style="width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
</div>

<div class="container" data-expected-width=130 data-expected-height=130>
    <img class="max-content" src="resources/square-blue-100x100.png" style="width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
</div>

<div class="container" data-expected-width=55 data-expected-height=75>
    <img src="resources/square-blue-100x100.png" style="min-width: 25px; width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=65 data-expected-height=65>
</div>

<div class="container" data-expected-width=55 data-expected-height=75>
    <img src="resources/square-blue-100x100.png" style="min-width: 25px; width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=65 data-expected-height=65>
</div>

<div class="container" data-expected-width=30 data-expected-height=50>
    <img src="resources/square-blue-100x100.png" style="width: 100%; border: 5px solid grey; padding: 5px;" data-expected-width=40 data-expected-height=40>
</div>

<div class="container" data-expected-width=30 data-expected-height=50>
    <img src="resources/square-blue-100x100.png" style="max-width: 100%; border: 5px solid grey; padding: 5px;" data-expected-width=40 data-expected-height=40>
</div>

<div class="container" data-expected-width=130 data-expected-height=150>
    <img src="resources/square-blue-100x100.png" style="min-width: 100%; border: 5px solid grey; padding: 5px;" data-expected-width=140 data-expected-height=140>
</div>

</div>

<script src="../../resources/check-layout.js"></script>
<script>
// Need to do this onload to make sure all the images have loaded.
window.onload = function() { checkLayout(".container"); }
</script>