LayoutTests/css1/box_properties/float_margin.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>CSS1 Test Suite: 5.5.25 float</title>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">

 <link rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
 <style type="text/css">
 P.test {background: white; font-size: 20px;
         margin-left: 30px; margin-right: 10px; padding: 0; border: 0;}
 IMG {padding: 0; border: 0; margin: 0;}
 P.test IMG {float: left;}
 #img2 {margin-top: 30px; margin-left: 30px;}
 #img3 {margin-top: -30px; margin-left: -30px;}
 #img4 {margin-right: 30px; margin-bottom: 30px;}
 #img5 {margin-right: -30px; margin-bottom: -30px;}
 </style></head>

 <body><p>The style declarations which apply to the text below are:</p>
 <pre>P.test {background: white; font-size: 20px;
         margin-left: 30px; margin-right: 10px; padding: 0; border: 0;}
 IMG {padding: 0; border: 0; margin: 0;}
 P.test IMG {float: left;}
 #img2 {margin-top: 30px; margin-left: 30px;}
 #img3 {margin-top: -30px; margin-left: -30px;}
 #img4 {margin-right: 30px; margin-bottom: 30px;}
 #img5 {margin-right: -30px; margin-bottom: -30px;}

 </pre>
 <hr>
 <p class="test"> This paragraph should have a white background which
 extends to the edges of the element's box.  There is no padding set on
 this paragraph whatsoever.  If the background of the entire box is not
 white, this may cause problems with the following tests; at any rate,
 it must be taken into account. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" alt="[Image]"> The image in
 the upper left corner of this paragraph should be floated left, and
 nothing more.  The edges of the white background should line up with
 the top and left edges of the image.  This paragraph should have a
 white background, first of all, which extends to the edges of the
 element's box.  There is no padding set on this paragraph whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The
 image in the upper left corner of this paragraph should be pushed down
 and to the right 30 pixels each from the upper left corner of the
 paragraph's box, and displace the paragraph text accordingly.  This
 paragraph should have a white background, first of all, which extends
 to the edges of the element's box.  There is no padding set on this
 paragraph whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The
 image in the upper left corner of this paragraph should be pushed up
 and to the left 30 pixels each from the upper left corner of the
 paragraph's box, thus causing the edges of the white background to
 align with the thick gray lines in the image.  This paragraph should
 have a white background, first of all, which extends to the edges of
 the element's box.  There is no padding set on this paragraph
 whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The
 image in the upper left corner of this paragraph should be floated
 left, and the edges of the white background should line up with the top
 and left edges of the image.  However, there should be 30 pixels of
 space between the right and bottom edges of the image and the paragraph
 text around it.  This paragraph should have a white background, first
 of all, which extends to the edges of the element's box.  There is no
 padding set on this paragraph whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The
 image in the upper left corner of this paragraph should be floated
 left, and the edges of the white background should line up with the top
 and left edges of the image.  However, the text should overlap the
 image's right and bottom sides, lining up with the thick gray lines in
 the image.  This paragraph should have a white background, first of
 all, which extends to the edges of the element's box.  There is no
 padding set on this paragraph whatsoever. </p>


 <table border="1" cellspacing="0" cellpadding="3" class="tabletest">
 <tbody><tr>
 <td colspan="2" bgcolor="silver"><strong>TABLE Testing Section</strong></td>
 </tr>
 <tr>
 <td bgcolor="silver"> </td>
 <td><p class="test"> This paragraph should have a white background which
 extends to the edges of the element's box.  There is no padding set on
 this paragraph whatsoever.  If the background of the entire box is not
 white, this may cause problems with the following tests; at any rate,
 it must be taken into account. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" alt="[Image]"> The image in
 the upper left corner of this paragraph should be floated left, and
 nothing more.  The edges of the white background should line up with
 the top and left edges of the image.  This paragraph should have a
 white background, first of all, which extends to the edges of the
 element's box.  There is no padding set on this paragraph whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The
 image in the upper left corner of this paragraph should be pushed down
 and to the right 30 pixels each from the upper left corner of the
 paragraph's box, and displace the paragraph text accordingly.  This
 paragraph should have a white background, first of all, which extends
 to the edges of the element's box.  There is no padding set on this
 paragraph whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The
 image in the upper left corner of this paragraph should be pushed up
 and to the left 30 pixels each from the upper left corner of the
 paragraph's box, thus causing the edges of the white background to
 align with the thick gray lines in the image.  This paragraph should
 have a white background, first of all, which extends to the edges of
 the element's box.  There is no padding set on this paragraph
 whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The
 image in the upper left corner of this paragraph should be floated
 left, and the edges of the white background should line up with the top
 and left edges of the image.  However, there should be 30 pixels of
 space between the right and bottom edges of the image and the paragraph
 text around it.  This paragraph should have a white background, first
 of all, which extends to the edges of the element's box.  There is no
 padding set on this paragraph whatsoever. </p>
 <p class="test">
 <img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The
 image in the upper left corner of this paragraph should be floated
 left, and the edges of the white background should line up with the top
 and left edges of the image.  However, the text should overlap the
 image's right and bottom sides, lining up with the thick gray lines in
 the image.  This paragraph should have a white background, first of
 all, which extends to the edges of the element's box.  There is no
 padding set on this paragraph whatsoever. </p>
 </td></tr></tbody></table></body></html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>CSS1 Test Suite: 5.5.25 float</title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="Content-Style-Type" content="text/css">

	<link rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
	<style type="text/css">
	P.test {background: white; font-size: 20px;
	margin-left: 30px; margin-right: 10px; padding: 0; border: 0;}
	IMG {padding: 0; border: 0; margin: 0;}
	P.test IMG {float: left;}
	#img2 {margin-top: 30px; margin-left: 30px;}
	#img3 {margin-top: -30px; margin-left: -30px;}
	#img4 {margin-right: 30px; margin-bottom: 30px;}
	#img5 {margin-right: -30px; margin-bottom: -30px;}
	</style></head>

	<body><p>The style declarations which apply to the text below are:</p>
	<pre>P.test {background: white; font-size: 20px;
	margin-left: 30px; margin-right: 10px; padding: 0; border: 0;}
	IMG {padding: 0; border: 0; margin: 0;}
	P.test IMG {float: left;}
	#img2 {margin-top: 30px; margin-left: 30px;}
	#img3 {margin-top: -30px; margin-left: -30px;}
	#img4 {margin-right: 30px; margin-bottom: 30px;}
	#img5 {margin-right: -30px; margin-bottom: -30px;}

	</pre>
	<hr>
	<p class="test"> This paragraph should have a white background which
	extends to the edges of the element's box. There is no padding set on
	this paragraph whatsoever. If the background of the entire box is not
	white, this may cause problems with the following tests; at any rate,
	it must be taken into account. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" alt="[Image]"> The image in
	the upper left corner of this paragraph should be floated left, and
	nothing more. The edges of the white background should line up with
	the top and left edges of the image. This paragraph should have a
	white background, first of all, which extends to the edges of the
	element's box. There is no padding set on this paragraph whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The
	image in the upper left corner of this paragraph should be pushed down
	and to the right 30 pixels each from the upper left corner of the
	paragraph's box, and displace the paragraph text accordingly. This
	paragraph should have a white background, first of all, which extends
	to the edges of the element's box. There is no padding set on this
	paragraph whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The
	image in the upper left corner of this paragraph should be pushed up
	and to the left 30 pixels each from the upper left corner of the
	paragraph's box, thus causing the edges of the white background to
	align with the thick gray lines in the image. This paragraph should
	have a white background, first of all, which extends to the edges of
	the element's box. There is no padding set on this paragraph
	whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The
	image in the upper left corner of this paragraph should be floated
	left, and the edges of the white background should line up with the top
	and left edges of the image. However, there should be 30 pixels of
	space between the right and bottom edges of the image and the paragraph
	text around it. This paragraph should have a white background, first
	of all, which extends to the edges of the element's box. There is no
	padding set on this paragraph whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The
	image in the upper left corner of this paragraph should be floated
	left, and the edges of the white background should line up with the top
	and left edges of the image. However, the text should overlap the
	image's right and bottom sides, lining up with the thick gray lines in
	the image. This paragraph should have a white background, first of
	all, which extends to the edges of the element's box. There is no
	padding set on this paragraph whatsoever. </p>


	<table border="1" cellspacing="0" cellpadding="3" class="tabletest">
	<tbody><tr>
	<td colspan="2" bgcolor="silver"><strong>TABLE Testing Section</strong></td>
	</tr>
	<tr>
	<td bgcolor="silver"> </td>
	<td><p class="test"> This paragraph should have a white background which
	extends to the edges of the element's box. There is no padding set on
	this paragraph whatsoever. If the background of the entire box is not
	white, this may cause problems with the following tests; at any rate,
	it must be taken into account. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" alt="[Image]"> The image in
	the upper left corner of this paragraph should be floated left, and
	nothing more. The edges of the white background should line up with
	the top and left edges of the image. This paragraph should have a
	white background, first of all, which extends to the edges of the
	element's box. There is no padding set on this paragraph whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The
	image in the upper left corner of this paragraph should be pushed down
	and to the right 30 pixels each from the upper left corner of the
	paragraph's box, and displace the paragraph text accordingly. This
	paragraph should have a white background, first of all, which extends
	to the edges of the element's box. There is no padding set on this
	paragraph whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The
	image in the upper left corner of this paragraph should be pushed up
	and to the left 30 pixels each from the upper left corner of the
	paragraph's box, thus causing the edges of the white background to
	align with the thick gray lines in the image. This paragraph should
	have a white background, first of all, which extends to the edges of
	the element's box. There is no padding set on this paragraph
	whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The
	image in the upper left corner of this paragraph should be floated
	left, and the edges of the white background should line up with the top
	and left edges of the image. However, there should be 30 pixels of
	space between the right and bottom edges of the image and the paragraph
	text around it. This paragraph should have a white background, first
	of all, which extends to the edges of the element's box. There is no
	padding set on this paragraph whatsoever. </p>
	<p class="test">
	<img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The
	image in the upper left corner of this paragraph should be floated
	left, and the edges of the white background should line up with the top
	and left edges of the image. However, the text should overlap the
	image's right and bottom sides, lining up with the thick gray lines in
	the image. This paragraph should have a white background, first of
	all, which extends to the edges of the element's box. There is no
	padding set on this paragraph whatsoever. </p>
	</td></tr></tbody></table></body></html>