<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>
    // Bail out early if the full screen API is not enabled or is missing:
    if (Element.prototype.webkitRequestFullScreen == undefined) {
        logResult(false, "Element.prototype.webkitRequestFullScreen == undefined");
        endTest();
    } else {
        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>