1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 --><html><head>
6
7 <!--
8 The original and initial filename of this test was
9 diagonal-percentage-vector-background.html
10 -->
11
12 <title>CSS Backgrounds and Borders Test: scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title>
13
14 <link href="http://whereswalden.com/" rel="author" title="Jeff Walden">
15 <link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
16 <link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
17 <link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
18 <link href="reference/diagonal-percentage-vector-background-ref.htm" rel="match">
19
20 <meta content="svg" name="flags">
21
22 <style type="text/css">
23 div
24 {
25 background-image: url("support/diagonal-scaled.svg");
26 background-repeat: no-repeat;
27 border: black solid 8px;
28 height: 360px;
29 width: 436px;
30 }
31
32 /*
33
34 Complete quotation of the SVG object code:
35
36 <svg xmlns="http://www.w3.org/2000/svg">
37 <title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title>
38 <rect y="0" width="100%" height="50%" fill="lime"/>
39 <rect y="50%" width="100%" height="50%" fill="aqua"/>
40 <!--
41 A percent stroke-width is resolved with respect to:
42
43 d = sqrt(vh**2 + vw**2) / sqrt(2)
44
45 where vh/vw are the image viewport width/height. Because this image has no
46 intrinsic dimensions or ratio, it expands to fill the entire background
47 positioning area, so its width is 100px and its height is 700px. For those
48 carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide
49 rectangle, vertically centered and horizontally left-aligned in the image.
50 -->
51 <line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/>
52 </svg>
53
54 So:
55
56 d = sqrt(vh**2 + vw**2) / sqrt(2)
57
58 With width: 436px; (instead of 100px) and height: 360px; (instead of 700px):
59
60 d == sqrt ((436 mult 436) + (360 mult 360)) / sqrt(2)
61
62 d == sqrt ((190096) + (129600)) / sqrt(2)
63
64 d == sqrt ((319696)) / sqrt(2)
65
66 d == 565.416660526px / 1.41421356237
67
68 d == 399.809954854px
69
70 and so 10% of 399.809954854px == 39.9809954854px =~ 40px
71
72 */
73
74 </style>
75
76 </head>
77
78 <body>
79
80 <div></div>
81
82
83
84 </body></html>