third_party/WebKit/LayoutTests/fast/css/focus-display-block-inline.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <title>Switch between display block and none on :focus</title>
   5         <style>
   6                 .box {
   7                         width: 100px;
   8                         height: 100px;
   9                         background-color: blue;
  10                         color: white;
  11                         padding: 10px;
  12                 }
  13                 #button {
  14                         display: block;
  15                         width: 200px;
  16                         height: 50px;
  17                 }
  18                 #button:focus {
  19                         display: none;
  20                 }
  21         </style>
  22
  23         <script src="../../resources/js-test.js"></script>
  24 </head>
  25
  26 <script type="text/javascript">
  27         if (window.testRunner)
  28                 testRunner.waitUntilDone();
  29
  30         function beginTest() {
  31                 if (window.eventSender) {
  32                         var button  = document.getElementById("button");
  33                         button.focus();
  34
  35                         release();
  36                 }
  37         }
  38
  39         function release() {
  40                 if (window.eventSender) {
  41                         var button  = document.getElementById("button");
  42                         var displayMode = window.getComputedStyle(button).getPropertyValue("display");
  43
  44                         if (displayMode == "none")
  45                                 testPassed("Setting display to none on focus processed OK.");
  46                         else
  47                                 testFailed("Setting display to none on focus FAILED." + " (expected 'none', got '" + displayMode + "')");
  48
  49                         var elementsToHide = document.getElementsByClassName('box');
  50                         for (var element, i = 0; element = elementsToHide[i]; i++)
  51                             element.style.visibility = "hidden";
  52
  53                 if (window.testRunner)
  54                                 testRunner.notifyDone();
  55                 }
  56         }
  57
  58 </script>
  59
  60 <body onload="beginTest()">
  61         <button type="button" id="button">When you hit TAB, this button should disappear.</button>
  62         <div class="box">This is here to show the layout being recomputed</div>
  63 </body>
  64 </html>