forked from chromium/chromium
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtab-size-complex-path.html
88 lines (73 loc) · 3.63 KB
/
tab-size-complex-path.html
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
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 13px;
text-rendering:optimizeLegibility;
}
.px-tab-size {
tab-size: 60px;
}
.em-tab-size {
tab-size: 7em;
}
.int-tab-size {
tab-size: 9;
}
</style>
<script src="../resources/js-test.js"></script>
</head>
<body>
<div id="container" style="background-repeat: repeat-x;">
<div><pre id="leading-px" class="px-tab-size">	<span>leading text, tab-size in px.</span></pre></div>
<div><pre id="leading-em" class="em-tab-size">	<span>leading text, tab-size in em.</span></pre></div>
<div><pre id="leading-int" class="int-tab-size">	<span>leading text, tab-size in spaces.</span></pre></div>
<div><pre id="trailing-px" class="px-tab-size"><span>leading text</span>	<span>trailing text, tab-size in px.</span></pre></div>
<div><pre id="trailing-em" class="em-tab-size"><span>leading text</span>	<span>trailing text, tab-size in em.</span></pre></div>
<div><pre id="trailing-int" class="int-tab-size"><span>leading text</span>	<span>trailing text, tab-size in spaces.</span></pre></div>
<div><pre>Some spaces... '<span id="space-size-reference"> </span>' ... for size reference.</pre></div>
<div><pre>'<span id="leading-text-size-reference">leading text</span>', for size reference.</pre></div>
<script>
description('Test tab-size measurements.');
// Tests with a tab character at the beginning of the line.
var pxPre = document.getElementById('leading-px');
var emPre = document.getElementById('leading-em');
var intPre = document.getElementById('leading-int');
var pxLeadingSpan = pxPre.firstElementChild;
var emLeadingSpan = emPre.firstElementChild;
var intLeadingSpan = intPre.firstElementChild;
var pxExpected = 60; // tab size in px.
var emExpected = 13 * 7; // (font size) * (tab size in em)
var intExpected = document.getElementById('space-size-reference').getBoundingClientRect().width;
var pxTabLength = pxLeadingSpan.getBoundingClientRect().left - pxPre.getBoundingClientRect().left;
var emTabLength = emLeadingSpan.getBoundingClientRect().left - emPre.getBoundingClientRect().left;
var intTabLength = intLeadingSpan.getBoundingClientRect().left - intPre.getBoundingClientRect().left;
shouldBe("pxTabLength", "pxExpected", false, 0.02);
shouldBe("emTabLength", "emExpected", false, 0.02);
shouldBe("intTabLength", "intExpected", false, 0.02);
// Tests with a tab character after leading text.
var leadingTextSize = document.getElementById('leading-text-size-reference').getBoundingClientRect().width;
pxExpected = pxExpected - (leadingTextSize % pxExpected);
emExpected = emExpected - (leadingTextSize % emExpected);
intExpected = intExpected - (leadingTextSize % intExpected);
pxPre = document.getElementById('trailing-px');
emPre = document.getElementById('trailing-em');
intPre = document.getElementById('trailing-int');
pxLeadingSpan = pxPre.firstElementChild;
emLeadingSpan = emPre.firstElementChild;
intLeadingSpan = intPre.firstElementChild;
pxTrailingSpan = pxPre.lastElementChild;
emTrailingSpan = emPre.lastElementChild;
intTrailingSpan = intPre.lastElementChild;
pxTabLength = pxTrailingSpan.getBoundingClientRect().left - pxLeadingSpan.getBoundingClientRect().right;
emTabLength = emTrailingSpan.getBoundingClientRect().left - emLeadingSpan.getBoundingClientRect().right;
intTabLength = intTrailingSpan.getBoundingClientRect().left - intLeadingSpan.getBoundingClientRect().right;
shouldBe("pxTabLength", "pxExpected", false, 0.02);
shouldBe("emTabLength", "emExpected", false, 0.02);
shouldBe("intTabLength", "intExpected", false, 0.02);
if (window.testRunner)
container.style.display = "none";
</script>
</body>
</html>