fdcbc376627f3a883e9f1eb9fc79e9fb6a8b2e4a
[WebKit-https.git] / LayoutTests / fast / images / exif-orientation-canvas-expected.html
1 <!DOCTYPE html>
2 <style>
3     div.container {
4         display: inline-block;
5         margin-right: 20px; 
6         margin-bottom: 10px; 
7         width: 100px; 
8         vertical-align: top;
9     }
10     div.horizontal {
11         width: 102px;
12         height: 52px;
13     }
14     div.vertical {
15         width: 52px;
16         height: 102px;
17     }
18     img {
19         border: 1px solid black;
20     }
21 </style>
22 <body>
23     <b>CanvasRenderingContext2D.drawImage() should rotate the images respecting their EXIF orientation.</b>
24     <br>
25     <br>
26     <div class="container">
27         <div class="horizontal">
28             <img src="resources/exif-orientation-1-ul.jpg">
29         </div>
30         <br>Normal
31     </div>
32     <div class="container">
33         <div class="horizontal">
34             <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1);">
35         </div>
36         <br>Flipped horizontally
37     </div>
38     <div class="container">
39         <div class="horizontal">
40             <img src="resources/exif-orientation-1-ul.jpg" style="transform: rotate(180deg);">
41         </div>
42         <br>Rotated 180&deg;
43     </div>
44     <div class="container">
45         <div class="horizontal">
46             <img src="resources/exif-orientation-1-ul.jpg" style="transform: scaleX(-1) rotate(180deg);">
47         </div>
48         <br>Flipped vertically
49     </div>
50     <br>
51     <div class="container">
52         <div class="vertical">
53             <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg) scaleY(-1);">
54         </div>
55         <br>Rotated 90&deg; CCW and flipped vertically
56     </div>
57     <div class="container">
58         <div class="vertical">
59             <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(90deg);">
60         </div>
61         <br>Rotated 90&deg; CCW
62     </div>
63     <div class="container">
64         <div class="vertical">
65             <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg) scaleY(-1);">
66         </div>
67         <br>Rotated 90&deg; CW and flipped vertically
68     </div>
69     <div class="container">
70         <div class="vertical">
71             <img src="resources/exif-orientation-1-ul.jpg" style="transform: translate(-25px, 25px) rotate(270deg);">
72         </div>
73         <br>Rotated 90&deg; CW
74     </div>
75     <br>
76     <div class="container">
77         <div class="horizontal">
78             <img src="resources/exif-orientation-1-ul.jpg">
79         </div>
80         <br>Undefined (invalid value)
81     </div>
82 </body>