Bug 34392 - background (gradient) on tr is repeated on each td
Summary: background (gradient) on tr is repeated on each td
Status: RESOLVED DUPLICATE of bug 9268
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
URL:
Keywords:
: 58236 (view as bug list)
Depends on:
Blocks:
 
Reported: 2010-01-31 03:56 PST by Gidon
Modified: 2012-10-23 09:14 PDT (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Gidon 2010-01-31 03:56:11 PST 
I tried to apply a horizontal linear background gradient to a table row:

tr {  background: -webkit-gradient(linear, left top, right top, color-stop(0.0, white), color-stop(0.5, #E8E8E8), color-stop(1.0, white)); }

The row has a few cells, and unfortunately the gradient gets repeated on each cell, instead of the whole row.

Firefox 3.6 does render correctly using the following CSS rule:

tr { background: -moz-linear-gradient(left top , white, #E8E8E8, white) repeat scroll 0 0 transparent; }

According to what I've read the same issue goes for background images on a table row, although I cannot confirm this.
Comment 1 Gidon 2010-01-31 03:58:39 PST 
Btw. checked it on Safari 4.0.4 (webkit 531.21.10) although that selection was unavailable when entering the bug.
Also checked it on Chrome 4.0.249.78
Comment 2 Alexey Proskuryakov 2010-02-12 11:52:29 PST 
See also: bug 9268.
Comment 3 Daniel Bates 2010-03-27 16:57:53 PDT 
This issue is resolved with the patch for bug #9268.
Comment 4 Robin Whittleton 2011-06-02 02:06:31 PDT 
The patch for bug #9268 was reverted it seems. I filed bug #58236 on this issue which I guess is a dupe of this bug, but this is definitely not fixed (in latest released Safari and Chrome on OSX 10.6 as of time of writing).
Comment 5 Daniel Bates 2011-06-02 06:43:36 PDT 
*** Bug 58236 has been marked as a duplicate of this bug. ***
Comment 6 Daniel Bates 2011-06-02 06:44:14 PDT 

*** This bug has been marked as a duplicate of bug 9268 ***
Comment 7 Robin Whittleton 2011-06-02 07:00:07 PDT 
Fwiw, bug #9268 is titled 'Quirksmode' but I’m seeing this issue in standards mode as well.
Comment 8 Robin Whittleton 2011-06-02 07:02:31 PDT 
Sorry, I’m an idiot, just realised that meant quirksmode.org. Ignore me.
Comment 9 bdredre 2012-10-23 09:14:36 PDT 
This bug seems to have reappeared. Using the following code:


<html>
<body>
  <table width="100%">
    <tr style="background: -webkit-linear-gradient(left, #CFC, #FFF);">
      <td>This is a Chrome row</td>
      <td>Something</td>
      <td>Another thing</td>
    </tr>
    <tr style="background: linear-gradient(to right, #CFC, #FFF);">
      <td>This is a Firefox row</td>
      <td>Something</td>
      <td>Another thing</td>
    </tr>
  </table>
</body>
</html>


This renders properly using Firefox but the gradient for the table row repeats across each child <td> using Chrome Version 22.0.1229.94 m