third_party/WebKit/LayoutTests/fast/dynamic/position-change-to-absolute-with-positioned-child-crash.html

   1 <!DOCTYPE HTML>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <div id="log"></div>
   5 <div id="container">
   6 <p id="description">
   7     This tests that changing the container's position from fixed or relative to absolute is safe,<br>
   8     when child container with fixed position is present.<br>
   9     PASS, if no crash or assert in debug.
  10 </p>
  11 </div>
  12 <script>
  13 var valueList = ["static", "relative", "absolute", "fixed"]
  14 var tests = [];
  15 for (var outerValue of valueList) {
  16     for (var innerValue of valueList) {
  17         for (var afterValue of valueList) {
  18             var outerElement, innerElement, midElement;
  19             if (outerValue !== afterValue) {
  20                 outerElement = document.createElement("div");
  21                 innerElement = document.createElement("div");
  22                 outerElement.style.position = outerValue;
  23                 innerElement.style.position = innerValue;
  24                 outerElement.appendChild(innerElement);
  25                 container.appendChild(outerElement);
  26                 tests.push(["position:" + outerValue + " with a " + innerValue + " child to " + afterValue, function () {
  27                     outerElement.style.position = afterValue;
  28                 }]);
  29
  30                 outerElement = document.createElement("div");
  31                 innerElement = document.createElement("div");
  32                 outerElement.style.position = outerValue;
  33                 outerElement.style.transform = "rotate(3deg)";
  34                 innerElement.style.position = innerValue;
  35                 outerElement.appendChild(innerElement);
  36                 container.appendChild(outerElement);
  37                 tests.push(["position:" + outerValue + " with a " + innerValue + " child to " + afterValue, function () {
  38                     outerElement.style.position = afterValue;
  39                 }]);
  40
  41                 outerElement = document.createElement("div");
  42                 innerElement = document.createElement("div");
  43                 outerElement.style.position = outerValue;
  44                 outerElement.style.transform = "rotate(3deg)";
  45                 innerElement.style.position = innerValue;
  46                 outerElement.appendChild(innerElement);
  47                 container.appendChild(outerElement);
  48                 tests.push(["position:" + outerValue + " and transform with a " + innerValue + " child to " + afterValue + " without transform", function () {
  49                     outerElement.style.position = afterValue;
  50                     outerElement.style.transform = "none";
  51                     innerElement.style.width = "50%";
  52                 }]);
  53             }
  54
  55             outerElement = document.createElement("div");
  56             midElement = document.createElement("div");
  57             innerElement = document.createElement("div");
  58             outerElement.style.position = outerValue;
  59             innerElement.style.position = innerValue;
  60             outerElement.appendChild(midElement);
  61             midElement.appendChild(innerElement);
  62             container.appendChild(outerElement);
  63             tests.push(["position:static with a " + outerValue + " parent and a " + innerValue + " child to " + afterValue, function () {
  64                 midElement.style.position = afterValue;
  65                 innerElement.style.width = "50%";
  66             }]);
  67         }
  68
  69         outerElement = document.createElement("div");
  70         midElement = document.createElement("div");
  71         innerElement = document.createElement("div");
  72         outerElement.style.position = outerValue;
  73         innerElement.style.position = innerValue;
  74         outerElement.appendChild(midElement);
  75         midElement.appendChild(innerElement);
  76         container.appendChild(outerElement);
  77         tests.push(["position:static with a " + outerValue + " parent and a " + innerValue + " child to transform", function () {
  78             midElement.style.transform = "translateX(0)";
  79             innerElement.style.width = "50%";
  80         }]);
  81
  82         outerElement = document.createElement("div");
  83         midElement = document.createElement("div");
  84         innerElement = document.createElement("div");
  85         outerElement.style.position = outerValue;
  86         midElement.style.transform = "translateX(0)";
  87         innerElement.style.position = innerValue;
  88         outerElement.appendChild(midElement);
  89         midElement.appendChild(innerElement);
  90         container.appendChild(outerElement);
  91         tests.push(["position:static and transform with a " + outerValue + " parent and a " + innerValue + " child to without transform", function () {
  92             midElement.style.transform = "none";
  93             innerElement.style.width = "50%";
  94         }]);
  95
  96         outerElement = document.createElement("div");
  97         innerElement = document.createElement("div");
  98         outerElement.style.position = outerValue;
  99         innerElement.style.position = innerValue;
 100         outerElement.appendChild(innerElement);
 101         container.appendChild(outerElement);
 102         tests.push(["Add transform position:" + outerValue + " with a " + innerValue + " child", function () {
 103             outerElement.style.transform = "rotate(3deg)";
 104             innerElement.style.width = "50%";
 105         }]);
 106
 107         outerElement = document.createElement("div");
 108         innerElement = document.createElement("div");
 109         outerElement.style.position = outerValue;
 110         outerElement.style.transform = "rotate(3deg)";
 111         innerElement.style.position = innerValue;
 112         outerElement.appendChild(innerElement);
 113         container.appendChild(outerElement);
 114         tests.push(["Remove transform from position:" + outerValue + " and transform with a " + innerValue + " child", function () {
 115             outerElement.style.transform = "none";
 116             innerElement.style.width = "50%";
 117         }]);
 118
 119     }
 120 }
 121
 122 document.body.offsetHeight;
 123 for (var t of tests) {
 124     test(function () {
 125         t[1]();
 126         // No assert() are needed, we just check layout hits no ASSERT nor crash.
 127         document.body.offsetHeight;
 128     }, t[0]);
 129 }
 130 </script>