FF3/FF2 white-space: pre-wrap Testcase

This testcase demonstrates the rendering and selection copy differences between FF3 and FF2 with regard to the "white-space: pre-wrap" styling.

Notables:

  1. FF2 (and IE7) ignore "\n" characters in "white-space: pre-wrap" even tho the CSS 2.1 specification requires that they be honored. The "workaround" for this shortcoming is to add a <br /> at the end of each line.
  2. Using FF2 (and IE7), when lines are copied, the result contains a single "\n" at the end of each line as expected.
  3. FF3 now *correctly* follows the CSS 2.1 specification and honors "\n" when rendering "white-space: pre-wrap". HTML coded to "workaround" FF2 (and IE7) by adding a <br /> now appear "double-spaced".
  4. Now there is a very disturbing browser incompatibility :( and a new browser version check must be added.
  5. The first apparent solution is to remove the <br /> on Gecko rendering engines after say, 20080529. The rendering results are positive, but
  6. sadly, the copy selected text results are astonishing. Seemingly, the copy function is not honoring the "\n" character and lines sent to the cut buffer are missing "\n"...
  7. Soooo, to get FF3 to render AND copy like FF2, the "\n" must be removed and the FF2 (and IE7) hack that adds a <br /> employed to break lines.

To sumarize then, the rendering now follows CSS 2.1, but the selection copy to cutbuffer is nearly unchanged.

Lines in a plain <p>

ex 1

This is line 1 in a plain p with a br before a nl at the end of the line
This is line 2 in a plain p with a br before a nl at the end of the line
This is line 3 in a plain p with a br before a nl at the end of the line
This is line 4 in a plain p with a br before a nl at the end of the line

Lines in a plain <pre>

ex 2

This is line 1 in a plain pre with a nl at the end of the line
This is line 2 in a plain pre with a nl at the end of the line
This is line 3 in a plain pre with a nl at the end of the line
This is line 4 in a plain pre with a nl at the end of the line

Lines in a plain <div> with style="white-space: pre-wrap;"

NOTE: In FF3, newline characters are now honored in a style="white-space: pre-wrap".
If you're using ff2, ex 3 a will render as one long line and ex 3 b will render as "single-spaced" lines.
If you're using ff3, ex 3 a will render as "single-spaced" lines (with an extra blank line at the top) and ex 3 b will render as "double-spaced" lines (with an extra blank line at the top).

ex 3 a

This is line 1 in a styled div with a nl at the end of the line This is line 2 in a styled div with a nl at the end of the line This is line 3 in a styled div with a nl at the end of the line This is line 4 in a styled div with a nl at the end of the line

ex 3 b

This is line 1 in a styled div with a br and nl at the end of the line
This is line 2 in a styled div with a br and nl at the end of the line
This is line 3 in a styled div with a br and nl at the end of the line
This is line 4 in a styled div with a br and nl at the end of the line

Results

When these four lines are selected, copied, then pasted to a blank notepad, this is the result with FF3:

---- ex 1 - I added this line to delimit results
This is line 1 in a plain p with a br before a nl at the end of the line
This is line 2 in a plain p with a br before a nl at the end of the line
This is line 3 in a plain p with a br before a nl at the end of the line
This is line 4 in a plain p with a br before a nl at the end of the line
---- ex 1 - I added this line to delimit results

---- ex 2 - I added this line to delimit results
This is line 1 in a plain pre with a nl at the end of the line
This is line 2 in a plain pre with a nl at the end of the line
This is line 3 in a plain pre with a nl at the end of the line
This is line 4 in a plain pre with a nl at the end of the line

---- ex 2 - I added this line to delimit results

---- ex 3 a - I added this line to delimit results
This is line 1 in a styled div with a nl at the end of the line This is line 2 in a styled div with a nl at the end of the line This is line 3 in a styled div with a nl at the end of the line This is line 4 in a styled div with a nl at the end of the line
---- ex 3 a - I added this line to delimit results

---- ex 3 b - I added this line to delimit results
This is line 1 in a styled div with a br and nl at the end of the line
This is line 2 in a styled div with a br and nl at the end of the line
This is line 3 in a styled div with a br and nl at the end of the line
This is line 4 in a styled div with a br and nl at the end of the line
---- ex 3 b - I added this line to delimit results

When these four lines are selected, copied, then pasted to a blank notepad, this is the result with FF2:

---- ex 1 - I added this line to delimit results
This is line 1 in a plain p with a br before a nl at the end of the line
This is line 2 in a plain p with a br before a nl at the end of the line
This is line 3 in a plain p with a br before a nl at the end of the line
This is line 4 in a plain p with a br before a nl at the end of the line
---- ex 1 - I added this line to delimit results

---- ex 2 - I added this line to delimit results
This is line 1 in a plain pre with a nl at the end of the line
This is line 2 in a plain pre with a nl at the end of the line
This is line 3 in a plain pre with a nl at the end of the line
This is line 4 in a plain pre with a nl at the end of the line

---- ex 2 - I added this line to delimit results

---- ex 3 a - I added this line to delimit results
This is line 1 in a styled div with a nl at the end of the line This is line 2 in a styled div with a nl at the end of the line This is line 3 in a styled div with a nl at the end of the line This is line 4 in a styled div with a nl at the end of the line

---- ex 3 a - I added this line to delimit results

---- ex 3 b - I added this line to delimit results
This is line 1 in a styled div with a br and nl at the end of the line
This is line 2 in a styled div with a br and nl at the end of the line
This is line 3 in a styled div with a br and nl at the end of the line
This is line 4 in a styled div with a br and nl at the end of the line
---- ex 3 b - I added this line to delimit results