gecko/layout/html/tests/block/bugs/18445_1.html

77 lines
1.9 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- http://www.bath.ac.uk/%7Epy8ieh/a/internet/projects/mozilla/widgets/ -->
<html>
<head>
<title>Mozilla Tests: Styled Widgets Eleven</title>
<style type="text/css">
div.right, div.left { width: 100px; height: 30px; background: green; color: white; }
div.left { float: left; } div.right { float: right; }
.center, p { display: block; margin: auto; width: 300px; }
p {border: 1px solid black; background: yellow; }
p.left { margin-left: 0; }
p.right { margin-right: 0; }
p.note {clear:both; width:auto; background: white;}
div { padding: 5px; border: solid; }
</style>
</head>
<body>
<H1>Styling Widgets! 11</H1>
<p class=note>In all these tests, INPUT should act as a BLOCK element because it
is given 'display:block' in the stylesheet.</p>
<p class=note>In the following test case there a centered INPUT element.</p>
<div>
<P>I am centered with 'margin:auto'."</P>
</div>
<p class=note>In the following test case, there is the same INPUT but this time
it is next to a float. <em>The INPUT should be in the same place!</em></p>
<div>
<div class="right">I float.</div>
<P>I am centered with 'margin:auto'."</P>
</div>
<p class=note>This problem does not seem to occur with left floated images: </p>
<div>
<div class="left">I float.</div>
<P>I am centered with 'margin:auto'."</P>
</div>
<p class=note>Similarly, if we right align the INPUT, the INPUT does
not go under the floated block as it should:</p>
<div>
<div class="right">I float.</div>
<P class="right">I am right aligned with 'margin-left:auto'."</P>
</div>
<p class=note>In this case, though, the problem <em>does</em> appear for the left
case: </p>
<div>
<div class="left">I float.</div>
<P class="left">I am left aligned with 'margin-right:auto'."</P>
</div>
<hr>
<p class=note><a href="10.html">Prev</a> <a href="12.html">Next</a></p>
</body>
</html>