| darin | 1d1801e | 2003-07-31 00:21:00 +0000 | [diff] [blame] | 1 | <!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> |
| 2 | |
| 3 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| 4 | <meta http-equiv="Content-Style-Type" content="text/css"> |
| 5 | |
| 6 | <link rel="stylesheet" type="text/css" media="screen" href="../resources/base.css"> |
| 7 | <style type="text/css"> |
| 8 | P.test {background: white; font-size: 20px; |
| 9 | margin-left: 30px; margin-right: 10px; padding: 0; border: 0;} |
| 10 | IMG {padding: 0; border: 0; margin: 0;} |
| 11 | P.test IMG {float: left;} |
| 12 | #img2 {margin-top: 30px; margin-left: 30px;} |
| 13 | #img3 {margin-top: -30px; margin-left: -30px;} |
| 14 | #img4 {margin-right: 30px; margin-bottom: 30px;} |
| 15 | #img5 {margin-right: -30px; margin-bottom: -30px;} |
| 16 | </style></head> |
| 17 | |
| 18 | <body><p>The style declarations which apply to the text below are:</p> |
| 19 | <pre>P.test {background: white; font-size: 20px; |
| 20 | margin-left: 30px; margin-right: 10px; padding: 0; border: 0;} |
| 21 | IMG {padding: 0; border: 0; margin: 0;} |
| 22 | P.test IMG {float: left;} |
| 23 | #img2 {margin-top: 30px; margin-left: 30px;} |
| 24 | #img3 {margin-top: -30px; margin-left: -30px;} |
| 25 | #img4 {margin-right: 30px; margin-bottom: 30px;} |
| 26 | #img5 {margin-right: -30px; margin-bottom: -30px;} |
| 27 | |
| 28 | </pre> |
| 29 | <hr> |
| 30 | <p class="test"> This paragraph should have a white background which |
| 31 | extends to the edges of the element's box. There is no padding set on |
| 32 | this paragraph whatsoever. If the background of the entire box is not |
| 33 | white, this may cause problems with the following tests; at any rate, |
| 34 | it must be taken into account. </p> |
| 35 | <p class="test"> |
| 36 | <img src="../resources/crosshair.gif" alt="[Image]"> The image in |
| 37 | the upper left corner of this paragraph should be floated left, and |
| 38 | nothing more. The edges of the white background should line up with |
| 39 | the top and left edges of the image. This paragraph should have a |
| 40 | white background, first of all, which extends to the edges of the |
| 41 | element's box. There is no padding set on this paragraph whatsoever. </p> |
| 42 | <p class="test"> |
| 43 | <img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The |
| 44 | image in the upper left corner of this paragraph should be pushed down |
| 45 | and to the right 30 pixels each from the upper left corner of the |
| 46 | paragraph's box, and displace the paragraph text accordingly. This |
| 47 | paragraph should have a white background, first of all, which extends |
| 48 | to the edges of the element's box. There is no padding set on this |
| 49 | paragraph whatsoever. </p> |
| 50 | <p class="test"> |
| 51 | <img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The |
| 52 | image in the upper left corner of this paragraph should be pushed up |
| 53 | and to the left 30 pixels each from the upper left corner of the |
| 54 | paragraph's box, thus causing the edges of the white background to |
| 55 | align with the thick gray lines in the image. This paragraph should |
| 56 | have a white background, first of all, which extends to the edges of |
| 57 | the element's box. There is no padding set on this paragraph |
| 58 | whatsoever. </p> |
| 59 | <p class="test"> |
| 60 | <img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The |
| 61 | image in the upper left corner of this paragraph should be floated |
| 62 | left, and the edges of the white background should line up with the top |
| 63 | and left edges of the image. However, there should be 30 pixels of |
| 64 | space between the right and bottom edges of the image and the paragraph |
| 65 | text around it. This paragraph should have a white background, first |
| 66 | of all, which extends to the edges of the element's box. There is no |
| 67 | padding set on this paragraph whatsoever. </p> |
| 68 | <p class="test"> |
| 69 | <img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The |
| 70 | image in the upper left corner of this paragraph should be floated |
| 71 | left, and the edges of the white background should line up with the top |
| 72 | and left edges of the image. However, the text should overlap the |
| 73 | image's right and bottom sides, lining up with the thick gray lines in |
| 74 | the image. This paragraph should have a white background, first of |
| 75 | all, which extends to the edges of the element's box. There is no |
| 76 | padding set on this paragraph whatsoever. </p> |
| 77 | |
| 78 | |
| 79 | <table border="1" cellspacing="0" cellpadding="3" class="tabletest"> |
| 80 | <tbody><tr> |
| 81 | <td colspan="2" bgcolor="silver"><strong>TABLE Testing Section</strong></td> |
| 82 | </tr> |
| 83 | <tr> |
| 84 | <td bgcolor="silver"> </td> |
| 85 | <td><p class="test"> This paragraph should have a white background which |
| 86 | extends to the edges of the element's box. There is no padding set on |
| 87 | this paragraph whatsoever. If the background of the entire box is not |
| 88 | white, this may cause problems with the following tests; at any rate, |
| 89 | it must be taken into account. </p> |
| 90 | <p class="test"> |
| 91 | <img src="../resources/crosshair.gif" alt="[Image]"> The image in |
| 92 | the upper left corner of this paragraph should be floated left, and |
| 93 | nothing more. The edges of the white background should line up with |
| 94 | the top and left edges of the image. This paragraph should have a |
| 95 | white background, first of all, which extends to the edges of the |
| 96 | element's box. There is no padding set on this paragraph whatsoever. </p> |
| 97 | <p class="test"> |
| 98 | <img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The |
| 99 | image in the upper left corner of this paragraph should be pushed down |
| 100 | and to the right 30 pixels each from the upper left corner of the |
| 101 | paragraph's box, and displace the paragraph text accordingly. This |
| 102 | paragraph should have a white background, first of all, which extends |
| 103 | to the edges of the element's box. There is no padding set on this |
| 104 | paragraph whatsoever. </p> |
| 105 | <p class="test"> |
| 106 | <img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The |
| 107 | image in the upper left corner of this paragraph should be pushed up |
| 108 | and to the left 30 pixels each from the upper left corner of the |
| 109 | paragraph's box, thus causing the edges of the white background to |
| 110 | align with the thick gray lines in the image. This paragraph should |
| 111 | have a white background, first of all, which extends to the edges of |
| 112 | the element's box. There is no padding set on this paragraph |
| 113 | whatsoever. </p> |
| 114 | <p class="test"> |
| 115 | <img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The |
| 116 | image in the upper left corner of this paragraph should be floated |
| 117 | left, and the edges of the white background should line up with the top |
| 118 | and left edges of the image. However, there should be 30 pixels of |
| 119 | space between the right and bottom edges of the image and the paragraph |
| 120 | text around it. This paragraph should have a white background, first |
| 121 | of all, which extends to the edges of the element's box. There is no |
| 122 | padding set on this paragraph whatsoever. </p> |
| 123 | <p class="test"> |
| 124 | <img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The |
| 125 | image in the upper left corner of this paragraph should be floated |
| 126 | left, and the edges of the white background should line up with the top |
| 127 | and left edges of the image. However, the text should overlap the |
| 128 | image's right and bottom sides, lining up with the thick gray lines in |
| 129 | the image. This paragraph should have a white background, first of |
| 130 | all, which extends to the edges of the element's box. There is no |
| 131 | padding set on this paragraph whatsoever. </p> |
| 132 | </td></tr></tbody></table></body></html> |
