From 67199f6ab390affc596e7c8d29a3d42eb4cbafbe Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 4 Jul 2024 19:26:02 +0200 Subject: [PATCH 1/3] Update Firefox 128 release notes for WebDriver conforming changes (#34623) * Update Firefox 128 release notes for WebDriver conforming changes * Apply review suggestions * Apply suggestions from code review Co-authored-by: Henrik Skupin --------- Co-authored-by: Henrik Skupin --- files/en-us/mozilla/firefox/releases/128/index.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/files/en-us/mozilla/firefox/releases/128/index.md b/files/en-us/mozilla/firefox/releases/128/index.md index 2152e76ba6a1fba..0f979e2e3109881 100644 --- a/files/en-us/mozilla/firefox/releases/128/index.md +++ b/files/en-us/mozilla/firefox/releases/128/index.md @@ -68,10 +68,23 @@ This article provides information about the changes in Firefox 128 that affect d #### General +- We now support the extended "unhandledPromptBehavior" capability which can either be a string (WebDriver classic) or a JSON object (WebDriver BiDi). The object type offers more capabilities for WebDriver BiDi like handling "beforeunload" prompts. ([Firefox bug 1884650](https://bugzil.la/1884650)) + #### WebDriver BiDi +- Added support for the "BiDi flag" of a WebDriver Session to align with the WebDriver BiDi specification. This allows to identify sessions created for or upgraded to WebDriver BiDi. ([Firefox bug 1898719](https://bugzil.la/1898719)) +- Added support for several arguments for the `network.continueRequest` command, which now allows to modify headers, cookies, method and body of a request before it is sent over the network. ([Firefox bug 1850680](https://bugzil.la/1850680)) +- Added support for the `userContext` argument in the `permissions.setPermission` command, which allows to isolate a permission to a specific user context (implemented as containers in Firefox). ([Firefox bug 1894217](https://bugzil.la/1894217)) +- Fixed a bug in `browsingContext.navigate` where a navigation error would load an error page and cause subsequent commands to fail. ([Firefox bug 1878690](https://bugzil.la/1878690)) +- We fixed the order in which `network.responseCompleted` events are emitted for redirects. The original request's `responseCompleted` is now always emitted before the events for the redirect. ([Firefox bug 1879580](https://bugzil.la/1879580)) +- To align with the current Firefox behavior, we introduced the workaround to not partition cookies which are added with the "storage.setCookie" command for the same domain as the page loaded in the targeted context. ([Firefox bug 1898222](https://bugzil.la/1898222)) +- The `input.setFiles` command has been updated to throw an `UnsupportedOperation` error if the specified file does not exist. ([Firefox bug 1887644](https://bugzil.la/1887644)) + #### Marionette +- Added support for the "HTTP flag" of a WebDriver Session to align with the WebDriver classic specification. This allows to identify sessions created for WebDriver classic. ([Firefox bug 1884090](https://bugzil.la/1884090)) +- Added support for the Permissions API in WebDriver Classic. ([Firefox bug 1524074](https://bugzil.la/1524074)) + ## Changes for add-on developers - Adds the ability to enable and disable rules in static declarative net request rulesets with {{WebExtAPIRef("declarativeNetRequest.updateStaticRules")}} and list disabled rules for a static ruleset with {{WebExtAPIRef("declarativeNetRequest.getDisabledRuleIds")}} ([Firefox bug 1810762](https://bugzil.la/1810762)) From 6678a5691ffc106caf2e631d5186a2b7fbd461f9 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 4 Jul 2024 13:28:21 -0400 Subject: [PATCH 2/3] Document that saturate()/hue-rotate() are not in HSL space (#34609) * Document that saturate()/hue-rotate() are not in HSL space * Address reviews --- .../css/filter-function/hue-rotate/index.md | 49 +++++++++++++++++++ .../web/css/filter-function/saturate/index.md | 49 +++++++++++++++++++ 2 files changed, 98 insertions(+) diff --git a/files/en-us/web/css/filter-function/hue-rotate/index.md b/files/en-us/web/css/filter-function/hue-rotate/index.md index 8ea492f631486e0..10d1b832fc833fd 100644 --- a/files/en-us/web/css/filter-function/hue-rotate/index.md +++ b/files/en-us/web/css/filter-function/hue-rotate/index.md @@ -9,6 +9,8 @@ browser-compat: css.types.filter-function.hue-rotate The **`hue-rotate()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) rotates the [hue](https://en.wikipedia.org/wiki/Hue) of an element and its contents. Its result is a {{cssxref("<filter-function>")}}. +> **Note:** `hue-rotate()` is specified as a matrix operation on the RGB color. It does not actually convert the color to the HSL model, which is a non-linear operation. Therefore, it may not preserve the saturation or lightness of the original color, especially for saturated colors. + {{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} ## Syntax @@ -174,6 +176,53 @@ This example shows three images: the image with a `hue-rotate()` filter function {{EmbedLiveSample('With_url()_and_the_SVG_hue-rotate_filter','100%','280')}} +### hue-rotate() does not preserve saturation or lightness + +The diagram below compares two color gradients starting with red: the first is generated using `hue-rotate()`, and the second uses actual HSL color values. Note how the `hue-rotate()` gradient shows obvious differences in saturation and lightness in the middle. + +```html +
+

Using hue-rotate()

+
+
+
+

Using hsl()

+
+
+``` + +```css hidden +#hue-rotate, +#hsl { + display: flex; + margin: 1em 0; +} + +#hue-rotate div, +#hsl div { + width: 2px; + height: 100px; +} +``` + +```js +const hueRotate = document.getElementById("hue-rotate"); +const hsl = document.getElementById("hsl"); + +for (let i = 0; i < 360; i++) { + const div1 = document.createElement("div"); + div1.style.backgroundColor = `hsl(${i}, 100%, 50%)`; + hsl.appendChild(div1); + + const div2 = document.createElement("div"); + div2.style.backgroundColor = "red"; + div2.style.filter = `hue-rotate(${i}deg)`; + hueRotate.appendChild(div2); +} +``` + +{{EmbedLiveSample('hue-rotate_does_not_preserve_saturation_or_lightness','100%','350')}} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/filter-function/saturate/index.md b/files/en-us/web/css/filter-function/saturate/index.md index 46c5fba81ee6591..33d194c2fe54aec 100644 --- a/files/en-us/web/css/filter-function/saturate/index.md +++ b/files/en-us/web/css/filter-function/saturate/index.md @@ -9,6 +9,8 @@ browser-compat: css.types.filter-function.saturate The **`saturate()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) super-saturates or desaturates the input image. Its result is a {{cssxref("<filter-function>")}}. +> **Note:** `saturate()` is specified as a matrix operation on the RGB color. It does not actually convert the color to the HSL model, which is a non-linear operation. Therefore, it may not preserve the hue or lightness of the original color. + {{EmbedInteractiveExample("pages/css/function-saturate.html")}} ## Syntax @@ -33,6 +35,53 @@ saturate(100%) /* No effect */ saturate(200%) /* Double saturation */ ``` +### saturate() does not preserve hue or lightness + +The diagram below compares two color gradients with `hsl(0, 50%, 50%)` as the mid-point: the first is generated using `saturate()`, and the second uses actual HSL color values. Note how the `saturate()` gradient shows differences in hue and lightness towards the two ends. + +```html +
+

Using saturate()

+
+
+
+

Using hsl()

+
+
+``` + +```css hidden +#saturate, +#hsl { + display: flex; + margin: 1em 0; +} + +#saturate div, +#hsl div { + width: 2px; + height: 100px; +} +``` + +```js +const saturate = document.getElementById("saturate"); +const hsl = document.getElementById("hsl"); + +for (let i = 0; i <= 200; i++) { + const div1 = document.createElement("div"); + div1.style.backgroundColor = `hsl(0, ${i / 2}%, 50%)`; + hsl.appendChild(div1); + + const div2 = document.createElement("div"); + div2.style.backgroundColor = "hsl(0, 50%, 50%)"; + div2.style.filter = `saturate(${i}%)`; + saturate.appendChild(div2); +} +``` + +{{EmbedLiveSample('saturate_does_not_preserve_hue_or_lightness','100%','350')}} + ## Specifications {{Specifications}} From ff7a0339cbe7c3df887522eda08824edbc371ec3 Mon Sep 17 00:00:00 2001 From: Bernie Sumption Date: Thu, 4 Jul 2024 18:31:27 +0100 Subject: [PATCH 3/3] Fix description of device-cmyk (#34616) Function is device dependent, not **in**dependent, as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/device-cmyk --- files/en-us/web/css/css_functions/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_functions/index.md b/files/en-us/web/css/css_functions/index.md index ef1f67ed6ab89fb..aee155b1f1afa64 100644 --- a/files/en-us/web/css/css_functions/index.md +++ b/files/en-us/web/css/css_functions/index.md @@ -202,7 +202,7 @@ The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/C - {{CSSxRef("color_value/color-contrast", "color-contrast()")}} {{Experimental_Inline}} - : Selects the highest color contrast from a list of colors, compare to a base color value. - {{CSSxRef("color_value/device-cmyk", "device-cmyk()")}} {{Experimental_Inline}} - - : Defines CMYK colors in a device-independent way. + - : Defines CMYK colors in a device-dependent way. - {{CSSXref("color_value/light-dark", "light-dark()")}} {{Experimental_Inline}} - : Returns one of two provided colors based on the current color scheme.