| <!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> |
