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
|
function spaceBetween(childBox, parentBox) {
return {
left: childBox.left - parentBox.left,
right: parentBox.right - childBox.right,
top: childBox.top - parentBox.top,
bottom: parentBox.bottom - childBox.bottom
};
}
function measureSpaceAround(id) {
var mrow = document.getElementById(id);
var mrowBox = mrow.getBoundingClientRect();
var parentBox = mrow.parentNode.getBoundingClientRect();
var childBox = mrow.firstElementChild.getBoundingClientRect();
return spaceBetween(childBox, parentBox);
}
function compareSpaceWithAndWithoutStyle(tag, style, parentStyle, direction) {
if (!FragmentHelper.isValidChildOfMrow(tag) ||
FragmentHelper.isEmpty(tag))
throw `Invalid argument: ${tag}`;
if (!direction)
direction = "ltr";
document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
<div style="display: inline-block"><math><mrow dir="${direction}">${MathMLFragments[tag]}</mrow></math></div>\
<div style="display: inline-block"><math><mrow dir="${direction}">${MathMLFragments[tag]}</mrow></math></div>\
</div>`);
var div = document.body.lastElementChild;
var styleDiv = div.firstElementChild;
var styleMath = styleDiv.firstElementChild;
var styleParent = styleMath.firstElementChild;
if (parentStyle)
styleParent.setAttribute("style", parentStyle);
var styleElement = FragmentHelper.element(styleMath);
styleElement.setAttribute("style", style);
var styleChild = FragmentHelper.forceNonEmptyElement(styleElement);
var styleMathBox = styleMath.getBoundingClientRect();
var styleElementBox = styleElement.getBoundingClientRect();
var styleChildBox = styleChild.getBoundingClientRect();
var styleSpace = spaceBetween(styleChildBox, styleMathBox);
var noStyleDiv = div.lastElementChild;
var noStyleMath = noStyleDiv.firstElementChild;
var noStyleElement = FragmentHelper.element(noStyleMath);
var noStyleChild = FragmentHelper.forceNonEmptyElement(noStyleElement);
var noStyleMathBox = noStyleMath.getBoundingClientRect();
var noStyleElementBox = noStyleElement.getBoundingClientRect();
var noStyleChildBox = noStyleChild.getBoundingClientRect();
var noStyleSpace = spaceBetween(noStyleChildBox, noStyleMathBox);
var preferredWidthDelta =
styleDiv.getBoundingClientRect().width -
noStyleDiv.getBoundingClientRect().width;
div.style = "display: none;"; // Hide the div after measurement.
return {
preferred_width_delta: preferredWidthDelta,
left_delta: styleSpace.left - noStyleSpace.left,
right_delta: styleSpace.right - noStyleSpace.right,
top_delta: styleSpace.top - noStyleSpace.top,
bottom_delta: styleSpace.bottom - noStyleSpace.bottom,
element_width_delta: styleElementBox.width - noStyleElementBox.width,
element_height_delta: styleElementBox.height - noStyleElementBox.height
};
}
function compareSizeWithAndWithoutStyle(tag, style) {
if (!FragmentHelper.isValidChildOfMrow(tag))
throw `Invalid argument: ${tag}`;
// FIXME <mrow> only needed as workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1658135
document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
<div style="display: inline-block"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>\
<div style="display: inline-block"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>\
</div>`);
var div = document.body.lastElementChild;
var styleDiv = div.firstElementChild;
var styleParent = styleDiv.firstElementChild.firstElementChild;
var styleElement = FragmentHelper.element(styleParent);
styleElement.setAttribute("style", style);
var styleParentBox = styleParent.getBoundingClientRect();
var styleElementBox = styleElement.getBoundingClientRect();
var noStyleDiv = div.lastElementChild;
var noStyleParent = noStyleDiv.firstElementChild.firstElementChild;
var noStyleElement = FragmentHelper.element(noStyleParent);
var noStyleParentBox = noStyleParent.getBoundingClientRect();
var noStyleElementBox = noStyleElement.getBoundingClientRect();
var preferredWidthDelta =
styleDiv.getBoundingClientRect().width -
noStyleDiv.getBoundingClientRect().width;
div.style = "display: none;"; // Hide the div after measurement.
return {
preferred_width_delta: preferredWidthDelta,
width_delta: styleParentBox.width - noStyleParentBox.width,
height_delta: styleParentBox.height - noStyleParentBox.height,
element_width_delta: styleElementBox.width - noStyleElementBox.width,
element_height_delta: styleElementBox.height - noStyleElementBox.height
};
};
|
