| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| #large { |
| font-size: 30px; |
| } |
| #large::-webkit-file-upload-button { |
| /* Uses none for ease of testing on Mac. */ |
| -webkit-appearance: none; |
| } |
| |
| #dark { |
| background-color: black; |
| color: white; |
| } |
| </style> |
| |
| <p>Tests internal components of a file upload control correctly inherit the style of the container input element.</p> |
| <div><input type=file id=large></div> |
| <div id=dark><input type=file id=darkFile></div> |
| <div id=console></div> |
| <script> |
| if (!window.internals) { |
| debug('1. Check if the "Choose File" button of the first file upload control is large.'); |
| debug('2. Check if the "no file selected" text of the second file upload control is visible.'); |
| } else { |
| var file1 = document.getElementById('large'); |
| var button1 = internals.shadowRoot(file1).firstChild; |
| shouldBe('document.defaultView.getComputedStyle(button1, null).getPropertyValue("font-size")', '"30px"'); |
| shouldBe('document.defaultView.getComputedStyle(document.getElementById("darkFile"), null).getPropertyValue("background-color")', '"rgba(0, 0, 0, 0)"'); |
| shouldBe('document.defaultView.getComputedStyle(document.getElementById("darkFile"), null).getPropertyValue("color")', '"rgb(255, 255, 255)"'); |
| } |
| </script> |
