src/third_party/WebKit/LayoutTests/fast/speech/input-appearance-speechbutton.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <style>
   5 /* We'd like to check appearance of the button in various sizes. */
   6 input.always-show-button::-webkit-input-speech-button {
   7     opacity: 1;
   8 }
   9 </style>
  10 </head>
  11 <body>
  12 <p>Test appearances of input-speech-button.</p>
  13 <div id="console"></div>
  14
  15 <script>
  16 var parent = document.createElement('div');
  17 document.body.appendChild(parent);
  18 parent.innerHTML = '<table><tr><td id=p1><td id=p2><td id=p3></tr></table><input x-webkit-speech id="focus"><input x-webkit-speech id="hover">';
  19 var cells = ["", "", ""];
  20 var maxCellCount = [7, 5, 5];
  21 var cellCount = 0;
  22 var index = 0;
  23 for (var size = 8; size < 24; size++) {
  24     cells[index] += '<input style="font-size:' + size + 'px" value="A quick brown fox jumps over the lazy dog"><br>'
  25         + '<input style="font-size:' + size + 'px" value="A quick brown fox jumps over the lazy dog" x-webkit-speech class="always-show-button"><br>';
  26     if (++cellCount >= maxCellCount[index]) {
  27         ++index;
  28         cellCount = 0;
  29     }
  30 }
  31 for (var i = 0; i < cells.length; ++i) {
  32   var div = document.createElement('div');
  33   div.innerHTML = cells[i];
  34   document.getElementById('p' + (i + 1)).appendChild(div);
  35 }
  36
  37 document.getElementById('focus').focus();
  38 var hoveredInput = document.getElementById('hover');
  39 if (window.eventSender)
  40     eventSender.mouseMoveTo(hoveredInput.offsetLeft + hoveredInput.offsetWidth / 2, hoveredInput.offsetTop + hoveredInput.offsetHeight / 2);
  41
  42 // Also check that setting the attribute from script renders similarly.
  43 var inputWithAttribute = document.createElement('input');
  44 inputWithAttribute.className = 'always-show-button';
  45 document.body.appendChild(inputWithAttribute);
  46 inputWithAttribute.setAttribute('x-webkit-speech', 'x-webkit-speech');
  47
  48 // Similar to above, check if removing the attribute with script renders an empty input field.
  49 var inputWithoutAttribute = document.createElement('input');
  50 inputWithoutAttribute.setAttribute('x-webkit-speech', 'x-webkit-speech');
  51 inputWithoutAttribute.className = 'always-show-button';
  52 document.body.appendChild(inputWithoutAttribute);
  53 inputWithoutAttribute.removeAttribute('x-webkit-speech');
  54
  55 </script>
  56 </body>
  57 </html>