This test tests only those rules new since CSS1. It does not (yet)
test any elements with direction: rtl. The styles applied
are:
div.test { margin-left: 80px; padding: 0; border: medium solid red; width: 400px; }
p.test { margin: 1em 0; padding: 0; background: yellow none; width: 400px; position: relative; }
p.two { right: 0; }
p.three { left: 0; margin-right: auto; }
p.four { right: 50px; left: 50px; margin-left: auto; margin-right: auto; }
p.five { left: 50px; right: 30px; }
p.six { right: -50px; margin-left: auto; margin-right: 0; }
p.seven { right: -100px; margin-right: 50px; margin-left: auto; }
p.eight { right: -50px; margin-left: auto; margin-right: auto; }
p.nine { right: 30px; margin-right: auto; }
p.ten { left: -30px; }
p.eleven { left: -60px; margin-left: 30px; margin-right: auto; }
p.twelve { right: 30px; margin-left: auto; margin-right: auto; }
p.thirteen { left: auto; right: 30px; margin-left: auto; }
p.fourteen { right: auto; left: -30px; }
p.fifteen { width: auto; left: auto; right: auto; margin-left: auto; margin-right: auto; }
p.sixteen { width: auto; left: auto; right: auto; margin-left: 50px; }
p.seventeen { width: auto; left: 50px; right: 0; }
p.eightteen { position: static; margin-left: auto; margin-right: auto; }
p.nineteen { position: static; margin-left: auto; margin-right: -50px; }
p.twenty { position: static; margin-left: 50px; margin-right: auto; }
p.twentyone { position: static; margin-left: -50px; margin-right: auto; }
p.twentytwo { position: static; margin-left: auto; margin-right: 50px; }
p.twentythree { position: static; margin-left: 50px; margin-right: 50px; }
p.twentyfour { position: static; margin-left: 50px; margin-right: -50px; }
p.twentyfive { position: static; margin-left: -50px; margin-right: 50px; }
p.twentysix { position: static; margin-left: -50px; margin-right: -50px; }
p.twentyseven { width: 500px; position: static; margin-left: auto; margin-right: auto; }
p.twentyeight { width: 500px; position: static; margin-left: auto; margin-right: -50px; }
p.twentynine { width: 500px; position: static; margin-left: 50px; margin-right: auto; }
p.thirty { width: 500px; position: static; margin-left: -50px; margin-right: auto; }
p.thirtyone { width: 500px; position: static; margin-left: auto; margin-right: 50px; }
p.thirtytwo { width: 500px; position: static; margin-left: 50px; margin-right: 50px; }
p.thirtythree { width: 500px; position: static; margin-left: 50px; margin-right: -50px; }
p.thirtyfour { width: 500px; position: static; margin-left: -50px; margin-right: 50px; }
p.thirtyfive { width: 500px; position: static; margin-left: -50px; margin-right: -50px; }
p.thirtysix { width: 300px; position: static; margin-left: auto; margin-right: auto; }
p.thirtyseven { width: 300px; position: static; margin-left: auto; margin-right: -50px; }
p.thirtyeight { width: 300px; position: static; margin-left: 50px; margin-right: auto; }
p.thirtynine { width: 300px; position: static; margin-left: -50px; margin-right: auto; }
p.forty { width: 300px; position: static; margin-left: auto; margin-right: 50px; }
p.fortyone { width: 300px; position: static; margin-left: 50px; margin-right: 50px; }
p.fortytwo { width: 300px; position: static; margin-left: 50px; margin-right: -50px; }
p.fortythree { width: 300px; position: static; margin-left: -50px; margin-right: 50px; }
p.fortyfour { width: 300px; position: static; margin-left: -50px; margin-right: -50px; }
p.fortyfive { width: auto; position: static; margin-left: auto; margin-right: auto; }
p.fortysix { width: auto; position: static; margin-left: auto; margin-right: -50px; }
p.fortyseven { width: auto; position: static; margin-left: 50px; margin-right: auto; }
p.fortyeight { width: auto; position: static; margin-left: -50px; margin-right: auto; }
p.fortynine { width: auto; position: static; margin-left: auto; margin-right: 50px; }
p.fifty { width: auto; position: static; margin-left: 50px; margin-right: 50px; }
p.fiftyone { width: auto; position: static; margin-left: 50px; margin-right: -50px; }
p.fiftytwo { width: auto; position: static; margin-left: -50px; margin-right: 50px; }
p.fiftythree { width: auto; position: static; margin-left: -50px; margin-right: -50px; }
p.fiftyfour { width: 500px; position: static; margin-left: -50px; margin-right: 900px; }
p.fiftyfive { width: 500px; position: static; margin-left: -50px; margin-right: -900px; }
p.fiftysix { width: 500px; position: static; margin-left: 50px; margin-right: 900px; }
p.fiftyseven { width: 500px; position: static; margin-left: 50px; margin-right: -900px; }
p.fiftyeight { width: 300px; position: static; margin-left: -50px; margin-right: 900px; }
p.fiftynine { width: 300px; position: static; margin-left: -50px; margin-right: -900px; }
p.sixty { width: 300px; position: static; margin-left: 50px; margin-right: 900px; }
p.sixtyone { width: 300px; position: static; margin-left: 50px; margin-right: -900px; }
This paragraph should be in its normal position.
This paragraph should be in its normal position.
This paragraph should be in its normal position.
This paragraph should be displaced 50px to the right.
This paragraph (5) should be displaced 50px to the right.
This paragraph should be displaced 50px to the right.
This paragraph should be displaced 50px to the right.
This paragraph should be displaced 50px to the right.
This paragraph should be displaced 30px to the left.
This paragraph (10) should be displaced 30px to the left.
This paragraph should be displaced 30px to the left.
This paragraph should be displaced 30px to the left.
This paragraph should be displaced 30px to the left.
This paragraph should be displaced 30px to the left.
This paragraph (15) should be in its normal position.
This paragraph should have its right edge in the normal position but its left edge should be moved 50px to the right.
This paragraph should be displaced 50px to the right.
This paragraph should be in its normal position.
This paragraph should be displaced 50px to the right.
This paragraph (20) should be displaced 50px to the right.
This paragraph should be displaced 50px to the left.
This paragraph should be displaced 50px to the left.
This paragraph should be displaced 50px to the right.
This paragraph should be displaced 50px to the right.
This paragraph (25) should be displaced 50px to the left.
This paragraph should be displaced 50px to the left.
This paragraph should stick out 50px on each side.
This paragraph should stick out 50px on each side.
This paragraph should be indented 50px and stick out 150px on the right.
This paragraph (30) should stick out 50px on each side.
This paragraph should stick out 150px on the left and be 50px from the right edge.
This paragraph should be indented 50px and stick out 150px on the right.
This paragraph should be indented 50px and stick out 150px on the right.
This paragraph should stick out 50px on each side.
This paragraph (35) should stick out 50px on each side.
This paragraph should be 50px from each side.
This paragraph should be 150px inside the left edge and stick out 50px on the right.
This paragraph should be 50px from each side.
This paragraph should stick out 50px on the left and be 150px from the right edge.
This paragraph (40) should be 50px from both sides.
This paragraph should be 50px from each side.
This paragraph should be 50px from each side.
This paragraph should stick out 50px on the left and be 150px from the right edge.
This paragraph should stick out 50px on the left and be 150px from the right edge.
This paragraph (45) should be in its normal position.
This paragraph should stick out 50px on the right (and be even on the left).
This paragraph should be 50px from the left edge (and even on the right).
This paragraph should stick out 50px on the left (and be even on the right).
This paragraph should be 50px from the right edge (and even on the left).
This paragraph (50) should be 50px from both edges.
This paragraph should be displaced 50px to the right.
This paragraph should be displaced 50px to the left.
This paragraph should stick out 50px on both sides.
This paragraph should stick out 50px on both sides.
This paragraph (55) should stick out 50px on both sides.
This paragraph should be 50px from the left edge and stick out 150px on the right.
This paragraph should be 50px from the left edge and stick out 150px on the right.
This paragraph should stick out 50px from the left and be 150px from the right edge.
This paragraph should stick out 50px from the left and be 150px from the right edge.
This paragraph (60) should be 50px from both sides.
This paragraph should be 50px from both sides.
(Back to CSS Testing Information, David Baron)