inline-block-alignment-002-ref.xht (1558B)
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 Reftest Reference</title> 5 <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 6 <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-07-20 --> 7 <meta name="flags" content="image" /> 8 <style type="text/css"><![CDATA[ 9 img 10 { 11 vertical-align: top; 12 } 13 14 img 15 { 16 padding-left: 90px; /* 60 px (padding-left) + 30px (the position difference of box) */ 17 } 18 19 img + br + img 20 { 21 padding-left: 60px; /* 60 px (padding-left) */ 22 } 23 24 img + br + img + img 25 { 26 padding-left: 0; 27 } 28 29 img + br + img + img + br + img 30 { 31 padding-left: 105px; /* 60 px (padding-left) + 45px (the position difference of box) 32 } 33 ]]></style> 34 35 </head> 36 37 <body> 38 39 <p>Test passes if 2 orange squares are centered with respect to a blue square.</p> 40 41 <div> 42 <img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><!-- 43 --><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><!-- 44 --><img src="support/swatch-yellow.png" width="120" height="120" alt="Image download support must be enabled" /><br /><!-- 45 --><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div> 46 47 </body> 48 </html>