image-orientation-ref.html (1840B)
1 <!DOCTYPE> 2 <head> 3 <style> 4 body { 5 border: 0px; 6 margin: 0px; 7 padding: 0px; 8 } 9 div { 10 border: 50px solid black; 11 margin: 50px; 12 padding: 50px; 13 } 14 table { 15 border-spacing: 0px; 16 } 17 </style> 18 </head> 19 <body> 20 <div> 21 <table> 22 <tr> 23 <td id="ul"></td> 24 <td id="ur"></td> 25 </tr> 26 <tr> 27 <td id="ll"></td> 28 <td id="lr"></td> 29 </tr> 30 </table> 31 </div> 32 33 <script> 34 var orientationInfo = location.search.substring(1).split("&"); 35 var angle = parseInt(orientationInfo[0]); 36 var flip = orientationInfo[1] == "flip" ? true : false; 37 38 // Each id corresponds to a color. 39 var ids = ["ul", "ur", "lr", "ll"]; 40 var colors = [ 41 "rgb(0, 191, 0)", 42 "rgb(0, 255, 1)", 43 "rgb(254, 0, 122)", 44 "rgb(191, 0, 93)", 45 ]; 46 47 // 'Rotate' the colors according to the angle. 48 colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length)); 49 50 // 'Flip' the colors if requested. 51 if (flip) { 52 var tmp = colors[0]; 53 colors[0] = colors[1]; 54 colors[1] = tmp; 55 tmp = colors[2]; 56 colors[2] = colors[3]; 57 colors[3] = tmp; 58 } 59 60 // Construct a style. 61 var style = ""; 62 63 if (angle == 90 || angle == 270) { 64 style += "div { width: 200px; height: 100px; }\n"; 65 style += "td { width: 100px; height: 50px; }\n"; 66 } else { 67 style += "div { width: 100px; height: 200px; }\n"; 68 style += "td { width: 50px; height: 100px; }\n"; 69 } 70 71 for (var i = 0 ; i < 4 ; ++i) { 72 style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n"; 73 } 74 75 // Apply the style to the document. 76 var sheet = document.createElement('style'); 77 sheet.innerHTML = style; 78 document.body.appendChild(sheet); 79 </script> 80 </body>