[GTK] Menu list button doesn't use the text color from the theme
[WebKit-https.git] / ManualTests / gtk / theme.html
1 <html>
2
3   <body id="body">
4   <h1>GTK+ themed elements</h1>
5
6   <p>This is a manual tests to check how all elements having a native appearance are rendered by WebKitGTK+.
7     To test different themes, open this test in MiniBrowser (or any other WebKitGTK+ based browser) passing
8     GTK_THEME=theme-name[:variant] environment variable.
9   </p>
10
11   <p>Text direction: <select onchange="body = document.getElementById('body'); if (this.selectedIndex == 0) body.style.direction='ltr'; else body.style.direction='rtl';">
12       <option>Left to right</option><option>Right to left</option></select>
13   </p>
14
15   <h1>Buttons</h1>
16   <table>
17     <tr>
18       <td><button type="button">Button</button></td>
19       <td><button type="button" disabled>Disabled</button></td>
20     </tr>
21     <tr>
22       <td><input type="radio" name="radio"/>Radio 1</td>
23       <td><input type="radio" name="radio"/>Radio 2</td>
24     </tr>
25     <tr>
26       <td><input type="radio" name="radio-disabled" disabled/>Disabled</td>
27       <td><input type="radio" name="radio-disabled" disabled checked/>Checked Disabled</td>
28     </tr>
29     <tr>
30       <td><input type="checkbox" name="check"/>Check</td>
31       <td><input type="checkbox" name="check-disabled" checked disabled/>Check Disabled</td>
32     </tr>
33   </table>
34
35   <h1>Combos</h1>
36   <table>
37     <tr>
38       <td><select><option>A</option><option selected>B</option><option>C</option></td>
39       <td><select><option>Combo option 1</option><option>Combo option 2</option><option>Combo option 3</option></td>
40       <td><select disabled><option>Disabled option 1</option><option>Disabled option 2</option><option>Disabled option 3</option></td>
41     </tr>
42   </table>
43
44   <h1>Text areas</h1>
45   <table>
46     <tr>
47       <td><input value="Entry"></td>
48       <td><input value="Disabled" disabled></td>
49       <td><input value="Read only" readonly></td>
50     </tr>
51     <tr>
52       <td><input type="password" value="Password"></td>
53       <td><input type="password" value="Disabled" disabled></td>
54       <td><input type="password" value="Read only" readonly></td>
55     </tr>
56     <tr>
57       <td><textarea rows="1">Single row text area</textarea></td>
58       <td><textarea rows="1" disabled>Disabled</textarea></td>
59       <td><textarea rows="1" readonly>Read only</textarea></td>
60     </tr>
61     <tr>
62       <td><textarea rows="5">No scrollbars initially</textarea></td>
63       <td><textarea rows="5">With vertical scrollbar
64
65
66
67
68
69
70       </textarea></td>
71       <td><textarea rows="5" style='white-space: nowrap'>With horizontal scrollbars..................</textarea></td>
72     </tr>
73   </table>
74
75   <h1>Search field</h1>
76   <table>
77     <tr>
78       <td><input type="search" results value="Small" style="font-size: 8px;"></td>
79       <td><input type="search" results value="Big" style="font-size: 32px;"></td>
80     </tr>
81   </table>
82
83   <h1>Spin buttons</h1>
84   <table>
85     <tr>
86       <td><input type="number" value="Small" style="font-size: 8px;"></td>
87       <td><input type="number" value="Big" style="font-size: 32px;"></td>
88     </tr>
89   </table>
90
91   <h1>Option lists</h1>
92   <table>
93     <tr>
94       <td>
95         <select size="5">
96           <option>Option 1</option><option>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
97         </select>
98       </td>
99       <td>
100         <select size="3">
101           <option>Option 1</option><option>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
102         </select>
103       </td>
104       <td>
105         <select size="3">
106           <option disabled>Option 1</option><option disabled>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
107         </select>
108       </td>
109       <td>
110         <select size="3" disabled>
111           <option>Option 1</option><option>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
112         </select>
113       </td>
114     </tr>
115   </table>
116
117   <h1>Progress bars</h1>
118   <table>
119     <tr>
120       <td><progress value="50" max="100"></progress></td>
121       <td><progress indeterminate="true"></progress></td>
122       <td><progress value="50" max="100" style="width: 150px; height: 16px;"></progress></td>
123       <td><progress indeterminate="true" style="width: 150px; height: 16px;"></progress></td>
124     </tr>
125   </table>
126
127   <h1>Range selector</h1>
128   <table>
129     <tr>
130       <td><input type="range" value="50" max="100"></input></td>
131       <td><input type="range" value="50" max="100" style="-webkit-appearance: slider-vertical"></input></td>
132       <td><input type="range" value="50" max="100" disabled></input></td>
133       <td><input type="range" value="50" max="100" style="-webkit-appearance: slider-vertical" disabled></input></td>
134     </tr>
135   </table>
136
137   <h1>Iframe scrollbars</h1>
138   <iframe width="200" height="100" scrolling="yes" src="data:text/html,
139       <html>
140         <body>
141           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
142           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
143           dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
144           proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
145         </body>
146       </html>">
147   </iframe>
148
149   <h1>Media controls</h1>
150   <video controls></video>
151   </body>
152 </html>