init documentation for HTMLSourceElement.{height,width} (mdn#32106)

* init docs * add additional links * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: dawei-wang <[email protected]> * Update files/en-us/web/api/htmlsourceelement/height/index.md * Update files/en-us/web/api/htmlsourceelement/height/index.md * Update files/en-us/web/api/htmlsourceelement/width/index.md * Update files/en-us/web/api/htmlsourceelement/width/index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: dawei-wang <[email protected]> Co-authored-by: Jean-Yves Perrier <[email protected]>
OnkarRuikar · Feb 6, 2024 · d8a5256 · d8a5256
1 parent 952db47
commit d8a5256
Show file tree

Hide file tree

Showing 15 changed files with 178 additions and 0 deletions.
diff --git a/files/en-us/web/api/htmlcanvaselement/height/index.md b/files/en-us/web/api/htmlcanvaselement/height/index.md
@@ -48,6 +48,9 @@ console.log(canvas.height); // 300
 
 - {{domxref("HTMLCanvasElement")}}: Interface used to define the `HTMLCanvasElement.height` property
 - {{domxref("HTMLCanvasElement.width")}}: Other property used to control the size of the canvas
+- {{domxref("HTMLEmbedElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
 - {{domxref("HTMLImageElement.width")}}
 - {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}
 - {{domxref("HTMLVideoElement.width")}}
diff --git a/files/en-us/web/api/htmlcanvaselement/width/index.md b/files/en-us/web/api/htmlcanvaselement/width/index.md
@@ -48,6 +48,9 @@ console.log(canvas.width); // 300
 
 - {{domxref("HTMLCanvasElement")}}: Interface used to define the `HTMLCanvasElement.width` property
 - {{domxref("HTMLCanvasElement.height")}}: Other property used to control the size of the canvas
+- {{domxref("HTMLEmbedElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
 - {{domxref("HTMLImageElement.width")}}
 - {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}
 - {{domxref("HTMLVideoElement.width")}}
diff --git a/files/en-us/web/api/htmlembedelement/height/index.md b/files/en-us/web/api/htmlembedelement/height/index.md
@@ -36,5 +36,8 @@ console.log(el.height); // Output: '600'
 ## See also
 
 - {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLIFrameElement.height")}}
 - {{domxref("HTMLImageElement.height")}}
 - {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
+- {{domxref("HTMLVideoElement.height")}}
diff --git a/files/en-us/web/api/htmlembedelement/width/index.md b/files/en-us/web/api/htmlembedelement/width/index.md
@@ -36,5 +36,8 @@ console.log(el.width); // Output: '800'
 ## See also
 
 - {{domxref("HTMLCanvasElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
 - {{domxref("HTMLImageElement.width")}}
 - {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}
+- {{domxref("HTMLVideoElement.width")}}
diff --git a/files/en-us/web/api/htmliframeelement/height/index.md b/files/en-us/web/api/htmliframeelement/height/index.md
@@ -36,5 +36,8 @@ console.log(el.height); // Output: '600'
 ## See also
 
 - {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLEmbedElement.height")}}
 - {{domxref("HTMLImageElement.height")}}
 - {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
+- {{domxref("HTMLVideoElement.height")}}
diff --git a/files/en-us/web/api/htmliframeelement/width/index.md b/files/en-us/web/api/htmliframeelement/width/index.md
@@ -36,5 +36,8 @@ console.log(el.width); // Output: '800'
 ## See also
 
 - {{domxref("HTMLCanvasElement.width")}}
+- {{domxref("HTMLEmbedElement.width")}}
 - {{domxref("HTMLImageElement.width")}}
 - {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}
+- {{domxref("HTMLVideoElement.width")}}
diff --git a/files/en-us/web/api/htmlimageelement/height/index.md b/files/en-us/web/api/htmlimageelement/height/index.md
@@ -83,5 +83,8 @@ This example may be easier to try out {{LiveSampleLink('Examples', 'in its own w
 ## See also
 
 - {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLEmbedElement.height")}}
+- {{domxref("HTMLIFrameElement.height")}}
 - {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
 - {{domxref("HTMLVideoElement.height")}}
diff --git a/files/en-us/web/api/htmlimageelement/width/index.md b/files/en-us/web/api/htmlimageelement/width/index.md
@@ -86,5 +86,8 @@ This example may be easier to try out {{LiveSampleLink('Examples', 'in its own w
 ## See also
 
 - {{domxref("HTMLCanvasElement.width")}}
+- {{domxref("HTMLEmbedElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
 - {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}
 - {{domxref("HTMLVideoElement.width")}}
diff --git a/files/en-us/web/api/htmlobjectelement/height/index.md b/files/en-us/web/api/htmlobjectelement/height/index.md
@@ -28,5 +28,8 @@ A string.
 ## See also
 
 - {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLEmbedElement.height")}}
+- {{domxref("HTMLIFrameElement.height")}}
 - {{domxref("HTMLImageElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
 - {{domxref("HTMLVideoElement.height")}}
diff --git a/files/en-us/web/api/htmlobjectelement/width/index.md b/files/en-us/web/api/htmlobjectelement/width/index.md
@@ -28,5 +28,8 @@ A string.
 ## See also
 
 - {{domxref("HTMLCanvasElement.width")}}
+- {{domxref("HTMLEmbedElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
 - {{domxref("HTMLImageElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}
 - {{domxref("HTMLVideoElement.width")}}
diff --git a/files/en-us/web/api/htmlsourceelement/height/index.md b/files/en-us/web/api/htmlsourceelement/height/index.md
@@ -0,0 +1,69 @@
+---
+title: "HTMLSourceElement: height property"
+short-title: height
+slug: Web/API/HTMLSourceElement/height
+page-type: web-api-instance-property
+browser-compat: api.HTMLSourceElement.height
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`height`** property of the {{domxref("HTMLSourceElement")}} interface is a non-negative number indicating the height of the image resource in CSS pixels.
+
+The property has an effect only if the parent of the current {{HTMLElement("source")}} element is a {{HTMLElement("picture")}} element.
+
+It reflects the `height` attribute of the {{HTMLElement("source")}} element.
+
+## Value
+
+A non-negative number indicating the height of the image resource in CSS pixels.
+
+## Examples
+
+```html
+<picture id="img">
+  <source
+    srcset="landscape.png"
+    media="(min-width: 1000px)"
+    width="1000"
+    height="400" />
+  <source
+    srcset="square.png"
+    media="(min-width: 800px)"
+    width="800"
+    height="800" />
+  <source
+    srcset="portrait.png"
+    media="(min-width: 600px)"
+    width="600"
+    height="800" />
+  <img
+    src="fallback.png"
+    alt="Image used when the browser does not support the sources"
+    width="500"
+    height="400" />
+</picture>
+```
+
+```js
+const img = document.getElementById("img");
+const sources = img.querySelectorAll("source");
+console.log(Array.from(sources).map((el) => el.height)); // Output: [400, 800, 800]
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLEmbedElement.height")}}
+- {{domxref("HTMLIFrameElement.height")}}
+- {{domxref("HTMLImageElement.height")}}
+- {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLVideoElement.height")}}
diff --git a/files/en-us/web/api/htmlsourceelement/index.md b/files/en-us/web/api/htmlsourceelement/index.md
@@ -15,6 +15,8 @@ The **`HTMLSourceElement`** interface provides special properties (beyond the re
 
 _Inherits properties from its parent, {{domxref("HTMLElement")}}._
 
+- {{domxref("HTMLSourceElement.height")}}
+  - : A number that reflects the [`height`](/en-US/docs/Web/HTML/Element/source#height) HTML attribute, indicating the height of the image resource in CSS pixels. The property has a meaning only if the parent of the current {{HTMLElement("source")}} element is a {{HTMLElement("picture")}} element.
 - {{domxref("HTMLSourceElement.media")}}
   - : A string reflecting the [`media`](/en-US/docs/Web/HTML/Element/source#media) HTML attribute, containing the intended type of the media resource.
 - {{domxref("HTMLSourceElement.sizes")}}
@@ -29,6 +31,8 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
   - : A string reflecting the [`srcset`](/en-US/docs/Web/HTML/Element/source#srcset) HTML attribute, containing a list of candidate images, separated by a comma (`',', U+002C COMMA`). A candidate image is a URL followed by a `'w'` with the width of the images, or an `'x'` followed by the pixel density.
 - {{domxref("HTMLSourceElement.type")}}
   - : A string reflecting the [`type`](/en-US/docs/Web/HTML/Element/source#type) HTML attribute, containing the type of the media resource.
+- {{domxref("HTMLSourceElement.width")}}
+  - : A number that reflects the [`width`](/en-US/docs/Web/HTML/Element/source#width) HTML attribute, indicating the width of the image resource in CSS pixels. The property has a meaning only if the parent of the current {{HTMLElement("source")}} element is a {{HTMLElement("picture")}} element.
 
 ## Instance methods
 

diff --git a/files/en-us/web/api/htmlsourceelement/width/index.md b/files/en-us/web/api/htmlsourceelement/width/index.md
@@ -0,0 +1,69 @@
+---
+title: "HTMLSourceElement: width property"
+short-title: width
+slug: Web/API/HTMLSourceElement/width
+page-type: web-api-instance-property
+browser-compat: api.HTMLSourceElement.width
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`width`** property of the {{domxref("HTMLSourceElement")}} interface is a non-negative number indicating the width of the image resource in CSS pixels.
+
+The property has an effect only if the parent of the current {{HTMLElement("source")}} element is a {{HTMLElement("picture")}} element.
+
+It reflects the `width` attribute of the {{HTMLElement("source")}} element.
+
+## Value
+
+A non-negative number indicating the width of the image resource in CSS pixels.
+
+## Examples
+
+```html
+<picture id="img">
+  <source
+    srcset="landscape.png"
+    media="(min-width: 1000px)"
+    width="1000"
+    height="400" />
+  <source
+    srcset="square.png"
+    media="(min-width: 800px)"
+    width="800"
+    height="800" />
+  <source
+    srcset="portrait.png"
+    media="(min-width: 600px)"
+    width="600"
+    height="800" />
+  <img
+    src="fallback.png"
+    alt="Image used when the browser does not support the sources"
+    width="500"
+    height="400" />
+</picture>
+```
+
+```js
+const img = document.getElementById("img");
+const sources = img.querySelectorAll("source");
+console.log(Array.from(sources).map((el) => el.width)); // Output: [1000, 800, 600]
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLCanvasElement.width")}}
+- {{domxref("HTMLEmbedElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
+- {{domxref("HTMLImageElement.width")}}
+- {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLVideoElement.width")}}
diff --git a/files/en-us/web/api/htmlvideoelement/height/index.md b/files/en-us/web/api/htmlvideoelement/height/index.md
@@ -36,5 +36,8 @@ console.log(el.height); // Output: 600
 ## See also
 
 - {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLEmbedElement.height")}}
+- {{domxref("HTMLIFrameElement.height")}}
 - {{domxref("HTMLImageElement.height")}}
 - {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
diff --git a/files/en-us/web/api/htmlvideoelement/width/index.md b/files/en-us/web/api/htmlvideoelement/width/index.md
@@ -36,5 +36,8 @@ console.log(el.width); // Output: 800
 ## See also
 
 - {{domxref("HTMLCanvasElement.width")}}
+- {{domxref("HTMLEmbedElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
 - {{domxref("HTMLImageElement.width")}}
 - {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}