Skip to content

/ servo

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

Jump to bottom

Respect background-repeat, -size properties for gradients #16657

Closed
pyfisch opened this issue Apr 29, 2017 · 4 comments
Closed

Respect background-repeat, -size properties for gradients #16657

pyfisch opened this issue Apr 29, 2017 · 4 comments
Labels
A-layout/uncategorized C-has-manual-testcase

Comments

@pyfisch
Copy link
Contributor

@pyfisch pyfisch commented Apr 29, 2017 •
edited by nox

Background gradients should vary depending on the value of background-repeat and background-size.

Manual testcase:

The gradient should be displayed four times.

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background-image: linear-gradient(45deg, red, green, blue);
            background-size: 25%;
            border: 2px solid #92b901;
            background-repeat: repeat;
        }
    </style>
</head>

<body>

    <div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
        ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
        praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </div>

</body>

</html>
@nox
Copy link
Member

@nox nox commented Apr 29, 2017

In which browsers is this displayed four times? I checked with Safari and Firefox and it didn't seem to be true.
@nox
Copy link
Member

@nox nox commented Apr 29, 2017

Your test case had background-repeat: no-repeat;, fixed it for you.
@pyfisch
Copy link
Contributor Author

@pyfisch pyfisch commented Apr 29, 2017

Thanks.
@pyfisch pyfisch mentioned this issue Apr 29, 2017
Closed
@pyfisch pyfisch mentioned this issue Dec 13, 2017
Merged
bors-servo added a commit that referenced this issue Dec 13, 2017
@bors-servo
Auto merge of #19554 - pyfisch:tiled-gradients1, r=<try>
Loading status checks…
906bd96 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Dec 14, 2017
@bors-servo
Auto merge of #19554 - pyfisch:tiled-gradients1, r=<try>
Loading status checks…
73b1803 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Dec 14, 2017
@bors-servo
Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck
Loading status checks…
a4ba0e6 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Dec 14, 2017
@bors-servo
Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck
Loading status checks…
f4cb618 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Dec 14, 2017
@bors-servo
Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck
Loading status checks…
d8a29b8 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Dec 14, 2017
@bors-servo
Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck
Loading status checks…
a8a4fd1 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Dec 14, 2017
@bors-servo
Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck
Loading status checks…
6ee8e6a 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
@pyfisch
Copy link
Contributor Author

@pyfisch pyfisch commented Dec 16, 2017

The background-size part is done, I will work on the background-repeat part soon.
@sviter sviter mentioned this issue Dec 23, 2017
Closed
@pyfisch pyfisch mentioned this issue Dec 27, 2017
Merged
bors-servo added a commit that referenced this issue Jan 1, 2018
@bors-servo
Auto merge of #19651 - pyfisch:background-placement, r=emilio
Loading status checks…
f6111c5 
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
@bors-servo
Auto merge of #19651 - pyfisch:background-placement, r=<try>
Loading status checks…
62d2179 
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
@bors-servo
Auto merge of #19651 - pyfisch:background-placement, r=emilio
Loading status checks…
691bff8 
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
Assignees
No one assigned
Labels
A-layout/uncategorized C-has-manual-testcase
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

Unify background placement code
3 participants
@nox @pyfisch @KiChjang
You can’t perform that action at this time.