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.

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

Wrong linear-gradient rendering #19626

Closed
sviter opened this issue Dec 22, 2017 · 2 comments
Closed

Wrong linear-gradient rendering #19626

sviter opened this issue Dec 22, 2017 · 2 comments

Comments

@sviter
Copy link

@sviter sviter commented Dec 22, 2017

Go to https://engineering.instagram.com/let-your-code-type-hint-itself-introducing-open-source-monkeytype-a855c7284881
Link to Github is rendering incorrect. Underline is made with linear-gradient.
link servo

@jdm
Copy link
Member

@jdm jdm commented Dec 22, 2017

<style>
  span {
    background-image: linear-gradient(to bottom,rgba(0,0,0,.68) 50%,rgba(0,0,0,0) 50%);
    background-repeat: repeat-x;
    background-size: 2px .1em;
    background-position: 0 0.9em;
  }
</style>
<span>hi there</span>

Firefox shows a similar issue if I disable the background-repeat property, so that might be a clue.

@sviter
Copy link
Author

@sviter sviter commented Dec 23, 2017

If so this is #16657

bors-servo added a commit that referenced this issue Jan 1, 2018
Unify background placement code

Merges the implementations for background-image placement
from gradients and images. Add missing parts and fix bugs.

Now supported are the CSS properties:

* background-attachment (except for local value, see #19650)
* background-clip
* background-origin
* background-position-x/y
* background-repeat
* background-size

It should be noted that backgrounds are not clipped to
rounded border corners.
(This was done before but worked only in simple cases)
See: #19649

This solves the following issues:
closes #19626
closes #16657
closes #19482 (examples from http://lea.verou.me/css3patterns/ are rendered perfectly but the round border is completely ignored now)
closes #19577

- `./mach build -d` does not report any errors
- `./mach test-tidy` does not report any errors

I enabled a few tests with the first commit but I have written about a dozen manual tests I will try to turn into ref tests either before or after this patch lands.

@bors-servo try

The relationship between the different inputs is visualized in this flowchart:
![flowchart-background](https://user-images.githubusercontent.com/2781017/34394430-5a06c72c-eb59-11e7-9d51-3d23e2215f07.png)

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19651)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Jan 2, 2018
Unify background placement code

Merges the implementations for background-image placement
from gradients and images. Add missing parts and fix bugs.

Now supported are the CSS properties:

* background-attachment (except for local value, see #19650)
* background-clip
* background-origin
* background-position-x/y
* background-repeat
* background-size

It should be noted that backgrounds are not clipped to
rounded border corners.
(This was done before but worked only in simple cases)
See: #19649

This solves the following issues:
closes #19626
closes #16657
closes #19482 (examples from http://lea.verou.me/css3patterns/ are rendered perfectly but the round border is completely ignored now)
closes #19577

- `./mach build -d` does not report any errors
- `./mach test-tidy` does not report any errors

I enabled a few tests with the first commit but I have written about a dozen manual tests I will try to turn into ref tests either before or after this patch lands.

@bors-servo try

The relationship between the different inputs is visualized in this flowchart:
![flowchart-background](https://user-images.githubusercontent.com/2781017/34394430-5a06c72c-eb59-11e7-9d51-3d23e2215f07.png)

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19651)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Jan 2, 2018
Unify background placement code

Merges the implementations for background-image placement
from gradients and images. Add missing parts and fix bugs.

Now supported are the CSS properties:

* background-attachment (except for local value, see #19650)
* background-clip
* background-origin
* background-position-x/y
* background-repeat
* background-size

It should be noted that backgrounds are not clipped to
rounded border corners.
(This was done before but worked only in simple cases)
See: #19649

This solves the following issues:
closes #19626
closes #16657
closes #19482 (examples from http://lea.verou.me/css3patterns/ are rendered perfectly but the round border is completely ignored now)
closes #19577

- `./mach build -d` does not report any errors
- `./mach test-tidy` does not report any errors

I enabled a few tests with the first commit but I have written about a dozen manual tests I will try to turn into ref tests either before or after this patch lands.

@bors-servo try

The relationship between the different inputs is visualized in this flowchart:
![flowchart-background](https://user-images.githubusercontent.com/2781017/34394430-5a06c72c-eb59-11e7-9d51-3d23e2215f07.png)

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19651)
<!-- Reviewable:end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

2 participants
You can’t perform that action at this time.