position-change-to-absolute-with-positioned-child-crash.html

<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="container">
<p id="description">
    This tests that changing the container's position from fixed or relative to absolute is safe,<br>
    when child container with fixed position is present.<br>
    PASS, if no crash or assert in debug.
</p>
</div>
<script>
var valueList = ["static", "relative", "absolute", "fixed"]
var tests = [];
for (var outerValue of valueList) {
    for (var innerValue of valueList) {
        for (var afterValue of valueList) {
            var outerElement, innerElement, midElement;
            if (outerValue !== afterValue) {
                outerElement = document.createElement("div");
                innerElement = document.createElement("div");
                outerElement.style.position = outerValue;
                innerElement.style.position = innerValue;
                outerElement.appendChild(innerElement);
                container.appendChild(outerElement);
                tests.push(["position:" + outerValue + " with a " + innerValue + " child to " + afterValue, function () {
                    outerElement.style.position = afterValue;
                }]);

                outerElement = document.createElement("div");
                innerElement = document.createElement("div");
                outerElement.style.position = outerValue;
                outerElement.style.transform = "rotate(3deg)";
                innerElement.style.position = innerValue;
                outerElement.appendChild(innerElement);
                container.appendChild(outerElement);
                tests.push(["position:" + outerValue + " with a " + innerValue + " child to " + afterValue, function () {
                    outerElement.style.position = afterValue;
                }]);

                outerElement = document.createElement("div");
                innerElement = document.createElement("div");
                outerElement.style.position = outerValue;
                outerElement.style.transform = "rotate(3deg)";
                innerElement.style.position = innerValue;
                outerElement.appendChild(innerElement);
                container.appendChild(outerElement);
                tests.push(["position:" + outerValue + " and transform with a " + innerValue + " child to " + afterValue + " without transform", function () {
                    outerElement.style.position = afterValue;
                    outerElement.style.transform = "none";
                    innerElement.style.width = "50%";
                }]);
            }

            outerElement = document.createElement("div");
            midElement = document.createElement("div");
            innerElement = document.createElement("div");
            outerElement.style.position = outerValue;
            innerElement.style.position = innerValue;
            outerElement.appendChild(midElement);
            midElement.appendChild(innerElement);
            container.appendChild(outerElement);
            tests.push(["position:static with a " + outerValue + " parent and a " + innerValue + " child to " + afterValue, function () {
                midElement.style.position = afterValue;
                innerElement.style.width = "50%";
            }]);
        }

        outerElement = document.createElement("div");
        midElement = document.createElement("div");
        innerElement = document.createElement("div");
        outerElement.style.position = outerValue;
        innerElement.style.position = innerValue;
        outerElement.appendChild(midElement);
        midElement.appendChild(innerElement);
        container.appendChild(outerElement);
        tests.push(["position:static with a " + outerValue + " parent and a " + innerValue + " child to transform", function () {
            midElement.style.transform = "translateX(0)";
            innerElement.style.width = "50%";
        }]);

        outerElement = document.createElement("div");
        midElement = document.createElement("div");
        innerElement = document.createElement("div");
        outerElement.style.position = outerValue;
        midElement.style.transform = "translateX(0)";
        innerElement.style.position = innerValue;
        outerElement.appendChild(midElement);
        midElement.appendChild(innerElement);
        container.appendChild(outerElement);
        tests.push(["position:static and transform with a " + outerValue + " parent and a " + innerValue + " child to without transform", function () {
            midElement.style.transform = "none";
            innerElement.style.width = "50%";
        }]);

        outerElement = document.createElement("div");
        innerElement = document.createElement("div");
        outerElement.style.position = outerValue;
        innerElement.style.position = innerValue;
        outerElement.appendChild(innerElement);
        container.appendChild(outerElement);
        tests.push(["Add transform position:" + outerValue + " with a " + innerValue + " child", function () {
            outerElement.style.transform = "rotate(3deg)";
            innerElement.style.width = "50%";
        }]);

        outerElement = document.createElement("div");
        innerElement = document.createElement("div");
        outerElement.style.position = outerValue;
        outerElement.style.transform = "rotate(3deg)";
        innerElement.style.position = innerValue;
        outerElement.appendChild(innerElement);
        container.appendChild(outerElement);
        tests.push(["Remove transform from position:" + outerValue + " and transform with a " + innerValue + " child", function () {
            outerElement.style.transform = "none";
            innerElement.style.width = "50%";
        }]);

    }
}

document.body.offsetHeight;
for (var t of tests) {
    test(function () {
        t[1]();
        // No assert() are needed, we just check layout hits no ASSERT nor crash.
        document.body.offsetHeight;
    }, t[0]);
}
</script>
chromium/third_party/blink/web_tests/fast/dynamic/position-change-to-absolute-with-positioned-child-crash.html
