Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upBetter support for CSS backgrounds #19482
Closed
Labels
Comments
|
It looks to me like all the issues are with displaying CSS gradients. Can anyone confirm this? |
|
Yah, Looks like caused by |
|
Great website, with a lot of difficult gradient test cases! I am working on this and the gradients are now rendered with only minor issues. I will submit a PR after cleaning up.
|
bors-servo
added a commit
that referenced
this issue
Dec 13, 2017
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.  <!-- 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
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.  <!-- 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
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.  <!-- 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
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.  <!-- 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
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.  <!-- 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
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.  <!-- 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
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.  <!-- 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
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:  <!-- 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:  <!-- 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:  <!-- 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 -->
|
@pyfisch thank you for fixing this! |
|
Gradients are now displayed outside the circles but this is tracked in #19649. (And should not take too long.) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This web site contains a couple of custom CSS backgrounds: http://lea.verou.me/css3patterns/
While some backgrounds are being displayed correctly, most backgrounds have bugs of varying severity.
Screenshot of the page in Firefox (everything fine):
Screenshot in servo as of commit e4dba3a :