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