summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/forms/file/file-style-inheritance.html
blob: 57ba9f421e66db23a08bc277f603691e1e7511c3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
#large {
    font-size: 30px;
}
#large::-webkit-file-upload-button {
    /* Uses square-button for ease of testing on Mac. */
    -webkit-appearance: square-button;
}

#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>