1 use webcore::value::{Value, Reference};
2 use webcore::try_from::TryInto;
3 use webapi::cross_origin_setting::CrossOriginSetting;
4 use webapi::event_target::{IEventTarget, EventTarget};
5 use webapi::node::{INode, Node};
6 use webapi::element::{IElement, Element};
7 use webapi::html_element::{IHtmlElement, HtmlElement};
8 
9 /// The HTML image element is used to manipulate the layout and presentation of
10 /// `<img>` elements.
11 ///
12 /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement)
13 // https://html.spec.whatwg.org/#htmlimageelement
14 #[derive(Clone, Debug, PartialEq, Eq, ReferenceType)]
15 #[reference(instance_of = "HTMLImageElement")]
16 #[reference(subclass_of(EventTarget, Node, Element, HtmlElement))]
17 pub struct ImageElement( Reference );
18 
19 impl IEventTarget for ImageElement {}
20 impl INode for ImageElement {}
21 impl IElement for ImageElement {}
22 impl IHtmlElement for ImageElement {}
23 
24 impl ImageElement {
25     /// Constructs a new ImageElement.
26     ///
27     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)
28     // https://html.spec.whatwg.org/#the-img-element:dom-image
new() -> ImageElement29     pub fn new() -> ImageElement {
30         js! (
31             return new Image();
32         ).try_into().unwrap()
33     }
34 
35     /// Constructs a new ImageElement with the given width and height.
36     ///
37     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)
38     // https://html.spec.whatwg.org/#the-img-element:dom-image
with_size(width: u32, height: u32) -> ImageElement39     pub fn with_size(width: u32, height: u32) -> ImageElement {
40         js! (
41             return new Image(@{width}, @{height});
42         ).try_into().unwrap()
43     }
44 
45     /// Returns the HTML `alt` attribute, representing the fallback context for the image.
46     ///
47     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt)
48     // https://html.spec.whatwg.org/#the-img-element:dom-img-alt
49     #[inline]
alt( &self ) -> String50     pub fn alt( &self ) -> String {
51         js! (
52             return @{self}.alt;
53         ).try_into().unwrap()
54     }
55 
56     /// Sets the HTML `alt` attribute, representing the fallback context for the image.
57     ///
58     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt)
59     // https://html.spec.whatwg.org/#the-img-element:dom-img-alt
set_alt( &self, value: &str )60     pub fn set_alt( &self, value: &str ) {
61         js! { @(no_return)
62             @{self}.alt = @{value};
63         }
64     }
65 
66     /// Returns true if the browser has finished fetching the image, whether
67     /// successful or not. It also return true if the image has no src value.
68     ///
69     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete)
70     // https://html.spec.whatwg.org/#the-img-element:dom-img-complete
complete( &self ) -> bool71     pub fn complete( &self ) -> bool {
72         js! (
73             return @{self}.complete;
74         ).try_into().unwrap()
75     }
76 
77     /// Returns the Cross-Origin Resource Sharing (CORS) setting for the image.
78     ///
79     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin)
80     // https://html.spec.whatwg.org/#the-img-element:dom-img-crossorigin
cross_origin( &self ) -> CrossOriginSetting81     pub fn cross_origin( &self ) -> CrossOriginSetting {
82         match js!(
83             return @{self}.crossOrigin;
84         ) {
85             Value::Null => CrossOriginSetting::None,
86             Value::String( ref s ) if *s == "anonymous" => CrossOriginSetting::Anonymous,
87             Value::String( ref s ) if *s == "use-credentials" => CrossOriginSetting::UseCredentials,
88             _ => unreachable!("Unexpected crossOrigin value")
89         }
90     }
91 
92     /// Sets the Cross-Origin Resource Sharing (CORS) setting for the image.
93     ///
94     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin)
95     // https://html.spec.whatwg.org/#the-img-element:dom-img-crossorigin
set_cross_origin( &self, value: CrossOriginSetting )96     pub fn set_cross_origin( &self, value: CrossOriginSetting ) {
97         js! { @(no_return)
98             @{self}.crossOrigin = @{
99                 match value {
100                     CrossOriginSetting::None => None,
101                     CrossOriginSetting::Anonymous => Some("anonymous"),
102                     CrossOriginSetting::UseCredentials => Some("use-credentials")
103                 }
104             }
105         }
106     }
107 
108     /// Returns the the rendered height of the image in CSS pixels.
109     ///
110     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height)
111     // https://html.spec.whatwg.org/#the-img-element:dom-img-height
height( &self ) -> u32112     pub fn height( &self ) -> u32 {
113         js! (
114             return @{self}.height;
115         ).try_into().unwrap()
116     }
117 
118     /// Sets the the rendered height of the image in CSS pixels.
119     ///
120     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height)
121     // https://html.spec.whatwg.org/#the-img-element:dom-img-height
set_height( &self, value: u32 )122     pub fn set_height( &self, value: u32 ) {
123         js! { @(no_return)
124             @{self}.height = @{value};
125         }
126     }
127 
128     /// Indicates whether the image is part of a server-side image map.
129     ///
130     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/isMap)
131     // https://html.spec.whatwg.org/#the-img-element:dom-img-ismap
is_map( &self ) -> bool132     pub fn is_map( &self ) -> bool {
133         js!(
134             return @{self}.isMap;
135         ).try_into().unwrap()
136     }
137 
138     /// Sets whether the image is part of a server-side image map.
139     ///
140     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/isMap)
141     // https://html.spec.whatwg.org/#the-img-element:dom-img-ismap
set_is_map( &self, value: bool )142     pub fn set_is_map( &self, value: bool ) {
143         js! { @(no_return)
144             @{self}.isMap = @{value};
145         }
146     }
147 
148     /// Returns the intrinsic height of the image in CSS pixels, if it is available.
149     ///
150     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)
151     // https://html.spec.whatwg.org/#the-img-element:dom-img-naturalheight
natural_height( &self ) -> Option< u32 >152     pub fn natural_height( &self ) -> Option< u32 > {
153         match js!(
154             return @{self}.naturalHeight;
155         ).try_into().unwrap() {
156             0 => None,
157             value => Some( value )
158         }
159     }
160 
161     /// Returns the intrinsic width of the image in CSS pixels, if it is available.
162     ///
163     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)
164     // https://html.spec.whatwg.org/#the-img-element:dom-img-naturalwidth
natural_width( &self ) -> Option< u32 >165     pub fn natural_width( &self ) -> Option< u32 > {
166         match js!(
167             return @{self}.naturalWidth;
168         ).try_into().unwrap() {
169             0 => None,
170             value => Some( value )
171         }
172     }
173 
174     /// Returns the full URL of the image, including the base URI.
175     ///
176     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src)
177     // https://html.spec.whatwg.org/#the-img-element:dom-img-src
src( &self ) -> String178     pub fn src( &self ) -> String {
179         js! (
180             return @{self}.src;
181         ).try_into().unwrap()
182     }
183 
184     /// Sets the full URL of the image, including the base URI.
185     ///
186     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src)
187     // https://html.spec.whatwg.org/#the-img-element:dom-img-src
set_src( &self, value: &str )188     pub fn set_src( &self, value: &str ) {
189         js! { @(no_return)
190             @{self}.src = @{value};
191         }
192     }
193 
194     /// Returns the `usemap` HTML attribute, containing a partial URL of a map element.
195     ///
196     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/useMap)
197     // https://html.spec.whatwg.org/#the-img-element:dom-img-usemap
use_map( &self ) -> String198     pub fn use_map( &self ) -> String {
199         js!(
200             return @{self}.useMap;
201         ).try_into().unwrap()
202     }
203 
204     /// Sets the `usemap` HTML attribute, containing a partial URL of a map element.
205     ///
206     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/useMap)
207     // https://html.spec.whatwg.org/#the-img-element:dom-img-usemap
set_use_map( &self, value: &str )208     pub fn set_use_map( &self, value: &str ) {
209         js! { @(no_return)
210              @{self}.useMap = @{value};
211         }
212     }
213 
214     /// Returns the rendered width of the image in CSS pixels.
215     ///
216     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width)
217     // https://html.spec.whatwg.org/#the-img-element:dom-img-width
width( &self ) -> u32218     pub fn width( &self ) -> u32 {
219         js! (
220             return @{self}.width;
221         ).try_into().unwrap()
222     }
223 
224     /// Sets the rendered width of the image in CSS pixels.
225     ///
226     /// [(JavaScript docs)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width)
227     // https://html.spec.whatwg.org/#the-img-element:dom-img-width
set_width( &self, value: u32 )228     pub fn set_width( &self, value: u32 ) {
229         js! { @(no_return)
230             @{self}.width = @{value};
231         }
232     }
233 }
234 
235 #[cfg(all(test, feature = "web_test"))]
236 mod tests {
237     use super::*;
238 
239     #[test]
test_new()240     fn test_new() {
241         let image = ImageElement::new();
242         assert_eq!(image.alt(), "");
243     }
244 
245     #[test]
test_with_size()246     fn test_with_size() {
247         let image = ImageElement::with_size(333, 444);
248         assert_eq!(image.width(), 333);
249         assert_eq!(image.height(), 444);
250     }
251 
252     #[test]
test_alt()253     fn test_alt() {
254         let image = ImageElement::new();
255         assert_eq!(image.alt(), "");
256         image.set_alt("test");
257         assert_eq!(image.alt(), "test");
258     }
259 
260     #[test]
test_complete()261     fn test_complete() {
262         let image = ImageElement::new();
263         assert_eq!(image.complete(), true);
264     }
265 
266     #[test]
test_width_height()267     fn test_width_height() {
268         let image = ImageElement::new();
269         assert_eq!(image.width(), 0);
270         assert_eq!(image.height(), 0);
271         image.set_width(4);
272         image.set_height(5);
273         assert_eq!(image.width(), 4);
274         assert_eq!(image.height(), 5);
275     }
276 
277     #[test]
test_src()278     fn test_src() {
279         let image = ImageElement::new();
280         assert_eq!(image.src(), "");
281         image.set_src("http://example.com/image.gif");
282         assert_eq!(image.src(), "http://example.com/image.gif");
283     }
284 
285     #[test]
test_use_map()286     fn test_use_map() {
287         let image = ImageElement::new();
288         assert_eq!(image.use_map(), "");
289         image.set_use_map("test");
290         assert_eq!(image.use_map(), "test");
291     }
292 
293     #[test]
test_natural_width_height()294     fn test_natural_width_height() {
295         let image = ImageElement::new();
296         assert_eq!(image.natural_width(), None);
297         assert_eq!(image.natural_height(), None);
298     }
299 
300     #[test]
test_cross_origin()301     fn test_cross_origin() {
302         let image = ImageElement::new();
303         assert_eq!(image.cross_origin(), CrossOriginSetting::None);
304         image.set_cross_origin(CrossOriginSetting::Anonymous);
305         assert_eq!(image.cross_origin(), CrossOriginSetting::Anonymous);
306         image.set_cross_origin(CrossOriginSetting::UseCredentials);
307         assert_eq!(image.cross_origin(), CrossOriginSetting::UseCredentials);
308         image.set_cross_origin(CrossOriginSetting::None);
309         assert_eq!(image.cross_origin(), CrossOriginSetting::None);
310     }
311 }
312