Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: unitless zero for <angle> values are allowed in CSS gradients #1479

Merged
merged 1 commit into from Sep 20, 2022
Merged

fix: unitless zero for <angle> values are allowed in CSS gradients #1479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 19 additions & 12 deletions lib/hacks/gradient.js
View file
Open in desktop
Expand Up @@ -14,9 +14,10 @@ class Gradient extends Value {
replace(string, prefix) {
let ast = parser(string)
for (let node of ast.nodes) {
if (node.type === 'function' && node.value === this.name) {
let gradientName = this.name // gradient name
if (node.type === 'function' && node.value === gradientName) {
node.nodes = this.newDirection(node.nodes)
node.nodes = this.normalize(node.nodes)
node.nodes = this.normalize(node.nodes, gradientName)
if (prefix === '-webkit- old') {
let changes = this.oldWebkit(node)
if (!changes) {
Expand Down Expand Up @@ -56,7 +57,7 @@ class Gradient extends Value {
/**
* Normalize angle
*/
normalize(nodes) {
normalize(nodes, gradientName) {
if (!nodes[0]) return nodes

if (/-?\d+(.\d+)?grad/.test(nodes[0].value)) {
Expand All @@ -71,14 +72,20 @@ class Gradient extends Value {
nodes[0].value = `${num}deg`
}

if (nodes[0].value === '0deg') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'top')
} else if (nodes[0].value === '90deg') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'right')
} else if (nodes[0].value === '180deg') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom')
} else if (nodes[0].value === '270deg') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'left')
if (gradientName === 'linear-gradient' || gradientName === 'repeating-linear-gradient') {
let direction = nodes[0].value

// Unitless zero for `<angle>` values are allowed in CSS gradients and transforms.
// Spec: https://github.com/w3c/csswg-drafts/commit/602789171429b2231223ab1e5acf8f7f11652eb3
if (direction === '0deg' || direction === '0') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'top')
} else if (direction === '90deg') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'right')
} else if (direction === '180deg') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom') // default value
} else if (direction === '270deg') {
nodes = this.replaceFirst(nodes, 'to', ' ', 'left')
}
}

return nodes
Expand Down Expand Up @@ -403,7 +410,7 @@ Gradient.names = [
]

Gradient.directions = {
top: 'bottom',
top: 'bottom', // default value
left: 'right',
bottom: 'top',
right: 'left'
Expand Down
18 changes: 18 additions & 0 deletions test/cases/gradient.css
View file
Open in desktop
Expand Up @@ -129,3 +129,21 @@ div {
.loop {
background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
}

.unitless-zero {
background-image: linear-gradient(0, green, blue);
background: repeating-linear-gradient(0, blue, red 33.3%)
}

.zero-grad {
background: linear-gradient(0grad, green, blue);
background-image: repeating-linear-gradient(0grad, blue, red 33.3%)
}

.zero-rad {
background: linear-gradient(0rad, green, blue);
}

.zero-turn {
background: linear-gradient(0turn, green, blue);
}
34 changes: 34 additions & 0 deletions test/cases/gradient.out.css
View file
Open in desktop
Expand Up @@ -220,3 +220,37 @@ div {
background-image: url("https://test.com/lol(test.png"), -o-radial-gradient(yellow, black, yellow);
background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
}

.unitless-zero {
background-image: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
background-image: -webkit-linear-gradient(bottom, green, blue);
background-image: -o-linear-gradient(bottom, green, blue);
background-image: linear-gradient(0, green, blue);
background: -webkit-repeating-linear-gradient(bottom, blue, red 33.3%);
background: -o-repeating-linear-gradient(bottom, blue, red 33.3%);
background: repeating-linear-gradient(0, blue, red 33.3%)
}

.zero-grad {
background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
background: -webkit-linear-gradient(bottom, green, blue);
background: -o-linear-gradient(bottom, green, blue);
background: linear-gradient(0grad, green, blue);
background-image: -webkit-repeating-linear-gradient(bottom, blue, red 33.3%);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know why the test failed here, the single test(test.only('changes angle in gradient') was passed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was prefixes cleaning test which failed.

Seems like we forgot to think about cleaning repeating gradients when we added their support.

Here is my fix 542bd85

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

background-image: -o-repeating-linear-gradient(bottom, blue, red 33.3%);
background-image: repeating-linear-gradient(0grad, blue, red 33.3%)
}

.zero-rad {
background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
background: -webkit-linear-gradient(bottom, green, blue);
background: -o-linear-gradient(bottom, green, blue);
background: linear-gradient(0rad, green, blue);
}

.zero-turn {
background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
background: -webkit-linear-gradient(bottom, green, blue);
background: -o-linear-gradient(bottom, green, blue);
background: linear-gradient(0turn, green, blue);
}