Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
1 <!DOCTYPE>
2 <head>
3 <style>
4 body {
5 border: 0px;
6 margin: 0px;
7 padding: 0px;
8 }
9 img {
10 width: 100px;
11 height: 200px;
12 }
13 </style>
14 </head>
15 <body>
16 <img src="image-orientation-no-viewbox-no-size.svg">
18 <script>
19 var orientation = location.search.substring(1).split("&");
20 var angle = orientation[0];
21 var flip = orientation[1] == "flip" ? true : false;
23 // Construct a style. "from-image" is special-cased.
24 var orientationStyle;
25 if (angle == "from-image") {
26 orientationStyle = "image-orientation: from-image;";
27 } else {
28 orientationStyle = "image-orientation: "
29 + angle + "deg"
30 + (flip ? " flip" : "")
31 + ";";
32 }
34 // Since the SVG image has no intrinsic size, we need to apply an
35 // appropriate size to the <img> element to match the reference.
36 var boxStyle;
37 if (angle == "90" || angle == "270") {
38 boxStyle = "width: 200px; height: 100px;";
39 } else {
40 boxStyle = "width: 100px; height: 200px;";
41 }
43 var style = "img { "
44 + orientationStyle
45 + " "
46 + boxStyle
47 + " }\n";
49 // Apply the style to the document.
50 var sheet = document.createElement('style');
51 sheet.innerHTML = style;
52 document.body.appendChild(sheet);
53 </script>
54 </body>