stdweb/webapi/html_elements/
image.rs

1use webcore::value::{Value, Reference};
2use webcore::try_from::TryInto;
3use webapi::cross_origin_setting::CrossOriginSetting;
4use webapi::event_target::{IEventTarget, EventTarget};
5use webapi::node::{INode, Node};
6use webapi::element::{IElement, Element};
7use 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))]
17pub struct ImageElement( Reference );
18
19impl IEventTarget for ImageElement {}
20impl INode for ImageElement {}
21impl IElement for ImageElement {}
22impl IHtmlElement for ImageElement {}
23
24impl 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
29    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
39    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]
50    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
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
71    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
81    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
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
112    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
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
132    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
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
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
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
178    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
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
198    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
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
218    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
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"))]
236mod tests {
237    use super::*;
238
239    #[test]
240    fn test_new() {
241        let image = ImageElement::new();
242        assert_eq!(image.alt(), "");
243    }
244
245    #[test]
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]
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]
261    fn test_complete() {
262        let image = ImageElement::new();
263        assert_eq!(image.complete(), true);
264    }
265
266    #[test]
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]
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]
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]
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]
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}
stdweb/webapi/html_elements/image.rs

stdweb/webapi/html_elements/
image.rs
