Google Git
Sign in
webkit / WebKit / 56e425f7296dc561da209c5e3a1d2dc01850ac91 / . / ManualTests / gtk / theme.html
blob: 6fd214ae1acaa2639189e8303275889af4351376 [file] [log] [blame]
<html>
<body id="body">
<h1>GTK+ themed elements</h1>
<p>This is a manual tests to check how all elements having a native appearance are rendered by WebKitGTK+.
To test different themes, open this test in MiniBrowser (or any other WebKitGTK+ based browser) passing
GTK_THEME=theme-name[:variant] environment variable.
</p>
<p>Text direction:
<input type="radio" name="direction" id="ltr" checked onchange="if (document.getElementById('ltr').checked) body.setAttribute('dir', 'ltr');"/>Left to right
<input type="radio" name="direction" id="rtl" onchange="if (document.getElementById('rtl').checked) body.setAttribute('dir', 'rtl');"/> Right to left<br/>
</p>
<h1>Buttons</h1>
<table>
<tr>
<td><button type="button">Button</button></td>
<td><button type="button" disabled>Disabled</button></td>
</tr>
<tr>
<td><input type="radio" name="radio"/>Radio 1</td>
<td><input type="radio" name="radio"/>Radio 2</td>
</tr>
<tr>
<td><input type="radio" name="radio-disabled" disabled/>Disabled</td>
<td><input type="radio" name="radio-disabled" disabled checked/>Checked Disabled</td>
</tr>
<tr>
<td><input type="checkbox" name="check"/>Check</td>
<td><input type="checkbox" name="check-disabled" checked disabled/>Check Disabled</td>
</tr>
</table>
<h1>Combos</h1>
<table>
<tr>
<td><select><option>A</option><option selected>B</option><option>C</option></td>
<td><select><option>Combo option 1</option><option>Combo option 2</option><option>Combo option 3</option></td>
<td><select disabled><option>Disabled option 1</option><option>Disabled option 2</option><option>Disabled option 3</option></td>
</tr>
</table>
<h1>Text areas</h1>
<table>
<tr>
<td><input value="Entry"></td>
<td><input value="Disabled" disabled></td>
<td><input value="Read only" readonly></td>
</tr>
<tr>
<td><input type="password" value="Password"></td>
<td><input type="password" value="Disabled" disabled></td>
<td><input type="password" value="Read only" readonly></td>
</tr>
<tr>
<td><textarea rows="1">Single row text area</textarea></td>
<td><textarea rows="1" disabled>Disabled</textarea></td>
<td><textarea rows="1" readonly>Read only</textarea></td>
</tr>
<tr>
<td><textarea rows="5">No scrollbars initially</textarea></td>
<td><textarea rows="5">With vertical scrollbar
</textarea></td>
<td><textarea rows="5" style='white-space: nowrap'>With horizontal scrollbars..................</textarea></td>
</tr>
</table>
<h1>Search field</h1>
<table>
<tr>
<td><input type="search" results value="Small" style="font-size: 8px;"></td>
<td><input type="search" results value="Big" style="font-size: 32px;"></td>
</tr>
</table>
<h1>Spin buttons</h1>
<table>
<tr>
<td><input type="number" value="Small" style="font-size: 8px;"></td>
<td><input type="number" value="Big" style="font-size: 32px;"></td>
</tr>
</table>
<h1>Option lists</h1>
<table>
<tr>
<td>
<select size="5">
<option>Option 1</option><option>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
</select>
</td>
<td>
<select size="3">
<option>Option 1</option><option>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
</select>
</td>
<td>
<select size="3">
<option disabled>Option 1</option><option disabled>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
</select>
</td>
<td>
<select size="3" disabled>
<option>Option 1</option><option>Option 2</option><option>Option 3</option><option selected>Option 4</option><option>Option 5</option>
</select>
</td>
</tr>
</table>
<h1>Progress bars</h1>
<table>
<tr>
<td><progress value="50" max="100"></progress></td>
<td><progress indeterminate="true"></progress></td>
<td><progress value="50" max="100" style="width: 150px; height: 16px;"></progress></td>
<td><progress indeterminate="true" style="width: 150px; height: 16px;"></progress></td>
</tr>
</table>
<h1>Range selector</h1>
<table>
<tr>
<td><input type="range" value="50" max="100"></input></td>
<td><input type="range" value="50" max="100" style="-webkit-appearance: slider-vertical"></input></td>
<td><input type="range" value="50" max="100" disabled></input></td>
<td><input type="range" value="50" max="100" style="-webkit-appearance: slider-vertical" disabled></input></td>
</tr>
<tr>
<td><input type="range" min="0" max="100" step="25" list="steplist"></input></td>
<td><input type="range" min="0" max="100" step="25" list="steplist" style="-webkit-appearance: slider-vertical"></input></td>
</tr>
</table>
<datalist id="steplist">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>
<h1>Iframe scrollbars</h1>
<iframe width="200" height="100" scrolling="yes" src="data:text/html,
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
</html>">
</iframe>
<h1>Datalist</h1>
<input list="ports" name="port">
<datalist id="ports">
<option value="WebKitGTK">
<option value="WPEWebKit">
<option value="PlayStation">
<option value="macOS">
<option value="iOS">
</datalist>
<h1>Media controls</h1>
<video controls></video>
</body>
</html>