slim 1.3.2 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -283,22 +283,6 @@ p(id="marvin" class="martian" data-info="Illudium Q-36")= output_number
283
283
  assert_html '<p class="martian" data-info="Illudium Q-36" id="marvin">1337</p>', source
284
284
  end
285
285
 
286
- def test_static_empty_attribute
287
- source = %q{
288
- p(id="marvin" class="" data-info="Illudium Q-36")= output_number
289
- }
290
-
291
- assert_html '<p class="" data-info="Illudium Q-36" id="marvin">1337</p>', source
292
- end
293
-
294
- def test_dynamic_empty_attribute
295
- source = %q{
296
- p(id="marvin" class=nil nonempty=("".to_s) data-info="Illudium Q-36")= output_number
297
- }
298
-
299
- assert_html '<p data-info="Illudium Q-36" id="marvin" nonempty="">1337</p>', source
300
- end
301
-
302
286
  def test_closed_tag
303
287
  source = %q{
304
288
  closed/
@@ -57,8 +57,8 @@ html
57
57
  <style type="text/css">
58
58
  body {
59
59
  background-color: red;
60
- }
61
- </style>
60
+ }
61
+ </style>
62
62
  </head>
63
63
  <body>
64
64
  <div id="container">
@@ -0,0 +1,830 @@
1
+ # Slim test suite
2
+
3
+ You can run this testsuite with `rake test:literate`.
4
+
5
+ We use pretty mode in the test suite to make the output more readable. Pretty mode
6
+ is enabled by setting the option
7
+
8
+ ~~~ options
9
+ :pretty => true
10
+ ~~~
11
+
12
+ ## Line indicators
13
+
14
+ In this section we test all line indicators.
15
+
16
+ ### Text `|`
17
+
18
+ A text blocks starts with the `|` as line indicator.
19
+
20
+ ~~~ slim
21
+ | Text block
22
+ ~~~
23
+
24
+ renders as
25
+
26
+ ~~~ html
27
+ Text block
28
+ ~~~
29
+
30
+ Multiple lines can be indented beneath the first text line.
31
+
32
+ ~~~ slim
33
+ | Text
34
+ block
35
+
36
+ with
37
+
38
+ multiple
39
+ lines
40
+ ~~~
41
+
42
+ renders as
43
+
44
+ ~~~ html
45
+ Text
46
+ block
47
+
48
+ with
49
+
50
+ multiple
51
+ lines
52
+ ~~~
53
+
54
+ The first line of a text block determines the indentation.
55
+
56
+ ~~~ slim
57
+ |
58
+
59
+ Text
60
+ block
61
+
62
+ with
63
+
64
+ multiple
65
+ lines
66
+ ~~~
67
+
68
+ renders as
69
+
70
+ ~~~ html
71
+ Text
72
+ block
73
+
74
+ with
75
+
76
+ multiple
77
+ lines
78
+ ~~~
79
+
80
+ You can nest text blocks beneath tags.
81
+
82
+ ~~~ slim
83
+ body
84
+ | Text
85
+ ~~~
86
+
87
+ renders as
88
+
89
+ ~~~ html
90
+ <body>Text</body>
91
+ ~~~
92
+
93
+ You can embed html code in the text which is not escaped.
94
+
95
+ ~~~ slim
96
+ | <a href="http://slim-lang.com">slim-lang.com</a>
97
+ ~~~
98
+
99
+ renders as
100
+
101
+ ~~~ html
102
+ <a href="http://slim-lang.com">slim-lang.com</a>
103
+ ~~~
104
+
105
+ ### Text with trailing white space `'`
106
+
107
+ A text blocks with trailing white space starts with the `'` as line indicator.
108
+
109
+ ~~~ slim
110
+ ' Text block
111
+ ~~~
112
+
113
+ renders as
114
+
115
+ ~~~ html
116
+ Text block
117
+ ~~~
118
+
119
+ This is especially useful if you use tags behind a text block.
120
+
121
+ ~~~ slim
122
+ ' Link to
123
+ a href="http://slim-lang.com" slim-lang.com
124
+ ~~~
125
+
126
+ renders as
127
+
128
+ ~~~ html
129
+ Link to <a href="http://slim-lang.com">slim-lang.com</a>
130
+ ~~~
131
+
132
+ Multiple lines can be indented beneath the first text line.
133
+
134
+ ~~~ slim
135
+ ' Text
136
+ block
137
+
138
+ with
139
+
140
+ multiple
141
+ lines
142
+ ~~~
143
+
144
+ renders as
145
+
146
+ ~~~ html
147
+ Text
148
+ block
149
+
150
+ with
151
+
152
+ multiple
153
+ lines
154
+ ~~~
155
+
156
+ The first line of a text block determines the indentation.
157
+
158
+ ~~~ slim
159
+ '
160
+
161
+ Text
162
+ block
163
+
164
+ with
165
+
166
+ multiple
167
+ lines
168
+ ~~~
169
+
170
+ renders as
171
+
172
+ ~~~ html
173
+ Text
174
+ block
175
+
176
+ with
177
+
178
+ multiple
179
+ lines
180
+ ~~~
181
+
182
+ ### Inline HTML `<`
183
+
184
+ HTML can be written directly.
185
+
186
+ ~~~ slim
187
+ <a href="http://slim-lang.com">slim-lang.com</a>
188
+ ~~~
189
+
190
+ renders as
191
+
192
+ ~~~ html
193
+ <a href="http://slim-lang.com">slim-lang.com</a>
194
+ ~~~
195
+
196
+ HTML tags allow nested blocks inside.
197
+
198
+ ~~~ slim
199
+ <html>
200
+ <head>
201
+ title Example
202
+ </head>
203
+ body
204
+ - if true
205
+ | yes
206
+ - else
207
+ | no
208
+ </html>
209
+ ~~~
210
+
211
+ renders as
212
+
213
+ ~~~ html
214
+ <html><head><title>Example</title></head><body>yes</body></html>
215
+ ~~~
216
+
217
+ ### Control code `-`
218
+
219
+ The dash `-` denotes arbitrary control code.
220
+
221
+ ~~~ slim
222
+ - greeting = 'Hello, World!'
223
+ - if false
224
+ | Not true
225
+ - else
226
+ = greeting
227
+ ~~~
228
+
229
+ renders as
230
+
231
+ ~~~ html
232
+ Hello, World!
233
+ ~~~
234
+
235
+ Complex code can be broken with backslash `\`.
236
+
237
+ ~~~ slim
238
+ - greeting = 'Hello, '+\
239
+ \
240
+ 'World!'
241
+ - if false
242
+ | Not true
243
+ - else
244
+ = greeting
245
+ ~~~
246
+
247
+ renders as
248
+
249
+ ~~~ html
250
+ Hello, World!
251
+ ~~~
252
+
253
+ ### Output `=`
254
+
255
+ The equal sign `=` produces dynamic output.
256
+
257
+ ~~~ slim
258
+ = 7*7
259
+ ~~~
260
+
261
+ renders as
262
+
263
+ ~~~ html
264
+ 49
265
+ ~~~
266
+
267
+ Dynamic output is escaped by default.
268
+
269
+ ~~~ slim
270
+ = '<script>evil();</script>'
271
+ ~~~
272
+
273
+ renders as
274
+
275
+ ~~~ html
276
+ &lt;script&gt;evil();&lt;/script&gt;
277
+ ~~~
278
+
279
+ Long code lines can be broken with `\`.
280
+
281
+ ~~~ slim
282
+ = (0..10).map do |i|\
283
+ 2**i \
284
+ end.join(', ')
285
+ ~~~
286
+
287
+ renders as
288
+
289
+ ~~~ html
290
+ 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024
291
+ ~~~
292
+
293
+ You can also disable HTML escaping globally by setting the option
294
+
295
+ ~~~ options
296
+ :disable_escape => true
297
+ ~~~
298
+
299
+ ~~~ slim
300
+ = '<script>evil();</script>'
301
+ ~~~
302
+
303
+ renders as
304
+
305
+ ~~~ html
306
+ <script>evil();</script>
307
+ ~~~
308
+
309
+ ### Output with trailing white space `='`
310
+
311
+ The equal sign with apostrophe `='` produces dynamic output with a trailing white space.
312
+
313
+ ~~~ slim
314
+ =' 7*7
315
+ ~~~
316
+
317
+ renders as
318
+
319
+ ~~~ html
320
+ 49
321
+ ~~~
322
+
323
+ ### Output without HTML escaping `==`
324
+
325
+ The double equal sign `==` produces dynamic output without HTML escaping.
326
+
327
+ ~~~ slim
328
+ == '<script>evil();</script>'
329
+ ~~~
330
+
331
+ renders as
332
+
333
+ ~~~ html
334
+ <script>evil();</script>
335
+ ~~~
336
+
337
+ The option option
338
+
339
+ ~~~ options
340
+ :disable_escape => true
341
+ ~~~
342
+
343
+ doesn't affect the output of `==`.
344
+
345
+ ~~~ slim
346
+ == '<script>evil();</script>'
347
+ ~~~
348
+
349
+ renders as
350
+
351
+ ~~~ html
352
+ <script>evil();</script>
353
+ ~~~
354
+
355
+ ### Output without HTML escaping and trailing ws `=='`
356
+
357
+
358
+ The double equal sign with apostrophe `=='` produces dynamic output without HTML escaping and trailing white space.
359
+
360
+ ~~~ slim
361
+ ==' '<script>evil();</script>'
362
+ ~~~
363
+
364
+ renders as
365
+
366
+ ~~~ html
367
+ <script>evil();</script>
368
+ ~~~
369
+
370
+ The option option
371
+
372
+ ~~~ options
373
+ :disable_escape => true
374
+ ~~~
375
+
376
+ doesn't affect the output of `==`.
377
+
378
+ ~~~ slim
379
+ ==' '<script>evil();</script>'
380
+ ~~~
381
+
382
+ renders as
383
+
384
+ ~~~ html
385
+ <script>evil();</script>
386
+ ~~~
387
+
388
+ ### Code comment `/`
389
+
390
+ Code comments begin with `/` and produce no output.
391
+
392
+ ~~~ slim
393
+ / Comment
394
+ body
395
+ / Another comment
396
+ with
397
+
398
+ multiple lines
399
+ p Hello!
400
+ ~~~
401
+
402
+ renders as
403
+
404
+ ~~~ html
405
+ <body>
406
+ <p>Hello!</p>
407
+ </body>
408
+ ~~~
409
+
410
+ ### HTML comment `/!`
411
+
412
+ Code comments begin with `/!`.
413
+
414
+ ~~~ slim
415
+ /! Comment
416
+ body
417
+ /! Another comment
418
+ with multiple lines
419
+ p Hello!
420
+ /!
421
+ First line determines indentation
422
+
423
+ of the comment
424
+ ~~~
425
+
426
+ renders as
427
+
428
+ ~~~ html
429
+ <!--Comment-->
430
+ <body>
431
+ <!--Another comment
432
+ with multiple lines-->
433
+ <p>Hello!</p>
434
+ <!--First line determines indentation
435
+
436
+ of the comment-->
437
+ </body>
438
+ ~~~
439
+
440
+ ### IE conditional comment `/[...]`
441
+
442
+ ~~~ slim
443
+ /[if IE]
444
+ p Get a better browser.
445
+ ~~~
446
+
447
+ renders as
448
+
449
+ ~~~ html
450
+ <!--[if IE]><p>Get a better browser.</p><![endif]-->
451
+ ~~~
452
+
453
+ ## HTML tags
454
+
455
+ ### Doctype tags
456
+
457
+ The doctype tag is a special tag which can be used to generate the complex doctypes in a very simple way.
458
+
459
+ You can output the XML version using the doctype tag.
460
+
461
+ ~~~ slim
462
+ doctype xml
463
+ doctype xml ISO-8859-1
464
+ ~~~
465
+
466
+ renders as
467
+
468
+ ~~~ html
469
+ <?xml version="1.0" encoding="utf-8" ?>
470
+ <?xml version="1.0" encoding="iso-8859-1" ?>
471
+ ~~~
472
+
473
+ In XHTML mode the following doctypes are supported:
474
+
475
+ ~~~ slim
476
+ doctype html
477
+ doctype 5
478
+ doctype 1.1
479
+ doctype strict
480
+ doctype frameset
481
+ doctype mobile
482
+ doctype basic
483
+ doctype transitional
484
+ ~~~
485
+
486
+ renders as
487
+
488
+ ~~~ html
489
+ <!DOCTYPE html>
490
+ <!DOCTYPE html>
491
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
492
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
493
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
494
+ <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
495
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
496
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
497
+ ~~~
498
+
499
+ If we activate HTML mode with the option
500
+
501
+ ~~~ options
502
+ :format => :html
503
+ ~~~
504
+
505
+ the following doctypes are supported:
506
+
507
+ ~~~ slim
508
+ doctype html
509
+ doctype 5
510
+ doctype strict
511
+ doctype frameset
512
+ doctype transitional
513
+ ~~~
514
+
515
+ renders as
516
+
517
+ ~~~ html
518
+ <!DOCTYPE html>
519
+ <!DOCTYPE html>
520
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
521
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
522
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
523
+ ~~~
524
+
525
+ ### Closed tags
526
+
527
+ You can close tags explicitly by appending a trailing `/`.
528
+
529
+ ~~~ slim
530
+ div id="not-closed"
531
+ .closed/
532
+ #closed/
533
+ div id="closed"/
534
+ ~~~
535
+
536
+ renders as
537
+
538
+ ~~~ html
539
+ <div id="not-closed"></div>
540
+ <div class="closed" />
541
+ <div id="closed" />
542
+ <div id="closed" />
543
+ ~~~
544
+
545
+ Note, that this is usually not necessary since the standard html tags (img, br, ...) are closed automatically.
546
+
547
+ ~~~ slim
548
+ img src="image.png"
549
+ ~~~
550
+
551
+ renders as
552
+
553
+ ~~~ html
554
+ <img src="image.png" />
555
+ ~~~
556
+
557
+ ### Inline tags
558
+
559
+ Sometimes you may want to be a little more compact and inline the tags.
560
+
561
+ ~~~ slim
562
+ ul
563
+ li.first: a href="/first" First
564
+ li: a href="/second" Second
565
+ ~~~
566
+
567
+ renders as
568
+
569
+ ~~~ html
570
+ <ul>
571
+ <li class="first">
572
+ <a href="/first">First</a>
573
+ </li>
574
+ <li>
575
+ <a href="/second">Second</a>
576
+ </li>
577
+ </ul>
578
+ ~~~
579
+
580
+ For readability, don't forget you can wrap the attributes.
581
+
582
+ ~~~ slim
583
+ ul
584
+ li.first: a(href="/first") First
585
+ li: a(href="/second") Second
586
+ ~~~
587
+
588
+ renders as
589
+
590
+ ~~~ html
591
+ <ul>
592
+ <li class="first">
593
+ <a href="/first">First</a>
594
+ </li>
595
+ <li>
596
+ <a href="/second">Second</a>
597
+ </li>
598
+ </ul>
599
+ ~~~
600
+
601
+ ### Text content
602
+
603
+ ### Dynamic content `=`
604
+
605
+ ### Attributes
606
+
607
+ #### Attribute wrapper
608
+
609
+ If a delimiter makes the syntax more readable for you, you can use the characters `{...}`, `(...)`, `[...]` to wrap the attributes.
610
+
611
+ ~~~ slim
612
+ li
613
+ a(href="http://slim-lang.com" class="important") Link
614
+ li
615
+ a[href="http://slim-lang.com" class="important"] Link
616
+ li
617
+ a{href="http://slim-lang.com" class="important"} Link
618
+ ~~~
619
+
620
+ renders as
621
+
622
+ ~~~ html
623
+ <li>
624
+ <a class="important" href="http://slim-lang.com">Link</a>
625
+ </li>
626
+ <li>
627
+ <a class="important" href="http://slim-lang.com">Link</a>
628
+ </li>
629
+ <li>
630
+ <a class="important" href="http://slim-lang.com">Link</a>
631
+ </li>
632
+ ~~~
633
+
634
+ If you wrap the attributes, you can spread them across multiple lines:
635
+
636
+ ~~~ slim
637
+ a(href="http://slim-lang.com"
638
+
639
+ class="important") Link
640
+ ~~~
641
+
642
+ renders as
643
+
644
+ ~~~ html
645
+ <a class="important" href="http://slim-lang.com">Link</a>
646
+ ~~~
647
+
648
+ ~~~ slim
649
+ dl(
650
+ itemprop='address'
651
+ itemscope
652
+ itemtype='http://schema.org/PostalAddress'
653
+ )
654
+ ~~~
655
+
656
+ renders as
657
+
658
+ ~~~ html
659
+ <dl itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress"></dl>
660
+ ~~~
661
+
662
+ #### Quoted attributes
663
+
664
+ You can use single or double quotes for simple text attributes.
665
+
666
+ ~~~ slim
667
+ a href="http://slim-lang.com" title='Slim Homepage' Goto the Slim homepage
668
+ ~~~
669
+
670
+ renders as
671
+
672
+ ~~~ html
673
+ <a href="http://slim-lang.com" title="Slim Homepage">Goto the Slim homepage</a>
674
+ ~~~
675
+
676
+ You can use text interpolation in the quoted attributes:
677
+
678
+ ~~~ slim
679
+ - url='slim-lang.com'
680
+ a href="http://#{url}" Goto the #{url}
681
+ ~~~
682
+
683
+ renders as
684
+
685
+ ~~~ html
686
+ <a href="http://slim-lang.com">Goto the slim-lang.com</a>
687
+ ~~~
688
+
689
+ The attribute value will be escaped if the option
690
+
691
+ ~~~ options
692
+ :escape_quoted_attrs => true
693
+ ~~~
694
+
695
+ is set. Use == if you want to disable escaping in the attribute.
696
+
697
+ ~~~ slim
698
+ li
699
+ a href='&' Link
700
+ li
701
+ a href=="&amp;" Link
702
+ ~~~
703
+
704
+ renders as
705
+
706
+ ~~~ html
707
+ <li>
708
+ <a href="&amp;">Link</a>
709
+ </li>
710
+ <li>
711
+ <a href="&amp;">Link</a>
712
+ </li>
713
+ ~~~
714
+
715
+ #### Ruby attributes
716
+
717
+ #### Boolean attributes
718
+
719
+ The attribute values `true`, `false` and `nil` are interpreted as booleans.
720
+ If you use the attribut wrapper you can omit the attribute assigment.
721
+
722
+ ~~~ slim
723
+ - true_value1 = ""
724
+ - true_value2 = true
725
+ input type="text" disabled=true_value1
726
+ input type="text" disabled=true_value2
727
+ input type="text" disabled="disabled"
728
+ input type="text" disabled=true
729
+ input(type="text" disabled)
730
+ ~~~
731
+
732
+ renders as
733
+
734
+ ~~~ html
735
+ <input disabled="" type="text" /><input disabled="disabled" type="text" /><input disabled="disabled" type="text" /><input disabled="disabled" type="text" /><input disabled="disabled" type="text" />
736
+ ~~~
737
+
738
+ ~~~ slim
739
+ - false_value1 = false
740
+ - false_value2 = nil
741
+ input type="text" disabled=false_value1
742
+ input type="text" disabled=false_value2
743
+ input type="text"
744
+ input type="text" disabled=false
745
+ input type="text" disabled=nil
746
+ ~~~
747
+
748
+ renders as
749
+
750
+ ~~~ html
751
+ <input type="text" /><input type="text" /><input type="text" /><input type="text" /><input type="text" />
752
+ ~~~
753
+
754
+ #### Attribute merging
755
+
756
+ You can configure attributes to be merged if multiple are given (See option `:attr_delimiter`). In the default configuration
757
+ this is done for class attributes with the white space as delimiter.
758
+
759
+ ~~~ slim
760
+ a.menu class="highlight" href="http://slim-lang.com/" Slim-lang.com
761
+ ~~~
762
+
763
+ renders as
764
+
765
+ ~~~ html
766
+ <a class="menu highlight" href="http://slim-lang.com/">Slim-lang.com</a>
767
+ ~~~
768
+
769
+ You can also use an `Array` as attribute value and the array elements will be merged using the delimiter.
770
+
771
+ ~~~ slim
772
+ - classes = [:alpha, :beta]
773
+ span class=["first","highlight"] class=classes First
774
+ span class=:second,:highlight class=classes Second
775
+ ~~~
776
+
777
+ renders as
778
+
779
+ ~~~ html
780
+ <span class="first highlight alpha beta">First</span><span class="second highlight alpha beta">Second</span>
781
+ ~~~
782
+
783
+ #### Splat attributes `*`
784
+
785
+ #### ID shortcut and class shortcut `.`
786
+
787
+ #### Attribute shortcuts
788
+
789
+ We add `&` to create a shortcut for the input elements with type attribute by setting the option `:shortcut`.
790
+
791
+ ~~~ options
792
+ :shortcut => {'&' => 'input type', '#' => 'id', '.' => 'class' }
793
+ ~~~
794
+
795
+ ~~~ slim
796
+ &text name="user"
797
+ &password name="pw"
798
+ &submit
799
+ ~~~
800
+
801
+ renders to
802
+
803
+ ~~~ html
804
+ <input name="user" type="text" /><input name="pw" type="password" /><input type="submit" />
805
+ ~~~
806
+
807
+ ## Text interpolation
808
+
809
+ Use standard Ruby interpolation. The text will be html escaped by default.
810
+
811
+ ~~~ slim
812
+ - user="John Doe <john@doe.net>"
813
+ h1 Welcome #{user}!
814
+ ~~~
815
+
816
+ renders as
817
+
818
+ ~~~ html
819
+ <h1>Welcome John Doe &lt;john@doe.net&gt;!</h1>
820
+ ~~~
821
+
822
+ ## Embedded engines
823
+
824
+ ## Configuring Slim
825
+
826
+ ## Plugins
827
+
828
+ ### Logic less mode
829
+
830
+ ### Translator