| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="../resources/common.js"></script> |
| </head> |
| <body> |
| Please run this test within DumpRenderTree. |
| <script> |
| function keyDown(key, modifiers) |
| { |
| if (!window.eventSender) |
| return; |
| eventSender.keyDown(key, modifiers); |
| } |
| description('Check focus style for multiple fields time input UI'); |
| var testInput = document.createElement("input"); |
| testInput.setAttribute("type", "time"); |
| testInput.setAttribute("step", "0.001"); |
| document.body.appendChild(testInput); |
| |
| var sample = document.createElement("span"); |
| sample.style.backgroundColor = "highlight"; |
| sample.style.color = "highlighttext"; |
| document.body.appendChild(sample); |
| var sampleStyle = getComputedStyle(sample); |
| var highlighttext = sampleStyle.color; |
| var highlight = sampleStyle.backgroundColor; |
| |
| testInput.focus(); |
| var shadowRoot = internals.shadowRoot(testInput); |
| var fields = getElementByPseudoId(shadowRoot, "-webkit-datetime-edit-fields-wrapper").childNodes; |
| for (var index = 0; index < fields.length; ++index) { |
| var field = fields[index]; |
| if (field.nodeType != 1) |
| continue; |
| var id = internals.shadowPseudoId(field); |
| if (id.indexOf('-field') < 0) |
| continue; |
| var style = getComputedStyle(field); |
| shouldBe('"' + id + '"; style.backgroundColor', 'highlight'); |
| shouldBe('"' + id + '"; style.color', 'highlighttext'); |
| keyDown('ArrowRight'); |
| } |
| debug(''); |
| testInput.parentElement.removeChild(testInput); |
| sample.parentElement.removeChild(sample); |
| </script> |
| </body> |
| </html> |
