From 875b84034211b6e83150ba33efac9b0665074f17 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Tue, 7 Jan 2025 17:30:52 +0800 Subject: [PATCH 01/59] Add docs for `{NavigateEvent,PopStateEvent}.hasUAVisualTransition` (#36705) * Add docs for `{NavigateEvent,PopStateEvent}.hasUAVisualTransition` * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: Brian Smith * Apply suggestions from code review Co-authored-by: Brian Smith * Apply suggestions from code review --------- Co-authored-by: Brian Smith --- .../hasuavisualtransition/index.md | 73 +++++++++++++++++++ files/en-us/web/api/navigateevent/index.md | 2 + .../hasuavisualtransition/index.md | 56 ++++++++++++++ files/en-us/web/api/popstateevent/index.md | 4 +- 4 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/navigateevent/hasuavisualtransition/index.md create mode 100644 files/en-us/web/api/popstateevent/hasuavisualtransition/index.md diff --git a/files/en-us/web/api/navigateevent/hasuavisualtransition/index.md b/files/en-us/web/api/navigateevent/hasuavisualtransition/index.md new file mode 100644 index 000000000000000..5075eb4d407b317 --- /dev/null +++ b/files/en-us/web/api/navigateevent/hasuavisualtransition/index.md @@ -0,0 +1,73 @@ +--- +title: "NavigateEvent: hasUAVisualTransition property" +short-title: hasUAVisualTransition +slug: Web/API/NavigateEvent/hasUAVisualTransition +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.NavigateEvent.hasUAVisualTransition +--- + +{{APIRef("Navigation API")}}{{SeeCompatTable}} + +The **`hasUAVisualTransition`** read-only property of the {{domxref("NavigateEvent")}} interface returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. + +User agents may provide a built-in visual transition when executing site navigations. If the site author also adds a visual transition, user agent and author transitions may conflict and confuse a visitor. The property lets you detect whether a UA transition was provided so that you can skip author transitions for a better user experience. + +## Value + +A boolean value. + +## Examples + +```js +navigation.addEventListener("navigate", (event) => { + // Some navigations, e.g. cross-origin navigations, we + // cannot intercept. Let the browser handle those normally. + if (!event.canIntercept) { + return; + } + + // Don't intercept fragment navigations or downloads. + if (event.hashChange || event.downloadRequest !== null) { + return; + } + + event.intercept({ + handler() { + // Fetch the new content + const newContent = await fetchNewContent(event.destination.url, { + signal: event.signal, + }); + + // The UA does not support View Transitions, or the UA + // already provided a Visual Transition by itself (e.g. swipe back). + // In either case, update the DOM directly + if (!document.startViewTransition || event.hasUAVisualTransition) { + doSinglePageAppNav(newContent); + return; + } + + // Update the content using a View Transition + document.startViewTransition(() => { + doSinglePageAppNav(newContent); + }); + }, + }); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Modern client-side routing: the Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api/) +- [Navigation API explainer](https://github.com/WICG/navigation-api/blob/main/README.md) +- Domenic Denicola's [Navigation API live demo](https://gigantic-honored-octagon.glitch.me/) +- [Same-document view transitions for single-page applications](https://developer.chrome.com/docs/web-platform/view-transitions/same-document) diff --git a/files/en-us/web/api/navigateevent/index.md b/files/en-us/web/api/navigateevent/index.md index e998f948c1acdfb..8fcc74e6de0a35d 100644 --- a/files/en-us/web/api/navigateevent/index.md +++ b/files/en-us/web/api/navigateevent/index.md @@ -32,6 +32,8 @@ _Inherits properties from its parent, {{DOMxRef("Event")}}._ - : Returns the {{domxref("FormData")}} object representing the submitted data in the case of a `POST` form submission, or `null` otherwise. - {{domxref("NavigateEvent.hashChange", "hashChange")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns `true` if the navigation is a fragment navigation (i.e. to a fragment identifier in the same document), or `false` otherwise. +- {{domxref("NavigateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. - {{domxref("NavigateEvent.info", "info")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns the `info` data value passed by the initiating navigation operation (e.g. {{domxref("Navigation.back()")}}, or {{domxref("Navigation.navigate()")}}), or `undefined` if no `info` data was passed. - {{domxref("NavigateEvent.navigationType", "navigationType")}} {{ReadOnlyInline}} {{Experimental_Inline}} diff --git a/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md b/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md new file mode 100644 index 000000000000000..4564ba1d9a923d1 --- /dev/null +++ b/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md @@ -0,0 +1,56 @@ +--- +title: "PopStateEvent: hasUAVisualTransition property" +short-title: hasUAVisualTransition +slug: Web/API/PopStateEvent/hasUAVisualTransition +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.PopStateEvent.hasUAVisualTransition +--- + +{{APIRef("History API")}}{{SeeCompatTable}} + +The **`hasUAVisualTransition`** read-only property of the {{domxref("PopStateEvent")}} interface returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. + +User agents may provide a built-in visual transition when executing site navigations. If the site author also adds a visual transition, user agent and author transitions may conflict and confuse a visitor. The property lets you detect whether a UA transition was provided so that you can skip author transitions for a better user experience. + +## Value + +A boolean value. + +## Examples + +```js +window.addEventListener("popstate", (event) => { + // Fetch the new content + const newContent = await fetchNewContent(location.href); + + // The UA does not support View Transitions, or the UA + // already provided a Visual Transition by itself (e.g. swipe back). + // In either case, update the DOM directly + if (!document.startViewTransition || event.hasUAVisualTransition) { + doSinglePageAppNav(newContent); + return; + } + + // Update the content using a View Transition + document.startViewTransition(() => { + doSinglePageAppNav(newContent); + }); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Modern client-side routing: the Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api/) +- [Navigation API explainer](https://github.com/WICG/navigation-api/blob/main/README.md) +- Domenic Denicola's [Navigation API live demo](https://gigantic-honored-octagon.glitch.me/) +- [Same-document view transitions for single-page applications](https://developer.chrome.com/docs/web-platform/view-transitions/same-document) diff --git a/files/en-us/web/api/popstateevent/index.md b/files/en-us/web/api/popstateevent/index.md index 9d47264e874c336..a95670134891108 100644 --- a/files/en-us/web/api/popstateevent/index.md +++ b/files/en-us/web/api/popstateevent/index.md @@ -7,7 +7,7 @@ browser-compat: api.PopStateEvent {{APIRef("History API")}} -**`PopStateEvent`** is an interface for the [`popstate`](/en-US/docs/Web/API/Window/popstate_event) event. +**`PopStateEvent`** is an interface for the {{domxref("Window/popstate_event", "popstate")}} event. A `popstate` event is dispatched to the window every time the active history entry changes between two history entries for the same document. If the history entry @@ -28,6 +28,8 @@ _This interface also inherits the properties of its parent, {{domxref("Event")}} - {{domxref("PopStateEvent.state")}} {{ReadOnlyInline}} - : Returns a copy of the information that was provided to `pushState()` or `replaceState()`. +- {{domxref("PopStateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. ## Instance methods From 3ae7f380c04096191376ffc2b455471e5d5fd8a8 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 7 Jan 2025 01:38:48 -0800 Subject: [PATCH 02/59] New pages: SVGRect API (#37236) --- files/en-us/web/api/svgrect/height/index.md | 86 +++++++++++++++++++++ files/en-us/web/api/svgrect/index.md | 10 ++- files/en-us/web/api/svgrect/width/index.md | 86 +++++++++++++++++++++ files/en-us/web/api/svgrect/y/index.md | 86 +++++++++++++++++++++ 4 files changed, 266 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/api/svgrect/height/index.md create mode 100644 files/en-us/web/api/svgrect/width/index.md create mode 100644 files/en-us/web/api/svgrect/y/index.md diff --git a/files/en-us/web/api/svgrect/height/index.md b/files/en-us/web/api/svgrect/height/index.md new file mode 100644 index 000000000000000..1594ae2991672d8 --- /dev/null +++ b/files/en-us/web/api/svgrect/height/index.md @@ -0,0 +1,86 @@ +--- +title: "SVGRect: height property" +short-title: height +slug: Web/API/SVGRect/height +page-type: web-api-instance-property +browser-compat: api.SVGRect.height +--- + +{{APIRef("SVG")}} + +The **`height`** property of the {{domxref("SVGRect")}} interface is an alias for the {{DOMXref("DOMRect.height")}} property. It describes the vertical size of the element. It reflects the SVG element's {{SVGattr("height")}} attribute and the CSS {{cssxref("height")}} property. + +The height is a length; it is the distance from the top of element to the bottom of the element in the the user coordinate system. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +## Usage context + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nameheight
Value + + <length> | <percentage> + +
Initial0
Applies to + {{ SVGElement("mask") }}, + {{ SVGElement("svg") }}, + {{ SVGElement("rect") }}, + {{ SVGElement("image") }}, + {{ SVGElement("foreignObject") }} +
Inheritedno
Percentages + refer to the size of the SVG viewport +
Mediavisual
Computed valueabsolute length or percentage
Animatableyes
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.height")}} +- {{domxref("SVGRect.width")}} diff --git a/files/en-us/web/api/svgrect/index.md b/files/en-us/web/api/svgrect/index.md index 7cc775d14be3468..bcb5049c6651fda 100644 --- a/files/en-us/web/api/svgrect/index.md +++ b/files/en-us/web/api/svgrect/index.md @@ -7,9 +7,9 @@ browser-compat: api.SVGRect {{APIRef("SVG")}} -The **`SVGRect`** represents a rectangle. Rectangles consist of an `x` and `y` coordinate pair identifying a minimum `x` value, a minimum `y` value, and a `width` and `height`, which are constrained to be non-negative. +The **`SVGRect`**, an alias for {{DOMXref("DOMRect")}}, represents a rectangle. Rectangles consist of an `x` and `y` coordinate pair identifying a minimum `x` value, a minimum `y` value, and a `width` and `height`, which are constrained to be non-negative. -An **`SVGRect`** object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. +An `SVGRect` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ## Instance properties @@ -33,3 +33,9 @@ None. ## Browser compatibility {{Compat}} + +## See also + +- {{DOMXref("DOMRect")}} +- {{DOMXref("DOMPoint")}} alias {{DOMXref("SVGPoint")}} +- {{DOMXref("DOMMatrix")}} alias {{DOMXref("SVGMatrix")}} diff --git a/files/en-us/web/api/svgrect/width/index.md b/files/en-us/web/api/svgrect/width/index.md new file mode 100644 index 000000000000000..273dc53f8e395b1 --- /dev/null +++ b/files/en-us/web/api/svgrect/width/index.md @@ -0,0 +1,86 @@ +--- +title: "SVGRect: width property" +short-title: width +slug: Web/API/SVGRect/width +page-type: web-api-instance-property +browser-compat: api.SVGRect.width +--- + +{{APIRef("SVG")}} + +The **`width`** property of the {{domxref("SVGRect")}} interface is an alias for the {{DOMXref("DOMRect.width")}} property. It describes the horizontal size of the element. It reflects the SVG element's {{SVGattr("width")}} attribute and the CSS {{cssxref("width")}} property. + +The width is a length; it is the distance from the left of element to the right of the element in the the user coordinate system. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +## Usage context + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Namewidth
Value + + <length> | <percentage> + +
Initial0
Applies to + {{ SVGElement("mask") }}, + {{ SVGElement("svg") }}, + {{ SVGElement("rect") }}, + {{ SVGElement("image") }}, + {{ SVGElement("foreignObject") }} +
Inheritedno
Percentages + refer to the size of the SVG viewport +
Mediavisual
Computed valueabsolute length or percentage
Animatableyes
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.width")}} +- {{domxref("SVGRect.height")}} diff --git a/files/en-us/web/api/svgrect/y/index.md b/files/en-us/web/api/svgrect/y/index.md new file mode 100644 index 000000000000000..332cb757e5a89d9 --- /dev/null +++ b/files/en-us/web/api/svgrect/y/index.md @@ -0,0 +1,86 @@ +--- +title: "SVGRect: y property" +short-title: "y" +slug: Web/API/SVGRect/y +page-type: web-api-instance-property +browser-compat: api.SVGRect.y +--- + +{{APIRef("SVG")}} + +The **`y`** property of the {{domxref("SVGRect")}} interface is an alias for the {{DOMXref("DOMRect.y")}} property. It describes the vertical coordinate of the position of the element. It reflects the SVG element's {{SVGattr("y")}} attribute and the CSS {{cssxref("y")}} property. + +A `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the y-axis for Y coordinates, the x-axis for X coordinates). Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +## Usage context + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Namey
Value + + <length> | <percentage> + +
Initial0
Applies to + {{ SVGElement("mask") }}, + {{ SVGElement("svg") }}, + {{ SVGElement("rect") }}, + {{ SVGElement("image") }}, + {{ SVGElement("foreignObject") }} +
Inheritedno
Percentages + refer to the size of the SVG viewport +
Mediavisual
Computed valueabsolute length or percentage
Animatableyes
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{DOMXref("DOMRect.y")}} +- {{domxref("SVGRect.x")}} From 7c67beb9a8a6fe5c80fb06bdc39737c4d713487e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 7 Jan 2025 01:39:51 -0800 Subject: [PATCH 03/59] New pages: SVGLineElement geometric properties. (#37267) --- .../en-us/web/api/svglineelement/x1/index.md | 51 +++++++++++++++++++ .../en-us/web/api/svglineelement/x2/index.md | 51 +++++++++++++++++++ .../en-us/web/api/svglineelement/y1/index.md | 51 +++++++++++++++++++ .../en-us/web/api/svglineelement/y2/index.md | 51 +++++++++++++++++++ 4 files changed, 204 insertions(+) create mode 100644 files/en-us/web/api/svglineelement/x1/index.md create mode 100644 files/en-us/web/api/svglineelement/x2/index.md create mode 100644 files/en-us/web/api/svglineelement/y1/index.md create mode 100644 files/en-us/web/api/svglineelement/y2/index.md diff --git a/files/en-us/web/api/svglineelement/x1/index.md b/files/en-us/web/api/svglineelement/x1/index.md new file mode 100644 index 000000000000000..7c949f84723f2ad --- /dev/null +++ b/files/en-us/web/api/svglineelement/x1/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: x1 property" +short-title: x1 +slug: Web/API/SVGLineElement/x1 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.x1 +--- + +{{APIRef("SVG")}} + +The **`x1`** read-only property of the {{domxref("SVGLineElement")}} interface describes the start of the SVG line along the x-axis as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("x1")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that start position as a length along the x-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `x1` attributes: + +```js +const lines = document.querySelectorAll("line"); +const x1Pos0 = lines[0].x1; +const x1Pos1 = lines[1].x1; +console.dir(x1Pos0.baseVal.value); // output: 20 (the value of `x1`) +console.dir(x1Pos1.baseVal.value); // output: 45 (15% of 300) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.x2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineelement/x2/index.md b/files/en-us/web/api/svglineelement/x2/index.md new file mode 100644 index 000000000000000..c9c9d8214501baa --- /dev/null +++ b/files/en-us/web/api/svglineelement/x2/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: x2 property" +short-title: x2 +slug: Web/API/SVGLineElement/x2 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.x2 +--- + +{{APIRef("SVG")}} + +The **`x2`** read-only property of the {{domxref("SVGLineElement")}} interface describes the x-axis coordinate value of the end of a line as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("x2")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that end position along the x-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `x2` attributes: + +```js +const lines = document.querySelectorAll("line"); +const x2Pos0 = lines[0].x2; +const x2Pos1 = lines[1].x2; +console.dir(x2Pos0.baseVal.value); // output: 40 (the value of `x2`) +console.dir(x2Pos1.baseVal.value); // output: 90 (30% of 300) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.y2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineelement/y1/index.md b/files/en-us/web/api/svglineelement/y1/index.md new file mode 100644 index 000000000000000..7919bfd75f795e4 --- /dev/null +++ b/files/en-us/web/api/svglineelement/y1/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: y1 property" +short-title: y1 +slug: Web/API/SVGLineElement/y1 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.y1 +--- + +{{APIRef("SVG")}} + +The **`y1`** read-only property of the {{domxref("SVGLineElement")}} interface describes the start of the SVG line along the y-axis as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("y1")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that start position as a length along the y-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `y1` attributes: + +```js +const lines = document.querySelectorAll("line"); +const y1Pos0 = lines[0].y1; +const y1Pos1 = lines[1].y1; +console.dir(y1Pos0.baseVal.value); // output: 30 (the value of `y1`) +console.dir(y1Pos1.baseVal.value); // output: 10 (5% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.y2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svglineelement/y2/index.md b/files/en-us/web/api/svglineelement/y2/index.md new file mode 100644 index 000000000000000..e20cc64e71435a4 --- /dev/null +++ b/files/en-us/web/api/svglineelement/y2/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGLineElement: y2 property" +short-title: y2 +slug: Web/API/SVGLineElement/y2 +page-type: web-api-instance-property +browser-compat: api.SVGLineElement.y2 +--- + +{{APIRef("SVG")}} + +The **`y2`** read-only property of the {{domxref("SVGLineElement")}} interface describes the v-axis coordinate value of the end of a line as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("line")}} element's {{SVGAttr("y2")}} geometric attribute. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is that end position along the y-axis in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `y2` attributes: + +```js +const lines = document.querySelectorAll("line"); +const y2Pos0 = lines[0].y2; +const y2Pos1 = lines[1].y2; +console.dir(y2Pos0.baseVal.value); // output: 50 (the value of `y2`) +console.dir(y2Pos1.baseVal.value); // output: 120 (60% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGLineElement.x2")}} +- {{domxref("SVGAnimatedLength.baseVal")}} From e9ef767e76e5e04884293f12e393deb9455c87af Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 7 Jan 2025 15:11:09 +0530 Subject: [PATCH 04/59] New Pages: SVGFEDiffuseLightingElement (#37425) --- .../diffuseconstant/index.md | 59 ++++++++++++++++++ .../svgfediffuselightingelement/in1/index.md | 62 +++++++++++++++++++ .../kernelunitlengthx/index.md | 27 ++++++++ .../kernelunitlengthy/index.md | 27 ++++++++ .../surfacescale/index.md | 59 ++++++++++++++++++ 5 files changed, 234 insertions(+) create mode 100644 files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/in1/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md diff --git a/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md b/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md new file mode 100644 index 000000000000000..f23a1311b9f2498 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEDiffuseLightingElement: diffuseConstant property" +short-title: diffuseConstant +slug: Web/API/SVGFEDiffuseLightingElement/diffuseConstant +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.diffuseConstant +--- + +{{APIRef("SVG")}} + +The **`diffuseConstant`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("diffuseConstant")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Access the `diffuseConstant` property + +```html + + + + + + + + + + +``` + +```js +const diffuseLighting = document.querySelector("feDiffuseLighting"); + +console.log(diffuseLighting.diffuseConstant.baseVal); // Output: 1.5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/in1/index.md b/files/en-us/web/api/svgfediffuselightingelement/in1/index.md new file mode 100644 index 000000000000000..5b5eb51ea5e2ce8 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/in1/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFEDiffuseLightingElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEDiffuseLightingElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feDiffuseLighting` Element + +```html + + + + + + + + + + +``` + +We can access the `in` attribute of the `feDiffuseLighting` element. + +```js +const diffuseLighting = document.querySelector("feDiffuseLighting"); + +console.log(diffuseLighting.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md new file mode 100644 index 000000000000000..81411a969f9fc28 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md @@ -0,0 +1,27 @@ +--- +title: "SVGFEDiffuseLightingElement: kernelUnitLengthX property" +short-title: kernelUnitLengthX +slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthX +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthX +--- + +{{APIRef("SVG")}} + +The **`kernelUnitLengthX`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the X component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md new file mode 100644 index 000000000000000..ed79711edab25d2 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md @@ -0,0 +1,27 @@ +--- +title: "SVGFEDiffuseLightingElement: kernelUnitLengthY property" +short-title: kernelUnitLengthY +slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthY +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthY +--- + +{{APIRef("SVG")}} + +The **`kernelUnitLengthY`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the Y component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md b/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md new file mode 100644 index 000000000000000..3e3fc9d441f4622 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEDiffuseLightingElement: surfaceScale property" +short-title: surfaceScale +slug: Web/API/SVGFEDiffuseLightingElement/surfaceScale +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.surfaceScale +--- + +{{APIRef("SVG")}} + +The **`surfaceScale`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("surfaceScale")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Access the `surfaceScale` property + +```html + + + + + + + + + + +``` + +```js +const diffuseLighting = document.querySelector("feDiffuseLighting"); + +console.log(diffuseLighting.surfaceScale.baseVal); // Output: 2 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} From 55a2df9a3692842dc7cb9fd5440e41431678b537 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 7 Jan 2025 15:15:03 +0530 Subject: [PATCH 05/59] New Pages SVGFEMorphologyElement and SVGFEMergeNodeElement props (#37435) --- .../api/svgfemergenodeelement/in1/index.md | 60 +++++++++++++++++++ .../api/svgfemorphologyelement/in1/index.md | 57 ++++++++++++++++++ .../svgfemorphologyelement/operator/index.md | 59 ++++++++++++++++++ .../svgfemorphologyelement/radiusx/index.md | 59 ++++++++++++++++++ .../svgfemorphologyelement/radiusy/index.md | 59 ++++++++++++++++++ 5 files changed, 294 insertions(+) create mode 100644 files/en-us/web/api/svgfemergenodeelement/in1/index.md create mode 100644 files/en-us/web/api/svgfemorphologyelement/in1/index.md create mode 100644 files/en-us/web/api/svgfemorphologyelement/operator/index.md create mode 100644 files/en-us/web/api/svgfemorphologyelement/radiusx/index.md create mode 100644 files/en-us/web/api/svgfemorphologyelement/radiusy/index.md diff --git a/files/en-us/web/api/svgfemergenodeelement/in1/index.md b/files/en-us/web/api/svgfemergenodeelement/in1/index.md new file mode 100644 index 000000000000000..9c2e43189eec4bd --- /dev/null +++ b/files/en-us/web/api/svgfemergenodeelement/in1/index.md @@ -0,0 +1,60 @@ +--- +title: "SVGFEMergeNodeElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEMergeNodeElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeNodeElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEMergeNodeElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMergeNode")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feMergeNode` Element + +```html + + + + + + + + + + + + +``` + +We can access the `in` attribute of the `feMergeNode` element. + +```js +// Select the first feMergeNode element +const mergeNode = document.querySelector("feMergeNode"); +console.log(mergeNode.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/in1/index.md b/files/en-us/web/api/svgfemorphologyelement/in1/index.md new file mode 100644 index 000000000000000..5a3bfc3eccac373 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/in1/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEMorphologyElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEMorphologyElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feMorphology` Element + +```html + + + + + + + + + +``` + +We can access the `in` attribute of the `feMorphology` element. + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); +console.log(morphologyNode.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/operator/index.md b/files/en-us/web/api/svgfemorphologyelement/operator/index.md new file mode 100644 index 000000000000000..538fc75dc8a3502 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/operator/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: operator property" +short-title: operator +slug: Web/API/SVGFEMorphologyElement/operator +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.operator +--- + +{{APIRef("SVG")}} + +The **`operator`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("operator")}} attribute of the given {{SVGElement("feMorphology")}} element. It takes one of the `SVG_MORPHOLOGY_OPERATOR_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `operator` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the 'operator' property +const operatorEnum = morphologyNode.operator.baseVal; + +console.log(operatorEnum); // Output: 2 (SVG_MORPHOLOGY_OPERATOR_DILATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md new file mode 100644 index 000000000000000..fa557ea0ba7d3d6 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: radiusX property" +short-title: radiusX +slug: Web/API/SVGFEMorphologyElement/radiusX +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.radiusX +--- + +{{APIRef("SVG")}} + +The **`radiusX`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the X component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `radiusX` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the radiusX property +const radiusX = morphologyNode.radiusX.baseVal; + +console.log(`The X radius is: ${radiusX}`); // Output: 5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md new file mode 100644 index 000000000000000..e01ba6bddde2bda --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: radiusY property" +short-title: radiusY +slug: Web/API/SVGFEMorphologyElement/radiusY +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.radiusY +--- + +{{APIRef("SVG")}} + +The **`radiusY`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the Y component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `radiusY` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the radiusY property +const radiusY = morphologyNode.radiusY.baseVal; + +console.log(`The Y radius is: ${radiusY}`); // Output: 3 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} From 3dd7df0af3b0ada1a7c5784cc2bc5448adcda8af Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 7 Jan 2025 04:29:02 -0800 Subject: [PATCH 06/59] "read-only" comes AFTER prop name (#37531) --- files/en-us/web/api/htmllinkelement/sizes/index.md | 2 +- files/en-us/web/api/htmltrackelement/readystate/index.md | 2 +- files/en-us/web/api/htmltrackelement/track/index.md | 2 +- .../web/api/performancelongtasktiming/attribution/index.md | 2 +- files/en-us/web/api/presentationconnection/url/index.md | 2 +- files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md | 2 +- files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md | 2 +- files/en-us/web/api/rtcencodedvideoframe/type/index.md | 2 +- files/en-us/web/api/taskattributiontiming/containerid/index.md | 2 +- .../en-us/web/api/taskattributiontiming/containername/index.md | 2 +- files/en-us/web/api/taskattributiontiming/containersrc/index.md | 2 +- .../en-us/web/api/taskattributiontiming/containertype/index.md | 2 +- .../web/api/taskprioritychangeevent/previouspriority/index.md | 2 +- .../webassembly/javascript_interface/instance/exports/index.md | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/files/en-us/web/api/htmllinkelement/sizes/index.md b/files/en-us/web/api/htmllinkelement/sizes/index.md index b4c03b185378b52..a93bde390781060 100644 --- a/files/en-us/web/api/htmllinkelement/sizes/index.md +++ b/files/en-us/web/api/htmllinkelement/sizes/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLLinkElement.sizes {{APIRef("HTML DOM")}} -The readonly **`sizes`** property of the {{domxref("HTMLLinkElement")}} interfaces defines the sizes of the icons for visual media contained in the resource. It reflects the {{HTMLElement("link")}} element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute, which takes a list of space-separated sizes, each in the format `x`, or the keyword `any`. +The **`sizes`** read-only property of the {{domxref("HTMLLinkElement")}} interfaces defines the sizes of the icons for visual media contained in the resource. It reflects the {{HTMLElement("link")}} element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute, which takes a list of space-separated sizes, each in the format `x`, or the keyword `any`. It is only relevant if the {{domxref("HTMLLinkElement.rel", "rel")}} is `icon` or a non-standard type like `apple-touch-icon`. diff --git a/files/en-us/web/api/htmltrackelement/readystate/index.md b/files/en-us/web/api/htmltrackelement/readystate/index.md index 210b3f0d6f308d2..69cceb9e5e9592f 100644 --- a/files/en-us/web/api/htmltrackelement/readystate/index.md +++ b/files/en-us/web/api/htmltrackelement/readystate/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLTrackElement.readyState {{APIRef("HTML DOM")}} -The readonly **`readyState`** property of the {{domxref("HTMLTrackElement")}} interface returns a number representing the {{HTMLElement("track")}} element's text track readiness state: +The **`readyState`** read-only property of the {{domxref("HTMLTrackElement")}} interface returns a number representing the {{HTMLElement("track")}} element's text track readiness state: 0. NONE: The text track not loaded state. 1. LOADING: The text track loading state. diff --git a/files/en-us/web/api/htmltrackelement/track/index.md b/files/en-us/web/api/htmltrackelement/track/index.md index 8bdd4099719226e..8c0187d7896863c 100644 --- a/files/en-us/web/api/htmltrackelement/track/index.md +++ b/files/en-us/web/api/htmltrackelement/track/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLTrackElement.track {{APIRef("HTML DOM")}} -The readonly **`track`** property of the {{domxref("HTMLTrackElement")}} interface returns a {{DOMxRef("TextTrack")}} object corresponding to the text track of the {{HTMLElement("track")}} element. +The **`track`** read-only property of the {{domxref("HTMLTrackElement")}} interface returns a {{DOMxRef("TextTrack")}} object corresponding to the text track of the {{HTMLElement("track")}} element. ## Value diff --git a/files/en-us/web/api/performancelongtasktiming/attribution/index.md b/files/en-us/web/api/performancelongtasktiming/attribution/index.md index 403de22648833cc..f8255fdbc3faa2b 100644 --- a/files/en-us/web/api/performancelongtasktiming/attribution/index.md +++ b/files/en-us/web/api/performancelongtasktiming/attribution/index.md @@ -10,7 +10,7 @@ browser-compat: api.PerformanceLongTaskTiming.attribution {{SeeCompatTable}}{{APIRef("Performance API")}} -The **`attribution`** readonly property of the {{domxref("PerformanceLongTaskTiming")}} interface returns an array of {{domxref('TaskAttributionTiming')}} objects. +The **`attribution`** read-only property of the {{domxref("PerformanceLongTaskTiming")}} interface returns an array of {{domxref('TaskAttributionTiming')}} objects. ## Value diff --git a/files/en-us/web/api/presentationconnection/url/index.md b/files/en-us/web/api/presentationconnection/url/index.md index 09ba850ca9cc752..531af341ae84881 100644 --- a/files/en-us/web/api/presentationconnection/url/index.md +++ b/files/en-us/web/api/presentationconnection/url/index.md @@ -10,7 +10,7 @@ browser-compat: api.PresentationConnection.url {{SeeCompatTable}}{{APIRef("Presentation API")}}{{SecureContext_Header}} -The **`url`** readonly property of the +The **`url`** read-only property of the {{domxref("PresentationConnection")}} interface returns the URL used to create or reconnect to the presentation. diff --git a/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md b/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md index d8bad113ec332e1..e93ba447199bc4e 100644 --- a/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md +++ b/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md @@ -11,7 +11,7 @@ browser-compat: api.RTCEncodedAudioFrame.timestamp {{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}}{{deprecated_header}}{{non-standard_header}} -The readonly **`timestamp`** property of the {{domxref("RTCEncodedAudioFrame")}} interface indicates the time at which frame sampling started. +The **`timestamp`** read-only property of the {{domxref("RTCEncodedAudioFrame")}} interface indicates the time at which frame sampling started. ## Value diff --git a/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md b/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md index 633857ec07cd58a..51576d8e98d79e0 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md @@ -11,7 +11,7 @@ browser-compat: api.RTCEncodedVideoFrame.timestamp {{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}}{{deprecated_header}}{{non-standard_header}} -The readonly **`timestamp`** property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates the time at which frame sampling started. +The **`timestamp`** read-only property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates the time at which frame sampling started. ## Value diff --git a/files/en-us/web/api/rtcencodedvideoframe/type/index.md b/files/en-us/web/api/rtcencodedvideoframe/type/index.md index 2e50efd4be9b1a4..680916e2321b0de 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/type/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/type/index.md @@ -8,7 +8,7 @@ browser-compat: api.RTCEncodedVideoFrame.type {{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} -The readonly **`type`** property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates whether this frame is a key frame, delta frame, or empty frame. +The **`type`** read-only property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates whether this frame is a key frame, delta frame, or empty frame. ## Value diff --git a/files/en-us/web/api/taskattributiontiming/containerid/index.md b/files/en-us/web/api/taskattributiontiming/containerid/index.md index 9c72053a7cb5a7a..ef1d60611a85d15 100644 --- a/files/en-us/web/api/taskattributiontiming/containerid/index.md +++ b/files/en-us/web/api/taskattributiontiming/containerid/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerId {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerId`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `id` +The **`containerId`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `id` attribute. A container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. ## Value diff --git a/files/en-us/web/api/taskattributiontiming/containername/index.md b/files/en-us/web/api/taskattributiontiming/containername/index.md index 82589cbdccb4931..4ec21c1382ca030 100644 --- a/files/en-us/web/api/taskattributiontiming/containername/index.md +++ b/files/en-us/web/api/taskattributiontiming/containername/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerName {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerName`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `name` +The **`containerName`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `name` attribute. A container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. ## Value diff --git a/files/en-us/web/api/taskattributiontiming/containersrc/index.md b/files/en-us/web/api/taskattributiontiming/containersrc/index.md index a671cd6cfca7b07..d56f9acc4709b9e 100644 --- a/files/en-us/web/api/taskattributiontiming/containersrc/index.md +++ b/files/en-us/web/api/taskattributiontiming/containersrc/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerSrc {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerSrc`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `src` +The **`containerSrc`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the container's `src` attribute. A container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. ## Value diff --git a/files/en-us/web/api/taskattributiontiming/containertype/index.md b/files/en-us/web/api/taskattributiontiming/containertype/index.md index 5c7f2fe3df1b2f8..c2c48153dcc2eec 100644 --- a/files/en-us/web/api/taskattributiontiming/containertype/index.md +++ b/files/en-us/web/api/taskattributiontiming/containertype/index.md @@ -10,7 +10,7 @@ browser-compat: api.TaskAttributionTiming.containerType {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`containerType`** readonly property of the {{domxref("TaskAttributionTiming")}} interface returns the type of the container, one of `iframe`, `embed`, or `object`. +The **`containerType`** read-only property of the {{domxref("TaskAttributionTiming")}} interface returns the type of the container, one of `iframe`, `embed`, or `object`. ## Value diff --git a/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md b/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md index b2b0764ea987cc4..017caf83ae0a27e 100644 --- a/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md +++ b/files/en-us/web/api/taskprioritychangeevent/previouspriority/index.md @@ -8,7 +8,7 @@ browser-compat: api.TaskPriorityChangeEvent.previousPriority {{APIRef("Prioritized Task Scheduling API")}}{{AvailableInWorkers}} -The readonly **`previousPriority`** property of the {{domxref("TaskPriorityChangeEvent")}} interface returns the priority of the corresponding {{domxref("TaskSignal")}} before it was changed and this [`prioritychange`](/en-US/docs/Web/API/TaskSignal/prioritychange_event) event was emitted. +The **`previousPriority`** read-only property of the {{domxref("TaskPriorityChangeEvent")}} interface returns the priority of the corresponding {{domxref("TaskSignal")}} before it was changed and this [`prioritychange`](/en-US/docs/Web/API/TaskSignal/prioritychange_event) event was emitted. This is the value that was set in the [`TaskPriorityChangeEvent` constructor](/en-US/docs/Web/API/TaskPriorityChangeEvent/TaskPriorityChangeEvent) argument `options.previous`. diff --git a/files/en-us/webassembly/javascript_interface/instance/exports/index.md b/files/en-us/webassembly/javascript_interface/instance/exports/index.md index 9de738f3a71d8d5..5af1cd0853a9353 100644 --- a/files/en-us/webassembly/javascript_interface/instance/exports/index.md +++ b/files/en-us/webassembly/javascript_interface/instance/exports/index.md @@ -7,7 +7,7 @@ browser-compat: webassembly.api.Instance.exports {{WebAssemblySidebar}} -The **`exports`** readonly property of the +The **`exports`** read-only property of the [`WebAssembly.Instance`](/en-US/docs/WebAssembly/JavaScript_interface/Instance) object prototype returns an object containing as its members all the functions exported from the WebAssembly module instance, to allow them to be accessed and used by JavaScript. From 6f958c59155cfa5142076187384690a679f346ec Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 7 Jan 2025 05:25:42 -0800 Subject: [PATCH 07/59] New pages: SVGFEDiffuseLightingElement API (#37311) * New pages: SVGFEDiffuseLightingElement API * Apply suggestions from code review --------- Co-authored-by: sideshowbarker --- .../height/index.md | 41 +++++++++++++++++ .../result/index.md | 44 +++++++++++++++++++ .../width/index.md | 41 +++++++++++++++++ .../svgfediffuselightingelement/x/index.md | 41 +++++++++++++++++ .../svgfediffuselightingelement/y/index.md | 41 +++++++++++++++++ 5 files changed, 208 insertions(+) create mode 100644 files/en-us/web/api/svgfediffuselightingelement/height/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/result/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/width/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/x/index.md create mode 100644 files/en-us/web/api/svgfediffuselightingelement/y/index.md diff --git a/files/en-us/web/api/svgfediffuselightingelement/height/index.md b/files/en-us/web/api/svgfediffuselightingelement/height/index.md new file mode 100644 index 000000000000000..16d2cdcfe38261f --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/height/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: height property" +short-title: height +slug: Web/API/SVGFEDiffuseLightingElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("height")}} filter primitive attribute. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const verticalSize = feDiffuseLighting.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.width")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/result/index.md b/files/en-us/web/api/svgfediffuselightingelement/result/index.md new file mode 100644 index 000000000000000..971b4dfcde8009b --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/result/index.md @@ -0,0 +1,44 @@ +--- +title: "SVGFEDiffuseLightingElement: result property" +short-title: result +slug: Web/API/SVGFEDiffuseLightingElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("result")}} attribute. The filter lights an image using the alpha channel as a bump map. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feDiffuseLightingElement = document.querySelector("feDiffuseLighting"); +const filterName = feDiffuseLightingElement.result; +console.log(filterName.baseVa); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.in1")}} +- {{cssxref("custom-ident")}} data type +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/width/index.md b/files/en-us/web/api/svgfediffuselightingelement/width/index.md new file mode 100644 index 000000000000000..931670b8b6f512b --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/width/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: width property" +short-title: width +slug: Web/API/SVGFEDiffuseLightingElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("width")}} filter primitive attribute. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const horizontalSize = feDiffuseLighting.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.height")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/x/index.md b/files/en-us/web/api/svgfediffuselightingelement/x/index.md new file mode 100644 index 000000000000000..b7f6f4e9a3e9e11 --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/x/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: x property" +short-title: x +slug: Web/API/SVGFEDiffuseLightingElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("x")}} filter primitive attribute value. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const leftPosition = feDiffuseLighting.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.y")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfediffuselightingelement/y/index.md b/files/en-us/web/api/svgfediffuselightingelement/y/index.md new file mode 100644 index 000000000000000..6ad9d4ba321d15d --- /dev/null +++ b/files/en-us/web/api/svgfediffuselightingelement/y/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEDiffuseLightingElement: y property" +short-title: "y" +slug: Web/API/SVGFEDiffuseLightingElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEDiffuseLightingElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGElement("feDiffuseLighting")}} element's {{SVGAttr("y")}} filter primitive attribute value. The filter lights an image using the alpha channel as a bump map. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feDiffuseLighting = document.querySelector("feDiffuseLighting"); +const topPosition = feDiffuseLighting.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEDiffuseLightingElement.x")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{SVGElement("feSpecularLighting")}} +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property From 259682572756751b25fc64d9dfe4db4ec84902f5 Mon Sep 17 00:00:00 2001 From: Jacob Cassidy Date: Tue, 7 Jan 2025 22:48:12 +0700 Subject: [PATCH 08/59] Add box alignment module W3C spec (#37535) * Add W3C specifications to box alignment module page * Add trailing slash to `spec-urls` and a "See also" section --- files/en-us/web/css/css_box_alignment/index.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md index 6f1d8bfd03b1569..136ca1e1e6021c3 100644 --- a/files/en-us/web/css/css_box_alignment/index.md +++ b/files/en-us/web/css/css_box_alignment/index.md @@ -2,6 +2,7 @@ title: CSS box alignment slug: Web/CSS/CSS_box_alignment page-type: css-module +spec-urls: https://drafts.csswg.org/css-align/ --- {{CSSRef}} @@ -320,3 +321,13 @@ As the CSS box alignment properties are implemented differently depending on the - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) + +## Specifications + +{{Specifications}} + +## See also + +- [CSS display](/en-US/docs/Web/CSS/CSS_display) module +- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module From af7cc95636e48d9df488c342d49aaecb78c35ac6 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 7 Jan 2025 08:30:41 -0800 Subject: [PATCH 09/59] SVGAngle constant equivalents (#37114) * SVGAngle constant equivalents API.value returns a number, not the const name, so we need to have it in our docs so we can link to it. * numbers --- files/en-us/web/api/svgangle/index.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/api/svgangle/index.md b/files/en-us/web/api/svgangle/index.md index f60ef3fd92ed2b0..9c98232cad15e70 100644 --- a/files/en-us/web/api/svgangle/index.md +++ b/files/en-us/web/api/svgangle/index.md @@ -21,20 +21,22 @@ Every `SVGAngle` object operates in one of two modes: ## Constants - `SVG_ANGLETYPE_UNKNOWN` - - : Some unknown type of value. + - : Some unknown type of value. Represented as the numeric value `0`. - `SVG_ANGLETYPE_UNSPECIFIED` - - : A unitless {{cssxref("<number>")}} interpreted as a value in degrees. + - : A unitless {{cssxref("<number>")}} interpreted as a value in degrees. Represented as the numeric value `1`. - `SVG_ANGLETYPE_DEG` - - : An {{cssxref("<angle>")}} with a `deg` unit. + - : An {{cssxref("<angle>")}} with a `deg` unit. Represented as the numeric value `2`. - `SVG_ANGLETYPE_RAD` - - : An {{cssxref("<angle>")}} with a `rad` unit. + - : An {{cssxref("<angle>")}} with a `rad` unit. Represented as the numeric value `3`. - `SVG_ANGLETYPE_GRAD` - - : An {{cssxref("<angle>")}} with a `grad` unit. + - : An {{cssxref("<angle>")}} with a `grad` unit. Represented as the numeric value `4`. ## Instance properties - `unitType` + - : The type of the value as specified by one of the `SVG_ANGLETYPE_*` constants defined on this interface. + - `value` - : The value as a floating point value, in user units. Setting this attribute will cause `valueInSpecifiedUnits` and `valueAsString` to be updated automatically to reflect this setting. From a5de116c99effa3a2bed6ede6e69928c7d2fc43b Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 7 Jan 2025 23:10:27 +0530 Subject: [PATCH 10/59] add: SVG Angle MDN Feature Pages (#37013) * add: SVG Angle MDN Feature Pages * fixes the format * fix: the general format of instance property * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg * major content fixes * fix: content * changed format for values in unitType * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg * fix: syntax * fix: syntax * fix: return type * fix: parameters for new value in specified units * fix: unittype * fix unittype format * fix: value * Update index.md * Update index.md * fix for consistency * Update files/en-us/web/api/svgangle/unittype/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/valueinspecifiedunits/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/value/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/valueinspecifiedunits/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/unittype/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/svgangle/unittype/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/svgangle/valueasstring/index.md Co-authored-by: wbamberg * fix: bold string removed * fix: remove angle comment --------- Co-authored-by: wbamberg Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../svgangle/converttospecifiedunits/index.md | 71 ++++++++++++ files/en-us/web/api/svgangle/index.md | 13 ++- .../svgangle/newvaluespecifiedunits/index.md | 104 ++++++++++++++++++ .../en-us/web/api/svgangle/unittype/index.md | 43 ++++++++ files/en-us/web/api/svgangle/value/index.md | 45 ++++++++ .../web/api/svgangle/valueasstring/index.md | 50 +++++++++ .../svgangle/valueinspecifiedunits/index.md | 45 ++++++++ 7 files changed, 365 insertions(+), 6 deletions(-) create mode 100644 files/en-us/web/api/svgangle/converttospecifiedunits/index.md create mode 100644 files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md create mode 100644 files/en-us/web/api/svgangle/unittype/index.md create mode 100644 files/en-us/web/api/svgangle/value/index.md create mode 100644 files/en-us/web/api/svgangle/valueasstring/index.md create mode 100644 files/en-us/web/api/svgangle/valueinspecifiedunits/index.md diff --git a/files/en-us/web/api/svgangle/converttospecifiedunits/index.md b/files/en-us/web/api/svgangle/converttospecifiedunits/index.md new file mode 100644 index 000000000000000..808826327c3904c --- /dev/null +++ b/files/en-us/web/api/svgangle/converttospecifiedunits/index.md @@ -0,0 +1,71 @@ +--- +title: "SVGAngle: convertToSpecifiedUnits() method" +short-title: convertToSpecifiedUnits() +slug: Web/API/SVGAngle/convertToSpecifiedUnits +page-type: web-api-instance-method +browser-compat: api.SVGAngle.convertToSpecifiedUnits +--- + +{{APIRef("SVG")}} + +The `convertToSpecifiedUnits()` method of the {{domxref("SVGAngle")}} interface allows you to convert the angle's value to the specified unit type. + +This function will: + +- Set the {{domxref("SVGAngle.unitType", "unitType")}} property to the given unit type +- Update the {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} properties so the angle value is represented in the given unit type + +## Syntax + +```js-nolint +svgAngle.convertToSpecifiedUnits(unitType) +``` + +### Parameters + +- `unitType` + - : A constant representing the unit type to which the angle's value should be converted. This must be one of the constant values defined for the {{domxref("SVGAngle.unitType", "unitType")}} property, with the exception of `SVG_ANGLETYPE_UNKNOWN`. + - `SVGAngle.SVG_ANGLETYPE_DEG`: convert to degrees + - `SVGAngle.SVG_ANGLETYPE_RAD`: convert to radians + - `SVGAngle.SVG_ANGLETYPE_GRAD`: convert to gradians + - `SVGAngle.SVG_ANGLETYPE_UNSPECIFIED`: convert to a unitless number, interpreted as degrees + +### Return value + +None ({{jsxref('undefined')}}). + +## Examples + +### Converting an angle to degrees + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the angle's value in radians (Math.PI / 2) +angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2); + +// Retrieve the angle's value as a string +console.log(angle.valueAsString); // Output: 1.5708rad +console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD) + +// Convert the angle's value to degrees +angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG); + +// Retrieve the angle's value as a string +console.log(angle.valueAsString); // Output: 90deg +console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle")}} diff --git a/files/en-us/web/api/svgangle/index.md b/files/en-us/web/api/svgangle/index.md index 9c98232cad15e70..590445b955034ae 100644 --- a/files/en-us/web/api/svgangle/index.md +++ b/files/en-us/web/api/svgangle/index.md @@ -33,23 +33,23 @@ Every `SVGAngle` object operates in one of two modes: ## Instance properties -- `unitType` +- {{domxref("SVGAngle.unitType")}} - : The type of the value as specified by one of the `SVG_ANGLETYPE_*` constants defined on this interface. -- `value` +- {{domxref("SVGAngle.value")}} - : The value as a floating point value, in user units. Setting this attribute will cause `valueInSpecifiedUnits` and `valueAsString` to be updated automatically to reflect this setting. **Exceptions on setting:** A {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. -- `valueInSpecifiedUnits` +- {{domxref("SVGAngle.valueInSpecifiedUnits")}} - : The value as a floating point value, in the units expressed by `unitType`. Setting this attribute will cause `value` and `valueAsString` to be updated automatically to reflect this setting. **Exceptions on setting:** A {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. -- `valueAsString` +- {{domxref("SVGAngle.valueAsString")}} - : The value as a string value, in the units expressed by `unitType`. Setting this attribute will cause `value`, `valueInSpecifiedUnits`, and `unitType` to be updated automatically to reflect this setting. @@ -61,7 +61,7 @@ Every `SVGAngle` object operates in one of two modes: ## Instance methods -- `newValueSpecifiedUnits` +- {{domxref("SVGAngle.newValueSpecifiedUnits")}} - : Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object. @@ -70,7 +70,8 @@ Every `SVGAngle` object operates in one of two modes: - A {{domxref("DOMException")}} with code `NOT_SUPPORTED_ERR` is raised if `unitType` is `SVG_ANGLETYPE_UNKNOWN` or not a valid unit type constant (one of the other `SVG_ANGLETYPE_*` constants defined on this interface). - A {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read only attribute or when the object itself is read only. -- `convertToSpecifiedUnits` +- {{domxref("SVGAngle.convertToSpecifiedUnits")}} + - : Preserve the same underlying stored value, but reset the stored unit identifier to the given `unitType`. Object attributes `unitType`, `valueInSpecifiedUnits`, and `valueAsString` might be modified as a result of this method. ## Specifications diff --git a/files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md b/files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md new file mode 100644 index 000000000000000..2037c94c69673ea --- /dev/null +++ b/files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md @@ -0,0 +1,104 @@ +--- +title: "SVGAngle: newValueSpecifiedUnits() method" +short-title: newValueSpecifiedUnits() +slug: Web/API/SVGAngle/newValueSpecifiedUnits +page-type: web-api-instance-method +browser-compat: api.SVGAngle.newValueSpecifiedUnits +--- + +{{APIRef("SVG")}} + +The `newValueSpecifiedUnits()` method of the {{domxref("SVGAngle")}} interface sets the value to a number with an associated {{domxref("SVGAngle.unitType", "unitType")}}, thereby replacing the values for all of the attributes on the object. + +## Syntax + +```js-nolint +svgAngle.newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) +``` + +### Parameters + +- `unitType` + + - : A constant representing the unit type to which the angle's value should be converted. This must be one of the constant values defined for the {{domxref("SVGAngle.unitType", "unitType")}} property, with the exception of `SVG_ANGLETYPE_UNKNOWN`. + - `SVGAngle.SVG_ANGLETYPE_DEG`: convert to degrees + - `SVGAngle.SVG_ANGLETYPE_RAD`: convert to radians + - `SVGAngle.SVG_ANGLETYPE_GRAD`: convert to gradians + - `SVGAngle.SVG_ANGLETYPE_UNSPECIFIED`: convert to a unitless number, interpreted as degrees + +- `valueInSpecifiedUnits` + - : The numeric factor for the angle value, expressed in the specified unit type. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +This method may raise a {{domxref("DOMException")}} of one of the following types: + +- `NotSupportedError` {{domxref("DOMException")}} + + - : Thrown if `unitType` is `SVG_ANGLETYPE_UNKNOWN` or not a valid unit type constant. + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if {{domxref("SVGAngle")}} corresponds to a read-only attribute or when the object itself is read-only. + +## Examples + +### Setting an angle in degrees + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the angle's value in degrees using newValueSpecifiedUnits() +angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45); + +// Retrieve the angle's value in degrees +console.log(angle.value); // Output: 45 +console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG) +``` + +### Setting an angle in radians + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the angle's value in radians using newValueSpecifiedUnits() +angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2); + +// Retrieve the angle's value +console.log(angle.value); // Output: 90 +console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD) +``` + +### Setting an angle in gradians + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the angle's value in gradians using newValueSpecifiedUnits() +angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD, 100); + +// Retrieve the angle's value in gradians +console.log(angle.value); // Output: 90 +console.log(angle.unitType); // Output: 4 (SVG_ANGLETYPE_GRAD) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle")}} diff --git a/files/en-us/web/api/svgangle/unittype/index.md b/files/en-us/web/api/svgangle/unittype/index.md new file mode 100644 index 000000000000000..d14ba2fe4e21600 --- /dev/null +++ b/files/en-us/web/api/svgangle/unittype/index.md @@ -0,0 +1,43 @@ +--- +title: "SVGAngle: unitType property" +short-title: unitType +slug: Web/API/SVGAngle/unitType +page-type: web-api-instance-property +browser-compat: api.SVGAngle.unitType +--- + +{{APIRef("SVG")}} + +The **`unitType`** property of the {{domxref("SVGAngle")}} interface is one of the [unit type contants](/en-US/docs/Web/API/SVGAngle#constants) and represents the units in which this angle's value is expressed. + +## Value + +A number representing the numeric value of the constant. + +## Examples + +Here's an example of how to access the `unitType` property: + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the angle value +angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45); + +// Check the unit type +console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle")}} diff --git a/files/en-us/web/api/svgangle/value/index.md b/files/en-us/web/api/svgangle/value/index.md new file mode 100644 index 000000000000000..399d85feef03ac5 --- /dev/null +++ b/files/en-us/web/api/svgangle/value/index.md @@ -0,0 +1,45 @@ +--- +title: "SVGAngle: value property" +short-title: value +slug: Web/API/SVGAngle/value +page-type: web-api-instance-property +browser-compat: api.SVGAngle.value +--- + +{{APIRef("SVG")}} + +The `value` property of the {{domxref("SVGAngle")}} interface represents the floating point value of the [``](/en-US/docs/Web/SVG/Content_type#angle) in degrees. + +Setting this attribute will cause {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} to be updated automatically to reflect this setting. + +## Value + +A number; the angle value in degrees. + +## Examples + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the value +angle.value = 45; +console.log(angle.value); // Output: 45 + +// Reflecting the value +angle.value = 90; +console.log(angle.value); // Output: 90 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle")}} diff --git a/files/en-us/web/api/svgangle/valueasstring/index.md b/files/en-us/web/api/svgangle/valueasstring/index.md new file mode 100644 index 000000000000000..fb68e0405e95836 --- /dev/null +++ b/files/en-us/web/api/svgangle/valueasstring/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGAngle: valueAsString property" +short-title: valueAsString +slug: Web/API/SVGAngle/valueAsString +page-type: web-api-instance-property +browser-compat: api.SVGAngle.valueAsString +--- + +{{APIRef("SVG")}} + +The `valueAsString` property of the {{domxref("SVGAngle")}} interface represents the angle's value as a string, in the units expressed by {{domxref("SVGAngle.unitType", "unitType")}}. + +Setting this attribute will cause {{domxref("SVGAngle.value", "value")}}, {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}}, and {{domxref("SVGAngle.unitType", "unitType")}} to be updated automatically to reflect this setting. + +## Value + +A string; the value of the angle. + +## Examples + +### Setting and retrieving `valueAsString` + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the value using valueAsString in degrees +angle.valueAsString = "45deg"; +console.log(angle.valueAsString); // Output: "45deg" +console.log(angle.value); // Output: 45 (in degrees) + +// Set the value using valueAsString in radians +angle.valueAsString = "1.57rad"; +console.log(angle.valueAsString); // Output: "1.57rad" +console.log(Math.round(angle.value)); // Output: 90 (since 1.57 radians is approximately 90 degrees) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [``](/en-US/docs/Web/SVG/Content_type#angle) +- {{domxref("SVGAnimatedAngle")}} diff --git a/files/en-us/web/api/svgangle/valueinspecifiedunits/index.md b/files/en-us/web/api/svgangle/valueinspecifiedunits/index.md new file mode 100644 index 000000000000000..8808a173fc66cdc --- /dev/null +++ b/files/en-us/web/api/svgangle/valueinspecifiedunits/index.md @@ -0,0 +1,45 @@ +--- +title: "SVGAngle: valueInSpecifiedUnits property" +short-title: valueInSpecifiedUnits +slug: Web/API/SVGAngle/valueInSpecifiedUnits +page-type: web-api-instance-property +browser-compat: api.SVGAngle.valueInSpecifiedUnits +--- + +{{APIRef("SVG")}} + +The `valueInSpecifiedUnits` property of the {{domxref("SVGAngle")}} interface represents the value of this angle as a number, in the units expressed by the angle's {{domxref("SVGAngle.unitType", "unitType")}}. + +Setting this attribute will cause {{domxref("SVGAngle.value", "value")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} to be updated automatically to reflect this setting. + +## Value + +A number; the numeric factor of the angle. + +## Examples + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the value of the angle in degrees +angle.value = 45; +console.log(angle.valueInSpecifiedUnits); // Output: 45 + +// Update the numeric factor of the angle +angle.valueInSpecifiedUnits = 90; +console.log(angle.valueInSpecifiedUnits); // Output: 90 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle")}} From 0f7aca64a81a5e9e97c232968f6acf435f8aafb6 Mon Sep 17 00:00:00 2001 From: Gagan Bhullar Date: Tue, 7 Jan 2025 10:44:00 -0700 Subject: [PATCH 11/59] fix: aria role (#37537) aria role --- files/en-us/web/api/htmlimageelement/alt/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/api/htmlimageelement/alt/index.md b/files/en-us/web/api/htmlimageelement/alt/index.md index e78388b87086181..15f4271e2e1f979 100644 --- a/files/en-us/web/api/htmlimageelement/alt/index.md +++ b/files/en-us/web/api/htmlimageelement/alt/index.md @@ -128,17 +128,17 @@ In other words, it should be the same text you would use in a textual button to For example, in the snippet of HTML below, a toolbar which uses icon images as link labels provides `alt` attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used. ```html -
  • - +
    • From 6033c369db35bf1df34430cc375705e2d959fc0b Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Wed, 8 Jan 2025 02:29:48 +0800 Subject: [PATCH 12/59] Modify the sample code in the Location `hash` property (#37022) * Modify the sample code in the Location `hash` property * Update index.md * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/location/hash/index.md * Update files/en-us/web/api/location/hash/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/location/hash/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/location/hash/index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: wbamberg --- files/en-us/web/api/location/hash/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/location/hash/index.md b/files/en-us/web/api/location/hash/index.md index 1c42d5eaf241968..bc65ae59d99a7ee 100644 --- a/files/en-us/web/api/location/hash/index.md +++ b/files/en-us/web/api/location/hash/index.md @@ -18,12 +18,11 @@ A string. ## Examples -```html -Examples - +Assuming the user has navigated to `https://example.org#examples`, the following code will log `#examples`: + +```js +const result = location.hash; +console.log(result); ``` ## Specifications From 2e84c228bf55def31fcd3ac3a0227b5faed99657 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 7 Jan 2025 10:41:12 -0800 Subject: [PATCH 13/59] New pages: HTMLMediaElement API (played and seeking) (#37006) * New pages: htmlmediaelement API * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/seeking/index.md * Apply suggestions from code review * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/seeking/index.md --------- Co-authored-by: wbamberg --- .../web/api/htmlmediaelement/played/index.md | 45 +++++++++++++++++++ .../web/api/htmlmediaelement/seeking/index.md | 37 +++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 files/en-us/web/api/htmlmediaelement/played/index.md create mode 100644 files/en-us/web/api/htmlmediaelement/seeking/index.md diff --git a/files/en-us/web/api/htmlmediaelement/played/index.md b/files/en-us/web/api/htmlmediaelement/played/index.md new file mode 100644 index 000000000000000..beef6e1894b964a --- /dev/null +++ b/files/en-us/web/api/htmlmediaelement/played/index.md @@ -0,0 +1,45 @@ +--- +title: "HTMLMediaElement: played property" +short-title: played +slug: Web/API/HTMLMediaElement/played +page-type: web-api-instance-property +browser-compat: api.HTMLMediaElement.played +--- + +{{APIRef("HTML DOM")}} + +The **`played`** read-only property of the {{domxref("HTMLMediaElement")}} interface indicates the time ranges the resource, an {{htmlelement("audio")}} or {{htmlelement("video")}} media file, has played. It returns a new {{domxref("TimeRanges")}} object that contains the ranges of the media source that the browser has played, if any, at the time the attribute is evaluated. + +## Value + +A {{domxref("TimeRanges")}} object; representing the time ranges that have been played. + +## Examples + +```js +const media = document.querySelector("audio"); +const playedTimeRanges = media.played; +let timePlayed = 0; +// calculate the total time the media has played +for (let i = 0; i < playedTimeRanges.length; i++) { + timePlayed += playedTimeRanges.end(i) - playedTimeRanges.start(i); +} +console.log(`The media played for a total of ${timePlayed} seconds.`); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLMediaElement.seeked_event", "seeked")}} event +- {{domxref("HTMLMediaElement.progress_event", "progress")}} event +- {{domxref("HTMLMediaElement.seekable")}} +- {{domxref("HTMLMediaElement.buffered")}} +- {{domxref("HTMLVideoElement")}} +- {{domxref("HTMLAudioElement")}} diff --git a/files/en-us/web/api/htmlmediaelement/seeking/index.md b/files/en-us/web/api/htmlmediaelement/seeking/index.md new file mode 100644 index 000000000000000..9bf2bf2ea78605f --- /dev/null +++ b/files/en-us/web/api/htmlmediaelement/seeking/index.md @@ -0,0 +1,37 @@ +--- +title: "HTMLMediaElement: seeking property" +short-title: seeking +slug: Web/API/HTMLMediaElement/seeking +page-type: web-api-instance-property +browser-compat: api.HTMLMediaElement.seeking +--- + +{{APIRef("HTML DOM")}} + +The **`seeking`** read-only property of the {{domxref("HTMLMediaElement")}} interface is a Boolean indicating whether the resource, the {{htmlelement("audio")}} or {{htmlelement("video")}}, is in the process of seeking to a new position. + +## Value + +A boolean value. + +## Examples + +```js +const el = document.querySelector("video"); +console.log(el.seeking); // true or false +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLMediaElement.seeking_event", "seeking")}} event +- {{domxref("HTMLMediaElement.seeked_event", "seeked")}} event +- {{domxref("HTMLVideoElement")}} +- {{domxref("HTMLAudioElement")}} From 4f5fffdcb6ab78d736c69185f9575e8553e7d070 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Wed, 8 Jan 2025 00:21:58 +0530 Subject: [PATCH 14/59] MDN Feature Pages for SVGAnimatedPreserveAspectRatio (#37075) * MDN Feature Pages for SVGAnimatedPreserveAspectRatio * fix: consistency with other pages * explicity mentioned preserveAspectRatio * fix: see also section with relevant links * fix: value content * add: examples * add: illustrative examples * fix: example * fix: example --------- Co-authored-by: wbamberg --- .../animval/index.md | 73 +++++++++++++++++++ .../baseval/index.md | 73 +++++++++++++++++++ .../svganimatedpreserveaspectratio/index.md | 4 +- 3 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md create mode 100644 files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md new file mode 100644 index 000000000000000..13a1862f9a1a375 --- /dev/null +++ b/files/en-us/web/api/svganimatedpreserveaspectratio/animval/index.md @@ -0,0 +1,73 @@ +--- +title: "SVGAnimatedPreserveAspectRatio: animVal property" +short-title: animVal +slug: Web/API/SVGAnimatedPreserveAspectRatio/animVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedPreserveAspectRatio.animVal +--- + +{{APIRef("SVG")}} + +The **`animVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the value of the {{SVGAttr("preserveAspectRatio")}} attribute of an SVG element after any animations or transformations are applied. + +## Value + +An {{domxref("SVGPreserveAspectRatio")}} object. + +## Examples + +Consider the following SVG: + +```html + + + + + +``` + +This example defines an `` element which animates its `preserveAspectRatio` attribute. The animation runs once and sets the `fill` attribute to `"freeze"`, so the effect of the animation is persisted after the animation finishes. + +We run the following code immediately when page loads: + +```js +const image = document.querySelector("#myImage"); +const baseVal = image.preserveAspectRatio.baseVal; +const animVal = image.preserveAspectRatio.animVal; + +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +``` + +If we log the values of `animVal.meetOrSlice` and `baseVal.meetOrSlice` again after the animation has finished, we will see the following: + +```js +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 2 (SVG_MEETORSLICE_SLICE) +``` + +Note that if we set `fill` to `"remove"` (or remove `fill` entirely, since `"remove"` is the default) then the animation effects will be removed when the animation is complete, and `animVal.meetOrSlice` will then revert to `1`. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGPreserveAspectRatio")}} +- {{domxref("SVGElement")}} diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md new file mode 100644 index 000000000000000..068e715b46edc5d --- /dev/null +++ b/files/en-us/web/api/svganimatedpreserveaspectratio/baseval/index.md @@ -0,0 +1,73 @@ +--- +title: "SVGAnimatedPreserveAspectRatio: baseVal property" +short-title: baseVal +slug: Web/API/SVGAnimatedPreserveAspectRatio/baseVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedPreserveAspectRatio.baseVal +--- + +{{APIRef("SVG")}} + +The **`baseVal`** read-only property of the {{domxref("SVGAnimatedPreserveAspectRatio")}} interface represents the base (non-animated) value of the {{SVGAttr("preserveAspectRatio")}} attribute of an SVG element. + +## Value + +An {{domxref("SVGPreserveAspectRatio")}} object. + +## Examples + +Consider the following SVG: + +```html + + + + + +``` + +This example defines an `` element which animates its `preserveAspectRatio` attribute. The animation runs once and sets the `fill` attribute to `"freeze"`, so the effect of the animation is persisted after the animation finishes. + +We run the following code immediately when page loads: + +```js +const image = document.querySelector("#myImage"); +const baseVal = image.preserveAspectRatio.baseVal; +const animVal = image.preserveAspectRatio.animVal; + +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +``` + +If we log the values of `animVal.meetOrSlice` and `baseVal.meetOrSlice` again after the animation has finished, we will see the following: + +```js +console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET) +console.log(animVal.meetOrSlice); // Output: 2 (SVG_MEETORSLICE_SLICE) +``` + +Note that if we set `fill` to `"remove"` (or remove `fill` entirely, since `"remove"` is the default) then the animation effects will be removed when the animation is complete, and `animVal.meetOrSlice` will then revert to `1`. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGPreserveAspectRatio")}} +- {{domxref("SVGElement")}} diff --git a/files/en-us/web/api/svganimatedpreserveaspectratio/index.md b/files/en-us/web/api/svganimatedpreserveaspectratio/index.md index c5031424e626822..61f4cbba4604866 100644 --- a/files/en-us/web/api/svganimatedpreserveaspectratio/index.md +++ b/files/en-us/web/api/svganimatedpreserveaspectratio/index.md @@ -46,9 +46,9 @@ The `SVGAnimatedPreserveAspectRatio` interface is used for attributes of type {{ ## Instance properties -- {{domxref("SVGAnimatedPreserveAspectRatio.baseVal")}} {{ReadOnlyInline}} +- {{domxref("SVGAnimatedPreserveAspectRatio.baseVal", "baseVal")}} {{ReadOnlyInline}} - : A {{domxref("SVGPreserveAspectRatio")}} that represents the base value of the given attribute before applying any animations. -- {{domxref("SVGAnimatedPreserveAspectRatio.animVal")}} {{ReadOnlyInline}} +- {{domxref("SVGAnimatedPreserveAspectRatio.animVal", "animVal")}} {{ReadOnlyInline}} - : A {{domxref("SVGPreserveAspectRatio")}} that represents the current animated value of the given attribute. If the given attribute is not currently being animated, then the {{ domxref("SVGPreserveAspectRatio") }} will have the same contents as `baseVal`. The object referenced by `animVal` is always distinct from the one referenced by `baseVal`, even when the attribute is not animated. ## Instance methods From bc7875d9a6c405e47c6ee166b5acc2174515129f Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Wed, 8 Jan 2025 00:26:00 +0530 Subject: [PATCH 15/59] MDN feature pages for SVGAnimatedInteger (#37070) * MDN feature pages for SVGAnimatedInteger * fix: example for animval * fix: consistency with other pages * explicity mentioned integer content type * add: attribute details * fix: queryselector for feTurbulence element * fix: see also section with better links * fix: example * fix format * fix: property's attributes * fix: desc --------- Co-authored-by: wbamberg --- .../api/svganimatedinteger/animval/index.md | 46 ++++++++++++++++ .../api/svganimatedinteger/baseval/index.md | 52 +++++++++++++++++++ .../en-us/web/api/svganimatedinteger/index.md | 6 +-- 3 files changed, 101 insertions(+), 3 deletions(-) create mode 100644 files/en-us/web/api/svganimatedinteger/animval/index.md create mode 100644 files/en-us/web/api/svganimatedinteger/baseval/index.md diff --git a/files/en-us/web/api/svganimatedinteger/animval/index.md b/files/en-us/web/api/svganimatedinteger/animval/index.md new file mode 100644 index 000000000000000..ebfd184037d8b9a --- /dev/null +++ b/files/en-us/web/api/svganimatedinteger/animval/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGAnimatedInteger: animVal property" +short-title: animVal +slug: Web/API/SVGAnimatedInteger/animVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedInteger.animVal +--- + +{{APIRef("SVG")}} + +The **`animVal`** property of the {{domxref("SVGAnimatedInteger")}} interface represents the animated value of an [``](/en-US/docs/Web/SVG/Content_type#integer). If no animation is applied, `animVal` equals `baseVal`. + +Some attributes, like the {{SVGAttr("numOctaves")}} attribute of the {{SVGElement("feTurbulence")}} element or the {{SVGAttr("order")}} attribute of the {{SVGElement("feConvolveMatrix")}} accept a `long` integer as a value. This property provides access to the current animated state of the attribute as a number. + +## Value + +A `long`; the animated value of the attribute. + +## Examples + +```js +const feTurbulence = document.querySelector("feTurbulence"); + +// Set the animatable 'numOctaves' attribute +feTurbulence.setAttribute("numOctaves", "4"); + +// Access the SVGAnimatedInteger object +const animatedInteger = feTurbulence.numOctaves; + +// Get the animated value (read-only) +console.log(animatedInteger.animVal); // Output: 4 (the current animated value) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [``](/en-US/docs/Web/SVG/Content_type#integer) +- {{SVGAttr("numOctaves")}} +- {{SVGAttr("order")}} diff --git a/files/en-us/web/api/svganimatedinteger/baseval/index.md b/files/en-us/web/api/svganimatedinteger/baseval/index.md new file mode 100644 index 000000000000000..c345cee24a00e0f --- /dev/null +++ b/files/en-us/web/api/svganimatedinteger/baseval/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGAnimatedInteger: baseVal property" +short-title: baseVal +slug: Web/API/SVGAnimatedInteger/baseVal +page-type: web-api-instance-property +browser-compat: api.SVGAnimatedInteger.baseVal +--- + +{{APIRef("SVG")}} + +The **`baseVal`** property of the {{domxref("SVGAnimatedInteger")}} interface represents the base (non-animated) value of an animatable [``](/en-US/docs/Web/SVG/Content_type#integer). + +Some attributes, like the {{SVGAttr("numOctaves")}} attribute of the {{SVGElement("feTurbulence")}} element or the {{SVGAttr("order")}} attribute of the {{SVGElement("feConvolveMatrix")}} accept a `long` integer as a value. This property provides access to the static non-animated state of the attribute as a number. + +## Value + +A `long`; the base (non-animated) value of the reflected attribute. + +## Examples + +```js +const feTurbulence = document.querySelector("feTurbulence"); + +// Set the animatable 'numOctaves' attribute +feTurbulence.setAttribute("numOctaves", "4"); + +// Access the SVGAnimatedInteger object +const animatedInteger = feTurbulence.numOctaves; + +// Get the base value +console.log(animatedInteger.baseVal); // Output: 4 + +// Modify the base value +animatedInteger.baseVal = 6; + +// Verify the reflected attribute value +console.log(feTurbulence.getAttribute("numOctaves")); // Output: "6" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [``](/en-US/docs/Web/SVG/Content_type#integer) +- {{SVGAttr("numOctaves")}} +- {{SVGAttr("order")}} diff --git a/files/en-us/web/api/svganimatedinteger/index.md b/files/en-us/web/api/svganimatedinteger/index.md index 313f4cd7491b937..4c8d7e99ad200cf 100644 --- a/files/en-us/web/api/svganimatedinteger/index.md +++ b/files/en-us/web/api/svganimatedinteger/index.md @@ -27,7 +27,7 @@ The `SVGAnimatedInteger` interface is used for attributes of basic type [\Properties
      -
    • readonly long baseVal
      • +
    • long baseVal
    • readonly long animVal
    @@ -56,14 +56,14 @@ The `SVGAnimatedInteger` interface is used for attributes of basic type [\ - baseVal + {{domxref("SVGAnimatedInteger.baseVal", "baseVal")}} long The base value of the given attribute before applying any animations. - animVal + {{domxref("SVGAnimatedInteger.animVal", "animVal")}} long If the given attribute or property is being animated, contains the From 88a4e50f8c9a31e6967dd3282cc1a913f7732e61 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 8 Jan 2025 01:21:06 +0100 Subject: [PATCH 16/59] fix: auto-cleanup by bot (#37550) chore: auto-fix Markdownlint, Prettier, and front-matter issues --- .../css_flexible_box_layout/basic_concepts_of_flexbox/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index 3e29e72fa4adc59..fc85d54f56c87f0 100644 --- a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -137,8 +137,7 @@ The live sample below has `flex-direction` set to `row-reverse`. Try the other v While flexbox is a one dimensional model, it is possible to make flex items wrap across multiple lines. If you do this, you should consider each line as a new flex container. Any space distribution will happen across each line, without reference to the previous or subsequent lines. - -To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap across multiple lines. If you set it to `nowrap`, which is the initial value, they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an [overflow](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content) if the items were not able to shrink, or could not shrink small enough to fit. +To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap across multiple lines. If you set it to `nowrap`, which is the initial value, they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an [overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow) if the items were not able to shrink, or could not shrink small enough to fit. ```html live-sample___flex-wrap
    From 082221e2a29b7bea7a3029cd71442c8f294a8422 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 8 Jan 2025 13:16:40 +0530 Subject: [PATCH 17/59] Synchronize with BCD v5.6.28 (#37551) Co-authored-by: OnkarRuikar --- .../web/api/popstateevent/hasuavisualtransition/index.md | 4 +--- files/en-us/web/api/popstateevent/index.md | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md b/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md index 4564ba1d9a923d1..ab3a01f77d3b649 100644 --- a/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md +++ b/files/en-us/web/api/popstateevent/hasuavisualtransition/index.md @@ -3,12 +3,10 @@ title: "PopStateEvent: hasUAVisualTransition property" short-title: hasUAVisualTransition slug: Web/API/PopStateEvent/hasUAVisualTransition page-type: web-api-instance-property -status: - - experimental browser-compat: api.PopStateEvent.hasUAVisualTransition --- -{{APIRef("History API")}}{{SeeCompatTable}} +{{APIRef("History API")}} The **`hasUAVisualTransition`** read-only property of the {{domxref("PopStateEvent")}} interface returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. diff --git a/files/en-us/web/api/popstateevent/index.md b/files/en-us/web/api/popstateevent/index.md index a95670134891108..5a85263f02c2d8f 100644 --- a/files/en-us/web/api/popstateevent/index.md +++ b/files/en-us/web/api/popstateevent/index.md @@ -28,7 +28,7 @@ _This interface also inherits the properties of its parent, {{domxref("Event")}} - {{domxref("PopStateEvent.state")}} {{ReadOnlyInline}} - : Returns a copy of the information that was provided to `pushState()` or `replaceState()`. -- {{domxref("PopStateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}} {{Experimental_Inline}} +- {{domxref("PopStateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}} - : Returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise. ## Instance methods From fd7ad9c453ff28e5d5d4af5a993b7d8502aaaafe Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 8 Jan 2025 16:53:50 +0800 Subject: [PATCH 18/59] Update info for svg `