mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-12 04:22:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb/CSS: Fix linear-gradient single color-stop usage

Browse source 
The Web::CSS::Parser's GradientParsing ignores color-stops if
it is only a single one. This change allows to have color-stops
with double positions against a single color.

Further, also allows for `linear-gradient(black)` and similar
other gradient functions
This commit is contained in:
Mehran Kamal 2025-01-30 15:15:33 +05:00 • committed by Sam Atkins
commit cfe6702767
Notes: github-actions[bot] 2025-02-03 17:25:19 +00:00
12 changed files with 459 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
Tests/LibWeb/Ref/input/wpt-import/css/css-images/gradient/gradient-single-stop-001.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gradient with a single stop</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#color-stop-syntax">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#coloring-gradient-line">
<meta name="assert" content="Tests that gradient with a single color stop renders the expected solid color">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4500">
<link rel="match" href="../../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
<style>
body {
background: #fff;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
#fail {
background: red;
}
#test {
background-image: linear-gradient(green);
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square.</p>
<div id="fail"></div>
<div id="test"></div>
</body>
</html>

39
Tests/LibWeb/Ref/input/wpt-import/css/css-images/gradient/gradient-single-stop-002.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gradient with a single stop</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#color-stop-syntax">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#coloring-gradient-line">
<meta name="assert" content="Tests that gradient with a single color stop renders the expected solid color">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4500">
<link rel="match" href="../../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
<style>
body {
background: #fff;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
#fail {
background: red;
}
#test {
background-image: linear-gradient(to right, green 90%);
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square.</p>
<div id="fail"></div>
<div id="test"></div>
</body>
</html>

39
Tests/LibWeb/Ref/input/wpt-import/css/css-images/gradient/gradient-single-stop-004.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gradient with a single stop</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#color-stop-syntax">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#coloring-gradient-line">
<meta name="assert" content="Tests that gradient with a single color stop renders the expected solid color">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4500">
<link rel="match" href="../../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
<style>
body {
background: #fff;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
#fail {
background: red;
}
#test {
background-image: radial-gradient(green);
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square.</p>
<div id="fail"></div>
<div id="test"></div>
</body>
</html>

39
Tests/LibWeb/Ref/input/wpt-import/css/css-images/gradient/gradient-single-stop-006.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gradient with a single stop</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#coloring-gradient-line">
<meta name="assert" content="Tests that gradient with a single color stop renders the expected solid color">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10000">
<link rel="match" href="../../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
<style>
body {
background: #fff;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
#fail {
background: red;
}
#test {
background-image: conic-gradient(green);
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square.</p>
<div id="fail"></div>
<div id="test"></div>
</body>
</html>

39
Tests/LibWeb/Ref/input/wpt-import/css/css-images/gradient/gradient-single-stop-007.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gradient with a single stop</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#coloring-gradient-line">
<meta name="assert" content="Tests that gradient with a single color stop renders the expected solid color">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10000">
<link rel="match" href="../../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
<style>
body {
background: #fff;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
#fail {
background: red;
}
#test {
background-image: conic-gradient(from 0deg at center, green);
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square.</p>
<div id="fail"></div>
<div id="test"></div>
</body>
</html>