LayoutTests/fast/css/parse-justify-self.html

<!DOCTYPE html>
<style>
#justifySelfBaseline {
    justify-self: baseline;
}

#justifySelfFirstBaseline {
    justify-self: first baseline;
}

#justifySelfLastBaseline {
    justify-self: last baseline;
}

#justifySelfStretch {
    justify-self: stretch;
}

#justifySelfNormal {
    justify-self: normal;
}

#justifySelfStart {
    justify-self: start;
}

#justifySelfEnd {
    justify-self: end;
}

#justifySelfCenter {
    justify-self: center;
}

#justifySelfSelfStart {
    justify-self: self-start;
}

#justifySelfSelfEnd {
    justify-self: self-end;
}

#justifySelfLeft {
    justify-self: left;
}

#justifySelfRight {
    justify-self: right;
}

#justifySelfFlexStart {
    justify-self: flex-start;
}

#justifySelfFlexEnd {
    justify-self: flex-end;
}

#justifySelfUnsafeEnd {
    justify-self: unsafe end ;
}

#justifySelfUnsafeCenter {
    justify-self: unsafe center ;
}

#justifySelfSafeSelfEnd {
    justify-self: safe self-end;
}

#justifySelfSafeSelfStart {
    justify-self: safe self-start;
}

#justifySelfSafeRight {
    justify-self: safe right;
}

#justifySelfUnsafeLeft {
    justify-self: unsafe left;
}

#justifySelfUnsafeFlexStart {
    justify-self: unsafe flex-start;
}

#justifySelfSafeFlexEnd {
    justify-self: safe flex-end;
}
</style>
<p>Test that setting and getting justify-self works as expected</p>
<div id="justifySelfBaseline"></div>
<div id="justifySelfFirstBaseline"></div>
<div id="justifySelfLastBaseline"></div>
<div id="justifySelfStretch"></div>
<div id="justifySelfNormal"></div>
<div id="justifySelfStart"></div>
<div id="justifySelfEnd"></div>
<div id="justifySelfCenter"></div>
<div id="justifySelfSelfStart"></div>
<div id="justifySelfSelfEnd"></div>
<div id="justifySelfLeft"></div>
<div id="justifySelfRight"></div>
<div id="justifySelfFlexStart"></div>
<div id="justifySelfFlexEnd"></div>

<div id="justifySelfUnsafeEnd"></div>
<div id="justifySelfUnsafeCenter"></div>
<div id="justifySelfSafeSelfEnd"></div>
<div id="justifySelfSafeSelfStart"></div>
<div id="justifySelfSafeRight"></div>
<div id="justifySelfUnsafeLeft"></div>
<div id="justifySelfUnsafeFlexStart"></div>
<div id="justifySelfSafeFlexEnd"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/alignment-parsing-utils-th.js"></script>
<script>
test(function() {
    var justifySelfBaseline = document.getElementById("justifySelfBaseline");
    checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baseline");
    var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBaseline");
    checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "baseline");
    var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline");
    checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "last baseline");
    var justifySelfStretch = document.getElementById("justifySelfStretch");
    checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch");
    var justifySelfNormal = document.getElementById("justifySelfNormal");
    checkValues(justifySelfNormal, "justifySelf", "justify-self", "", "normal");
    var justifySelfStart = document.getElementById("justifySelfStart");
    checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
    var justifySelfEnd = document.getElementById("justifySelfEnd");
    checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end");
    var justifySelfCenter = document.getElementById("justifySelfCenter");
    checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center");
    var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
    checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end");
    var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
    checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-start");
    var justifySelfLeft = document.getElementById("justifySelfLeft");
    checkValues(justifySelfLeft, "justifySelf", "justify-self", "", "left");
    var justifySelfRight = document.getElementById("justifySelfRight");
    checkValues(justifySelfRight, "justifySelf", "justify-self", "", "right");
    var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
    checkValues(justifySelfFlexStart, "justifySelf", "justify-self", "", "flex-start");
    var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
    checkValues(justifySelfFlexEnd, "justifySelf", "justify-self", "", "flex-end");

    var justifySelfUnsafeEnd = document.getElementById("justifySelfUnsafeEnd");
    checkValues(justifySelfUnsafeEnd, "justifySelf", "justify-self", "", "unsafe end");
    var justifySelfUnsafeCenter = document.getElementById("justifySelfUnsafeCenter");
    checkValues(justifySelfUnsafeCenter, "justifySelf", "justify-self", "", "unsafe center");
    var justifySelfSafeSelfEnd = document.getElementById("justifySelfSafeSelfEnd");
    checkValues(justifySelfSafeSelfEnd, "justifySelf", "justify-self", "", "safe self-end");
    var justifySelfSafeSelfStart = document.getElementById("justifySelfSafeSelfStart");
    checkValues(justifySelfSafeSelfStart, "justifySelf", "justify-self", "", "safe self-start");
    var justifySelfSafeRight = document.getElementById("justifySelfSafeRight");
    checkValues(justifySelfSafeRight, "justifySelf", "justify-self", "", "safe right");
    var justifySelfUnsafeLeft = document.getElementById("justifySelfUnsafeLeft");
    checkValues(justifySelfUnsafeLeft, "justifySelf", "justify-self", "", "unsafe left");
    var justifySelfUnsafeFlexStart = document.getElementById("justifySelfUnsafeFlexStart");
    checkValues(justifySelfUnsafeFlexStart, "justifySelf", "justify-self", "", "unsafe flex-start");
    var justifySelfSafeFlexEnd = document.getElementById("justifySelfSafeFlexEnd");
    checkValues(justifySelfSafeFlexEnd, "justifySelf", "justify-self", "", "safe flex-end");
}, "Test getting justify-self set through CSS.");

test(function() {
    element = document.createElement("div");
    document.body.appendChild(element);
    checkValues(element, "justifySelf", "justify-self", "", "auto");
}, "Test initial value of justify-self through JS");

test(function() {
    container = document.createElement("div");
    element = document.createElement("div");
    container.appendChild(element);
    document.body.appendChild(container);
    element.style.justifySelf = "center";
    checkValues(element, "justifySelf", "justify-self",  "center", "center");

    element.style.justifySelf = "unsafe start";
    checkValues(element, "justifySelf", "justify-self",  "unsafe start", "unsafe start");

    element.style.justifySelf = "safe flex-end";
    checkValues(element, "justifySelf", "justify-self",  "safe flex-end", "safe flex-end");

    element.style.justifySelf = "right";
    checkValues(element, "justifySelf", "justify-self",  "right", "right");

    element.style.justifySelf = "center";
    checkValues(element, "justifySelf", "justify-self",  "center", "center");

    element.style.justifySelf = "self-start";
    checkValues(element, "justifySelf", "justify-self",  "self-start", "self-start");

    element.style.justifySelf = "normal";
    checkValues(element, "justifySelf", "justify-self",  "normal", "normal");

    element.style.justifySelf = "auto";
    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");

    container.style.display = "flex";
    element.style.justifySelf = "auto";
    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");

    container.style.display = "grid";
    element.style.justifySelf = "auto";
    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");

    element.style.justifySelf = "self-end";
    checkValues(element, "justifySelf", "justify-self",  "self-end", "self-end");
}, "Test getting and setting justify-self through JS");

test(function() {
    document.documentElement.style.justifySelf = "auto";
    checkValues(document.documentElement, "justifySelf", "justify-self",  "auto", "auto");
}, "Test 'auto' value resolution for the root node");

test(function() {
    container = document.createElement("div");
    element = document.createElement("div");
    container.appendChild(element);
    document.body.appendChild(container);

    checkBadValues(element, "justifySelf", "justify-self",  "auto safe");
    checkBadValues(element, "justifySelf", "justify-self",  "auto left");
    checkBadValues(element, "justifySelf", "justify-self",  "normal unsafe");
    checkBadValues(element, "justifySelf", "justify-self",  "normal stretch");
    checkBadValues(element, "justifySelf", "justify-self",  "baseline normal");
    checkBadValues(element, "justifySelf", "justify-self",  "baseline safe");
    checkBadValues(element, "justifySelf", "justify-self",  "baseline center");
    checkBadValues(element, "justifySelf", "justify-self",  "first baseline center");
    checkBadValues(element, "justifySelf", "justify-self",  "last baseline center");
    checkBadValues(element, "justifySelf", "justify-self",  "baseline last");
    checkBadValues(element, "justifySelf", "justify-self",  "baseline first");
    checkBadValues(element, "justifySelf", "justify-self",  "stretch unsafe");
    checkBadValues(element, "justifySelf", "justify-self",  "stretch right");
    checkBadValues(element, "justifySelf", "justify-self",  "unsafe unsafe");
    checkBadValues(element, "justifySelf", "justify-self",  "unsafe safe");
    checkBadValues(element, "justifySelf", "justify-self",  "center start");
    checkBadValues(element, "justifySelf", "justify-self",  "stretch unsafe");
    checkBadValues(element, "justifySelf", "justify-self",  "safe stretch");
    checkBadValues(element, "justifySelf", "justify-self",  "baseline safe");
    checkBadValues(element, "justifySelf", "justify-self",  "unsafe baseline");
    checkBadValues(element, "justifySelf", "justify-self",  "unsafe safe left");
    checkBadValues(element, "justifySelf", "justify-self",  "unsafe left safe");
    checkBadValues(element, "justifySelf", "justify-self",  "left safe unsafe safe");
    checkBadValues(element, "justifySelf", "justify-self",  "legacy start");
    checkBadValues(element, "justifySelf", "justify-self",  "legacy end");
    checkBadValues(element, "justifySelf", "justify-self",  "legacy right unsafe");
    checkBadValues(element, "justifySelf", "justify-self",  "legacy auto");
    checkBadValues(element, "justifySelf", "justify-self",  "legacy stretch");
    checkBadValues(element, "justifySelf", "justify-self",  "legacy");
    checkBadValues(element, "justifySelf", "justify-self",  "legacy left right");
    checkBadValues(element, "justifySelf", "justify-self",  "start safe");
    checkBadValues(element, "justifySelf", "justify-self",  "end unsafe");
}, "Test bad combinations of justify-self");

test(function() {
    container.style.display = "";
    checkInitialValues(element, "justifySelf", "justify-self", "center", "auto");
}, "Test the value 'initial'");

test(function() {
    container.style.display = "grid";
    checkInitialValues(element, "justifySelf", "justify-self", "safe left", "auto");
}, "Test the value 'initial' for grid containers");

test(function() {
    container.style.display = "flex";
    checkInitialValues(element, "justifySelf", "justify-self", "unsafe right", "auto");
}, "Test the value 'initial' for flex containers");

test(function() {
    container.style.display = "";
    element.style.position = "absolute";
    checkInitialValues(element, "justifySelf", "justify-self", "left", "auto");
}, "Test the value 'initial' for positioned elements");

test(function() {
    container.style.display = "grid";
    element.style.position = "absolute";
    checkInitialValues(element, "justifySelf", "justify-self", "right", "auto");
}, "Test the value 'initial' for positioned elements in grid containers");

test(function() {
    container.style.display = "flex";
    element.style.position = "absolute";
    checkInitialValues(element, "justifySelf", "justify-self", "end", "auto");
}, "Test the value 'initial' for positioned elements in grid containers 2");

test(function() {
    checkInheritValues("justifySelf", "justify-self", "end");
    checkInheritValues("justifySelf", "justify-self", "safe left");
    checkInheritValues("justifySelf", "justify-self", "unsafe center");
}, "Test the value 'inherit'");
</script>