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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Writing Modes Test: Shrink-to-fit with orthogonal children</title>
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
<meta name="assert" content="Shrink-to-fit with orthogonal children">
<meta name="flags" content="ahem dom combo">
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.test {
border:thin solid;
font:20px/1 Ahem;
}
.target {
color:blue;
height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
writing-mode:vertical-rl;
}
.border {
border-right:blue solid .5em;
}
.next {
color:orange;
}
.inline-block {
display:inline-block;
}
.float {
float:left;
}
h3 {
clear:both;
}
h3.fail {
color:red;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
</style>
<div id="log"></div>
<div id="container">
<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
<p>If script is enabled, there should be one or more PASS and no FAIL.
<h3>1: Shrink-to-fit inline-block with a child of orthogonal block</h3>
<div class="test">
<div class="inline-block"><div class="target">HH</div></div><span class="next">ZZ</span>
</div>
<h3>2: Shrink-to-fit inline-block with a child of orthogonal inline</h3>
<div class="test">
<div class="inline-block"><span class="target">HH</span></div><span class="next">ZZ</span>
</div>
<h3>3: Shrink-to-fit inline-block with a child of orthogonal block with borders</h3>
<div class="test">
<div class="inline-block"><div class="target border">HHH</div></div><span class="next">ZZ</span>
</div>
<h3>4: Shrink-to-fit inline-block with a child of orthogonal inline with borders</h3>
<div class="test">
<div class="inline-block"><span class="target border">HHH</span></div><span class="next">ZZ</span>
</div>
<h3>5: Shrink-to-fit inline-block with a child of orthogonal block in inline-block</h3>
<div class="test">
<div class="inline-block"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span>
</div>
<h3>6: Shrink-to-fit inline-block with a child of orthogonal inline in inline-block</h3>
<div class="test">
<div class="inline-block"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span>
</div>
<h3>7: Shrink-to-fit inline-block with a child of orthogonal block with borders in inline-block</h3>
<div class="test">
<div class="inline-block"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span>
</div>
<h3>8: Shrink-to-fit inline-block with a child of orthogonal inline with borders in inline-block</h3>
<div class="test">
<div class="inline-block"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span>
</div>
<h3>9: Shrink-to-fit float with a child of orthogonal block</h3>
<div class="test">
<div class="float"><div class="target">HH</div></div><span class="next">ZZ</span>
</div>
<h3>10: Shrink-to-fit float with a child of orthogonal inline</h3>
<div class="test">
<div class="float"><span class="target">HH</span></div><span class="next">ZZ</span>
</div>
<h3>11: Shrink-to-fit float with a child of orthogonal block with borders</h3>
<div class="test">
<div class="float"><div class="target border">HHH</div></div><span class="next">ZZ</span>
</div>
<h3>12: Shrink-to-fit float with a child of orthogonal inline with borders</h3>
<div class="test">
<div class="float"><span class="target border">HHH</span></div><span class="next">ZZ</span>
</div>
<h3>13: Shrink-to-fit float with a child of orthogonal block in inline-block</h3>
<div class="test">
<div class="float"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span>
</div>
<h3>14: Shrink-to-fit float with a child of orthogonal inline in inline-block</h3>
<div class="test">
<div class="float"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span>
</div>
<h3>15: Shrink-to-fit float with a child of orthogonal block with borders in inline-block</h3>
<div class="test">
<div class="float"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span>
</div>
<h3>16: Shrink-to-fit float with a child of orthogonal inline with borders in inline-block</h3>
<div class="test">
<div class="float"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span>
</div>
<h3>17: Shrink-to-fit table-cell with a child of orthogonal block</h3>
<div class="test">
<table><tr><td><div class="target">HH</div></td><td class="next">ZZ</td></tr></table>
</div>
<h3>18: Shrink-to-fit table-cell with a child of orthogonal inline</h3>
<div class="test">
<table><tr><td><span class="target">HH</span></td><td class="next">ZZ</td></tr></table>
</div>
<h3>19: Shrink-to-fit table-cell with a child of orthogonal block with borders</h3>
<div class="test">
<table><tr><td><div class="target border">HHH</div></td><td class="next">ZZ</td></tr></table>
</div>
<h3>20: Shrink-to-fit table-cell with a child of orthogonal inline with borders</h3>
<div class="test">
<table><tr><td><span class="target border">HHH</span></td><td class="next">ZZ</td></tr></table>
</div>
<h3>21: Shrink-to-fit table-cell with a child of orthogonal block in inline-block</h3>
<div class="test">
<table><tr><td><div class="inline-block"><div class="target">HH</div></div></td><td class="next">ZZ</td></tr></table>
</div>
<h3>22: Shrink-to-fit table-cell with a child of orthogonal inline in inline-block</h3>
<div class="test">
<table><tr><td><div class="inline-block"><span class="target">HH</span></div></td><td class="next">ZZ</td></tr></table>
</div>
<h3>23: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</h3>
<div class="test">
<table><tr><td><div class="inline-block"><div class="target border">HHH</div></div></td><td class="next">ZZ</td></tr></table>
</div>
<h3>24: Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block</h3>
<div class="test">
<table><tr><td><div class="inline-block"><span class="target border">HHH</span></div></td><td class="next">ZZ</td></tr></table>
</div>
</div>
<script>
if (window.location.search == "?wait") {
console.log("Sleeping 5 secs for debug");
setup({explicit_done:true});
window.setTimeout(run, 5000);
} else {
run();
}
function run() {
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
var title = node.previousElementSibling.textContent;
test(function () {
try {
var targetNode = node.querySelector(".target");
var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
var targetBounds = targetNode.getBoundingClientRect();
assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
var nextNode = node.querySelector(".next");
var nextBounds = nextNode.getBoundingClientRect();
assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
} catch (e) {
node.previousElementSibling.classList.add("fail");
throw e;
}
}, title);
});
done();
}
</script>
|
