transform-applies-to-002.xht (1362B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Transform does not apply to non-replaced inline elements</title> 5 <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"/> 7 <link rel="match" href="reference/transform-applies-to-002-ref.xht"/> 8 <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-754" /> 9 <meta name="flags" content="ahem" /> 10 <meta name="assert" content="The 'transform' property does not apply to non-replaced inline elements."/> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style type="text/css"><![CDATA[ 13 div { 14 position: relative; 15 color: green; 16 } 17 div p { 18 width: 10em; 19 font-family: Ahem; 20 position: absolute; 21 top: 0; 22 left: 0; 23 line-height: 2; 24 } 25 #red span { 26 color: red; 27 } 28 #test span { 29 transform: rotate(90deg); 30 } 31 ]]></style> 32 </head> 33 <body> 34 <p> 35 You should see two lines of 5 green boxes each. You should see no 36 red. 37 </p> 38 <div> 39 <p id="red">X X <span>X X X X X X</span> X X</p> 40 <p id="test">X X <span>X X X X X X</span> X X</p> 41 </div> 42 </body> 43 </html>