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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!doctype html>
<title>default style resets</title>
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
<style>
/* Have some non-initial values on the parent so we can tell the difference whether the UA stylesheet uses 'initial' keyword. */
#tests, #refs {
letter-spacing: 5px;
word-spacing: 5px;
line-height: 5px;
text-transform: uppercase;
text-indent: 5px;
text-shadow: 0 0 5px transparent;
text-align: right;
}
</style>
<style>
/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
@namespace url(urn:not-html);
input, select, button, textarea {
letter-spacing: initial;
word-spacing: initial;
line-height: initial;
text-transform: initial;
text-indent: initial;
text-shadow: initial;
}
input, select, textarea {
text-align: initial;
}
input[type=reset i], input[type=button i], input[type=submit i], button {
text-align: center;
}
input[type=radio i], input[type=checkbox i], input[type=reset i], input[type=button i],
input[type=submit i], input[type=color i], input[type=search i], select, button {
box-sizing: border-box;
}
input, button {
display: inline-block;
}
input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
overflow: clip;
overflow-clip-margin: 0;
}
/* in spec prose: */ select, textarea, meter, progress {
display: inline-block;
}
input[type=hidden i] { display: none !important; }
marquee {
text-align: initial;
}
table { display: table; box-sizing: border-box; }
caption { display: table-caption; }
colgroup, colgroup[hidden] { display: table-column-group; }
col, col[hidden] { display: table-column; }
thead, thead[hidden] { display: table-header-group; }
tbody, tbody[hidden] { display: table-row-group; }
tfoot, tfoot[hidden] { display: table-footer-group; }
tr, tr[hidden] { display: table-row; }
td, th { display: table-cell; }
table {
text-indent: initial;
}
</style>
<div id="tests">
<input type="hidden">
<input type="text">
<input type="search">
<input type="tel">
<input type="url">
<input type="email">
<input type="password">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime-local">
<input type="number">
<input type="range">
<input type="color">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="submit">
<input type="image">
<input type="reset">
<input type="button">
<select><optgroup><option></select>
<select multiple></select>
<optgroup></optgroup>
<option></option>
<button></button>
<textarea></textarea>
<table><tbody><tr><td></table>
<marquee></marquee>
</div>
<div id="refs"></div>
<script>
const props = ['letter-spacing',
'word-spacing',
'line-height',
'text-transform',
'text-indent',
'text-shadow',
'text-align',
'display',
'overflow',
'overflow-clip-margin',
'box-sizing'];
runUAStyleTests(props);
</script>
|
