зеркало из https://github.com/mozilla/gecko-dev.git
212 строки
6.0 KiB
HTML
212 строки
6.0 KiB
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>
|