Skip to content

Commit

Permalink
Update all browsers data for css.types.image.*-gradient (mdn#21472)
Browse files Browse the repository at this point in the history
This PR updates and corrects version values for all browsers for the `*-gradient` member of the `image` CSS value type. This adds a `premultiplied_gradients` subfeature to all three gradient types, as all browsers (not just Firefox) had this issue in the past.  In a way, this fixes mdn#14598.

Test Code:
```html
<div id="test"></div>
<style>
	body {
		background-color: black;
	}
	#test {
		height: 100vh;
		background: linear-gradient(to bottom, red, rgba(255, 255, 255, 0));
	}
</style>
```

If the gradient started to transition into white, then premultiplication was not performed.  If the gradient faded perfectly to black, premultiplication was performed properly.
  • Loading branch information
queengooborg authored Dec 21, 2023
1 parent e2edb11 commit 3bb35e5
Showing 1 changed file with 78 additions and 48 deletions.
126 changes: 78 additions & 48 deletions css/types/image.json
Original file line number Diff line number Diff line change
Expand Up @@ -422,8 +422,7 @@
},
"firefox": [
{
"version_added": "16",
"notes": "Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency."
"version_added": "16"
},
{
"prefix": "-webkit-",
Expand Down Expand Up @@ -647,6 +646,39 @@
}
}
},
"premultiplied_gradients": {
"__compat": {
"description": "Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)",
"support": {
"chrome": {
"version_added": "29"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "36"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "15"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror"
},
"status": {
"experimental": false,
"standard_track": true,
"deprecated": false
}
}
},
"to": {
"__compat": {
"description": "<code>to</code> keyword",
Expand Down Expand Up @@ -759,8 +791,7 @@
},
"firefox": [
{
"version_added": "16",
"notes": "Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency."
"version_added": "16"
},
{
"prefix": "-webkit-",
Expand Down Expand Up @@ -848,54 +879,20 @@
"edge": {
"version_added": "12"
},
"firefox": [
{
"version_added": "16",
"notes": "Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency."
},
{
"prefix": "-webkit-",
"version_added": "49"
},
{
"prefix": "-moz-",
"version_added": "10",
"notes": "Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>."
}
],
"firefox_android": [
{
"version_added": "16"
},
{
"prefix": "-moz-",
"version_added": "10"
}
],
"firefox": {
"version_added": "10"
},
"firefox_android": "mirror",
"ie": {
"version_added": "10"
},
"oculus": "mirror",
"opera": [
{
"version_added": "15"
},
{
"prefix": "-o-",
"version_added": "11.6",
"version_removed": "15"
}
],
"opera_android": [
{
"version_added": "14"
},
{
"prefix": "-o-",
"version_added": "12",
"version_removed": "14"
}
],
"opera": {
"version_added": "11.6"
},
"opera_android": {
"version_added": "12"
},
"safari": {
"version_added": "7"
},
Expand Down Expand Up @@ -1049,6 +1046,39 @@
"deprecated": false
}
}
},
"premultiplied_gradients": {
"__compat": {
"description": "Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)",
"support": {
"chrome": {
"version_added": "29"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "36"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "15"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror"
},
"status": {
"experimental": false,
"standard_track": true,
"deprecated": false
}
}
}
},
"repeating-conic-gradient": {
Expand Down

0 comments on commit 3bb35e5

Please sign in to comment.