scroll-into-view-collapsed-div.html

<!DOCTYPE html>
<head>
  <style>
    #bluebox {
        width: 100px;
        height: 100px;
        background: blue;
        padding: 0px;
        margin: 0px;
    }
    #redbox {
        width: 100px;
        height: 100px;
        background: red;
        padding: 0px;
        margin: 0px;
    }
    #spacer {
        width: 2000px;
        height: 2000px;
        padding: 0px;
        margin: 0px;
    }
    #container-vertical {
      width: 200px;
      height: 100px;
    }
    #container-horizontal {
      width: 200px;
      height: 100px;
    }
  </style>
  <script src="../../resources/js-test.js"></script>
  <script>

    function focusTextboxHorizontal() {
        document.getElementById('textBox-horizontal').focus();
      }

    function collapseToggleHorizontal() {
      var element = document.getElementById('container-horizontal');

      if (element.clientWidth > 0)
        element.style.width = "0px";
      else
        element.style.width = "200px";
    }

    function focusTextboxVertical() {
        document.getElementById('textBox-vertical').focus();
      }

    function collapseToggleVertical() {
      var element = document.getElementById('container-vertical');

      if (element.clientHeight > 0)
        element.style.height = "0px";
      else
        element.style.height = "100px";
    }

    addEventListener('load', function() {
      description('Tests that scrollIntoViewIfNeeded works correctly if the '
        + 'enclosing div has no height.');

      if (window.testRunner)
        testRunner.dumpAsText();

      window.scrollTo(0, 190);
      document.getElementById('scroller-vertical').scrollTop = 1000;
      document.getElementById('container-vertical').style.height = "0px";
      document.getElementById('scroller-horizontal').scrollTop = 0;
      document.getElementById('container-horizontal').style.width = "0px";

      shouldBe("window.scrollY", "190");

      document.getElementById('textBox-vertical').scrollIntoViewIfNeeded();

      shouldBe("window.scrollY", "190");

      shouldBe("window.scrollX", "0");

      document.getElementById('textBox-horizontal').scrollIntoViewIfNeeded();

      shouldBe("window.scrollX", "0");
    });
  </script>
</head>
<body>
      <div style="height:200px"></div>
      <div id="container-vertical" >
        <div id="scroller-vertical" style="height: 100%; overflow: auto">
          <input type="text" id="textBox-vertical">
          <div id="bluebox"></div><div id="redbox"></div>
          <div id="bluebox"></div><div id="redbox"></div>
          <div id="bluebox"></div><div id="redbox"></div>
          <div id="bluebox"></div><div id="redbox"></div>
          <div id="bluebox"></div><div id="redbox"></div>
        </div>
      </div>
      <button onclick="focusTextboxVertical();">Focus Textbox</button>
      <button onclick="collapseToggleVertical();">Collapse Div With Textbox</button>
      <div style="padding-left: 300px">
        <div id="container-horizontal" >
          <div id="scroller-horizontal" style="height: 100%; overflow: auto">
            <div style="padding-left: 1000px"><input type="text" id="textBox-horizontal"></div>
          </div>
        </div>
        <button onclick="focusTextboxHorizontal();">Focus Textbox</button>
        <button onclick="collapseToggleHorizontal();">Collapse Div With Textbox</button>
      </div>
      <div id="console"></div>
      <div id="spacer"></div>
</body>
chromium/third_party/blink/web_tests/fast/scrolling/scroll-into-view-collapsed-div.html
