blob: 77635f9e2b0c24e288779bd7a1bfec189f0484cc [file] [log] [blame]
<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>
checkLayout(".container");
</script>