1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: :first-line pseudo-element - text-transform</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo">
10 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#caps-prop">
11 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#viewport">
12 <meta content="" name="flags">
13 <meta content="The :first-line pseudo-element can be attached to an unordered list because it is a block-level element. The "first formatted line" of an unordered list occurs inside its first list-item because it is a non-positioned and non-floated block-level descendant in the same flow. User agents may change the document's layout (preferred behavior but nonetheless optional) when the viewport is resized." name="assert">
14
15 <style type="text/css">
16 ul:first-line
17 {
18 text-transform: uppercase;
19 }
20 </style>
21
22 </head>
23
24 <body>
25
26 <p>Test passes if the first line (and only the first line) of the first list-item (a latin paragraph starting with "Lorem ipsum...") below has all characters of each word in uppercase. This may still be true after changing the window size.</p>
27
28 <ul>
29 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse metus nibh, sodales at interdum a, commodo vitae nisl. Curabitur cursus rutrum urna et tempus. Proin purus lectus, lobortis id pharetra lacinia, porta in mauris. Nunc ultricies tincidunt velit, at sollicitudin tortor vulputate tempor. Cras consequat mauris ac neque tempor rhoncus. Quisque at nisi nisl. Integer convallis sodales sem quis euismod. Aliquam ornare purus libero, vel cursus nunc.</li>
30
31 <li>Aliquam non velit et tellus dignissim tincidunt non eget metus. Quisque convallis dui odio. Sed eleifend, velit at consectetur interdum, nunc est feugiat nisi, nec tristique augue erat nec elit. Duis semper tellus non mi ornare gravida. Integer a tortor et ante ornare elementum. Nam tempor placerat nisi, sed interdum urna eleifend non. Sed fermentum nisl a arcu hendrerit sagittis. Aliquam suscipit laoreet justo, et tincidunt eros tempus eu.</li>
32 </ul>
33
34 </body>
35 </html>