full-screen-with-flex-item.html | Explore in Territory

<style>
  div {
    background-color: pink;
    -webkit-align-self: stretch;
    -webkit-flex: 1;
    position: relative;
  }
  .vertical {
    -webkit-writing-mode: vertical-lr;
  }
  .inner {
    display: inline-block;
    height: 500px;
  }
</style>
<script src="full-screen-test.js"></script>
<body>
  <div><div class=vertical>
      <div class="inner">This div becomes a stretched flex item in fullscreen mode, and should
        become normal-sized again once leaving it.</div>
      <div class="inner">Number 2</div>
      <div class="inner">Number 3</div>
      <div class="inner">Number 4</div>
  </div></div>
<script>
    var callback;
    var fullscreenChanged = function(event)
    {
        if (callback)
            callback(event)
    };
    waitForEvent(document, 'webkitfullscreenchange', fullscreenChanged);

    var div = document.getElementsByTagName('div')[0];
    var oldHeight = div.offsetHeight;

    var divEnteredFullScreen = function(event) {
        callback = divExitedFullScreen;
        document.webkitExitFullscreen();
    };

    var divExitedFullScreen = function(event) {
        callback = null;
        testExpected(div.offsetHeight, oldHeight);
        div.innerHTML = "";  // simplify the text dump
        endTest();
    };

    callback = divEnteredFullScreen;
    runWithKeyDown(function(){div.webkitRequestFullScreen()});
</script>
<button onclick="div.webkitRequestFullScreen()">Enter Fullscreen</button>
chromium/third_party/blink/web_tests/fullscreen/full-screen-with-flex-item.html
