gecko/layout/html/tests/block/base/intrinsic-cases-standards.html

213 lines
6.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Intrinsic width cases</title>
<style type="text/css">
table, td { margin: 0; border-spacing: 0; border: none; padding: 0; }
td { background: #f6f; padding: 2px 0; }
div.contain { background: #99f; padding: 2px 0; }
hr, table, div.contain { clear: left; }
table, div.contain { float: left; margin: 0.5em; }
.narrow { width: 1px; }
</style>
</head>
<body>
<table><tr><td>
text text
</td></tr></table>
<div class="contain">
text text
</div>
<table class="narrow"><tr><td>
text text
</td></tr></table>
<div class="contain narrow">
text text
</div>
<table><tr><td>
<div style="width: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain">
<div style="width: 50%;background:yellow;">text</div>
</div>
<table class="narrow"><tr><td>
<div style="width: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain narrow">
<div style="width: 50%;background:yellow;">text</div>
</div>
<table><tr><td>
<div style="width: 100%;background:yellow;">text</div>
</td></tr></table>
<div class="contain">
<div style="width: 100%;background:yellow;">text</div>
</div>
<table class="narrow"><tr><td>
<div style="width: 100%;background:yellow;">text</div>
</td></tr></table>
<div class="contain narrow">
<div style="width: 100%;background:yellow;">text</div>
</div>
<table><tr><td>
<div style="width: 150%;background:yellow;">text</div>
</td></tr></table>
<div class="contain">
<div style="width: 150%;background:yellow;">text</div>
</div>
<table class="narrow"><tr><td>
<div style="width: 150%;background:yellow;">text</div>
</td></tr></table>
<div class="contain narrow">
<div style="width: 150%;background:yellow;">text</div>
</div>
<hr>
<table><tr><td>
<div style="margin-left: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain">
<div style="margin-left: 50%;background:yellow;">text</div>
</div>
<table class="narrow"><tr><td>
<div style="margin-left: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain narrow">
<div style="margin-left: 50%;background:yellow;">text</div>
</div>
<table><tr><td>
<div style="padding-left: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain">
<div style="padding-left: 50%;background:yellow;">text</div>
</div>
<table class="narrow"><tr><td>
<div style="padding-left: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain narrow">
<div style="padding-left: 50%;background:yellow;">text</div>
</div>
<table><tr><td>
<div style="margin-right: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain">
<div style="margin-right: 50%;background:yellow;">text</div>
</div>
<table class="narrow"><tr><td>
<div style="margin-right: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain narrow">
<div style="margin-right: 50%;background:yellow;">text</div>
</div>
<table><tr><td>
<div style="padding-right: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain">
<div style="padding-right: 50%;background:yellow;">text</div>
</div>
<table class="narrow"><tr><td>
<div style="padding-right: 50%;background:yellow;">text</div>
</td></tr></table>
<div class="contain narrow">
<div style="padding-right: 50%;background:yellow;">text</div>
</div>
<hr>
<table><tr><td>
<img style="width: 50%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain">
<img style="width: 50%;background:yellow;" src="../images/green-square">
</div>
<table class="narrow"><tr><td>
<img style="width: 50%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain narrow">
<img style="width: 50%;background:yellow;" src="../images/green-square">
</div>
<table><tr><td>
<img style="width: 100%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain">
<img style="width: 100%;background:yellow;" src="../images/green-square">
</div>
<table class="narrow"><tr><td>
<img style="width: 100%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain narrow">
<img style="width: 100%;background:yellow;" src="../images/green-square">
</div>
<table><tr><td>
<img style="width: 150%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain">
<img style="width: 150%;background:yellow;" src="../images/green-square">
</div>
<table class="narrow"><tr><td>
<img style="width: 150%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain narrow">
<img style="width: 150%;background:yellow;" src="../images/green-square">
</div>
<hr>
<table><tr><td>
<img style="display:block; width: 50%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain">
<img style="display:block; width: 50%;background:yellow;" src="../images/green-square">
</div>
<table class="narrow"><tr><td>
<img style="display:block; width: 50%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain narrow">
<img style="display:block; width: 50%;background:yellow;" src="../images/green-square">
</div>
<table><tr><td>
<img style="display:block; width: 100%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain">
<img style="display:block; width: 100%;background:yellow;" src="../images/green-square">
</div>
<table class="narrow"><tr><td>
<img style="display:block; width: 100%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain narrow">
<img style="display:block; width: 100%;background:yellow;" src="../images/green-square">
</div>
<table><tr><td>
<img style="display:block; width: 150%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain">
<img style="display:block; width: 150%;background:yellow;" src="../images/green-square">
</div>
<table class="narrow"><tr><td>
<img style="display:block; width: 150%;background:yellow;" src="../images/green-square">
</td></tr></table>
<div class="contain narrow">
<img style="display:block; width: 150%;background:yellow;" src="../images/green-square">
</div>
</body>
</html>