third_party/WebKit/LayoutTests/fullscreen/full-screen-with-flex-item.html

   1 <style>
   2   div {
   3     background-color: pink;
   4     -webkit-align-self: stretch;
   5     -webkit-flex: 1;
   6     position: relative;
   7   }
   8   .vertical {
   9     -webkit-writing-mode: vertical-lr;
  10   }
  11   .inner {
  12     display: inline-block;
  13     height: 500px;
  14   }
  15 </style>
  16 <script src="full-screen-test.js"></script>
  17 <body>
  18   <div><div class=vertical>
  19       <div class="inner">This div becomes a stretched flex item in fullscreen mode, and should
  20         become normal-sized again once leaving it.</div>
  21       <div class="inner">Number 2</div>
  22       <div class="inner">Number 3</div>
  23       <div class="inner">Number 4</div>
  24   </div></div>
  25 <script>
  26     var callback;
  27     var fullscreenChanged = function(event)
  28     {
  29         if (callback)
  30             callback(event)
  31     };
  32     waitForEvent(document, 'webkitfullscreenchange', fullscreenChanged);
  33
  34     var div = document.getElementsByTagName('div')[0];
  35     var oldHeight = div.offsetHeight;
  36
  37     var divEnteredFullScreen = function(event) {
  38         callback = divExitedFullScreen;
  39         document.webkitExitFullscreen();
  40     };
  41
  42     var divExitedFullScreen = function(event) {
  43         callback = null;
  44         testExpected(div.offsetHeight, oldHeight);
  45         div.innerHTML = "";  // simplify the text dump
  46         endTest();
  47     };
  48
  49     callback = divEnteredFullScreen;
  50     runWithKeyDown(function(){div.webkitRequestFullScreen()});
  51 </script>
  52 <button onclick="div.webkitRequestFullScreen()">Enter Fullscreen</button>