parse-place-content.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
#placeContentNormal {
    place-content: normal;
}
#placeContentStart {
    place-content: start;
}
#placeContentFlexStart {
    place-content: flex-start;
}
#placeContentEnd {
    place-content: end;
}
#placeContentSpaceBetween {
    place-content: space-between;
}
#placeContentStretch {
    place-content: stretch;
}
#placeContentStartEnd {
    place-content: start end;
}
#placeContentStartSpaceEvenly {
    place-content: start space-evenly;
}
#placeContentBaselineStart {
    place-content: baseline start;
}

<!-- Invalid CSS cases -->
#placeContentEmpty {
    place-content:;
}
#placeContentAuto {
    place-content: auto;
}
#placeContentNone {
    place-content: none;
}
#placeContentSafe {
    place-content: safe;
}
#placeContentStartSafe {
    place-content: start safe;
}
#placeContentBaselineSafe {
    place-content: baseline safe;
}
#placeContentStartEndLeft {
    place-content: start end left;
}
#placeContentBaseline {
    place-content: baseline;
}
#placeContentStartBaseline {
    place-content: start baseline;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/alignment-parsing-utils-th.js"></script>
</head>
<body>
    <p>Test to verify that the new place-content alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
    <div id="log"></div>

    <div id="placeContentNormal"></div>
    <div id="placeContentStart"></div>
    <div id="placeContentFlexStart"></div>
    <div id="placeContentEnd"></div>
    <div id="placeContentSpaceBetween"></div>
    <div id="placeContentStretch"></div>
    <div id="placeContentStartEnd"></div>
    <div id="placeContentStartSpaceEvenly"></div>
    <div id="placeContentBaselineStart"></div>

    <div id="placeContentEmpty"></div>
    <div id="placeContentAuto"></div>
    <div id="placeContentNone"></div>
    <div id="placeContentSafe"></div>
    <div id="placeContentStartSafe"></div>
    <div id="placeContentBaselineSafe"></div>
    <div id="placeContentStartEndLeft"></div>
    <div id="placeContentBaseline"></div>
    <div id="placeContentStartBaseline"></div>
<script>
function checkPlaceContentValues(element, value, alignValue, justifyValue)
{
     var res = value.split(" ");
     if (res.length < 2)
         res[1] = res[0];
     checkValues(element, "alignContent", "align-content", res[0], alignValue);
     checkValues(element, "justifyContent", "justify-content", res[1], justifyValue);
}

function checkPlaceContentValuesJS(value, alignValue, justifyValue)
{
   element = document.createElement("div");
   document.body.appendChild(element);
   element.style.placeContent = value;
  if (alignValue == justifyValue)
    checkValues(element, "placeContent", "place-content", value, alignValue);
  else
    checkValues(element, "placeContent", "place-content", value, alignValue + ' ' + justifyValue);
   checkPlaceContentValues(element, value, alignValue, justifyValue)
}

function checkPlaceContentValuesBadJS(value)
{
   element.style.placeContent = "";
   element.style.placeContent = value;
   checkPlaceContentValues(element, "", "normal", "normal")
}

function checkPlaceContentInitialValue()
{
   element = document.createElement("div");
   document.body.appendChild(element);
   checkValues(element, "placeContent", "place-content", "", "normal");
   element.style.placeContent = "center";
   checkPlaceContentValues(element, "center", "center", "center");
   element.style.placeContent = "initial";
   checkValues(element, "placeContent", "place-content", "initial", "normal");
   checkPlaceContentValues(element, "initial", "normal", "normal");
}

function checkPlaceContentInheritValue()
{
   document.body.style.placeContent = "start";
   var anotherElement = document.createElement("div");
   document.body.appendChild(anotherElement);
   checkPlaceContentValues(anotherElement, "", "normal", "normal");
   anotherElement.style.placeContent = "inherit";
   checkPlaceContentValues(anotherElement, "inherit", "start", "start");
}


test(function() {
    checkValues(placeContentNormal, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentNormal, "", "normal", "normal");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'normal' value through CSS.");

test(function() {
    checkValues(placeContentStart, "placeContent", "place-content", "", "start");
    checkPlaceContentValues(placeContentStart, "", "start", "start");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start' value through CSS.");

test(function() {
    checkValues(placeContentFlexStart, "placeContent", "place-content", "", "flex-start");
    checkPlaceContentValues(placeContentFlexStart, "", "flex-start", "flex-start");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'flex-start' value through CSS.");

test(function() {
    checkValues(placeContentEnd, "placeContent", "place-content", "", "end");
    checkPlaceContentValues(placeContentEnd, "", "end", "end");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'end' value through CSS.");

test(function() {
    checkValues(placeContentSpaceBetween, "placeContent", "place-content", "", "space-between");
    checkPlaceContentValues(placeContentSpaceBetween, "", "space-between", "space-between");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'space-between' value through CSS.");

test(function() {
    checkValues(placeContentStretch, "placeContent", "place-content", "", "stretch");
    checkPlaceContentValues(placeContentStretch, "", "stretch", "stretch");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'stretch' value through CSS.");

test(function() {
    checkValues(placeContentStartEnd, "placeContent", "place-content", "", "start end");
    checkPlaceContentValues(placeContentStartEnd, "", "start", "end");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start end' value through CSS.");

test(function() {
    checkValues(placeContentStartSpaceEvenly, "placeContent", "place-content", "", "start space-evenly");
    checkPlaceContentValues(placeContentStartSpaceEvenly, "", "start", "space-evenly");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start space-evenly' value through CSS.");

test(function() {
    checkValues(placeContentBaselineStart, "placeContent", "place-content", "", "baseline start");
    checkPlaceContentValues(placeContentBaselineStart, "", "baseline", "start");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'baseline start' value through CSS.");

test(function() {
    checkValues(placeContentAuto, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentAuto, "", "normal", "normal");
}, "Test setting '' as incorrect value through CSS.");

test(function() {
    checkValues(placeContentAuto, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentAuto, "", "normal", "normal");
}, "Test setting 'auto' as incorrect value through CSS.");

test(function() {
    checkValues(placeContentNone, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentNone, "", "normal", "normal");
}, "Test setting 'none' as incorrect value through CSS.");

test(function() {
    checkValues(placeContentSafe, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentSafe, "", "normal", "normal");
}, "Test setting 'safe' as incorrect value through CSS.");

test(function() {
    checkValues(placeContentStartSafe, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentStartSafe, "", "normal", "normal");
}, "Test setting 'start safe' as incorrect value through CSS.");

test(function() {
    checkValues(placeContentBaseline, "placeContent", "place-content", "", "baseline start");
    checkPlaceContentValues(placeContentBaseline, "", "baseline", "start");
}, "Test setting 'baseline' as 'baseline start'.");

test(function() {
    checkValues(placeContentBaselineSafe, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentBaselineSafe, "", "normal", "normal");
}, "Test setting 'baseline safe' as incorrect value through CSS.");

test(function() {
    checkValues(placeContentStartBaseline, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentStartBaseline, "", "normal", "normal");
}, "Test setting 'start baseline' as incorrect value through CSS.");

test(function() {
    checkValues(placeContentStartEndLeft, "placeContent", "place-content", "", "normal");
    checkPlaceContentValues(placeContentStartEndLeft, "", "normal", "normal");
}, "Test setting 'start end left' as incorrect value through CSS.");

test(function() {
    checkPlaceContentValuesJS("center", "center", "center");
    checkPlaceContentValuesJS("center start", "center", "start");
    checkPlaceContentValuesJS("space-between end", "space-between", "end");
    checkPlaceContentValuesJS("normal end", "normal", "end");
}, "Test setting values through JS.");

test(function() {
    checkPlaceContentValuesBadJS("center safe", "normal", "normal");
    checkPlaceContentValuesBadJS("center space-between center", "normal", "normal");
    checkPlaceContentValuesBadJS("asrt", "normal", "normal");
    checkPlaceContentValuesBadJS("auto", "normal", "normal");
    checkPlaceContentValuesBadJS("10px", "normal", "normal");
    checkPlaceContentValuesBadJS("stretch safe", "normal", "normal");
    checkPlaceContentValuesBadJS("space-between start end", "normal", "normal");
    checkPlaceContentValuesBadJS("", "normal", "normal");
}, "Test setting incorrect values through JS.");

test(function() {
    checkPlaceContentInitialValue();
}, "Test the 'initial' value of the place-content shorthand and its longhand properties' Computed value");

test(function() {
    checkPlaceContentInheritValue();
}, "Test the 'inherit' value of the place-content shorthand and its longhand properties' Computed value");


</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/alignment/parse-place-content.html
