third_party/WebKit/LayoutTests/fast/forms/file/file-style-inheritance.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 #large {
   5     font-size: 30px;
   6 }
   7 #large::-webkit-file-upload-button {
   8     /* Uses square-button for ease of testing on Mac. */
   9     -webkit-appearance: square-button;
  10 }
  11
  12 #dark {
  13     background-color: black;
  14     color: white;
  15 }
  16 </style>
  17
  18 <p>Tests internal components of a file upload control correctly inherit the style of the container input element.</p>
  19 <div><input type=file id=large></div>
  20 <div id=dark><input type=file id=darkFile></div>
  21 <div id=console></div>
  22 <script>
  23 if (!window.internals) {
  24     debug('1. Check if the "Choose File" button of the first file upload control is large.');
  25     debug('2. Check if the "no file selected" text of the second file upload control is visible.');
  26 } else {
  27     var file1 = document.getElementById('large');
  28     var button1 = internals.shadowRoot(file1).firstChild;
  29     shouldBe('document.defaultView.getComputedStyle(button1, null).getPropertyValue("font-size")', '"30px"');
  30     shouldBe('document.defaultView.getComputedStyle(document.getElementById("darkFile"), null).getPropertyValue("background-color")', '"rgba(0, 0, 0, 0)"');
  31     shouldBe('document.defaultView.getComputedStyle(document.getElementById("darkFile"), null).getPropertyValue("color")', '"rgb(255, 255, 255)"');
  32 }
  33 </script>