quotes-036

CSS and Quotes: Counting Right (Evil Version)

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
may

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <link rel="reference" href="quotes-035-ref.xht">
 5   <title>CSS Test: CSS and Quotes: Counting Right (Evil Version)</title>
 6   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 7   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/quotes/002.xml" type="application/xhtml+xml">
 8   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#quotes">
 9   <meta name="flags" content="may">
10   <style type="text/css">
11   
12      .party1 * { display: inline; }
13      .party1 .a { quotes: "Isn"        "'"
14                           "t"          "FAIL!"
15                           "FAIL!"      " i"; }
16      .party1 .b { quotes: ""           "FAIL!!" 
17                           " wonderful" "!!!"
18                           " to "       " work"
19                           "see "       " [FAIL to]"
20                           "C"          "quotes"
21                           "S"          " "; }
22      .party1 .c { quotes: none; }
23      .party1 .d { quotes: "FAIL!"      "FAIL!"
24                           "FAIL!"      "FAIL!"
25                           ""           ""; }
26      .test { margin-left: 2em; }
27      .test .no-open:before { content: no-open-quote; }
28      .test .open:before { content: open-quote; }
29      .test .triple-open:before { content: open-quote open-quote open-quote; }
30      .test .no-close:after { content: no-close-quote; }
31      .test .triple-no-close:after { content: no-close-quote no-close-quote no-close-quote; }
32      .test .close:after { content: close-quote; }
33      .test .triple-close:after { content: close-quote close-quote close-quote; }
34      .test .no-close-open:before { content: no-close-quote open-quote; }
35 
36      /* hr br */
37      .test hr, .test br { display: inline; margin: 0; padding: 0;
38        height: auto; width: auto; border: none; color: inherit;
39        background: transparent; }
40      .test br:before { content: "" }
41      .test br:after { content: "" }
42   
43   </style>
44  </head>
45  <body>
46 
47     <!--                                               Isn't it wonderful to see CSS quotes work!!! 
48     --><div class="test c party1"><!--               c 0
49      --><div class="a open close"><!-- open          a 1 isn                     
50      --></div><!-- close                             a 0 '                       
51      --><div class="a"><!--                          a 0                         
52       --><div class="c open"><!-- open               c 1                         
53        --><div class="a open"><!-- open              a 2 t                       
54        --></div><!--                                 a 2                         
55       --></div><!--                                  c 2                         
56       --><div class="no-open close"><!--             a 3 [FAIL!]                   
57       --></div><!-- close                            a 2 i                       
58      --></div><!--                                   a 2                         
59      --><div class="no-close-open no-close a"><!--   a 2 [FAIL!] t                         
60      --></div><!-- close                             a 1
61      --><div class="d no-open no-close"><!-- open    d 2 [FAIL!]                 
62       --><div class="open close"><!-- open           d 3                          
63        --><div class="open close"><!-- open          d 4                         
64        --></div><!-- close                           d 3                         
65       --></div><!-- close                            d 2                         
66      --></div><!-- close                             d 1 [FAIL!] 
67      --><div class="b no-close"><!--                 b 1                         
68       --><br class="triple-no-close"><!-- close     b 0 [FAIL!!]                  <<< EVIL
69       --><hr class="triple-open"><!-- open x 3      b 3 "", "wonderful ", "to "   <<< EVIL
70       --><br class="triple-open"><!-- open x 3      b 6 "see ", "C", "S"          <<< EVIL
71       --><div class="open close"><!-- open           b 7 S                       
72        --><div class="close"><!--                    b 7
73         --><div class="no-close"><!--                b 7                          
74          --><div class="close"><!--                  b 7                          
75           --><div class="no-close"><!--              b 7                           
76            --><div class="close"><!--                b 7                         
77            --></div><!-- close                       b 6 " "
78           --></div><!-- close                        b 5 [" "]                   
79          --></div><!-- close                         b 4  quotes                 
80         --></div><!-- close                          b 3 [ FAIL to]              
81        --></div><!-- close                           b 2  work                   
82       --></div><!-- close                            b 1 !!!                     
83      --></div><!-- close                             b 0 [FAIL!!]                  
84     --></div><!--                                    b 0
85     -->
86 
87  </body>
88 </html>