64 lines
2.8 KiB
HTML
64 lines
2.8 KiB
HTML
<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> |