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 #439 linear gradient support for PDF output #448

Merged
merged 3 commits into from
Feb 24, 2020
Merged

Fix #439 linear gradient support for PDF output #448

merged 3 commits into from
Feb 24, 2020

Conversation

danfickle
Copy link
Owner

Limitations:

  • Does not yet validate linear-gradient CSS. Specifically, the linear-gradient must specify at least two color stops with the first at 0% (or unspecified) and the last at 100% (or unspecified). If you violate the linear-gradient contract you'll get an exception.
  • Does not support repeating-linear-gradient.

Notes:

  • Supports linear gradients in transformed elements.

Example (renders identical to Chrome):

<html>
<head>
<style>
@page {
  size: 200px 400px;
  margin: 0;
}
body {
  max-width: 200px;
  margin: 0;
}
div {
  margin: 10px 7px;
  border: 1px solid black;
  height: 30px;
}
#one {
  background-image: linear-gradient(to left, red, blue);
}
#two {
  background-image: linear-gradient(to right, green, blue, red, orange);
}
#three {
  background-image: linear-gradient(to bottom, #00f, #f00);
}
#four {
  background-image: linear-gradient(45deg, red, blue);
}
#five {
  background-image: linear-gradient(to left, orange 0%, blue 100%);
}
#six {
  background-image: linear-gradient(to right, blue, orange 40px, black 100px, green);
}
#seven {
  background-image: linear-gradient(to right, green, red 20px, blue, orange 60px, black);
}
#eight {
  height: 60px;
  padding: 10px;
  background-image: linear-gradient(to top, green, red 20%, blue);
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</body>
</html>

@danfickle
Copy link
Owner Author

Fixes #439

@danfickle danfickle merged commit 854e03e into open-dev-v1 Feb 24, 2020
@danfickle danfickle deleted the fix_439_linear_gradient branch February 24, 2020 05:29
@danfickle danfickle mentioned this pull request Feb 25, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@danfickle