Attachment #806174: reftests for bug #907396

View | Details | Raw Unified | Return to bug 907396
Collapse All | Expand All

(-)a/layout/reftests/css-display/display-contents-acid-ref.html (+178 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>CSS Test: CSS display:contents</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
<style type="text/css">
8
9
        html,body {
10
            color:black; background-color:white; font-size:16px; padding:0; margin:0;
11
        }
12
	
13
.table   { display:table; border-collapse:collapse; border: blue solid 1pt;}
14
.itable  { display:inline-table; }
15
.caption { display:table-caption; }
16
.cell    { display:table-cell; border:inherit; }
17
.row     { display:table-row; border: green dashed 1pt; }
18
.rowg    { display:table-row-group; }
19
.head    { display:table-header-group; }
20
.foot    { display:table-footer-group; }
21
.col     { display:table-column; }
22
.colg    { display:table-column-group; }
23
.flex    { display:flex; }
24
.iflex   { display:inline-flex; }
25
.li      { display:list-item; }
26
.ib      { display:inline-block; }
27
.inline  { display:inline; }
28
.columns  { -moz-columns:2; columns:2; height:4em; }
29
30
31
32
.c1 { color:lime; }
33
.c2 { color:pink; }
34
.c3 { color:teal; }
35
.c4 { color:green; }
36
.c5 { color:silver; }
37
.c6 { color:cyan; }
38
.c7 { color:magenta; }
39
.c8 { color:yellow; }
40
.c9 { color:grey; }
41
.c10{ color:black; }
42
43
.b { background:blue; }
44
    </style>
45
</head>
46
<body style="color:red">
47
48
<div class="caption c2">1<span>1</span></div>
49
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
50
<div class="cell c3">3</div>
51
<div class="rowg c4">4</div>
52
<div class="cell c5">5a</div>
53
<div class="cell c5">5b</div>
54
<div class="head c6">6</div>
55
<div class="cell c7"><div class="inline c2">7<span class="b">a</span></div></div>
56
<div class="cell c8">7b</div>
57
<div class="foot c9">8</div>
58
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
59
<div class="cell c10">10</div>
60
61
<div class="table" style="float:right">
62
<div class="caption c2">1<span>1</span></div>
63
<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
64
<div class="cell c3" style="border:none">3</div>
65
<div class="rowg c4">4</div>
66
<div class="cell c5" style="border:none">5a</div>
67
<div class="cell c5">5b</div>
68
<div class="head c6">6</div>
69
<div class="cell c7" style="border:none"><div class="inline c2">7<span class="b">a</span></div></div>
70
<div class="cell c8" style="border:none">7b</div>
71
<div class="foot c9" style="border:none">8</div>
72
<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
73
<div class="cell c10" style="border:none">10</div>
74
</div>
75
76
<div class="flex c1">
77
0&nbsp;
78
<div class="inline c1">x&nbsp;</div>
79
<div class="inline c1"><div class="inline c2">y</div></div>
80
<div class="inline c1"><div class="inline c2"><div class="">1<span>1</span></div></div></div>
81
<div class="inline c2"><div class="inline">2a<div class="">2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
82
<div class="c3">3</div>
83
<div class="inline"><div class="inline c4">4</div></div>
84
<div class=""><div class="inline c5">5a</div></div>
85
<div class=" c5">5b</div>
86
<div class="inline c6"><div class="">6</div></div>
87
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
88
<div class="inline c9"><div class="">8</div></div>
89
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
90
<span class="c2 b">b</span>
91
<div class="inline c2">c</div>
92
<div class="inline c10"><div class="">10</div></div>
93
</div>
94
95
<div class="flex c1">
96
<div class="inline c2">0&nbsp;</div>
97
<div class="inline c1">x&nbsp;</div>
98
<div class="inline c1"><div class="inline c2">y</div></div>
99
<div class="inline c1"><div class="inline c2"><div class="">1<span>1</span></div></div></div>
100
<div class="c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
101
<div class="c3">3</div>
102
<div class="inline"><div class="inline c4">4</div></div>
103
<div class=""><div class="inline c5">5a</div></div>
104
<div class=" c5">5b</div>
105
<div class="inline c6"><div class="">6</div></div>
106
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
107
<div class="inline c9"><div class="">8</div></div>
108
<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
109
<span class="c2 b">b</span>
110
<div class="inline c2">c</div>
111
<div class="inline c10"><div class="">10</div></div>
112
</div>
113
114
115
<div class="iflex"><div class="contents c2">
116
0
117
</div></div>
118
<div class="iflex"><div class="contents c2">
119
0
120
<div class="inline c1">1</div>
121
2
122
</div></div>
123
<div class="iflex"><div class="contents c2">
124
0<div class="inline c1">1</div>2
125
</div></div>
126
<div class="iflex c3">
127
0<div class="inline c2"><div class="c1">1</div></div>2
128
</div>
129
<div class="iflex c3">
130
<div class="inline c2">0</div><div class="inline c2"><div class="c1">1</div></div><div class="inline c2">2</div>
131
</div>
132
<div class="iflex c3">
133
<div class="inline">0</div>
134
<div class="inline"><div class="inline c1">1</div></div>
135
<div class="inline">2</div>
136
</div>
137
138
<ul><li class="c1"><div class="inline c2">
139
0
140
<div class="inline c1">x</div>
141
<div class="inline c1"><div class="inline c2">y</div></div>
142
<div class="inline c1"><div class="inline c2"><div class="">1<span>1</span></div></div></div>
143
<div class="inline c2"><div class="inline">2a<div class="">2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
144
<div class="inline c3"><div class="inline">3</div></div>
145
<div class="inline"><div class="inline c4">4</div></div>
146
<div class=""><div class="inline c5">5a</div></div>
147
<div class=" c5">5b</div>
148
<div class="inline c6"><div class="">6</div></div>
149
<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
150
<div class="inline c9"><div class="">8</div></div>
151
<div class="inline c9"><div class="inline">9<div class="inline c2">a<span class="b">b</span>c</div></div></div>
152
<div class="inline c10"><div class="">10</div></div>
153
</div></li>
154
</ul>
155
156
<div class="columns">
157
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
158
<div class="contents c2"><div>2</div></div>
159
<div class="contents c3"><div>3</div></div>
160
</div>
161
162
<div class="columns">
163
<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
164
<div class="contents c2"><div>2</div></div>
165
<div class="contents c3"><div>3</div></div>
166
</div>
167
168
<!--  -->
169
170
<fieldset class="inline c1"><legend class="inline">Legend</legend>fieldset</fieldset>
171
<button class="inline c1">but<span>ton</span></button>
172
<select class="inline c1"><option>select</select>
173
<legend class="inline c1">Legend</legend>
174
<div class="inline c1" style="float:left">float:left</div>
175
<div class="inline c1" style="position:absolute">position:absolute</div>
176
177
</body>
178
</html>
(-)a/layout/reftests/css-display/display-contents-acid.html (+182 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>CSS Test: CSS display:contents</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
<style type="text/css">
9
10
        html,body {
11
            color:black; background-color:white; font-size:16px; padding:0; margin:0;
12
        }
13
	
14
.table   { display:table; border-collapse:collapse; border: blue solid 1pt;}
15
.itable  { display:inline-table; }
16
.caption { display:table-caption; }
17
.cell    { display:table-cell; border:inherit; }
18
.row     { display:table-row; border: green dashed 1pt; }
19
.rowg    { display:table-row-group; }
20
.head    { display:table-header-group; }
21
.foot    { display:table-footer-group; }
22
.col     { display:table-column; }
23
.colg    { display:table-column-group; }
24
.flex    { display:flex; }
25
.iflex   { display:inline-flex; }
26
.li      { display:list-item; }
27
.ib      { display:inline-block; }
28
.inline  { display:inline; }
29
.columns  { -moz-columns:2; columns:2; height:4em; }
30
31
.contents { display:contents; }
32
33
.c1 { color:lime; }
34
.c2 { background:blue; color:pink; }
35
.c3 { color:teal; }
36
.c4 { color:green; }
37
.c5 { color:silver; }
38
.c6 { color:cyan; }
39
.c7 { color:magenta; }
40
.c8 { color:yellow; }
41
.c9 { color:grey; }
42
.c10{ color:black; }
43
44
.b { background:inherit; }
45
    </style>
46
</head>
47
<body style="color:red">
48
49
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
50
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
51
<div class="contents c3"><div class="cell">3</div></div>
52
<div class="contents c4"><div class="rowg">4</div></div>
53
<div class="contents c5"><div class="cell">5a</div></div>
54
<div class="cell c5">5b</div>
55
<div class="contents c6"><div class="head">6</div></div>
56
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
57
<div class="contents c8"><div class="cell">7b</div></div>
58
<div class="contents c9"><div class="foot">8</div></div>
59
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
60
<div class="contents c10"><div class="cell">10</div></div>
61
62
<div class="table" style="float:right">
63
<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
64
<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
65
<div class="contents c3"><div class="cell">3</div></div>
66
<div class="contents c4"><div class="rowg">4</div></div>
67
<div class="contents c5"><div class="cell">5a</div></div>
68
<div class="cell c5">5b</div>
69
<div class="contents c6"><div class="head">6</div></div>
70
<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
71
<div class="contents c8"><div class="cell">7b</div></div>
72
<div class="contents c9"><div class="foot">8</div></div>
73
<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
74
<div class="contents c10"><div class="cell">10</div></div>
75
</div>
76
77
<div class="flex c1">
78
0
79
<div class="contents c1">x</div>
80
<div class="contents c1"><div class="contents c2">y</div></div>
81
<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
82
<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
83
<div class="contents c3"><div class="inline">3</div></div>
84
<div class="inline"><div class="contents c4">4</div></div>
85
<div class=""><div class="contents c5">5a</div></div>
86
<div class=" c5">5b</div>
87
<div class="contents c6"><div class="">6</div></div>
88
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
89
<div class="contents c9"><div class="">8</div></div>
90
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
91
<div class="contents c10"><div class="">10</div></div>
92
</div>
93
94
<div class="flex"><div class="contents c2">
95
0
96
<div class="contents c1">x</div>
97
<div class="contents c1"><div class="contents c2">y</div></div>
98
<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
99
<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
100
<div class="contents c3"><div class="inline">3</div></div>
101
<div class=""><div class="contents c4">4</div></div>
102
<div class=""><div class="contents c5">5a</div></div>
103
<div class=" c5">5b</div>
104
<div class="contents c6"><div class="">6</div></div>
105
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
106
<div class="contents c9"><div class="">8</div></div>
107
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
108
<div class="contents c10"><div class="">10</div></div>
109
</div></div>
110
111
<div class="iflex"><div class="contents c2">
112
0
113
</div></div>
114
<div class="iflex"><div class="contents c2">
115
0
116
<div class="contents c1">1</div>
117
2
118
</div></div>
119
<div class="iflex"><div class="contents c2">
120
0
121
<div class="c1">1</div>
122
2
123
</div></div>
124
<div class="iflex c3">
125
0
126
<div class="contents c2"><div class="c1">1</div></div>
127
2
128
</div>
129
<div class="iflex c3">
130
<div class="contents c2">0</div>
131
<div class="contents c2"><div class="c1">1</div></div>
132
<div class="contents c2">2</div>
133
</div>
134
<div class="iflex c3">
135
<div class="inline">0</div>
136
<div class="contents"><div class="inline c1">1</div></div>
137
<div class="inline">2</div>
138
</div>
139
140
<ul><li class="c1"><div class="contents c2">
141
0
142
<div class="contents c1">x</div>
143
<div class="contents c1"><div class="contents c2">y</div></div>
144
<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
145
<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
146
<div class="contents c3"><div class="inline">3</div></div>
147
<div class="inline"><div class="contents c4">4</div></div>
148
<div class=""><div class="contents c5">5a</div></div>
149
<div class=" c5">5b</div>
150
<div class="contents c6"><div class="">6</div></div>
151
<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
152
<div class="contents c9"><div class="">8</div></div>
153
<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
154
<div class="contents c10"><div class="">10</div></div>
155
</div></li>
156
</ul>
157
158
<div class="columns">
159
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
160
<div class="contents c2"><div>2</div></div>
161
<div class="contents c3"><div>3</div></div>
162
</div>
163
164
<div class="columns">
165
<div class="columns contents">
166
<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
167
<div class="contents c2"><div>2</div></div>
168
<div class="contents c3"><div>3</div></div>
169
</div>
170
</div>
171
172
<!-- Stuff below should simply ignore having display:contents -->
173
174
<fieldset class="contents c1"><legend class="contents">Legend</legend>fieldset</fieldset>
175
<button class="contents c1">but<span>ton</span></button>
176
<select class="contents c1"><option>select</select>
177
<legend class="contents c1">Legend</legend>
178
<div class="contents c1" style="float:left">float:left</div>
179
<div class="contents c1" style="position:absolute">position:absolute</div>
180
181
</body>
182
</html>
(-)a/layout/reftests/css-display/display-contents-generated-content-ref.html (+119 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>CSS Test: CSS display:contents; generated content</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
<style type="text/css">
9
body,html { color:black; background-color:white; }
10
11
.test {
12
  display: inline;
13
  content: "content";
14
  color: lime;
15
}
16
.contents {
17
  display: inline;
18
  color: green;
19
}
20
.before::before {
21
  display: inline;
22
  content:"before";
23
}
24
.after::after {
25
  display: inline;
26
  content:"after";
27
}
28
</style>
29
</head>
30
<body>
31
32
<div class="test"><span>A a</span></div>
33
<div class="test"><span class="contents">t1</span></div>
34
<div class="test"></div>
35
<div class="contents before">1<span>B b</span>2</div>
36
<div class="contents after">1<span>C c</span>2</div>
37
<div class="contents before after">1<span>D d</span>2</div>
38
<div class="contents before">1<span class="t5">B b</span>2</div>
39
<div class="contents after">12</div>
40
<div class="contents before after">1<span class="t7">D d</span>2</div>
41
42
<div class="contents">
43
  <div class="test"><span>span</span></div>
44
  <div class="test"><span class="contents">t3</span></div>
45
  <div class="test"></div>
46
  <div class="contents before">1<span>span</span>2</div>
47
  <div class="contents after">1<span>span</span>2</div>
48
  <div class="contents before after">1<span>span</span>2</div>
49
  <div class="contents before">12</div>
50
  <div class="contents after">1<span class="t9">span</span>2</div>
51
  <div class="contents before after">12</div>
52
  <div class="contents before">1<span class="t11">span</span>2</div>
53
  <div class="contents after">12</div>
54
  <div class="contents before after">1<span class="t13">span</span>2</div>
55
</div>
56
57
<div class="contents"><span class="s1">
58
  <div class="test"><span>span</span></div>
59
  <div class="contents before">1<span>span</span>2</div>
60
  <div class="contents after">1<span>span</span>2</div>
61
  <div class="contents before after">1<span>span</span>2</div>
62
</span></div>
63
64
<div class="contents"><span class="s2">
65
  <div class="test"><span>span</span></div>
66
  <div class="contents before">1<span>span</span>2</div>
67
  <div class="contents after">1<span>span</span>2</div>
68
  <div class="contents before after">1<span>span</span>2</div>
69
</span></div>
70
71
<div class="contents"><span class="s3">
72
  <div class="test"><span>span</span></div>
73
  <div class="contents before">1<span>span</span>2</div>
74
  <div class="contents after">1<span>span</span>2</div>
75
  <div class="contents before after">1<span>span</span>2</div>
76
</span></div>
77
78
<div class="contents"><span class="s4">
79
  <div class="test"><span>span</span></div>
80
  <div class="contents before">1<span>span</span>2</div>
81
  <div class="contents after">1<span>span</span>2</div>
82
  <div class="contents before after">1<span>span</span>2</div>
83
</span></div>
84
85
<div class="contents"></div>
86
87
<div class="contents"></div>
88
89
<div class="contents before"><span class="s7">
90
  <div class="contents before">1<span>span</span>2</div>
91
  <div class="contents after">1<span>span</span>2</div>
92
  <div class="contents before after">1<span>span</span>2</div>
93
</span></div>
94
95
<div class="contents after"><span class="s8">
96
  <div class="contents before">1<span>span</span>2</div>
97
  <div class="contents after">1<span>span</span>2</div>
98
  <div class="contents before after">1<span>span</span>2</div>
99
</span></div>
100
101
<div class="contents"><span class="s9">
102
  <div class="contents before">1<span>span</span>2</div>
103
  <div class="contents after">1<span>span</span>2</div>
104
  <div class="contents before after">1<span>span</span>2</div>
105
</span></div>
106
107
<div class="contents before after"><span class="s10">
108
  <div class="test"><span>span</span></div>
109
  <div class="contents before">1<span>span</span>2</div>
110
  <div class="contents after">1<span>span</span>2</div>
111
  <div class="contents before after">1<span>span</span>2</div>
112
</span></div>
113
114
<div class="contents before"></div>
115
116
<div class="contents after"></div>
117
118
</body>
119
</html>
(-)a/layout/reftests/css-display/display-contents-generated-content.html (+206 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US" class="reftest-wait">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>CSS Test: CSS display:contents; generated content</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
<style type="text/css">
9
body,html { color:black; background-color:white; }
10
11
.test {
12
  display: contents;
13
  content: "content";
14
  color: lime;
15
}
16
.contents {
17
  display: contents;
18
  color: green;
19
}
20
.s1 {display: none;}
21
.s2 {display: none;}
22
.s3 {display: contents;}
23
.s5 {display: contents;}
24
.s7 {display: none;}
25
.s8 {display: none;}
26
.s9 {display: contents;}
27
.s11 {display: contents;}
28
.before::before {
29
  display: contents;
30
  content:"before";
31
}
32
.after::after {
33
  display: contents;
34
  content:"after";
35
}
36
</style>
37
<script>
38
39
function runTest() {
40
  document.body.offsetHeight;
41
  document.querySelector('.t1').className = 'contents';
42
  document.body.offsetHeight;
43
  document.querySelector('.t2').style.display = 'none';
44
  document.body.offsetHeight;
45
  document.querySelector('.t3').className = 'contents';
46
  document.body.offsetHeight;
47
  document.querySelector('.t4').style.display = 'none';
48
  document.body.offsetHeight;
49
  document.querySelector('.t5').className = 'contents';
50
  document.body.offsetHeight;
51
  document.querySelector('.t6').style.display = 'none';
52
  document.body.offsetHeight;
53
  document.querySelector('.t7').className = 'contents';
54
  document.body.offsetHeight;
55
  document.querySelector('.t8').style.display = 'none';
56
  document.body.offsetHeight;
57
  document.querySelector('.t9').className = 'contents';
58
  document.body.offsetHeight;
59
  document.querySelector('.t10').style.display = 'none';
60
  document.body.offsetHeight;
61
  document.querySelector('.t11').className = 'contents';
62
  document.body.offsetHeight;
63
  document.querySelector('.t12').style.display = 'none';
64
  document.body.offsetHeight;
65
  document.querySelector('.t13').className = 'contents';
66
  document.body.offsetHeight;
67
  document.querySelector('.s1').className = 'contents';
68
  document.body.offsetHeight;
69
  document.querySelector('.s2').style.display = 'inline';
70
  document.body.offsetHeight;
71
  document.querySelector('.s3').style.display = 'inline';
72
  document.body.offsetHeight;
73
  document.querySelector('.s4').className = 'contents';
74
  document.body.offsetHeight;
75
  document.querySelector('.s5').style.display = 'none';
76
  document.body.offsetHeight;
77
  document.querySelector('.s6').style.display = 'none';
78
  document.body.offsetHeight;
79
  document.querySelector('.s7').className = 'contents';
80
  document.body.offsetHeight;
81
  document.querySelector('.s8').style.display = 'inline';
82
  document.body.offsetHeight;
83
  document.querySelector('.s9').style.display = 'inline';
84
  document.body.offsetHeight;
85
  document.querySelector('.s10').className = 'contents';
86
  document.body.offsetHeight;
87
  document.querySelector('.s11').style.display = 'none';
88
  document.body.offsetHeight;
89
  document.querySelector('.s12').style.display = 'none';
90
  document.body.offsetHeight;
91
92
  document.documentElement.className = '';
93
}
94
95
</script>
96
</head>
97
<body onload="runTest()">
98
99
<div class="test"><span>A a</span></div>
100
<div class="test"><span class="t1">t1</span></div>
101
<div class="test"><span class="t2">t2</span></div>
102
<div class="contents before">1<span>B b</span>2</div>
103
<div class="contents after">1<span>C c</span>2</div>
104
<div class="contents before after">1<span>D d</span>2</div>
105
<div class="contents before">1<span class="t5">B b</span>2</div>
106
<div class="contents after">1<span class="t6">C c</span>2</div>
107
<div class="contents before after">1<span class="t7">D d</span>2</div>
108
109
<div class="contents">
110
  <div class="test"><span>span</span></div>
111
  <div class="test"><span class="t3">t3</span></div>
112
  <div class="test"><span class="t4">t4</span></div>
113
  <div class="contents before">1<span>span</span>2</div>
114
  <div class="contents after">1<span>span</span>2</div>
115
  <div class="contents before after">1<span>span</span>2</div>
116
  <div class="contents before">1<span class="t8">span</span>2</div>
117
  <div class="contents after">1<span class="t9">span</span>2</div>
118
  <div class="contents before after">1<span class="t10">span</span>2</div>
119
  <div class="contents before">1<span class="t11">span</span>2</div>
120
  <div class="contents after">1<span class="t12">span</span>2</div>
121
  <div class="contents before after">1<span class="t13">span</span>2</div>
122
</div>
123
124
<div class="contents"><span class="s1">
125
  <div class="test"><span>span</span></div>
126
  <div class="contents before">1<span>span</span>2</div>
127
  <div class="contents after">1<span>span</span>2</div>
128
  <div class="contents before after">1<span>span</span>2</div>
129
</span></div>
130
131
<div class="contents"><span class="s2">
132
  <div class="test"><span>span</span></div>
133
  <div class="contents before">1<span>span</span>2</div>
134
  <div class="contents after">1<span>span</span>2</div>
135
  <div class="contents before after">1<span>span</span>2</div>
136
</span></div>
137
138
<div class="contents"><span class="s3">
139
  <div class="test"><span>span</span></div>
140
  <div class="contents before">1<span>span</span>2</div>
141
  <div class="contents after">1<span>span</span>2</div>
142
  <div class="contents before after">1<span>span</span>2</div>
143
</span></div>
144
145
<div class="contents"><span class="s4">
146
  <div class="test"><span>span</span></div>
147
  <div class="contents before">1<span>span</span>2</div>
148
  <div class="contents after">1<span>span</span>2</div>
149
  <div class="contents before after">1<span>span</span>2</div>
150
</span></div>
151
152
<div class="contents"><span class="s5">
153
  <div class="test"><span>span</span></div>
154
  <div class="contents before">1<span>span</span>2</div>
155
  <div class="contents after">1<span>span</span>2</div>
156
  <div class="contents before after">1<span>span</span>2</div>
157
</span></div>
158
159
<div class="contents"><span class="s6">
160
  <div class="test"><span>span</span></div>
161
  <div class="contents before">1<span>span</span>2</div>
162
  <div class="contents after">1<span>span</span>2</div>
163
  <div class="contents before after">1<span>span</span>2</div>
164
</span></div>
165
166
<div class="contents before"><span class="s7">
167
  <div class="contents before">1<span>span</span>2</div>
168
  <div class="contents after">1<span>span</span>2</div>
169
  <div class="contents before after">1<span>span</span>2</div>
170
</span></div>
171
172
<div class="contents after"><span class="s8">
173
  <div class="contents before">1<span>span</span>2</div>
174
  <div class="contents after">1<span>span</span>2</div>
175
  <div class="contents before after">1<span>span</span>2</div>
176
</span></div>
177
178
<div class="contents"><span class="s9">
179
  <div class="contents before">1<span>span</span>2</div>
180
  <div class="contents after">1<span>span</span>2</div>
181
  <div class="contents before after">1<span>span</span>2</div>
182
</span></div>
183
184
<div class="contents before after"><span class="s10">
185
  <div class="test"><span>span</span></div>
186
  <div class="contents before">1<span>span</span>2</div>
187
  <div class="contents after">1<span>span</span>2</div>
188
  <div class="contents before after">1<span>span</span>2</div>
189
</span></div>
190
191
<div class="contents before"><span class="s11">
192
  <div class="test"><span>span</span></div>
193
  <div class="contents before">1<span>span</span>2</div>
194
  <div class="contents after">1<span>span</span>2</div>
195
  <div class="contents before after">1<span>span</span>2</div>
196
</span></div>
197
198
<div class="contents after"><span class="s12">
199
  <div class="test"><span>span</span></div>
200
  <div class="contents before">1<span>span</span>2</div>
201
  <div class="contents after">1<span>span</span>2</div>
202
  <div class="contents before after">1<span>span</span>2</div>
203
</span></div>
204
205
</body>
206
</html>
(-)a/layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html (+110 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US" class="reftest-wait">
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: CSS display:contents; style inheritance, DOM mutations</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
<style type="text/css">
9
body,span { color:black; background-color:white; }
10
.test { display:contents; }
11
.green { color:green; }
12
.border { border-left:1px solid green; }
13
b { border:inherit; font-weight:normal; }
14
</style>
15
<script>
16
function $(id) { return document.getElementById(id); }
17
function text(s) { return document.createTextNode(s); }
18
function b(s) { var e = document.createElement('b'); e.appendChild(document.createTextNode(s)); return e; }
19
function div(s) { var e = document.createElement('div'); e.setAttribute('class','test'); e.appendChild(document.createTextNode(s)); return e; }
20
function runTest() {
21
  var e = $('t1');
22
  var c = e.firstChild;
23
  e.insertBefore(text('g'), c);
24
  e.insertBefore(text('r'), c);
25
  e.appendChild(text('n'));
26
27
  var e = $('t2');
28
  var c = e.firstChild;
29
  e.insertBefore(text('gr'), c);
30
  e.appendChild(text('n'));
31
32
  var e = $('t3');
33
  var c = e.firstChild;
34
  e.insertBefore(text('n'), c);
35
  e.insertBefore(text('o'), c);
36
  e.appendChild(text('er'));
37
38
  var e = $('t4');
39
  var c = e.firstChild;
40
  e.insertBefore(text('n'), c);
41
  e.insertBefore(text('o'), c);
42
  e.appendChild(text('er'));
43
44
  var e = $('t5');
45
  var c = e.firstChild;
46
  e.insertBefore(b('1px green left '), c);
47
  e.appendChild(text('er'));
48
49
  var e = $('t6');
50
  e.appendChild(b('2px green left border'));
51
52
  var e = $('t7');
53
  e.appendChild(div('green'));
54
55
  var e = $('t8');
56
  e.appendChild(div('green'));
57
58
  var e = $('t9');
59
  var c = b("1px green left border");
60
  var d = div('');
61
  d.appendChild(c);
62
  e.appendChild(d);
63
64
  var e = $('t10');
65
  var c = b("1px green left border");
66
  var d = div('');
67
  d.setAttribute('style','border:inherit');
68
  d.appendChild(c);
69
  e.appendChild(d);
70
71
  var e = $('t11');
72
  var c = b("2px green left border");
73
  var d = div('');
74
  d.setAttribute('style','border:inherit');
75
  d.appendChild(c);
76
  e.appendChild(d);
77
78
  var e = $('t12');
79
  var c = e.firstChild;
80
  e.insertBefore(text("This text"), c);
81
  e.insertBefore(b(" should be"), c);
82
  e.appendChild(text(" green"));
83
84
  document.documentElement.className = '';
85
}
86
</script>
87
</head>
88
<body onload="runTest()">
89
90
<span class="green"><div class="test" id="t1">ee</div></span>
91
<span><div class="test green" id="t2">ee</div></span>
92
<br>
93
<span><div class="test border" id="t3"> bord</div></span>
94
<span><div class="test border" id="t4"><span> bord</span></div></span>
95
<span class="border"><div class="test" id="t5">bord</div></span>
96
<span class="border"><div class="test" style="border:inherit" id="t6"></div></span>
97
<br>
98
99
<span class="green"><div class="test" id="t7"></div></span>
100
<span><div class="test green" id="t8"></div></span>
101
<br>
102
<span class="border"><div class="test" id="t9"></div></span>
103
<span class="border"><div class="test" id="t10"></div></span>
104
<span class="border"><div class="test" style="border:inherit" id="t11"></div></span>
105
<br>
106
107
<span style="color:red"><div class="test green" id="t12"></div></span>
108
109
</body>
110
</html>
(-)a/layout/reftests/css-display/display-contents-style-inheritance-1-ref.html (+36 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: CSS display:contents; style inheritance</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
<style type="text/css">
8
body,span { color:black; background-color:white; }
9
.test { display:inline; }
10
.green { color:green; }
11
.border { border-left:1px solid green; }
12
b { font-weight:normal; }
13
</style>
14
</head>
15
<body>
16
<span class="green"><div class="test">green</div></span>
17
<span><div class="test green">green</div></span>
18
<br>
19
<span><div class="test">no border</div></span>
20
<span><div class="test">no border</div></span>
21
<span class="border"><div class="test"><b>1px green left border</b></div></span>
22
<span class="border"><div class="test" style="border:inherit"><b>2px green left border</b></div></span>
23
<br>
24
25
<span class="green"><div class="test"><div class="test">green</div></div></span>
26
<span><div class="test green"><div class="test">green</div></div></span>
27
<br>
28
<span class="border"><div class="test"><div class="test"><b>1px green left border</b></div></div></span>
29
<span class="border"><div class="test"><div class="test" style="border:inherit"><b>1px green left border</b></div></div></span>
30
<span class="border"><div class="test" style="border:inherit"><div class="test"><b>2px green left border</b></div></div></span>
31
<br>
32
33
<span><div class="green" id="t12">This text should be green</div></span>
34
35
</body>
36
</html>
(-)a/layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html (+52 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US" class="reftest-wait">
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: CSS display:contents; style inheritance, style changes</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
<style type="text/css">
9
body,span { color:black; background-color:white; }
10
.test { display:contents; border:10px solid black; }
11
.test2 { display:contents; border-style:none; }
12
.test3:not(:lang(foo)) { display:contents; color:cyan; }
13
.green { color:green; }
14
.border { border-left:1px solid green; }
15
b { border:inherit; font-weight:normal; }
16
</style>
17
<script>
18
function runTest() {
19
  var elms = document.querySelectorAll('.test')
20
  for (i=0; i < elms.length; ++i) {
21
    elms[i].classList.remove('test');
22
    elms[i].classList.add('test2');
23
  }
24
  document.body.lang = 'foo';
25
  document.body.offsetWidth;
26
27
  document.documentElement.className = '';
28
}
29
</script>
30
</head>
31
<body onload="setTimeout(runTest,0)">
32
<span class="green"><div class="test">green</div></span>
33
<span><div class="test green">green</div></span>
34
<br>
35
<span><div class="test border">no border</div></span>
36
<span><div class="test border"><span>no border</span></div></span>
37
<span class="border"><div class="test"><b>1px green left border</b></div></span>
38
<span class="border"><div class="test" style="border:inherit"><b>2px green left border</b></div></span>
39
<br>
40
41
<span class="green"><div class="test"><div class="test">green</div></div></span>
42
<span><div class="test green"><div class="test">green</div></div></span>
43
<br>
44
<span class="border"><div class="test"><div class="test"><b>1px green left border</b></div></div></span>
45
<span class="border"><div class="test"><div class="test" style="border:inherit"><b>1px green left border</b></div></div></span>
46
<span class="border"><div class="test" style="border:inherit"><div class="test" style="border:inherit"><b>2px green left border</b></div></div></span>
47
<br>
48
49
<span style="color:red"><div class="test3 green">This text should be green</div></span>
50
51
</body>
52
</html>
(-)a/layout/reftests/css-display/display-contents-style-inheritance-1.html (+37 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: CSS display:contents; style inheritance</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
<style type="text/css">
9
body,span { color:black; background-color:white; }
10
.test { display:contents; }
11
.green { color:green; }
12
.border { border-left:1px solid green; }
13
b { border:inherit; font-weight:normal; }
14
</style>
15
</head>
16
<body>
17
<span class="green"><div class="test">green</div></span>
18
<span><div class="test green">green</div></span>
19
<br>
20
<span><div class="test border">no border</div></span>
21
<span><div class="test border"><span>no border</span></div></span>
22
<span class="border"><div class="test"><b>1px green left border</b></div></span>
23
<span class="border"><div class="test" style="border:inherit"><b>2px green left border</b></div></span>
24
<br>
25
26
<span class="green"><div class="test"><div class="test">green</div></div></span>
27
<span><div class="test green"><div class="test">green</div></div></span>
28
<br>
29
<span class="border"><div class="test"><div class="test"><b>1px green left border</b></div></div></span>
30
<span class="border"><div class="test"><div class="test" style="border:inherit"><b>1px green left border</b></div></div></span>
31
<span class="border"><div class="test" style="border:inherit"><div class="test" style="border:inherit"><b>2px green left border</b></div></div></span>
32
<br>
33
34
<span style="color:red"><div class="test green">This text should be green</div></span>
35
36
</body>
37
</html>
(-)a/layout/reftests/css-display/display-contents-tables-2.xhtml (+14 lines)
Line     Link Here 
Line 0    Link Here 
1
<?xml version="1.0" encoding="UTF-8"?>
2
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
3
<head>
4
  <title>CSS Test: CSS display:contents; tables</title>
5
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
6
  <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
7
<style type="text/css">
8
html { color:red; background-color:white; }
9
body { color:white; background-color:pink; width:0; }
10
.test { display:contents; color:white; background-color:lime; }
11
td { background-color:inherit; }
12
</style>
13
</head>
14
<body><div class="test"><td>green</td></div><td>pink</td></body></html>
(-)a/layout/reftests/css-display/display-contents-tables-3-ref.xhtml (+12 lines)
Line     Link Here 
Line 0    Link Here 
1
<?xml version="1.0" encoding="UTF-8"?>
2
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
3
<head>
4
  <title>CSS Test: CSS display:contents; tables</title>
5
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
6
<style type="text/css">
7
body { color:red; background-color:white; }
8
.test { float:left; color:white; background-color:lime; }
9
td { background-color:inherit; }
10
</style>
11
</head>
12
<body><div class="test"><td>green</td></div></body></html>
(-)a/layout/reftests/css-display/display-contents-tables-3.xhtml (+13 lines)
Line     Link Here 
Line 0    Link Here 
1
<?xml version="1.0" encoding="UTF-8"?>
2
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
3
<head>
4
  <title>CSS Test: CSS display:contents; tables</title>
5
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
6
  <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
7
<style type="text/css">
8
body { color:red; background-color:white; }
9
.test { display:contents; color:white; background-color:lime; }
10
td { background-color:inherit; }
11
</style>
12
</head>
13
<body><div class="test"><td>green</td></div></body></html>
(-)a/layout/reftests/css-display/display-contents-tables-ref.xhtml (+12 lines)
Line     Link Here 
Line 0    Link Here 
1
<?xml version="1.0" encoding="UTF-8"?>
2
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
3
<head>
4
  <title>CSS Test: CSS display:contents; tables</title>
5
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
6
<style type="text/css">
7
body { color:red; background-color:white; }
8
td { color:white; background-color:lime; }
9
.pink { background-color:pink; }
10
</style>
11
</head>
12
<body><td>green</td><td class="pink">pink</td></body></html>
(-)a/layout/reftests/css-display/display-contents-tables.xhtml (+13 lines)
Line     Link Here 
Line 0    Link Here 
1
<?xml version="1.0" encoding="UTF-8"?>
2
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
3
<head>
4
  <title>CSS Test: CSS display:contents; tables</title>
5
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
6
  <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
7
<style type="text/css">
8
body { color:red; background-color:white; }
9
.test { display:contents; color:white; background-color:lime; }
10
td { background-color:inherit; }
11
</style>
12
</head>
13
<body><div class="test"><td>green</td></div><div class="test" style="background-color:pink"><td>pink</td></div></body></html>
(-)a/layout/reftests/css-display/display-contents-visibility-hidden-2.html (+20 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US" class="reftest-wait">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>CSS Test: CSS display:contents; visibility:hidden</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
</head>
9
<body style="color: red">
10
  <div id="x" style="display:contents; visibility: hidden; color: green">
11
    Line 1
12
  </div><script type="text/javascript">
13
    document.body.offsetWidth;
14
    document.getElementById("x").style.visibility = "visible";
15
    document.body.offsetWidth;
16
17
    document.documentElement.className = '';
18
  </script>
19
</body>
20
</html>
(-)a/layout/reftests/css-display/display-contents-visibility-hidden-ref.html (+14 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>CSS Test: CSS display:contents; visibility:hidden</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
</head>
8
<body>
9
  <div id="x" style="color:green">
10
    Line 1
11
  </div>
12
13
</body>
14
</html>
(-)a/layout/reftests/css-display/display-contents-visibility-hidden.html (+22 lines)
Line     Link Here 
Line 0    Link Here 
1
<!DOCTYPE html>
2
<html lang="en-US" class="reftest-wait">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>CSS Test: CSS display:contents; visibility:hidden</title>
6
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
7
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
8
</head>
9
<body>
10
  <div id="x" style="display:contents; visibility: hidden">
11
    Line 1
12
  </div><script type="text/javascript">
13
    document.body.offsetWidth;
14
    document.getElementById("x").style.visibility = "visible";
15
    document.body.style.color = "green";
16
    document.body.offsetWidth;
17
18
    document.documentElement.className = '';
19
  </script>
20
21
</body>
22
</html>
(-)a/layout/reftests/css-display/reftest.list (+13 lines)
Line     Link Here 
Line 0    Link Here 
1
# Tests for CSS Display spec features.
2
# http://dev.w3.org/csswg/css-display
3
4
pref(layout.css.display_contents.enabled,true) == display-contents-acid.html display-contents-acid-ref.html
5
pref(layout.css.display_contents.enabled,true) == display-contents-generated-content.html display-contents-generated-content-ref.html
6
pref(layout.css.display_contents.enabled,true) == display-contents-style-inheritance-1.html display-contents-style-inheritance-1-ref.html
7
pref(layout.css.display_contents.enabled,true) == display-contents-style-inheritance-1-stylechange.html display-contents-style-inheritance-1-ref.html
8
pref(layout.css.display_contents.enabled,true) fuzzy-if(d2d,2,100) == display-contents-style-inheritance-1-dom-mutations.html display-contents-style-inheritance-1-ref.html
9
pref(layout.css.display_contents.enabled,true) == display-contents-tables.xhtml display-contents-tables-ref.xhtml
10
pref(layout.css.display_contents.enabled,true) == display-contents-tables-2.xhtml display-contents-tables-ref.xhtml
11
pref(layout.css.display_contents.enabled,true) == display-contents-tables-3.xhtml display-contents-tables-3-ref.xhtml
12
pref(layout.css.display_contents.enabled,true) == display-contents-visibility-hidden.html display-contents-visibility-hidden-ref.html
13
pref(layout.css.display_contents.enabled,true) == display-contents-visibility-hidden-2.html display-contents-visibility-hidden-ref.html
(-)a/layout/reftests/reftest.list (+3 lines)
Line     Link Here 
 Lines 55-70   include css-animations/reftest.list Link Here 
55
include css-calc/reftest.list
55
include css-calc/reftest.list
56
56
57
# css character encoding tests
57
# css character encoding tests
58
skip-if(B2G) include css-charset/reftest.list
58
skip-if(B2G) include css-charset/reftest.list
59
59
60
# css default pseudo class tests
60
# css default pseudo class tests
61
skip-if(B2G) include css-default/reftest.list
61
skip-if(B2G) include css-default/reftest.list
62
62
63
# css-display spec tests
64
include css-display/reftest.list
65
63
# css :disable tests
66
# css :disable tests
64
skip-if(Android||B2G) include css-disabled/reftest.list
67
skip-if(Android||B2G) include css-disabled/reftest.list
65
68
66
# css :enable tests
69
# css :enable tests
67
skip-if(Android||B2G) include css-enabled/reftest.list
70
skip-if(Android||B2G) include css-enabled/reftest.list
68
71
69
# css @import tests
72
# css @import tests
70
skip-if(B2G) include css-import/reftest.list
73
skip-if(B2G) include css-import/reftest.list

Return to bug 907396