Open Bug 621163 Opened 14 years ago Updated 2 years ago

Printing/Print Preview w/thead and multiple thead rows causes second thead row on second page to render incorrectly

Categories

(Core :: Printing: Output, defect)

x86
Windows 7
defect

Tracking

()

UNCONFIRMED

People

(Reporter: clintp, Unassigned)

Details

Attachments

(1 file)

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 ( .NET CLR 3.5.30729; .NET4.0E) Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 ( .NET CLR 3.5.30729; .NET4.0E) The attached page has a <thead> element that has two rows. Styling applied to the second row in the <thead> renders perfectly onscreen and on the *first* printed page. On subsequent pages, the styling isn't applied to the row correctly. In the example shown below, note the red border and the blue border onscreen. Those are correct. If you look at them in a print-preview mode (or print them) on the first page, everything renders correctly as it did onscreen. The second (and subsequent printed pages) the red border vanishes and the blue border continues down the page -- this behavior is incorrect. (For comparison, IE 7 and 8 render this correctly). HTML to reproduce the problem (pardon the length, but it has to span 2 printed pages): <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'> <html> <head> <title>Test Report</title> <meta http-equiv='Content-Type' content='text/html;charset=utf-8'> <style type="text/css"> thead {display: table-header-group;} tfoot {display: table-footer-group;} tbody {display: table-row-group; } table { border-collapse: collapse; } td.titlebox { border-bottom: 3px solid black; } td.footer { border-top: 3px solid black; border-bottom: 3px solid black; } </style> </head> <body> <table> <thead> <tr> <td class='titlebox' colspan='2'> <table> <tr> <td> This is the title of my report </td> </tr> </table> </td> </tr> <tr class='headerrow' style="border-bottom: 5px red solid; border-right: 2px blue solid;"> <td class="header">Header1</td> <td class="header">Header2</td> </tr> </thead> <tfoot> <tr> <td class="footer" colspan='2'> <table> <tr> <td> This is my footer </td> </tr> </table> </td> </tr> </tfoot> <tbody> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> <tr><td>Detail 1</td><td>Detail 2</td></tr> </tbody> </table> </body> </html> Reproducible: Always Steps to Reproduce: 1. Load the HTML into a Firefox browser. 2. Note the placement of the red/blue borders in the <thead>. 3. Go into "Print Preview" or print the document. Actual Results: Note that the red border has vanished, and the blue border has "leaked" into the <tbody>. But only on the *second* (and subsequent) pages! Expected Results: The second page header should appear exactly like the first page header.
Same as the inlined HTML noted in the bug.
Confirmed on Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b9pre) Gecko/20101222 Firefox/4.0b9pre ID:20101222030351 and Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.14pre) Gecko/20101215 Firefox/3.6.14pre ID:20101215033249
Component: General → Printing: Output
Product: Firefox → Core
QA Contact: general → printing
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: