parse-justify-self-002.html (2392B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Self-Alignment: justify-self - 'initial' value</title> 4 <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" /> 7 <link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> 8 <meta name="assert" content="Check the 'initial' value in different scenarios."/> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/css-align/resources/alignment-parsing-utils.js"></script> 12 <div id="log"></div> 13 <script> 14 container = document.createElement("div"); 15 element = document.createElement("div"); 16 container.appendChild(element); 17 document.body.appendChild(container); 18 19 test(function() { 20 element = document.createElement("div"); 21 document.body.appendChild(element); 22 checkValues(element, "justifySelf", "justify-self", "", "auto"); 23 }, "Test 'initial' value when nothing is specified"); 24 25 test(function() { 26 container.style.display = ""; 27 checkInitialValues(element, "justifySelf", "justify-self", "center", "auto"); 28 }, "Test justify-self: 'initial'"); 29 30 test(function() { 31 container.style.display = "grid"; 32 checkInitialValues(element, "justifySelf", "justify-self", "safe start", "auto"); 33 }, "Test grid items justify-self: 'initial'"); 34 35 test(function() { 36 container.style.display = "flex"; 37 checkInitialValues(element, "justifySelf", "justify-self", "unsafe end", "auto"); 38 }, "Test flex items justify-self: 'initial'"); 39 40 test(function() { 41 container.style.display = ""; 42 element.style.position = "absolute"; 43 checkInitialValues(element, "justifySelf", "justify-self", "start", "auto"); 44 }, "Test absolute positioned elements justify-self: 'initial'"); 45 46 test(function() { 47 container.style.display = "grid"; 48 element.style.position = "absolute"; 49 checkInitialValues(element, "justifySelf", "justify-self", "end", "auto"); 50 }, "Test absolute positioned grid items justify-self: 'initial'"); 51 52 test(function() { 53 container.style.display = "flex"; 54 element.style.position = "absolute"; 55 checkInitialValues(element, "justifySelf", "justify-self", "end", "auto"); 56 }, "Test absolute positioned flex items justify-self: 'initial'"); 57 </script>