Gradient not painted correctly #161

paulrouget · 2016-02-01T10:33:26Z

<style>
  div {
    width: 50px;
    height: 50px;
    background-color: #00f;
    margin: 20px;
  }
</style>

<div style="background-image: linear-gradient(135deg, #F00 50%, transparent 50%)"></div>
<div style="background-image: linear-gradient(135deg, #F00,     transparent 50%)"></div>

pcwalton · 2016-02-01T19:21:31Z

Yeah, this is the issue whereby we don't tessellate non-axis-aligned gradients.

I now feel like the best solution to this problem may be to just use the upgraded clip rect infrastructure, when we have it—i.e. clip out in the fragment shader. That will depend on a bit of infrastructure we don't yet have, though: the matrix/clip stack.

@paulrouget, would it be better if I rendered the gradient correctly, but spilling outside the box, for now until we have that infrastructure? I can do that real quick if that's an improvement.

pcwalton · 2016-02-01T19:22:19Z

Dependency: #154.

paulrouget · 2016-02-02T00:31:21Z

@paulrouget, would it be better if I rendered the gradient correctly, but spilling outside the box, for now until we have that infrastructure? I can do that real quick if that's an improvement.

Spilling will be a problem too.

We can use a PNG instead of a linear-gradient for now.

paulrouget · 2016-02-02T00:33:32Z

P1 -> P2. Browserhtml workaround: browserhtml/browserhtml#861

pcwalton · 2016-02-02T03:25:45Z

Actually, I'll fix it for real. :)


        Reimplement arbitrary rotation angles for linear gradients by clipping

in the fragment shader. This reintroduces the clip-in rect in the FS. Since we'll need it anyway when we have arbitrary matrix/clip stacks, this seems harmless. Color strips for non-axis-aligned linear gradients are submitted as axis-aligned rects centered at the appropriate point, just as axis-aligned ones are. However, we reuse one of the vertex fields to store the rotation angle. The vertex shader detects this condition, rotates the rectangle around its midpoint, and passes the clip rect on to the fragment shader. Additionally, this patch eliminates the ugly (-10000,10000) spans for linear gradient strips that we had before. It was necessary to tighten this up in order to avoid needless fragment shader invocations in the non-axis-aligned case, so I went ahead and fixed it everywhere. Closes #161.

pcwalton · 2016-02-02T03:26:33Z

@paulrouget I have a fix ready. Sorry for making you go through the work of making a PNG workaround.


        Reimplement arbitrary rotation angles for linear gradients by clipping

in the fragment shader. This reintroduces the clip-in rect in the FS. Since we'll need it anyway when we have arbitrary matrix/clip stacks, this seems harmless. Color strips for non-axis-aligned linear gradients are submitted as axis-aligned rects centered at the appropriate point, just as axis-aligned ones are. However, we reuse one of the vertex fields to store the rotation angle. The vertex shader detects this condition, rotates the rectangle around its midpoint, and passes the clip rect on to the fragment shader. Additionally, this patch eliminates the ugly (-10000,10000) spans for linear gradient strips that we had before. It was necessary to tighten this up in order to avoid needless fragment shader invocations in the non-axis-aligned case, so I went ahead and fixed it everywhere. Closes servo#161.


        Reimplement arbitrary rotation angles for linear gradients by clipping

in the fragment shader. This reintroduces the clip-in rect in the FS. Since we'll need it anyway when we have arbitrary matrix/clip stacks, this seems harmless. Color strips for non-axis-aligned linear gradients are submitted as axis-aligned rects centered at the appropriate point, just as axis-aligned ones are. However, we reuse one of the vertex fields to store the rotation angle. The vertex shader detects this condition, rotates the rectangle around its midpoint, and passes the clip rect on to the fragment shader. Additionally, this patch eliminates the ugly (-10000,10000) spans for linear gradient strips that we had before. It was necessary to tighten this up in order to avoid needless fragment shader invocations in the non-axis-aligned case, so I went ahead and fixed it everywhere. Closes servo#161.


        Reimplement arbitrary rotation angles for linear gradients by clipping

in the fragment shader. This reintroduces the clip-in rect in the FS. Since we'll need it anyway when we have arbitrary matrix/clip stacks, this seems harmless. Color strips for non-axis-aligned linear gradients are submitted as axis-aligned rects centered at the appropriate point, just as axis-aligned ones are. However, we reuse one of the vertex fields to store the rotation angle. The vertex shader detects this condition, rotates the rectangle around its midpoint, and passes the clip rect on to the fragment shader. Additionally, this patch eliminates the ugly (-10000,10000) spans for linear gradient strips that we had before. It was necessary to tighten this up in order to avoid needless fragment shader invocations in the non-axis-aligned case, so I went ahead and fixed it everywhere. Closes servo#161.


        Reimplement arbitrary rotation angles for linear gradients by clipping

in the fragment shader. This reintroduces the clip-in rect in the FS. Since we'll need it anyway when we have arbitrary matrix/clip stacks, this seems harmless. Color strips for non-axis-aligned linear gradients are submitted as axis-aligned rects centered at the appropriate point, just as axis-aligned ones are. However, we reuse one of the vertex fields to store the rotation angle. The vertex shader detects this condition, rotates the rectangle around its midpoint, and passes the clip rect on to the fragment shader. Additionally, this patch eliminates the ugly (-10000,10000) spans for linear gradient strips that we had before. It was necessary to tighten this up in order to avoid needless fragment shader invocations in the non-axis-aligned case, so I went ahead and fixed it everywhere. Closes servo#161.

paulrouget · 2016-02-03T05:51:56Z

This doesn't appear to be fixed.

I see this now:


        Fix two bugs in linear gradient rendering.

1. When the first stop of a gradient was not at position 0%, WebRender did not draw the solid color from 0% to that first stop, in violation of CSS-IMAGES-3. 2. Certain gradient angles would cause the segments to be too narrow. This patch fixes this by correcting the trigonometric calculations. Closes servo#161.


        Merge pull request servo#161 from dati91/update_gfx_3af6c0

Update gfx to 3af6c00

paulrouget added the A-browserhtml/P1 label Feb 1, 2016

paulrouget added A-browserhtml/P2 and removed A-browserhtml/P1 labels Feb 2, 2016

paulrouget mentioned this issue Feb 2, 2016

Do not use a gradient for the progressbar browserhtml/browserhtml#861

Closed

pcwalton mentioned this issue Feb 2, 2016

Reimplement arbitrary rotation angles for linear gradients by clipping in the fragment shader. #164

Closed

pcwalton mentioned this issue Feb 2, 2016

Reimplement arbitrary rotation angles for linear gradients by clipping in the fragment shader. #165

Merged

glennw closed this in #165 Feb 2, 2016

paulrouget reopened this Feb 3, 2016

pcwalton mentioned this issue Feb 5, 2016

Fix two bugs in linear gradient rendering. #175

Merged

glennw closed this in #175 Feb 5, 2016

servo / webrender

Gradient not painted correctly #161

Gradient not painted correctly #161

paulrouget commented Feb 1, 2016

pcwalton commented Feb 1, 2016

pcwalton commented Feb 1, 2016

paulrouget commented Feb 2, 2016

paulrouget commented Feb 2, 2016

pcwalton commented Feb 2, 2016

pcwalton commented Feb 2, 2016

paulrouget commented Feb 3, 2016

servo / webrender

Join GitHub today

Gradient not painted correctly #161

Gradient not painted correctly #161

Comments

paulrouget commented Feb 1, 2016

pcwalton commented Feb 1, 2016

pcwalton commented Feb 1, 2016

paulrouget commented Feb 2, 2016

paulrouget commented Feb 2, 2016

pcwalton commented Feb 2, 2016

pcwalton commented Feb 2, 2016

paulrouget commented Feb 3, 2016