pseudo-005.xht (1523B)
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: Pseudo-classes and layout</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo" /> 7 <meta name="flags" content="interact may" /> 8 <meta name="assert" content="User agents are not required to reflow a currently displayed document due to pseudo-class transitions." /> 9 <style type="text/css"> 10 div 11 { 12 float: left; 13 width: 60px; 14 height: 60px; 15 } 16 #div1 17 { 18 background: blue; 19 } 20 #div1:hover 21 { 22 width: 300px; 23 height: 300px; 24 } 25 #div3 26 { 27 background: purple; 28 } 29 #div2 30 { 31 clear: left; 32 background: orange; 33 } 34 </style> 35 </head> 36 <body> 37 <p>PREREQUISITE: Hover over the blue box.</p> 38 <p>Test passes if the blue square width and height increase significantly.</p> 39 <p>When this happens, the purple and orange squares may or may not reflow.</p> 40 <div id="div1"></div> 41 <div id="div3"></div> 42 <div id="div2"></div> 43 </body> 44 </html>