WordPress.org

Make WordPress Core

Ticket #30392: 30392.test.htm

File 30392.test.htm, 2.1 KB (added by afercia, 6 years ago)

test case

Line 
1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>test file input elements in Safari</title>
6<meta name="viewport" content="width=device-width">
7<style>
8body {
9        padding: 10px 10%;
10}
11.intro {
12        padding: 20px;
13        background: lightblue;
14}
15:focus {
16        outline: 2px solid red;
17        background: lightblue;
18}
19</style>
20</head>
21<body>
22
23<div class="intro">
24<p>plupload uses something like this input type="file"</p>
25<code>
26&lt;input id=​"html5_197263a5ok7gmcou4a2q512e05" type=​"file" style=​"font-size:​ 999px;​ opacity:​ 0;​ position:​ absolute;​ top:​ 0px;​ left:​ 0px;​ width:​ 100%;​ height:​ 100%;​" multiple accept&gt;
27</code>
28<p>inside a DIV with class="moxie-shim moxie-shim-html5" and 0 dimensions:</p>
29<code>
30style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; overflow: hidden; z-index: 0;"
31</code>
32</div>
33
34<p>
35Navigate this page with the <kbd>Tab</kbd> key on your keyboard: all tested browsers focus all the fields except Safari which skips the invisible (or semi-invisible) ones (Firefox doesn't show the focus styles, but it does focus all the fields).
36</p>
37
38<h2>in the markup</h2>
39<input id="html5_test01" type="file" style="" multiple>
40
41
42<h2>in the markup invisible</h2>
43<div style="position: relative;">
44<input id="html5_test02" type="file" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple>
45</div>
46<br><br>
47
48
49<h2>JS generated</h2>
50<div style="position: relative;" id="placeholder01"><br><br></div>
51
52
53<h2>JS generated invisible</h2>
54<div style="position: relative;" id="placeholder02"></div>
55
56
57<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
58<script>
59
60jQuery( '#placeholder01' ).prepend( '<input id="html5_test03" type="file" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; " multiple>' );
61
62jQuery( '#placeholder02' ).prepend( '<input id="html5_test04" type="file" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; " multiple>' );
63
64</script>
65</body>
66</html>