third_party/WebKit/ManualTests/remove-fixed-position-but-keep-compositing.html

   1 <html>
   2
   3   <body style="height: 10000px">
   4
   5   <button id="toggle">Toggle</button>
   6
   7   <p>
   8   The black rectangle starts fixed, and due to a transform will be composited. Toggle to unfix it and scroll: the black rectangle should scroll with the page and not overlap the numbers.
   9   </p>
  10
  11   <div id="rect" style="background-color: black; width: 200px; height: 200px; position: fixed; transform: translate3d(0,0,0)">
  12   </div>
  13
  14 1<br>
  15 2<br>
  16 3<br>
  17 4<br>
  18 5<br>
  19 6<br>
  20 7<br>
  21 8<br>
  22 9<br>
  23 10<br>
  24 11<br>
  25 12<br>
  26 13<br>
  27 14<br>
  28 15<br>
  29 16<br>
  30 17<br>
  31 18<br>
  32 19<br>
  33 20<br>
  34
  35 <script>
  36 var rect = document.getElementById("rect");
  37 var toggle = document.getElementById("toggle");
  38
  39 toggle.addEventListener("click", function (ev) {
  40     if (rect.style.position === "fixed") {
  41         rect.style.position = "";
  42     } else {
  43         rect.style.position = "fixed";
  44     }
  45 });
  46 </script>