LayoutTests/spatial-css/spatial-portal-transform-parsing.html

<!DOCTYPE html> <!-- webkit-test-runner [ SpatialPortalEnabled=true ] -->
<html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body>
<script>
'use strict';

function makeElement(t, establishesPortal) {
    const element = document.createElement("div");
    if (establishesPortal)
        element.style.spatial = "portal";
    document.body.appendChild(element);
    t.add_cleanup(() => element.remove());
    return element;
}

test(t => {
    assert_equals(getComputedStyle(makeElement(t, true)).portalTransform, "auto", "on a portal");
    assert_equals(getComputedStyle(makeElement(t, false)).portalTransform, "auto", "on a non-portal");
}, "portal-transform initial value is auto, whether or not the element establishes a portal");

const validValues = [
    "auto",
    "none",
    "rotateY(45deg)",
    "scale3d(2, 2, 2)",
    "translateZ(10px)",
    "auto rotateY(45deg)",
    "rotateY(45deg) auto",
    "auto rotate3d(0, 1, 0, 45deg) scale3d(2, 2, 2)",
    "rotate3d(0, 1, 0, 45deg) scale3d(2, 2, 2) auto",
    "rotateY(45deg) auto scale3d(2, 2, 2)",
    "rotate3d(0, 1, 0, 45deg) translateZ(10px) auto scale3d(2, 2, 2) rotateY(90deg)",
    "auto translateX(calc(50% + 10px))",
];

test(t => {
    for (const value of validValues) {
        const element = makeElement(t, true);
        element.style.portalTransform = value;
        assert_equals(element.style.portalTransform, value, `specified value of "${value}"`);
        assert_equals(getComputedStyle(element).portalTransform, value, `computed value of "${value}"`);
    }
}, "portal-transform accepts auto, none and a transform list with auto anywhere in it");

test(() => {
    for (const value of validValues)
        assert_true(CSS.supports("portal-transform", value), value);
}, "portal-transform is a supported property");

test(t => {
    const element = makeElement(t, true);
    element.style.portalTransform = "auto translateZ(1cm)";
    assert_equals(getComputedStyle(element).portalTransform, "auto translateZ(37.795277px)");
}, "portal-transform computes the lengths in its transform list");

test(t => {
    const withCalc = makeElement(t, true);
    withCalc.style.fontSize = "20px";
    withCalc.style.portalTransform = "auto translateZ(calc(10px + 1em))";

    const withLength = makeElement(t, true);
    withLength.style.portalTransform = "auto translateZ(30px)";

    assert_equals(getComputedStyle(withCalc).portalTransform, getComputedStyle(withLength).portalTransform);
}, "portal-transform computes calc() in its transform list");

const invalidValues = [
    "3px",
    "10",
    "red",
    "auto auto",
    "none none",
    "auto none",
    "none auto",
    "auto, none",
    "none rotateY(45deg)",
    "rotateY(45deg) none",
    "auto rotateY(45deg) auto",
    "rotateY(45deg) auto auto",
    "auto scale3d(2, 2, 2) auto rotateY(45deg)",
    "auto translateZ(calc(50% + 10px))",
];

test(t => {
    for (const value of invalidValues) {
        const element = makeElement(t, true);
        element.style.portalTransform = value;
        assert_equals(element.style.portalTransform, "", `"${value}" is not accepted`);
        assert_equals(getComputedStyle(element).portalTransform, "auto", `"${value}" leaves the initial value in place`);
    }
}, "portal-transform ignores invalid values");

</script>
</body>
</html>