Skip to content

Fix #439 linear gradient support for PDF output #448

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
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

@danfickle danfickle commented Feb 23, 2020

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

danfickle commented Feb 23, 2020

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.

2 participants

@danfickle