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
|
<!DOCTYPE html>
<meta charset="utf-8">
<%
var testlist = [];
var outers = [
["inline-block", '<div class="inline-block">', '</div><span class="next">ZZ</span>'],
["float", '<div class="float">', '</div><span class="next">ZZ</span>'],
["table-cell", '<table><tr><td>', '</td><td class="next">ZZ</td></tr></table>']];
var middles = [
null,
["inline-block", '<div class="inline-block">', '</div>']];
var targets = [
["block", '<div class="target">HH</div>'],
["inline", '<span class="target">HH</span>'],
["block with borders", '<div class="target border">HHH</div>'],
["inline with borders", '<span class="target border">HHH</span>']];
for (var outer of outers) {
for (var middle of middles) {
for (var target of targets) {
var title = target[0];
var html = target[1];
if (middle) {
title += " in " + middle[0];
html = middle[1] + html + middle[2];
}
title = "Shrink-to-fit " + outer[0] + " with a child of orthogonal " + title;
html = outer[1] + html + outer[2];
testlist.push([title, html]);
}
}
}
var min, limit, title;
if (index < 0) {
min = 0;
limit = testlist.length;
title = "Shrink-to-fit with orthogonal children"
} else {
min = index;
limit = index + 1;
title = testlist[index][0];
}
%><title>CSS Writing Modes Test: <%= title %></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="<%= title %>">
<meta name="flags" content="ahem dom<%= index < 0 ? ' 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>
<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.
<% for (var i = min; i < limit; ++i) {
var test = testlist[i];
%><h3><%= (i + 1) + ": " + test[0] %></h3>
<div class="test">
<%- test[1] %>
</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>
|
