justify-content_center.html (1350B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexible Box Test: justify-content_center</title> 5 <link rel="author" title="Intel" href="http://www.intel.com" /> 6 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> 7 <meta name="assert" content="Check if the web engine can identify the justify-content value center." /> 8 <style> 9 #test01, #test02, #test03{ 10 text-align:center; 11 font-size: 20px; 12 width: 30px; 13 } 14 #test01{ 15 background: #7FFF00; 16 } 17 #test02{ 18 background: #00FFFF; 19 } 20 #test03{ 21 background: #4169E1; 22 } 23 #test{ 24 background: #ff0000; 25 height: 200px; 26 width: 200px; 27 display: flex; 28 justify-content: center; 29 } 30 </style> 31 </head> 32 <body> 33 <p>Test passes if:<br> 34 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br> 35 2. the rectangle 1, 2, 3 appear in middle of red rectangle.<br> 36 3. equal amounts of empty space between the left edge of the red rectangle and ractangle 1 and between the right edge of the red rectangle and rectangle 3.<br> 37 4. the height of the 1, 2, 3 is the same as the height of the red rectangle.</p> 38 <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> 39 </body> 40 </html>