Some whitespace relating testing with jadejs

test.html

<div class="test"><!-- Adding text using | results in a newline AFTER (not before) each line-->foo
bar
baz
</div>

<div class="test"><!--I thought I could use extra | lines to insert additional whitespace but
this currently outputs | characters into the result.
-->|
foo
|
bar
|
baz
|
</div>

<div class="test"><!--Putting elements inside a span results in no whitespace
between elements or at the start/end of the text
Using spans is an alternative to using | if you don't
want whitespace in the text.
--><span class="foo">foo</span><span class="bar">bar</span><span class="baz">baz</span></div>

<div class="test"><!--Leading whitespace on the same line is trimmed
--><span class="foo">foo</span><span class="bar">bar</span><span class="baz">baz</span></div>

<div class="test"><!--Adding text using | adds a newline just before each close tag (but not after the span itself)
--><span class="foo">foo
</span><span class="bar">bar
</span><span class="baz">baz
</span></div>

<div class="test"><!--Using javascript evaluation we can explicitly put whitespace INSIDE the tags
--><span class="foo"> foo </span><span class="bar"> bar</span><span class="baz">baz </span></div>

<div class="test"><!--Using javascript strings we can explicitly put whitespace BETWEEN the tags, too
--><span class="foo">foo</span> <span class="bar">bar</span> <span class="baz">baz</span></div>

<div class="test"><!--Putting some text on the first line and using | to add additional lines will not place
any whitespace between the first text and subsequent text, which is not what I would have hoped for.
--><span>foobar
baz
</span></div>

test.jade

.test
   // Adding text using | results in a newline AFTER (not before) each line
   | foo
   | bar
   | baz
= '\r\n\r\n'
.test

   //
    | I thought I could use extra | lines to insert additional whitespace but
    | this currently outputs | characters into the result.
   |
   | foo
   |
   | bar
   |
   | baz
   |
= '\r\n\r\n'
.test
   //
    | Putting elements inside a span results in no whitespace
    | between elements or at the start/end of the text
    | Using spans is an alternative to using | if you don't
    | want whitespace in the text.
   span.foo foo
   span.bar bar
   span.baz baz
= '\r\n\r\n'
.test
   //
    | Leading whitespace on the same line is trimmed
   span.foo  foo
   span.bar  bar
   span.baz  baz
= '\r\n\r\n'
.test
   //
    | Adding text using | adds a newline just before each close tag (but not after the span itself)
   span.foo
    | foo
   span.bar
    | bar
   span.baz
    | baz
= '\r\n\r\n'
.test
   //
    | Using javascript evaluation we can explicitly put whitespace INSIDE the tags
   span.foo
    = ' foo '
   span.bar
    = ' bar'
   span.baz
    = 'baz '
= '\r\n\r\n'
.test
   //
    | Using javascript strings we can explicitly put whitespace BETWEEN the tags, too
   span.foo foo
   =' '
   span.bar bar
   =' '
   span.baz baz
= '\r\n\r\n'
.test
   //
    | Putting some text on the first line and using | to add additional lines will not place
    | any whitespace between the first text and subsequent text, which is not what I would have hoped for.
   span foo
    | bar
    | baz