parse-align-content.html | Explore in Territory

<!DOCTYPE html>
<style>
#alignContentAuto {
    align-content: auto;
}

#alignContentBaseline {
    align-content: baseline;
}

#alignContentFirstBaseline {
    align-content: first baseline;
}

#alignContentLastBaseline {
    align-content: last baseline;
}

#alignContentSpaceBetween {
    align-content: space-between;
}

#alignContentSpaceAround {
    align-content: space-around;
}

#alignContentSpaceEvenly {
    align-content: space-evenly;
}

#alignContentStretch {
    align-content: stretch;
}

#alignContentStart {
    align-content: start;
}

#alignContentEnd {
    align-content: end;
}

#alignContentCenter {
    align-content: center;
}


#alignContentFlexStart {
    align-content: flex-start;
}

#alignContentFlexEnd {
    align-content: flex-end;
}

#alignContentUnsafeEnd {
    align-content: unsafe end ;
}

#alignContentUnsafeCenter {
    align-content: unsafe center ;
}

#alignContentUnsafeFlexStart {
    align-content: unsafe flex-start;
}

#alignContentSafeFlexEnd {
    align-content: safe flex-end;
}

<!-- Invalid CSS cases -->
#alignContentSpaceBetweenLeft {
    align-content: space-between left;
}

#alignContentSpaceAroundCenter {
    align-content: space-around center;
}

#alignContentSpaceEvenlyRight {
    align-content: space-evenly right;
}

#alignContentStretchStartSafe {
    align-content: stretch start safe;
}

#alignContentSpaceAroundEndUnsafe {
    align-content: space-around end unsafe;
}

#alignContentSpaceEvenlyFlexStartSafe {
    align-content: space-evenly flex-start safe;
}

#alignContentSpaceBetweenSafe {
    align-content: space-between safe;
}

#alignContentSpaceBetweenStretch {
    align-content: space-between stretch;
}

#alignContentSafe {
    align-content: safe;
}

#alignContentRightSafeUnsafe {
    align-content: right safe unsafe;
}

#alignContentCenterLeft {
    align-content: center left;
}
</style>
<p>Test that setting and getting align-content works as expected</p>
<div id="alignContentAuto"></div>
<div id="alignContentBaseline"></div>
<div id="alignContentFirstBaseline"></div>
<div id="alignContentLastBaseline"></div>
<div id="alignContentSpaceBetween"></div>
<div id="alignContentSpaceAround"></div>
<div id="alignContentSpaceEvenly"></div>
<div id="alignContentStretch"></div>
<div id="alignContentStart"></div>
<div id="alignContentEnd"></div>
<div id="alignContentCenter"></div>
<div id="alignContentFlexStart"></div>
<div id="alignContentFlexEnd"></div>
<div id="alignContentUnsafeEnd"></div>
<div id="alignContentUnsafeCenter"></div>
<div id="alignContentSafeSelfEnd"></div>
<div id="alignContentSafeSelfStart"></div>
<div id="alignContentUnsafeFlexStart"></div>
<div id="alignContentSafeFlexEnd"></div>
<div id="alignContentEndUnsafe"></div>
<div id="alignContentCenterUnsafe"></div>
<div id="alignContentFlexStartUnsafe"></div>
<div id="alignContentFlexEndSafe"></div>

<div id="alignContentSpaceBetweenLeft"></div>
<div id="alignContentSpaceAroundCenter"></div>
<div id="alignContentSpaceEvenlyRight"></div>
<div id="alignContentStretchStartSafe"></div>
<div id="alignContentSpaceAroundEndUnsafe"></div>
<div id="alignContentSpaceEvenlyFlexStartSafe"></div>
<div id="alignContentSpaceBetweenSafe"></div>
<div id="alignContentSpaceBetweenStretch"></div>
<div id="alignContentSafe"></div>
<div id="alignContentRightSafeUnsafe"></div>
<div id="alignContentCenterLeft"></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 alignContentAuto = document.getElementById("alignContentAuto");
    checkValues(alignContentAuto, "alignContent", "align-content", "", "normal");
    var alignContentBaseline = document.getElementById("alignContentBaseline");
    checkValues(alignContentBaseline, "alignContent", "align-content", "", "baseline");
    var alignContentLastBaseline = document.getElementById("alignContentFirstBaseline");
    checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "baseline");
    var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
    checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "last baseline");
    var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
    checkValues(alignContentSpaceBetween, "alignContent", "align-content", "", "space-between");
    var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
    checkValues(alignContentSpaceAround, "alignContent", "align-content", "", "space-around");
    var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
    checkValues(alignContentSpaceEvenly, "alignContent", "align-content", "", "space-evenly");
    var alignContentStretch = document.getElementById("alignContentStretch");
    checkValues(alignContentStretch, "alignContent", "align-content", "", "stretch");
    var alignContentStart = document.getElementById("alignContentStart");
    checkValues(alignContentStart, "alignContent", "align-content", "", "start");
    var alignContentEnd = document.getElementById("alignContentEnd");
    checkValues(alignContentEnd, "alignContent", "align-content", "", "end");
    var alignContentCenter = document.getElementById("alignContentCenter");
    checkValues(alignContentCenter, "alignContent", "align-content", "", "center");
    var alignContentFlexStart = document.getElementById("alignContentFlexStart");
    checkValues(alignContentFlexStart, "alignContent", "align-content", "", "flex-start");
    var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
    checkValues(alignContentFlexEnd, "alignContent", "align-content", "", "flex-end");
    var alignContentUnsafeEnd = document.getElementById("alignContentUnsafeEnd");
    checkValues(alignContentUnsafeEnd, "alignContent", "align-content", "", "unsafe end");
    var alignContentUnsafeCenter = document.getElementById("alignContentUnsafeCenter");
    checkValues(alignContentUnsafeCenter, "alignContent", "align-content", "", "unsafe center");
    var alignContentUnsafeFlexStart = document.getElementById("alignContentUnsafeFlexStart");
    checkValues(alignContentUnsafeFlexStart, "alignContent", "align-content", "", "unsafe flex-start");
    var alignContentSafeFlexEnd = document.getElementById("alignContentSafeFlexEnd");
    checkValues(alignContentSafeFlexEnd, "alignContent", "align-content", "", "safe flex-end");
}, "Test getting align-content values previously set through CSS.");

test(function() {
    var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
    checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "normal");
    var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
    checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "normal");
    var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
    checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "normal");
    var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
    checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "normal");
    var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
    checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "normal");
    var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
    checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "normal");
    var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
    checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "normal");
    var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
    checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "normal");
    var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
    checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "normal");
    var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
    checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "normal");
    var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
    checkValues(alignContentSpaceBetweenSafe, "alignContent", "align-content", "", "normal");
    var alignContentSpaceBetweenStretch = document.getElementById("alignContentSpaceBetweenStretch");
    checkValues(alignContentSpaceBetweenStretch, "alignContent", "align-content", "", "normal");
    var alignContentSafe = document.getElementById("alignContentSafe");
    checkValues(alignContentSafe, "alignContent", "align-content", "", "normal");
    var alignContentRightSafeUnsafe = document.getElementById("alignContentRightSafeUnsafe");
    checkValues(alignContentRightSafeUnsafe, "alignContent", "align-content", "", "normal");
    var alignContentCenterLeft = document.getElementById("alignContentCenterLeft");
    checkValues(alignContentCenterLeft, "alignContent", "align-content", "", "normal");
}, "Test setting invalid values to align-content through CSS.");

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

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

    element.style.alignContent = "unsafe start";
    checkValues(element, "alignContent", "align-content",  "unsafe start", "unsafe start");

    element.style.alignContent = "safe flex-end";
    checkValues(element, "alignContent", "align-content",  "safe flex-end", "safe flex-end");

    element.style.alignContent = "unsafe end";
    checkValues(element, "alignContent", "align-content",  "unsafe end", "unsafe end");

    element.style.alignContent = "first baseline";
    checkValues(element, "alignContent", "align-content",  "baseline", "baseline");

    element.style.alignContent = "last baseline";
    checkValues(element, "alignContent", "align-content",  "last baseline", "last baseline");

    element.style.alignContent = "normal";
    checkValues(element, "alignContent", "align-content",  "normal", "normal");

    element.style.display = "flex";
    element.style.alignContent = "normal";
    checkValues(element, "alignContent", "align-content",  "normal", "normal");

    element.style.display = "grid";
    element.style.alignContent = "normal";
    checkValues(element, "alignContent", "align-content",  "normal", "normal");

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

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

    checkBadValues(element, "alignContent", "align-content",  "left");
    checkBadValues(element, "alignContent", "align-content",  "right");
    checkBadValues(element, "alignContent", "align-content",  "auto");
    checkBadValues(element, "alignContent", "align-content",  "unsafe auto");
    checkBadValues(element, "alignContent", "align-content",  "auto safe");
    checkBadValues(element, "alignContent", "align-content",  "auto left");
    checkBadValues(element, "alignContent", "align-content",  "safe left");
    checkBadValues(element, "alignContent", "align-content",  "unsafe right");
    checkBadValues(element, "alignContent", "align-content",  "baseline safe");
    checkBadValues(element, "alignContent", "align-content",  "last-baseline center");
    checkBadValues(element, "alignContent", "align-content",  "unsafe unsafe");
    checkBadValues(element, "alignContent", "align-content",  "unsafe safe");
    checkBadValues(element, "alignContent", "align-content",  "center start");
    checkBadValues(element, "alignContent", "align-content",  "baseline safe");
    checkBadValues(element, "alignContent", "align-content",  "unsafe baseline");
    checkBadValues(element, "alignContent", "align-content",  "unsafe safe left");
    checkBadValues(element, "alignContent", "align-content",  "unsafe left safe");
    checkBadValues(element, "alignContent", "align-content",  "left safe unsafe safe");
    checkBadValues(element, "alignContent", "align-content",  "start right space-between");
    checkBadValues(element, "alignContent", "align-content",  "safe stretch");
    checkBadValues(element, "alignContent", "align-content",  "normal space-between");
    checkBadValues(element, "alignContent", "align-content",  "stretch normal");
    checkBadValues(element, "alignContent", "align-content",  "stretch center");
    checkBadValues(element, "alignContent", "align-content",  "space-between right safe");
    checkBadValues(element, "alignContent", "align-content",  "normal safe");
    checkBadValues(element, "alignContent", "align-content",  "space-around stretch");
    checkBadValues(element, "alignContent", "align-content",  "end space-between start");
    checkBadValues(element, "alignContent", "align-content",  "right safe left");
    checkBadValues(element, "alignContent", "align-content",  "unsafe");
    checkBadValues(element, "alignContent", "align-content",  "safe");
    checkBadValues(element, "alignContent", "align-content",  "start safe");
    checkBadValues(element, "alignContent", "align-content",  "end unsafe");
}, "Test bad combinations of align-content");

test(function() {
    element.style.display = "";
    checkInitialValues(element, "alignContent", "align-content", "center", "normal");
}, "Test the value 'initial'");

test(function() {
    element.style.display = "grid";
    checkInitialValues(element, "alignContent", "align-content", "safe start", "normal");
}, "Test the value 'initial' for grid containers");

test(function() {
    element.style.display = "flex";
    checkInitialValues(element, "alignContent", "align-content", "unsafe end", "normal");
}, "Test the value 'initial' for flex containers");

test(function() {
    checkInheritValues("alignContent", "align-content", "end");
    checkInheritValues("alignContent", "align-content", "safe start");
    checkInheritValues("alignContent", "align-content", "unsafe center");
}, "Test the value 'inherit'");
</script>
chromium/third_party/blink/web_tests/fast/alignment/parse-align-content.html
