place-items-computed.html (1902B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Box Alignment Level 3: getComputedStyle().placeItems</title> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> 7 <meta name="assert" content="place-items computed value is as specified."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <style> 12 #grandparent { 13 justify-items: legacy center; 14 } 15 #parent { 16 justify-items: legacy; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="grandparent"> 22 <div id="parent"> 23 <div id="target"></div> 24 </div> 25 <script> 26 test_computed_value("place-items", "normal"); 27 test_computed_value("place-items", "stretch stretch", "stretch"); 28 29 test_computed_value("place-items", "first baseline", "baseline"); 30 test_computed_value("place-items", "last baseline last baseline", "last baseline"); 31 32 test_computed_value("place-items", "center"); 33 test_computed_value("place-items", "end end", "end"); 34 test_computed_value("place-items", "self-start"); 35 test_computed_value("place-items", "flex-end"); 36 test_computed_value("place-items", "unsafe center unsafe center", "unsafe center"); 37 test_computed_value("place-items", "safe self-end"); 38 39 test_computed_value("place-items", "stretch baseline"); 40 test_computed_value("place-items", "last baseline center"); 41 test_computed_value("place-items", "safe self-end normal"); 42 43 test_computed_value("place-items", "normal right"); 44 test_computed_value("place-items", "baseline unsafe left"); 45 46 // When specified justify-items is legacy, computed value depends on inherited value. 47 test_computed_value("place-items", "flex-end legacy", "flex-end legacy center"); 48 test_computed_value("place-items", "stretch legacy left"); 49 test_computed_value("place-items", "first baseline right legacy", "baseline legacy right"); 50 </script> 51 </body> 52 </html>