| <!DOCTYPE html> |
| |
| <html> |
| |
| <head> |
| |
| <meta charset="utf-8"> |
| |
| <title>CSS Reftest Reference</title> |
| |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> |
| |
| <style type="text/css"> |
| table |
| { |
| border: black solid 8px; |
| border-spacing: 0px; |
| height: 376px; /* 360px tall plus 2 mult 8px borders == 376px */ |
| table-layout: fixed; |
| width: 452px; /* 436px wide plus 2 mult 8px borders == 452px */ |
| } |
| |
| col#first-column {width: 89px;} /* (25% of 436px) - (40px / 2) */ |
| |
| col#second-column {width: 40px;} |
| |
| /* |
| |
| Complete quotation of the SVG object code: |
| |
| <svg xmlns="http://www.w3.org/2000/svg"> |
| <title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title> |
| <rect y="0" width="100%" height="50%" fill="lime"/> |
| <rect y="50%" width="100%" height="50%" fill="aqua"/> |
| <!-- |
| A percent stroke-width is resolved with respect to: |
| |
| d = sqrt(vh**2 + vw**2) / sqrt(2) |
| |
| where vh/vw are the image viewport width/height. Because this image has no |
| intrinsic dimensions or ratio, it expands to fill the entire background |
| positioning area, so its width is 100px and its height is 700px. For those |
| carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide |
| rectangle, vertically centered and horizontally left-aligned in the image. |
| --> |
| <line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/> |
| </svg> |
| |
| So: |
| |
| d = sqrt(vh**2 + vw**2) / sqrt(2) |
| |
| With width: 436px; (instead of 100px) and height: 360px; (instead of 700px): |
| |
| d == sqrt ((436 mult 436) + (360 mult 360)) / sqrt(2) |
| |
| d == sqrt ((190096) + (129600)) / sqrt(2) |
| |
| d == sqrt ((319696)) / sqrt(2) |
| |
| d == 565.416660526px / 1.41421356237 |
| |
| d == 399.809954854px |
| |
| and so 10% of 399.809954854px == 39.9809954854px =~ 40px |
| |
| */ |
| |
| td |
| { |
| height: 90px; |
| padding: 0px; |
| } |
| |
| td.lime {background-color: lime;} |
| |
| td.fuchsia {background-color: fuchsia;} |
| |
| td.aqua {background-color: aqua;} |
| </style> |
| |
| </head> |
| |
| <body> |
| |
| <table> |
| |
| <col id="first-column"><col id="second-column"><col> |
| |
| <tr><td class="lime"></td><td class="lime"></td><td class="lime"></td></tr> |
| |
| <tr><td class="lime"></td><td class="fuchsia"></td><td class="lime"></td></tr> |
| |
| <tr><td class="aqua"></td><td class="fuchsia"></td><td class="aqua"></td></tr> |
| |
| <tr><td class="aqua"></td><td class="aqua"></td><td class="aqua"></td></tr> |
| |
| </table> |
| |
| </body> |
| </html> |
