Closed Bug 495580 Opened 15 years ago Closed 8 years ago

{page-break-after: always} show div from second page on first page

Categories

(Core :: Print Preview, defect)

Product:
Core
Component:
Print Preview
Version:
1.9.1 Branch
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: yourpadremb, Unassigned)

References

(Depends on 1 open bug)

Details

(Keywords: css2, testcase)

Attachments

(6 files, 2 obsolete files)

Reporter's testcase
733 bytes, text/html
Details
css file 1
177 bytes, text/css
Details
css file 2
1.08 KB, text/css
Details
preview where show the problem
73.25 KB, image/jpeg
Details
Reporter's 2nd testcase with working stylesheet URLs
2.89 KB, text/html
Details
Screenshot of Print Preview
39.09 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1 (.NET CLR 3.5.30729)

Using the next code, in a print preview at bottom of page show a div what must start on second page
<body>
<div style="page-break-after: always; border: 1px dashed blue; position: relative; height: 10cm; width: 19cm;">
   <div style="border: 1px dashed red; position: absolute; top: 0.5cm; left: 0.5cm; height: 1cm; width: 1cm;"></div>
</div>
<div style="page-break-after: always; border: 1px dashed blue; position: relative; height: 10cm; width: 19cm;">
   <div style="border: 1px dashed red; position: absolute; top: 0.5cm; left: 0.5cm; height: 1cm; width: 1cm;"></div>
</div>
<div style="page-break-after: always; border: 1px dashed blue; position: relative; height: 10cm; width: 19cm;">
   <div style="border: 1px dashed red; position: absolute; top: 0.5cm; left: 0.5cm; height: 1cm; width: 1cm;"></div>
</div>

</body>

Reproducible: Always

Actual Results:  
not respect the page-break, show data from second page on the first page


Is sad what Firefox have a lack to support print+css.
Depends on: 132035
Keywords: css2, testcase
Version: unspecified → 3.0 Branch
Attached file Reporter's testcase — 
Works for me using:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9.0.12pre) Gecko/2009053004 GranParadiso/3.0.12pre
Attached file Full html for real world (obsolete) — 
I not know why show correctly the first example, but here is a full example.
If after <div class="transaccion_imprimir rompe"> I add a <br> show correctly.
need the css  files
Attached file css file 1 — 

    
    

    
  

      
      
      
      

        Attached file
          
        css file 2
        — 
      

    


  

    
    

    
  
Comment on attachment 380972 [details]
Full html for real world

sorry, first imprime.htm have incorect path to css files. (how delete a attachment?)

        Attachment #380972 -
        Attachment is obsolete: true

    
    

    
  

      
      
      
      

        Attached file
          
        Full html for real world (obsolete)
        — 
      

    


  

    
    

    
  


  

    
    

    
  
Sorry again, wrong div
If after <div class="transaccion_imprimir rompe"> I add a <br> show correctly.
the correct is
If after <div class="trans_contenedor"> I add a <br> show correctly.

    
    

    
  


  
This is what I see in a current trunk build and Firefox 3.0.1 on Linux.
It looks correct to me.  If there's an error in this screenshot,
please point it out.

    
    

    
  
Miguel, Firefox 3.0.1 is quite old and contains several security problems
(see http://www.mozilla.org/security/known-vulnerabilities/firefox30.html)
I would recommend that you update your Firefox to the latest 3.0.x version
(currently 3.0.11), do so by choosing "Check for Updates" in the Help menu.
Or you can install Firefox 3.5 from http://www.mozilla.com/

    
    

    
  
Miguel, do you have a testcase or URL that demonstrates the problem?
Whiteboard: CLOSEME 2009-08-30

    
    

    
  
#Mats
I upload the file to http://scouts2010.tripod.com/imprime.htm
but happen something weird.
If view the file above, the preview see fine, but if view the file on local (file:///...) the preview see wrong

can you test? 
download to same directory this three file
http://scouts2010.tripod.com/transaccion.css
http://scouts2010.tripod.com/imprime.htm
http://scouts2010.tripod.com/imprimir_v1.css

    
    

    
  
I sorry, I made  test on another computer and work fine in local and internet testcase.
Must be something in my computer or add-ons what use

    
    

    
  
Using Firefox 2009082004 GranParadiso/3.0.14pre on Linux, I get the same
result for both the URL and loading the files locally -- the red and blue
right borders are not visible.  Not sure if that's a bug or not, but you
have specified in transaccion.css:

.transaccion_imprimir {
   border: 1px dashed blue;
   position: relative;
   width: 25cm;
   height: 18cm;
}

.trans_contenedor {
   border: 1px dashed red;
   position: absolute;
   width: 24cm;
   height: 16cm;
   left: 0.5cm;
   top: 0.9cm;
}

I think those widths are too wide for A4 or US Letter sizes.

    
    

    
  
The page must be landscape and US letter size
https://bugzilla.mozilla.org/attachment.cgi?id=380977
but in my previus commentary I thinks now what is some add-on or my computer.
I'll try detect what made the problem

    
  
Whiteboard: CLOSEME 2009-08-30 → closeme 2009-08-30

    
  
Whiteboard: closeme 2009-08-30

    
    

    
  
Yes, I can confirm that the top is missing when the second page starts, even at reduced size. But I'd like a clean example just to be sure.

    
    

    
  
Also, I'm using 3.5

    
    

    
  
Ok I just checked from "Reporter's 2nd testcase" which is a copy of your lycos page and can confirm the problem still exists in 3.5.

    
  
Component: General → Print Preview
Product: Firefox → Core
QA Contact: general → printing
Version: 3.0 Branch → 1.9.1 Branch

    
    

    
  
Does the problem still occur in a recent version of Firefox ?
Flags: needinfo?(yourpadremb)

    
    

    
  
When I load attachment 386354 [details] in Firefox 36.0.1 in print preview with sheet size set to US letter (279.4mm wide by 215.9mm tall in orientation: landscape), I do *not* see the div (dashed blue border) from second page on (or in) first page.

The test in attachment 386354 [details] is definitely *not* a reduced test and I believe the calculations of dimensions (overconstrained) for printing are wrong. We definitely need a *_reduced_* test.

Right now, Firefox 36.0.1 passes each and all 'page-break-after: always' tests in CSS2.1 test suite:
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/chapter-13.htm#s13.3.1

    
    

    
  
When I load attachment 386354 [details] in Firefox 36.0.1 in print preview with sheet size set to US letter (279.4mm wide by 215.9mm tall in orientation: portrait and scale set to 40% or 50% or 60% or 70% or 80% or 90%), I do *not* see the div (dashed blue border) from second page on (or in) first page.

When I load attachment 386354 [details] in Firefox 36.0.1 in print preview with sheet size set to Tabloïd (279.4mm wide by 431.8mm tall in orientation: landscape and scale set to 100%), I do *not* see the div (dashed blue border) from second page on (or in) first page.

I can not confirm this bug. 

WORKSFORME

    
    

    
  
"User Agents must apply these properties to block-level elements in the normal flow of the root element."
CSS 2.1, section 13.3.1 on page-break-* properties
http://www.w3.org/TR/CSS21/page.html#propdef-page-break-after

relatively positioned elements like div.transaccion_imprimir and "position: absolute" elements like div.trans_contenedor and .transaccion_imprimir span are not in the normal flow of the root element by definition. This is another case where normal flow is best and would be better in place of absolute and relative positioning.

    
    

    
  
I loaded attachment 386354 [details] in Firefox 43.0.4 in print preview with various sheet sizes, with various scale percentages in both page orientations (dozen of configurations) and I now see the dashed blue border from div.transaccion_imprimir selector; I see the dashed blue border even when the div is taller than page height, making it appear on the following page. Therefore,

Resolving as WORKFORME
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Flags: needinfo?(yourpadremb)
Resolution: --- → WORKSFORME

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: