gecko/layout/html/tests/block/base/width-percent.html

151 lines
2.7 KiB
HTML

<html>
<head>
<title>Test case for width property as applied to blocks</title>
<style>
div.b { border: 2px solid black; }
div.bp { border: 2px solid black; padding: 2px; }
</style>
</head>
<body>
<div style="width: 400px; border: 2px dashed green;">
Percentage width outer div with no border or padding:
<div style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
<div style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="b" style="width: 50px;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="bp" style="width: 50px;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="b" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="bp" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
</div>
<hr>
Percentage width outer div with border:
<div class="b" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
<div style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="b" style="width: 50px;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="bp" style="width: 50px;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="b" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="bp" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
</div>
<hr>
Percentage width outer div with border and padding:
<div class="bp" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
<div style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="b" style="width: 50px;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="bp" style="width: 50px;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="b" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
<div class="bp" style="width: 50%;">
Text in a div.
Text in a div.
Text in a div.
Text in a div.
</div>
</div>
</div>
</body>
</html>