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