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>