fractional-dimensions-02.rml 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <rml>
  2. <head>
  3. <link type="text/rcss" href="/../Tests/Data/style.rcss"/>
  4. <title>Fractional dimensions 02</title>
  5. <link rel="author" title="Ian Hickson" href="mailto:[email protected]"/>
  6. <link rel="source" href="https://test.csswg.org/suites/css21_dev/20110323/xhtml1/units-005.xht"/>
  7. <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/units/005.html"/>
  8. <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/>
  9. <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths"/>
  10. <link rel="match" href="reference/fractional-dimensions-02-ref.rml"/>
  11. <meta name="Description" content="Layout with fractionally sized elements. Here, 100 fractionally sized span elements fill a single div element."/>
  12. <meta name="Instructions" content="Try different font sizes, zooms, and resolutions, as well as slightly different sizes for the floats."/>
  13. <meta name="Assert" content="It's hard to fill the box perfectly for all combinations of scaling and box dimensions. Even Firefox and Chromium struggles with this for some combinations. However, we should at least try to avoid gaps between the individual span elements."/>
  14. <style>
  15. handle {
  16. width: 87dp;
  17. height: 87dp;
  18. background-color: red;
  19. border: 3dp lime;
  20. position: relative;
  21. top: auto;
  22. left: auto;
  23. right: auto;
  24. bottom: auto;
  25. display: block;
  26. cursor: move;
  27. }
  28. span {
  29. float: left;
  30. width: 8.7dp;
  31. height: 8.7dp;
  32. background-color: green;
  33. }
  34. input[type="text"] {
  35. text-align: right;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <p>You should see no red below, just a green square with a green border.</p>
  41. <handle move_target="#self">
  42. <!-- 100 spans -->
  43. <span></span> <span></span> <span></span> <span></span> <span></span>
  44. <span></span> <span></span> <span></span> <span></span> <span></span>
  45. <span></span> <span></span> <span></span> <span></span> <span></span>
  46. <span></span> <span></span> <span></span> <span></span> <span></span>
  47. <span></span> <span></span> <span></span> <span></span> <span></span>
  48. <span></span> <span></span> <span></span> <span></span> <span></span>
  49. <span></span> <span></span> <span></span> <span></span> <span></span>
  50. <span></span> <span></span> <span></span> <span></span> <span></span>
  51. <span></span> <span></span> <span></span> <span></span> <span></span>
  52. <span></span> <span></span> <span></span> <span></span> <span></span>
  53. <span></span> <span></span> <span></span> <span></span> <span></span>
  54. <span></span> <span></span> <span></span> <span></span> <span></span>
  55. <span></span> <span></span> <span></span> <span></span> <span></span>
  56. <span></span> <span></span> <span></span> <span></span> <span></span>
  57. <span></span> <span></span> <span></span> <span></span> <span></span>
  58. <span></span> <span></span> <span></span> <span></span> <span></span>
  59. <span></span> <span></span> <span></span> <span></span> <span></span>
  60. <span></span> <span></span> <span></span> <span></span> <span></span>
  61. <span></span> <span></span> <span></span> <span></span> <span></span>
  62. <span></span> <span></span> <span></span> <span></span> <span></span>
  63. </handle>
  64. </body>
  65. </rml>