css1_clear.rml 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <rml>
  2. <head>
  3. <title>CSS1 Test Suite: 5.5.26 clear</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="source" href="https://www.w3.org/Style/CSS/Test/CSS1/current/sec5526.htm"/>
  6. <link rel="help" href="http://www.w3.org/TR/REC-CSS1#clear"/>
  7. <meta name="description" content="Basic CSS1 test of the 'clear' property." />
  8. <style type="text/css">
  9. @spritesheet theme
  10. {
  11. src: /assets/invader.tga;
  12. vblank.gif: 68px 158px 9px 30px;
  13. }
  14. .one {clear: left;}
  15. .two {clear: right;}
  16. .three {clear: both;}
  17. .four {clear: none;}
  18. </style>
  19. </head>
  20. <body>
  21. <img sprite="vblank.gif" height="50" style="float: left" alt="[Image]"/>
  22. <p>
  23. This text should be flowing past a tall orange rectangle on the left side of the browser window.
  24. </p>
  25. <hr/>
  26. <img sprite="vblank.gif" height="50" style="float: left" alt="[Image]"/>
  27. <p class="one">
  28. This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it.
  29. </p>
  30. <hr/>
  31. <img sprite="vblank.gif" height="50" style="float: right" alt="[Image]"/>
  32. <p class="two">
  33. This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it.
  34. </p>
  35. <hr/>
  36. <img sprite="vblank.gif" height="50" style="float: left" alt="[Image]"/>
  37. <img sprite="vblank.gif" height="50" style="float: right" alt="[Image]"/>
  38. <p class="three">
  39. This paragraph should appear below the two tall orange rectangles, and not flow between them.
  40. </p>
  41. <img sprite="vblank.gif" height="50" style="float: left" alt="[Image]"/>
  42. <img sprite="vblank.gif" height="50" style="float: right" alt="[Image]"/>
  43. <p class="four">
  44. This paragraph should be between both tall orange rectangles.
  45. </p>
  46. <hr/>
  47. </body>
  48. </rml>