layout: support tiled gradients #19554

pyfisch · 2017-12-13T19:28:22Z

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 are and want to ask the webrender team before building in "workarounds" for the missing gradients.

This change is

highfive · 2017-12-13T19:28:27Z

Heads up! This PR modifies the following files:

@emilio: components/layout/display_list_builder.rs, components/layout/webrender_helpers.rs

Manishearth · 2017-12-13T19:38:07Z

r? @mbrubeck

emilio · 2017-12-13T19:53:23Z

@bors-servo try

bors-servo · 2017-12-13T19:53:28Z

⌛ Trying commit a6a7272 with merge 906bd96...


        Auto merge of #19554 - pyfisch:tiled-gradients1, r=<try>

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)  --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19554)

bors-servo · 2017-12-13T20:03:11Z

💔 Test failed - mac-dev-unit

pyfisch · 2017-12-13T20:12:59Z

💔 Test failed - mac-dev-unit

error: error: Connection to server timed out Connection to server timed out

This is clearly unrelated.

mbrubeck · 2017-12-13T20:34:24Z

Results from the linux-rel-css test:

Ran 9450 tests finished in 697.0 seconds.
  • 9446 ran as expected. 1671 tests skipped.
  • 1 tests failed unexpectedly
  • 1 tests timed out unexpectedly
  • 1 tests passed unexpectedly
  • 1 tests had unexpected subtest results

Tests with unexpected results:
  ▶ PASS [expected FAIL] /css/css-variables/vars-background-shorthand-001.html

  ▶ FAIL [expected PASS] /_mozilla/mozilla/simple_scroll_to_fragment.html
  └   → /_mozilla/mozilla/simple_scroll_to_fragment.html 2d5103c1d79069b6628ffe931d05456e5b9244b2
/_mozilla/mozilla/simple_scroll_to_fragment_ref.html 7949e80732fa0f4afdbae3b1cad96ccd75bb04f6
Testing 2d5103c1d79069b6628ffe931d05456e5b9244b2 == 7949e80732fa0f4afdbae3b1cad96ccd75bb04f6

  ▶ TIMEOUT [expected PASS] /_mozilla/css/iframe/hide_after_load.html
  │ 
  │ VMware, Inc.
  │ softpipe
  └ 3.3 (Core Profile) Mesa 17.3.0-devel

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgb(calc(100 + 155), 255, 255) (quirks)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgb(calc(100 + 155), 255, 255) (almost standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgb(calc(100 + 155), 255, 255) (standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgba(calc(100 + 155), 255, 255, 001) (quirks)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgba(calc(100 + 155), 255, 255, 001) (almost standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgba(calc(100 + 155), 255, 255, 001) (standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] hsl(calc(050 + 050), 100%, 100%) (quirks)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] hsl(calc(050 + 050), 100%, 100%) (almost standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] hsl(calc(050 + 050), 100%, 100%) (standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] hsla(calc(050 + 050), 100%, 100%, 001) (quirks)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] hsla(calc(050 + 050), 100%, 100%, 001) (almost standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] hsla(calc(050 + 050), 100%, 100%, 001) (standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgb(calc(/**/100/**/ + /**/155/**/), 255, 255) (quirks)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgb(calc(/**/100/**/ + /**/155/**/), 255, 255) (almost standards)

  ▶ Unexpected subtest result in /quirks-mode/hashless-hex-color.html:
  └ PASS [expected FAIL] rgb(calc(/**/100/**/ + /**/155/**/), 255, 255) (standards)

Note: The simple_scroll_to_fragment.html failure is unrelated; see #19268.

pyfisch · 2017-12-13T20:51:42Z

Travis just timed out: The job exceeded the maximum time limit for jobs, and has been terminated.

I got really lucky with the CI builders this time. 😖

pyfisch · 2017-12-13T21:29:15Z

Set one test to PASS that was FAIL before.

@bors-servo retry

mbrubeck

Looks great, thanks! r=mbrubeck with one optional suggestion below.

mbrubeck · 2017-12-13T21:55:49Z

components/layout/display_list_builder.rs

        bounds.size.width = bounds.size.width - border.horizontal();
        bounds.size.height = bounds.size.height - border.vertical();

+        let mut tile = bounds.size;
+        match bg_size {


This might be clearer as let tile = match bg_size { ... };

KiChjang · 2017-12-14T00:05:33Z

@bors-servo try

bors-servo · 2017-12-14T00:05:39Z

⌛ Trying commit 18c26e4 with merge 73b1803...


        Auto merge of #19554 - pyfisch:tiled-gradients1, r=<try>

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)  --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19554)

bors-servo · 2017-12-14T00:59:09Z

☀️ Test successful - android, arm32, arm64, linux-dev, linux-rel-css, linux-rel-wpt, mac-dev-unit, mac-rel-css1, mac-rel-css2, mac-rel-wpt1, mac-rel-wpt2, mac-rel-wpt3, mac-rel-wpt4, windows-msvc-dev
State: approved= try=True

KiChjang · 2017-12-14T03:07:28Z

@bors-servo r=mbrubeck

bors-servo · 2017-12-14T03:07:29Z

📌 Commit 18c26e4 has been approved by mbrubeck

bors-servo · 2017-12-14T03:45:39Z

⌛ Testing commit 18c26e4 with merge a4ba0e6...


        Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck

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)  --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19554)

jdm · 2017-12-14T16:43:19Z

@bors-servo: retry
#19563

bors-servo · 2017-12-14T17:35:47Z

⌛ Testing commit 9502e9f with merge a8a4fd1...


        Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck

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)  --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19554)

bors-servo · 2017-12-14T17:55:22Z

💔 Test failed - android

jdm · 2017-12-14T18:22:49Z

@bors-servo: retry
#19563

bors-servo · 2017-12-14T19:20:35Z

⌛ Testing commit 9502e9f with merge 6ee8e6a...


        Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck

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)  --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19554)

bors-servo · 2017-12-14T20:23:54Z

☀️ Test successful - android, arm32, arm64, linux-dev, linux-rel-css, linux-rel-wpt, mac-dev-unit, mac-rel-css1, mac-rel-css2, mac-rel-wpt1, mac-rel-wpt2, mac-rel-wpt3, mac-rel-wpt4, windows-msvc-dev
Approved by: mbrubeck
Pushing 6ee8e6a to master...


        layout: background-origin attribute for gradients

Fixes the glitches mentioned in #19554. Now gradient tiles are placed in the whole bounding box.


        Auto merge of #19568 - pyfisch:background-origin-gradients1, r=<try>

layout: background-origin attribute for gradients Fixes the glitches mentioned in #19554. Now gradient tiles are placed in the whole bounding box.  ---  - [x] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors  - [X] There are tests for these changes    --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19568)


        layout: background-origin attribute for gradients

Fixes the glitches mentioned in servo#19554. Now gradient tiles are placed in the whole bounding box.


        Auto merge of #19568 - pyfisch:background-origin-gradients1, r=<try>

layout: background-origin attribute for gradients Fixes the glitches mentioned in #19554. Now gradient tiles are placed in the whole bounding box.  ---  - [x] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors  - [X] There are tests for these changes    --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19568)


        layout: background-origin attribute for gradients

Fixes the glitches mentioned in servo#19554. Now gradient tiles are placed in the whole bounding box.


        layout: background-origin attribute for gradients

Fixes the glitches mentioned in servo#19554. Now gradient tiles are placed in the whole bounding box.


        Auto merge of #19568 - pyfisch:background-origin-gradients1, r=mbrubeck

layout: background-origin attribute for gradients Fixes the glitches mentioned in #19554. Now gradient tiles are placed in the whole bounding box.  ---  - [x] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors  - [X] There are tests for these changes    --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19568)


        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. Enable vars-background-shorthand-001.html CSS test. Upstreamed from servo/servo#19554 [ci skip]

highfive assigned Manishearth Dec 13, 2017

highfive added the S-awaiting-review label Dec 13, 2017

highfive assigned mbrubeck and unassigned Manishearth Dec 13, 2017

pyfisch force-pushed the pyfisch:tiled-gradients1 branch from 94e488e to a6a7272 Dec 13, 2017

highfive added the S-tests-failed label Dec 13, 2017

pyfisch mentioned this pull request Dec 13, 2017

Document and clarify `push_gradient` behavior servo/webrender#2222

Closed

pyfisch force-pushed the pyfisch:tiled-gradients1 branch from a6a7272 to 18c26e4 Dec 13, 2017

highfive removed the S-tests-failed label Dec 13, 2017

mbrubeck approved these changes Dec 13, 2017

View changes

highfive added S-awaiting-merge and removed S-awaiting-review labels Dec 14, 2017

highfive added the S-tests-failed label Dec 14, 2017

highfive added S-awaiting-merge and removed S-tests-failed labels Dec 14, 2017

highfive added S-tests-failed and removed S-awaiting-merge labels Dec 14, 2017

highfive added S-awaiting-merge and removed S-tests-failed labels Dec 14, 2017

bors-servo merged commit 9502e9f into servo:master Dec 14, 2017
3 checks passed

3 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details

continuous-integration/travis-ci/pr The Travis CI build passed
Details

homu Test successful
Details

highfive removed the S-awaiting-merge label Dec 14, 2017

pyfisch deleted the pyfisch:tiled-gradients1 branch Dec 14, 2017

pyfisch mentioned this pull request Dec 14, 2017

layout: background-origin attribute for gradients #19568

Merged

3 of 3 tasks complete

bors-servo pushed a commit that referenced this pull request Dec 14, 2017

layout: background-origin attribute for gradients

Loading status checks…

26dfa64

Fixes the glitches mentioned in #19554. Now gradient tiles are placed in the whole bounding box.

pyfisch added a commit to pyfisch/servo that referenced this pull request Dec 15, 2017

layout: background-origin attribute for gradients

5a3c827

Fixes the glitches mentioned in servo#19554. Now gradient tiles are placed in the whole bounding box.

pyfisch added a commit to pyfisch/servo that referenced this pull request Dec 15, 2017

layout: background-origin attribute for gradients

6695141

Fixes the glitches mentioned in servo#19554. Now gradient tiles are placed in the whole bounding box.

pyfisch added a commit to pyfisch/servo that referenced this pull request Dec 15, 2017

layout: background-origin attribute for gradients

b0492f5

Fixes the glitches mentioned in servo#19554. Now gradient tiles are placed in the whole bounding box.

This was referenced Dec 16, 2017

CSS properties background-size & background-position don't seem to work. #11304

Closed

Show gradients repeating under borders #16654

Closed

servo-wpt-sync mentioned this pull request Jan 4, 2018

layout: support tiled gradients web-platform-tests/wpt#8915

Merged

servo / servo

layout: support tiled gradients #19554

layout: support tiled gradients #19554

pyfisch commented Dec 13, 2017 •

edited

highfive commented Dec 13, 2017

Manishearth commented Dec 13, 2017

emilio commented Dec 13, 2017

bors-servo commented Dec 13, 2017

bors-servo commented Dec 13, 2017

pyfisch commented Dec 13, 2017

mbrubeck commented Dec 13, 2017

pyfisch commented Dec 13, 2017

pyfisch commented Dec 13, 2017

mbrubeck left a comment

This comment has been minimized.

KiChjang commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

KiChjang commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

jdm commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

jdm commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

servo / servo

Join GitHub today

layout: support tiled gradients #19554

layout: support tiled gradients #19554

Conversation

pyfisch commented Dec 13, 2017 • edited

highfive commented Dec 13, 2017

Manishearth commented Dec 13, 2017

emilio commented Dec 13, 2017

bors-servo commented Dec 13, 2017

bors-servo commented Dec 13, 2017

pyfisch commented Dec 13, 2017

mbrubeck commented Dec 13, 2017

pyfisch commented Dec 13, 2017

pyfisch commented Dec 13, 2017

mbrubeck left a comment

This comment has been minimized.

mbrubeck Dec 13, 2017

KiChjang commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

KiChjang commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

jdm commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

jdm commented Dec 14, 2017

bors-servo commented Dec 14, 2017

bors-servo commented Dec 14, 2017

pyfisch commented Dec 13, 2017 •

edited