LayoutTests/css3/parse-align-self.html

<!DOCTYPE html>
<style>
#alignSelfBaseline {
    align-self: baseline;
}

#alignSelfFirstBaseline {
    align-self: first baseline;
}

#alignSelfLastBaseline {
    align-self: last baseline;
}

#alignSelfStretch {
    align-self: stretch;
}

#alignSelfNormal {
    align-self: normal;
}

#alignSelfStart {
    align-self: start;
}

#alignSelfEnd {
    align-self: end;
}

#alignSelfCenter {
    align-self: center;
}

#alignSelfSelfStart {
    align-self: self-start;
}

#alignSelfSelfEnd {
    align-self: self-end;
}

#alignSelfFlexStart {
    align-self: flex-start;
}

#alignSelfFlexEnd {
    align-self: flex-end;
}

#alignSelfUnsafeEnd {
    align-self: unsafe end ;
}

#alignSelfUnsafeCenter {
    align-self: unsafe center ;
}

#alignSelfSafeSelfEnd {
    align-self: safe self-end;
}

#alignSelfSafeSelfStart {
    align-self: safe self-start;
}

#alignSelfUnsafeFlexStart {
    align-self: unsafe flex-start;
}

#alignSelfSafeFlexEnd {
    align-self: safe flex-end;
}
</style>
<p>Test that setting and getting align-self works as expected</p>
<div id="alignSelfBaseline"></div>
<div id="alignSelfFirstBaseline"></div>
<div id="alignSelfLastBaseline"></div>
<div id="alignSelfStretch"></div>
<div id="alignSelfNormal"></div>
<div id="alignSelfStart"></div>
<div id="alignSelfEnd"></div>
<div id="alignSelfCenter"></div>
<div id="alignSelfSelfStart"></div>
<div id="alignSelfSelfEnd"></div>
<div id="alignSelfFlexStart"></div>
<div id="alignSelfFlexEnd"></div>

<div id="alignSelfUnsafeEnd"></div>
<div id="alignSelfUnsafeCenter"></div>
<div id="alignSelfSafeSelfEnd"></div>
<div id="alignSelfSafeSelfStart"></div>
<div id="alignSelfUnsafeFlexStart"></div>
<div id="alignSelfSafeFlexEnd"></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 alignSelfBaseline = document.getElementById("alignSelfBaseline");
    checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
    var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline");
    checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline");
    var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
    checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last baseline");
    var alignSelfStretch = document.getElementById("alignSelfStretch");
    checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
    var alignSelfNormal = document.getElementById("alignSelfNormal");
    checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal");
    var alignSelfStart = document.getElementById("alignSelfStart");
    checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
    var alignSelfEnd = document.getElementById("alignSelfEnd");
    checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
    var alignSelfCenter = document.getElementById("alignSelfCenter");
    checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
    var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
    checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
    var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
    checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start");
    var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
    checkValues(alignSelfFlexStart, "alignSelf", "align-self", "", "flex-start");
    var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
    checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end");

    var alignSelfUnsafeEnd = document.getElementById("alignSelfUnsafeEnd");
    checkValues(alignSelfUnsafeEnd, "alignSelf", "align-self", "", "unsafe end");
    var alignSelfUnsafeCenter = document.getElementById("alignSelfUnsafeCenter");
    checkValues(alignSelfUnsafeCenter, "alignSelf", "align-self", "", "unsafe center");
    var alignSelfSafeSelfEnd = document.getElementById("alignSelfSafeSelfEnd");
    checkValues(alignSelfSafeSelfEnd, "alignSelf", "align-self", "", "safe self-end");
    var alignSelfSafeSelfStart = document.getElementById("alignSelfSafeSelfStart");
    checkValues(alignSelfSafeSelfStart, "alignSelf", "align-self", "", "safe self-start");
    var alignSelfUnsafeFlexStart = document.getElementById("alignSelfUnsafeFlexStart");
    checkValues(alignSelfUnsafeFlexStart, "alignSelf", "align-self", "", "unsafe flex-start");
    var alignSelfSafeFlexEnd = document.getElementById("alignSelfSafeFlexEnd");
    checkValues(alignSelfSafeFlexEnd, "alignSelf", "align-self", "", "safe flex-end");
}, "Test getting align-self set through CSS.");

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

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

    element.style.alignSelf = "unsafe start";
    checkValues(element, "alignSelf", "align-self",  "unsafe start", "unsafe start");

    element.style.alignSelf = "safe flex-end";
    checkValues(element, "alignSelf", "align-self",  "safe flex-end", "safe flex-end");

    element.style.alignSelf = "center";
    checkValues(element, "alignSelf", "align-self",  "center", "center");

    element.style.alignSelf = "self-start";
    checkValues(element, "alignSelf", "align-self",  "self-start", "self-start");

    element.style.alignSelf = "normal";
    checkValues(element, "alignSelf", "align-self",  "normal", "normal");

    element.style.alignSelf = "auto";
    checkValues(element, "alignSelf", "align-self",  "auto", "auto");

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

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

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

test(function() {
    document.documentElement.style.alignSelf = "auto";
    checkValues(document.documentElement, "alignSelf", "align-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, "alignSelf", "align-self",  "left");
    checkBadValues(element, "alignSelf", "align-self",  "right");
    checkBadValues(element, "alignSelf", "align-self",  "safe auto");
    checkBadValues(element, "alignSelf", "align-self",  "auto left");
    checkBadValues(element, "alignSelf", "align-self",  "safe right");
    checkBadValues(element, "alignSelf", "align-self",  "normal unsafe");
    checkBadValues(element, "alignSelf", "align-self",  "normal stretch");
    checkBadValues(element, "alignSelf", "align-self",  "baseline normal");
    checkBadValues(element, "alignSelf", "align-self",  "baseline safe");
    checkBadValues(element, "alignSelf", "align-self",  "baseline center");
    checkBadValues(element, "alignSelf", "align-self",  "first baseline center");
    checkBadValues(element, "alignSelf", "align-self",  "last baseline center");
    checkBadValues(element, "alignSelf", "align-self",  "baseline last");
    checkBadValues(element, "alignSelf", "align-self",  "baseline first");
    checkBadValues(element, "alignSelf", "align-self",  "stretch unsafe");
    checkBadValues(element, "alignSelf", "align-self",  "stretch right");
    checkBadValues(element, "alignSelf", "align-self",  "unsafe unsafe");
    checkBadValues(element, "alignSelf", "align-self",  "unsafe safe");
    checkBadValues(element, "alignSelf", "align-self",  "center start");
    checkBadValues(element, "alignSelf", "align-self",  "stretch unsafe");
    checkBadValues(element, "alignSelf", "align-self",  "safe stretch");
    checkBadValues(element, "alignSelf", "align-self",  "baseline safe");
    checkBadValues(element, "alignSelf", "align-self",  "unsafe baseline");
    checkBadValues(element, "alignSelf", "align-self",  "unsafe safe left");
    checkBadValues(element, "alignSelf", "align-self",  "unsafe left safe");
    checkBadValues(element, "alignSelf", "align-self",  "left safe unsafe safe");
    checkBadValues(element, "alignSelf", "align-self",  "legacy start");
    checkBadValues(element, "alignSelf", "align-self",  "legacy end");
    checkBadValues(element, "alignSelf", "align-self",  "legacy right unsafe");
    checkBadValues(element, "alignSelf", "align-self",  "legacy auto");
    checkBadValues(element, "alignSelf", "align-self",  "legacy stretch");
    checkBadValues(element, "alignSelf", "align-self",  "legacy");
    checkBadValues(element, "alignSelf", "align-self",  "legacy left right");
    checkBadValues(element, "alignSelf", "align-self",  "start safe");
    checkBadValues(element, "alignSelf", "align-self",  "end unsafe");
}, "Test bad combinations of align-self");

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

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

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

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

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

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

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