third_party/WebKit/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-focus-style.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="../resources/common.js"></script>
   6 </head>
   7 <body>
   8 Please run this test within DumpRenderTree.
   9 <script>
  10 function keyDown(key, modifiers)
  11 {
  12     if (!window.eventSender)
  13         return;
  14     eventSender.keyDown(key, modifiers);
  15 }
  16 description('Check focus style for multiple fields time input UI');
  17 var testInput = document.createElement("input");
  18 testInput.setAttribute("type", "time");
  19 testInput.setAttribute("step", "0.001");
  20 document.body.appendChild(testInput);
  21
  22 var sample = document.createElement("span");
  23 sample.style.backgroundColor = "highlight";
  24 sample.style.color = "highlighttext";
  25 document.body.appendChild(sample);
  26 var sampleStyle = getComputedStyle(sample);
  27 var highlighttext = sampleStyle.color;
  28 var highlight = sampleStyle.backgroundColor;
  29
  30 testInput.focus();
  31 var shadowRoot = internals.oldestShadowRoot(testInput);
  32 var fields = getElementByPseudoId(shadowRoot, "-webkit-datetime-edit-fields-wrapper").childNodes;
  33 for (var index = 0; index < fields.length; ++index) {
  34     var field = fields[index];
  35     if (field.nodeType != 1)
  36         continue;
  37     var id = internals.shadowPseudoId(field);
  38     if (id.indexOf('-field') < 0)
  39         continue;
  40     var style = getComputedStyle(field);
  41     shouldBe('"' + id + '"; style.backgroundColor', 'highlight');
  42     shouldBe('"' + id + '"; style.color', 'highlighttext');
  43     keyDown('rightArrow');
  44 }
  45 debug('');
  46 testInput.parentElement.removeChild(testInput);
  47 sample.parentElement.removeChild(sample);
  48 </script>
  49 </body>
  50 </html>