|
|
14 |
var suppressedText; |
14 |
var suppressedText; |
15 |
var notInDocument = document.createElement('div'); |
15 |
var notInDocument = document.createElement('div'); |
16 |
|
16 |
|
17 |
function isEval(expr, b) { |
17 |
function isEval(expr, b) { |
18 |
is(eval(expr), b, expr); |
18 |
is(eval(expr), b, expr); |
19 |
} |
19 |
} |
20 |
|
20 |
|
21 |
function isApprox(a, b, msg, options) { |
21 |
function isApprox(a, b, msg, options) { |
22 |
if (a != b && options && 'tolerance' in options && |
22 |
if (a != b && 'tolerance' in options && |
23 |
Math.abs(a - b) < options.tolerance) { |
23 |
Math.abs(a - b) < options.tolerance) { |
24 |
ok(true, msg + "(" + a + " within " + options.tolerance + " of " + b + ")"); |
24 |
ok(true, msg + "(" + a + " within " + options.tolerance + " of " + b + ")"); |
25 |
return; |
25 |
return; |
26 |
} |
26 |
} |
27 |
is(a, b, msg); |
27 |
is(a, b, msg); |
28 |
} |
28 |
} |
29 |
|
29 |
|
30 |
function checkQuadIsRect(expr, x, y, w, h, options) { |
30 |
function makeQuadsExpr(fromStr, options) { |
31 |
var quads = eval(expr); |
31 |
var getBoxQuadsOptionParts = []; |
32 |
is(quads.length, 1, expr + " checking quad count"); |
32 |
if ('box' in options) { |
33 |
var q = quads[0]; |
33 |
getBoxQuadsOptionParts.push("box:'" + options.box + "'"); |
34 |
isApprox(q.p1.x, x, expr + " checking quad.p1.x", options); |
34 |
} |
35 |
isApprox(q.p1.y, y, expr + " checking quad.p1.y", options); |
35 |
if ('toStr' in options) { |
36 |
isApprox(q.p2.x, x + w, expr + " checking quad.p2.x", options); |
36 |
getBoxQuadsOptionParts.push("relativeTo:" + options.toStr); |
37 |
isApprox(q.p2.y, y, expr + " checking quad.p2.y", options); |
37 |
} |
38 |
isApprox(q.p3.x, x + w, expr + " checking quad.p3.x", options); |
38 |
if ('toBox' in options) { |
39 |
isApprox(q.p3.y, y + h, expr + " checking quad.p3.y", options); |
39 |
getBoxQuadsOptionParts.push("relativeToBox:'" + options.toBox + "'"); |
40 |
isApprox(q.p4.x, x, expr + " checking quad.p4.x", options); |
40 |
} |
41 |
isApprox(q.p4.y, y + h, expr + " checking quad.p4.y", options); |
41 |
return fromStr + ".getBoxQuads({" + getBoxQuadsOptionParts.join(',') + "})"; |
42 |
|
|
|
43 |
isApprox(q.bounds.left, x, expr + " checking quad.bounds.left", options); |
44 |
isApprox(q.bounds.top, y, expr + " checking quad.bounds.top", options); |
45 |
isApprox(q.bounds.width, w, expr + " checking quad.bounds.width", options); |
46 |
isApprox(q.bounds.height, h, expr + " checking quad.bounds.height", options); |
47 |
} |
42 |
} |
48 |
|
43 |
|
49 |
function checkQuadIsQuad(expr, x1, y1, x2, y2, x3, y3, x4, y4, options) { |
44 |
function checkQuadIsRect(fromStr, options, x, y, w, h) { |
50 |
var quads = eval(expr); |
45 |
var quadsExpr = makeQuadsExpr(fromStr, options); |
51 |
is(quads.length, 1, expr + " checking quad count"); |
46 |
var quads = eval(quadsExpr); |
|
|
47 |
is(quads.length, 1, quadsExpr + " checking quad count"); |
52 |
var q = quads[0]; |
48 |
var q = quads[0]; |
53 |
isApprox(q.p1.x, x1, expr + " checking quad.p1.x", options); |
49 |
isApprox(q.p1.x, x, quadsExpr + " checking quad.p1.x", options); |
54 |
isApprox(q.p1.y, y1, expr + " checking quad.p1.y", options); |
50 |
isApprox(q.p1.y, y, quadsExpr + " checking quad.p1.y", options); |
55 |
isApprox(q.p2.x, x2, expr + " checking quad.p2.x", options); |
51 |
isApprox(q.p2.x, x + w, quadsExpr + " checking quad.p2.x", options); |
56 |
isApprox(q.p2.y, y2, expr + " checking quad.p2.y", options); |
52 |
isApprox(q.p2.y, y, quadsExpr + " checking quad.p2.y", options); |
57 |
isApprox(q.p3.x, x3, expr + " checking quad.p3.x", options); |
53 |
isApprox(q.p3.x, x + w, quadsExpr + " checking quad.p3.x", options); |
58 |
isApprox(q.p3.y, y3, expr + " checking quad.p3.y", options); |
54 |
isApprox(q.p3.y, y + h, quadsExpr + " checking quad.p3.y", options); |
59 |
isApprox(q.p4.x, x4, expr + " checking quad.p4.x", options); |
55 |
isApprox(q.p4.x, x, quadsExpr + " checking quad.p4.x", options); |
60 |
isApprox(q.p4.y, y4, expr + " checking quad.p4.y", options); |
56 |
isApprox(q.p4.y, y + h, quadsExpr + " checking quad.p4.y", options); |
61 |
|
57 |
|
62 |
isApprox(q.bounds.left, Math.min(x1,x2,x3,x4), expr + " checking quad.bounds.left", options); |
58 |
isApprox(q.bounds.left, x, quadsExpr + " checking quad.bounds.left", options); |
63 |
isApprox(q.bounds.top, Math.min(y1,y2,y3,y4), expr + " checking quad.bounds.top", options); |
59 |
isApprox(q.bounds.top, y, quadsExpr + " checking quad.bounds.top", options); |
64 |
isApprox(q.bounds.right, Math.max(x1,x2,x3,x4), expr + " checking quad.bounds.right", options); |
60 |
isApprox(q.bounds.width, w, quadsExpr + " checking quad.bounds.width", options); |
65 |
isApprox(q.bounds.bottom, Math.max(y1,y2,y3,y4), expr + " checking quad.bounds.bottom", options); |
61 |
isApprox(q.bounds.height, h, quadsExpr + " checking quad.bounds.height", options); |
|
|
62 |
} |
63 |
|
64 |
function checkQuadIsQuad(fromStr, options, x1, y1, x2, y2, x3, y3, x4, y4) { |
65 |
var quadsExpr = makeQuadsExpr(fromStr, options); |
66 |
var quads = eval(quadsExpr); |
67 |
is(quads.length, 1, quadsExpr + " checking quad count"); |
68 |
var q = quads[0]; |
69 |
isApprox(q.p1.x, x1, quadsExpr + " checking quad.p1.x", options); |
70 |
isApprox(q.p1.y, y1, quadsExpr + " checking quad.p1.y", options); |
71 |
isApprox(q.p2.x, x2, quadsExpr + " checking quad.p2.x", options); |
72 |
isApprox(q.p2.y, y2, quadsExpr + " checking quad.p2.y", options); |
73 |
isApprox(q.p3.x, x3, quadsExpr + " checking quad.p3.x", options); |
74 |
isApprox(q.p3.y, y3, quadsExpr + " checking quad.p3.y", options); |
75 |
isApprox(q.p4.x, x4, quadsExpr + " checking quad.p4.x", options); |
76 |
isApprox(q.p4.y, y4, quadsExpr + " checking quad.p4.y", options); |
77 |
|
78 |
isApprox(q.bounds.left, Math.min(x1,x2,x3,x4), quadsExpr + " checking quad.bounds.left", options); |
79 |
isApprox(q.bounds.top, Math.min(y1,y2,y3,y4), quadsExpr + " checking quad.bounds.top", options); |
80 |
isApprox(q.bounds.right, Math.max(x1,x2,x3,x4), quadsExpr + " checking quad.bounds.right", options); |
81 |
isApprox(q.bounds.bottom, Math.max(y1,y2,y3,y4), quadsExpr + " checking quad.bounds.bottom", options); |
66 |
} |
82 |
} |
67 |
</script> |
83 |
</script> |
68 |
<style> |
84 |
<style> |
69 |
em { |
85 |
em { |
70 |
display:inline-block; height:10px; background:gray; |
86 |
display:inline-block; height:10px; background:gray; |
71 |
} |
87 |
} |
72 |
</style> |
88 |
</style> |
73 |
<div id="dContainer" |
89 |
<div id="dContainer" |
|
207 |
suppressedText = suppressedTextContainer.firstChild; |
223 |
suppressedText = suppressedTextContainer.firstChild; |
208 |
|
224 |
|
209 |
// Test basic BoxQuadOptions.box. |
225 |
// Test basic BoxQuadOptions.box. |
210 |
var dX = d.getBoundingClientRect().left; |
226 |
var dX = d.getBoundingClientRect().left; |
211 |
var dY = d.getBoundingClientRect().top; |
227 |
var dY = d.getBoundingClientRect().top; |
212 |
var dW = d.getBoundingClientRect().width; |
228 |
var dW = d.getBoundingClientRect().width; |
213 |
var dH = d.getBoundingClientRect().height; |
229 |
var dH = d.getBoundingClientRect().height; |
214 |
|
230 |
|
215 |
checkQuadIsRect("d.getBoxQuads({box:'content'})", |
231 |
checkQuadIsRect("d", {box:"content"}, |
216 |
dX + 4 + 8, dY + 1 + 5, 120, 90); |
232 |
dX + 4 + 8, dY + 1 + 5, 120, 90); |
217 |
checkQuadIsRect("d.getBoxQuads({box:'padding'})", |
233 |
checkQuadIsRect("d", {box:"padding"}, |
218 |
dX + 8, dY + 5, 120 + 2 + 4, 90 + 1 + 3); |
234 |
dX + 8, dY + 5, 120 + 2 + 4, 90 + 1 + 3); |
219 |
checkQuadIsRect("d.getBoxQuads({box:'border'})", |
235 |
checkQuadIsRect("d", {box:"border"}, |
220 |
dX, dY, dW, dH); |
236 |
dX, dY, dW, dH); |
221 |
checkQuadIsRect("d.getBoxQuads()", |
237 |
checkQuadIsRect("d", {}, |
222 |
dX, dY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
238 |
dX, dY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
223 |
checkQuadIsRect("d.getBoxQuads({box:'margin'})", |
239 |
checkQuadIsRect("d", {box:"margin"}, |
224 |
dX - 12, dY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11); |
240 |
dX - 12, dY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11); |
225 |
|
241 |
|
226 |
// Test basic BoxQuadOptions.relativeTo and BoxQuadOptions.relativeToBox. |
242 |
// Test basic BoxQuadOptions.relativeTo and BoxQuadOptions.relativeToBox. |
227 |
checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'content'})", |
243 |
checkQuadIsRect("d", {toStr:"dContainer",toBox:"content"}, |
228 |
12, 9, dW, dH); |
244 |
12, 9, dW, dH); |
229 |
checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'padding'})", |
245 |
checkQuadIsRect("d", {toStr:"dContainer",toBox:"padding"}, |
230 |
12 + 16, 9 + 13, dW, dH); |
246 |
12 + 16, 9 + 13, dW, dH); |
231 |
checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'border'})", |
247 |
checkQuadIsRect("d", {toStr:"dContainer",toBox:"border"}, |
232 |
12 + 16 + 20, 9 + 13 + 17, dW, dH); |
248 |
12 + 16 + 20, 9 + 13 + 17, dW, dH); |
233 |
checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer})", |
249 |
checkQuadIsRect("d", {toStr:"dContainer"}, |
234 |
12 + 16 + 20, 9 + 13 + 17, dW, dH); |
250 |
12 + 16 + 20, 9 + 13 + 17, dW, dH); |
235 |
checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'margin'})", |
251 |
checkQuadIsRect("d", {toStr:"dContainer",toBox:"margin"}, |
236 |
12 + 16 + 20 + 24, 9 + 13 + 17 + 21, dW, dH); |
252 |
12 + 16 + 20 + 24, 9 + 13 + 17 + 21, dW, dH); |
237 |
|
253 |
|
238 |
// Test BoxQuadOptions.relativeTo relative to this document |
254 |
// Test BoxQuadOptions.relativeTo relative to this document |
239 |
checkQuadIsRect("d.getBoxQuads({relativeTo:document})", |
255 |
checkQuadIsRect("d", {toStr:"document"}, |
240 |
dX, dY, dW, dH); |
256 |
dX, dY, dW, dH); |
241 |
// Test BoxQuadOptions.relativeTo relative to a non-ancestor. |
257 |
// Test BoxQuadOptions.relativeTo relative to a non-ancestor. |
242 |
var dUnrelatedX = dUnrelated.getBoundingClientRect().left; |
258 |
var dUnrelatedX = dUnrelated.getBoundingClientRect().left; |
243 |
var dUnrelatedY = dUnrelated.getBoundingClientRect().top; |
259 |
var dUnrelatedY = dUnrelated.getBoundingClientRect().top; |
244 |
checkQuadIsRect("d.getBoxQuads({relativeTo:dUnrelated})", |
260 |
checkQuadIsRect("d", {toStr:"dUnrelated"}, |
245 |
dX - dUnrelatedX, dY - dUnrelatedY, dW, dH); |
261 |
dX - dUnrelatedX, dY - dUnrelatedY, dW, dH); |
246 |
// Test BoxQuadOptions.relativeTo relative to an element in a different document (and the document) |
262 |
// Test BoxQuadOptions.relativeTo relative to an element in a different document (and the document) |
247 |
var f1X = f1.getBoundingClientRect().left; |
263 |
var f1X = f1.getBoundingClientRect().left; |
248 |
var f1Y = f1.getBoundingClientRect().top; |
264 |
var f1Y = f1.getBoundingClientRect().top; |
249 |
checkQuadIsRect("d.getBoxQuads({relativeTo:f1.contentWindow.f1d})", |
265 |
checkQuadIsRect("d", {toStr:"f1.contentWindow.f1d"}, |
250 |
dX - (f1X + 14), dY - (f1Y + 15), dW, dH); |
266 |
dX - (f1X + 14), dY - (f1Y + 15), dW, dH); |
251 |
checkQuadIsRect("d.getBoxQuads({relativeTo:f1.contentDocument})", |
267 |
checkQuadIsRect("d", {toStr:"f1.contentDocument"}, |
252 |
dX - f1X, dY - f1Y, dW, dH); |
268 |
dX - f1X, dY - f1Y, dW, dH); |
253 |
// The box type is irrelevant for a document |
269 |
// The box type is irrelevant for a document |
254 |
checkQuadIsRect("d.getBoxQuads({relativeTo:f1.contentDocument,relativeToBox:'content'})", |
270 |
checkQuadIsRect("d", {toStr:"f1.contentDocument",toBox:"content"}, |
255 |
dX - f1X, dY - f1Y, dW, dH); |
271 |
dX - f1X, dY - f1Y, dW, dH); |
256 |
// Test one document relative to another |
272 |
// Test one document relative to another |
257 |
checkQuadIsRect("f1.contentDocument.getBoxQuads({relativeTo:document})", |
273 |
checkQuadIsRect("f1.contentDocument", {toStr:"document"}, |
258 |
f1X, f1Y, 50, 50); |
274 |
f1X, f1Y, 50, 50); |
259 |
// The box type is irrelevant for a document |
275 |
// The box type is irrelevant for a document |
260 |
checkQuadIsRect("f1.contentDocument.getBoxQuads({box:'content',relativeTo:document})", |
276 |
checkQuadIsRect("f1.contentDocument", {toStr:"document",box:"content"}, |
261 |
f1X, f1Y, 50, 50); |
277 |
f1X, f1Y, 50, 50); |
262 |
checkQuadIsRect("f1.contentDocument.getBoxQuads({box:'margin',relativeTo:document})", |
278 |
checkQuadIsRect("f1.contentDocument", {toStr:"document",box:"margin"}, |
263 |
f1X, f1Y, 50, 50); |
279 |
f1X, f1Y, 50, 50); |
264 |
checkQuadIsRect("f1.contentDocument.getBoxQuads({box:'padding',relativeTo:document})", |
280 |
checkQuadIsRect("f1.contentDocument", {toStr:"document",box:"padding"}, |
265 |
f1X, f1Y, 50, 50); |
281 |
f1X, f1Y, 50, 50); |
266 |
|
282 |
|
267 |
// Test that anonymous boxes are correctly ignored when building quads. |
283 |
// Test that anonymous boxes are correctly ignored when building quads. |
268 |
var ibSplitPart1X = ibSplitPart1.getBoundingClientRect().left; |
284 |
var ibSplitPart1X = ibSplitPart1.getBoundingClientRect().left; |
269 |
var ibSplitY = ibSplit.getBoundingClientRect().top; |
285 |
var ibSplitY = ibSplit.getBoundingClientRect().top; |
270 |
isEval("ibSplit.getBoxQuads().length", 3); |
286 |
isEval("ibSplit.getBoxQuads().length", 3); |
271 |
isEval("ibSplit.getBoxQuads()[0].bounds.left", ibSplitPart1X); |
287 |
isEval("ibSplit.getBoxQuads()[0].bounds.left", ibSplitPart1X); |
272 |
isEval("ibSplit.getBoxQuads()[0].bounds.width", 100); |
288 |
isEval("ibSplit.getBoxQuads()[0].bounds.width", 100); |
273 |
isEval("ibSplit.getBoxQuads()[1].bounds.width", 110); |
289 |
isEval("ibSplit.getBoxQuads()[1].bounds.width", 110); |
274 |
isEval("ibSplit.getBoxQuads()[2].bounds.width", 130); |
290 |
isEval("ibSplit.getBoxQuads()[2].bounds.width", 130); |
275 |
isEval("table.getBoxQuads().length", 2); |
291 |
isEval("table.getBoxQuads().length", 2); |
276 |
isEval("table.getBoxQuads()[0].bounds.height", 50); |
292 |
isEval("table.getBoxQuads()[0].bounds.height", 50); |
277 |
isEval("table.getBoxQuads()[1].bounds.height", 40); |
293 |
isEval("table.getBoxQuads()[1].bounds.height", 40); |
278 |
|
294 |
|
279 |
// Test that we skip anonymous boxes when finding the right box to be relative to. |
295 |
// Test that we skip anonymous boxes when finding the right box to be relative to. |
280 |
checkQuadIsRect("d.getBoxQuads({relativeTo:ibSplit})", |
296 |
checkQuadIsRect("d", {toStr:"ibSplit"}, |
281 |
dX - ibSplitPart1X, dY - ibSplitY, dW, dH); |
297 |
dX - ibSplitPart1X, dY - ibSplitY, dW, dH); |
282 |
var tableX = table.getClientRects()[0].left; |
298 |
var tableX = table.getClientRects()[0].left; |
283 |
var tableY = table.getClientRects()[0].top; |
299 |
var tableY = table.getClientRects()[0].top; |
284 |
checkQuadIsRect("d.getBoxQuads({relativeTo:table})", |
300 |
checkQuadIsRect("d", {toStr:"table"}, |
285 |
dX - tableX, dY - tableY, dW, dH); |
301 |
dX - tableX, dY - tableY, dW, dH); |
286 |
|
302 |
|
287 |
// Test boxes generated by block splitting. Check for borders being placed correctly. |
303 |
// Test boxes generated by block splitting. Check for borders being placed correctly. |
288 |
var colSplitY = colSplit.getClientRects()[0].top; |
304 |
var colSplitY = colSplit.getClientRects()[0].top; |
289 |
isEval("colSplit.getBoxQuads().length", 2); |
305 |
isEval("colSplit.getBoxQuads().length", 2); |
290 |
isEval("colSplit.getBoxQuads()[0].bounds.top", colSplitY); |
306 |
isEval("colSplit.getBoxQuads()[0].bounds.top", colSplitY); |
291 |
isEval("colSplit.getBoxQuads()[0].bounds.height", 60); |
307 |
isEval("colSplit.getBoxQuads()[0].bounds.height", 60); |
292 |
isEval("colSplit.getBoxQuads()[1].bounds.top", colSplitY - 20); |
308 |
isEval("colSplit.getBoxQuads()[1].bounds.top", colSplitY - 20); |
|
351 |
|
367 |
|
352 |
isEval("displayNone.getBoxQuads().length", 0); |
368 |
isEval("displayNone.getBoxQuads().length", 0); |
353 |
isEval("notInDocument.getBoxQuads().length", 0); |
369 |
isEval("notInDocument.getBoxQuads().length", 0); |
354 |
|
370 |
|
355 |
// Test an overflow:hidden version of d. overflow:hidden should not affect |
371 |
// Test an overflow:hidden version of d. overflow:hidden should not affect |
356 |
// the quads, basically. |
372 |
// the quads, basically. |
357 |
var oHX = overflowHidden.getBoundingClientRect().left; |
373 |
var oHX = overflowHidden.getBoundingClientRect().left; |
358 |
var oHY = overflowHidden.getBoundingClientRect().top; |
374 |
var oHY = overflowHidden.getBoundingClientRect().top; |
359 |
checkQuadIsRect("overflowHidden.getBoxQuads({box:'content'})", |
375 |
checkQuadIsRect("overflowHidden", {box:"content"}, |
360 |
oHX + 4 + 8, oHY + 1 + 5, 120, 90); |
376 |
oHX + 4 + 8, oHY + 1 + 5, 120, 90); |
361 |
checkQuadIsRect("overflowHidden.getBoxQuads({box:'padding'})", |
377 |
checkQuadIsRect("overflowHidden", {box:"padding"}, |
362 |
oHX + 8, oHY + 5, 120 + 2 + 4, 90 + 1 + 3); |
378 |
oHX + 8, oHY + 5, 120 + 2 + 4, 90 + 1 + 3); |
363 |
checkQuadIsRect("overflowHidden.getBoxQuads({box:'border'})", |
379 |
checkQuadIsRect("overflowHidden", {box:"border"}, |
364 |
oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
380 |
oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
365 |
checkQuadIsRect("overflowHidden.getBoxQuads()", |
381 |
checkQuadIsRect("overflowHidden", {}, |
366 |
oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
382 |
oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
367 |
checkQuadIsRect("overflowHidden.getBoxQuads({box:'margin'})", |
383 |
checkQuadIsRect("overflowHidden", {box:"margin"}, |
368 |
oHX - 12, oHY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11); |
384 |
oHX - 12, oHY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11); |
369 |
|
385 |
|
370 |
// Test an overflow:scroll version of d. I assume that boxes aren't affected |
386 |
// Test an overflow:scroll version of d. I assume that boxes aren't affected |
371 |
// by the scrollbar although it's not clear that this is correct. |
387 |
// by the scrollbar although it's not clear that this is correct. |
372 |
var oSX = overflowScroll.getBoundingClientRect().left; |
388 |
var oSX = overflowScroll.getBoundingClientRect().left; |
373 |
var oSY = overflowScroll.getBoundingClientRect().top; |
389 |
var oSY = overflowScroll.getBoundingClientRect().top; |
374 |
checkQuadIsRect("overflowScroll.getBoxQuads({box:'content'})", |
390 |
checkQuadIsRect("overflowScroll", {box:"content"}, |
375 |
oSX + 4 + 8, oSY + 1 + 5, 120, 90); |
391 |
oSX + 4 + 8, oSY + 1 + 5, 120, 90); |
376 |
checkQuadIsRect("overflowScroll.getBoxQuads({box:'padding'})", |
392 |
checkQuadIsRect("overflowScroll", {box:"padding"}, |
377 |
oSX + 8, oSY + 5, 120 + 2 + 4, 90 + 1 + 3); |
393 |
oSX + 8, oSY + 5, 120 + 2 + 4, 90 + 1 + 3); |
378 |
checkQuadIsRect("overflowScroll.getBoxQuads({box:'border'})", |
394 |
checkQuadIsRect("overflowScroll", {box:"border"}, |
379 |
oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
395 |
oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
380 |
checkQuadIsRect("overflowScroll.getBoxQuads()", |
396 |
checkQuadIsRect("overflowScroll", {}, |
381 |
oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
397 |
oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7); |
382 |
checkQuadIsRect("overflowScroll.getBoxQuads({box:'margin'})", |
398 |
checkQuadIsRect("overflowScroll", {box:"margin"}, |
383 |
oSX - 12, oSY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11); |
399 |
oSX - 12, oSY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11); |
384 |
|
400 |
|
385 |
// Test simple 2D transforms. |
401 |
// Test simple 2D transforms. |
386 |
var stcX = scaleTransformContainer.getBoundingClientRect().left; |
402 |
var stcX = scaleTransformContainer.getBoundingClientRect().left; |
387 |
var stcY = scaleTransformContainer.getBoundingClientRect().top; |
403 |
var stcY = scaleTransformContainer.getBoundingClientRect().top; |
388 |
checkQuadIsRect("scaleTransform.getBoxQuads()", |
404 |
checkQuadIsRect("scaleTransform", {}, |
389 |
stcX, stcY, 140, 160); |
405 |
stcX, stcY, 140, 160); |
390 |
var ttcX = translateTransformContainer.getBoundingClientRect().left; |
406 |
var ttcX = translateTransformContainer.getBoundingClientRect().left; |
391 |
var ttcY = translateTransformContainer.getBoundingClientRect().top; |
407 |
var ttcY = translateTransformContainer.getBoundingClientRect().top; |
392 |
checkQuadIsRect("translateTransform.getBoxQuads()", |
408 |
checkQuadIsRect("translateTransform", {}, |
393 |
ttcX + 30, ttcY + 40, 70, 80); |
409 |
ttcX + 30, ttcY + 40, 70, 80); |
394 |
// Test mapping into a transformed element. |
410 |
// Test mapping into a transformed element. |
395 |
checkQuadIsRect("scaleTransform.getBoxQuads({relativeTo:translateTransform})", |
411 |
checkQuadIsRect("scaleTransform", {toStr:"translateTransform"}, |
396 |
stcX - (ttcX + 30), stcY - (ttcY + 40), 140, 160); |
412 |
stcX - (ttcX + 30), stcY - (ttcY + 40), 140, 160); |
397 |
// Test 90 degree rotation. |
413 |
// Test 90 degree rotation. |
398 |
var rotatetcX = rotateTransformContainer.getBoundingClientRect().left; |
414 |
var rotatetcX = rotateTransformContainer.getBoundingClientRect().left; |
399 |
var rotatetcY = rotateTransformContainer.getBoundingClientRect().top; |
415 |
var rotatetcY = rotateTransformContainer.getBoundingClientRect().top; |
400 |
checkQuadIsQuad("rotateTransform.getBoxQuads()", |
416 |
checkQuadIsQuad("rotateTransform", {}, |
401 |
rotatetcX + 75, rotatetcY + 5, |
417 |
rotatetcX + 75, rotatetcY + 5, |
402 |
rotatetcX + 75, rotatetcY + 75, |
418 |
rotatetcX + 75, rotatetcY + 75, |
403 |
rotatetcX - 5, rotatetcY + 75, |
419 |
rotatetcX - 5, rotatetcY + 75, |
404 |
rotatetcX - 5, rotatetcY + 5); |
420 |
rotatetcX - 5, rotatetcY + 5); |
405 |
// Test vertical flip. |
421 |
// Test vertical flip. |
406 |
var fliptcX = flipTransformContainer.getBoundingClientRect().left; |
422 |
var fliptcX = flipTransformContainer.getBoundingClientRect().left; |
407 |
var fliptcY = flipTransformContainer.getBoundingClientRect().top; |
423 |
var fliptcY = flipTransformContainer.getBoundingClientRect().top; |
408 |
checkQuadIsQuad("flipTransform.getBoxQuads()", |
424 |
checkQuadIsQuad("flipTransform", {}, |
409 |
fliptcX, fliptcY + 80, |
425 |
fliptcX, fliptcY + 80, |
410 |
fliptcX + 70, fliptcY + 80, |
426 |
fliptcX + 70, fliptcY + 80, |
411 |
fliptcX + 70, fliptcY, |
427 |
fliptcX + 70, fliptcY, |
412 |
fliptcX, fliptcY); |
428 |
fliptcX, fliptcY); |
413 |
// Test non-90deg rotation. |
429 |
// Test non-90deg rotation. |
414 |
var rot45tcX = rot45TransformContainer.getBoundingClientRect().left; |
430 |
var rot45tcX = rot45TransformContainer.getBoundingClientRect().left; |
415 |
var rot45tcY = rot45TransformContainer.getBoundingClientRect().top; |
431 |
var rot45tcY = rot45TransformContainer.getBoundingClientRect().top; |
416 |
var halfDiagonal = 100/Math.sqrt(2); |
432 |
var halfDiagonal = 100/Math.sqrt(2); |
417 |
checkQuadIsQuad("rot45Transform.getBoxQuads()", |
433 |
checkQuadIsQuad("rot45Transform", {tolerance:0.0001}, |
418 |
rot45tcX + 50, rot45tcY + 50 - halfDiagonal, |
434 |
rot45tcX + 50, rot45tcY + 50 - halfDiagonal, |
419 |
rot45tcX + 50 + halfDiagonal, rot45tcY + 50, |
435 |
rot45tcX + 50 + halfDiagonal, rot45tcY + 50, |
420 |
rot45tcX + 50, rot45tcY + 50 + halfDiagonal, |
436 |
rot45tcX + 50, rot45tcY + 50 + halfDiagonal, |
421 |
rot45tcX + 50 - halfDiagonal, rot45tcY + 50, |
437 |
rot45tcX + 50 - halfDiagonal, rot45tcY + 50); |
422 |
{tolerance:0.0001}); |
|
|
423 |
|
438 |
|
424 |
// Test singular transforms. |
439 |
// Test singular transforms. |
425 |
var singularTransformX = singularTransform.getBoundingClientRect().left; |
440 |
var singularTransformX = singularTransform.getBoundingClientRect().left; |
426 |
var singularTransformY = singularTransform.getBoundingClientRect().top; |
441 |
var singularTransformY = singularTransform.getBoundingClientRect().top; |
427 |
// They map everything to a point. |
442 |
// They map everything to a point. |
428 |
checkQuadIsRect("singularTransform.getBoxQuads()", |
443 |
checkQuadIsRect("singularTransform", {}, |
429 |
singularTransformX, singularTransformY, 0, 0); |
444 |
singularTransformX, singularTransformY, 0, 0); |
430 |
checkQuadIsRect("singularTransformChild2.getBoxQuads()", |
445 |
checkQuadIsRect("singularTransformChild2", {}, |
431 |
singularTransformX, singularTransformY, 0, 0); |
446 |
singularTransformX, singularTransformY, 0, 0); |
432 |
// Mapping into an element with a singular transform from outside sets |
447 |
// Mapping into an element with a singular transform from outside sets |
433 |
// everything to zero. |
448 |
// everything to zero. |
434 |
checkQuadIsRect("d.getBoxQuads({relativeTo:singularTransform})", |
449 |
checkQuadIsRect("d", {toStr:"singularTransform"}, |
435 |
0, 0, 0, 0); |
450 |
0, 0, 0, 0); |
436 |
// But mappings within a subtree of an element with a singular transform work. |
451 |
// But mappings within a subtree of an element with a singular transform work. |
437 |
checkQuadIsRect("singularTransformChild2.getBoxQuads({relativeTo:singularTransformChild1})", |
452 |
checkQuadIsRect("singularTransformChild2", {toStr:"singularTransformChild1"}, |
438 |
0, 50, 200, 50); |
453 |
0, 50, 200, 50); |
439 |
|
454 |
|
440 |
// Test 3D transforms. |
455 |
// Test 3D transforms. |
441 |
var t3tcX = threeDTransformContainer.getBoundingClientRect().left; |
456 |
var t3tcX = threeDTransformContainer.getBoundingClientRect().left; |
442 |
var t3tcY = threeDTransformContainer.getBoundingClientRect().top; |
457 |
var t3tcY = threeDTransformContainer.getBoundingClientRect().top; |
443 |
checkQuadIsQuad("threeDTransform.getBoxQuads()", |
458 |
checkQuadIsQuad("threeDTransform", {tolerance:0.0001}, |
444 |
t3tcX + 59.446714, t3tcY - 18.569847, |
459 |
t3tcX + 59.446714, t3tcY - 18.569847, |
445 |
t3tcX + 129.570778, t3tcY + 13.540874, |
460 |
t3tcX + 129.570778, t3tcY + 13.540874, |
446 |
t3tcX + 129.570778, t3tcY + 100, |
461 |
t3tcX + 129.570778, t3tcY + 100, |
447 |
t3tcX + 59.446714, t3tcY + 100, |
462 |
t3tcX + 59.446714, t3tcY + 100); |
448 |
{tolerance:0.0001}); |
|
|
449 |
// Test nested 3D transforms (without preserve-3d). |
463 |
// Test nested 3D transforms (without preserve-3d). |
450 |
checkQuadIsQuad("threeDTransformChild.getBoxQuads()", |
464 |
checkQuadIsQuad("threeDTransformChild", {tolerance:0.0001}, |
451 |
t3tcX + 89.395061, t3tcY + 2.243033, |
465 |
t3tcX + 89.395061, t3tcY + 2.243033, |
452 |
t3tcX + 113.041727, t3tcY - 2.758530, |
466 |
t3tcX + 113.041727, t3tcY - 2.758530, |
453 |
t3tcX + 113.041727, t3tcY + 52.985921, |
467 |
t3tcX + 113.041727, t3tcY + 52.985921, |
454 |
t3tcX + 89.395061, t3tcY + 47.571899, |
468 |
t3tcX + 89.395061, t3tcY + 47.571899); |
455 |
{tolerance:0.0001}); |
|
|
456 |
// Test preserve-3D. |
469 |
// Test preserve-3D. |
457 |
var p3dtcX = preserve3DTransformContainer.getBoundingClientRect().left; |
470 |
var p3dtcX = preserve3DTransformContainer.getBoundingClientRect().left; |
458 |
var p3dtcY = preserve3DTransformContainer.getBoundingClientRect().top; |
471 |
var p3dtcY = preserve3DTransformContainer.getBoundingClientRect().top; |
459 |
checkQuadIsRect("preserve3DTransformChild.getBoxQuads()", |
472 |
checkQuadIsRect("preserve3DTransformChild", {tolerance:0.0001}, |
460 |
p3dtcX, p3dtcY, 200, 50, |
473 |
p3dtcX, p3dtcY, 200, 50, |
461 |
{tolerance:0.0001}); |
474 |
{tolerance:0.0001}); |
462 |
// Test mapping back into preserve-3D. |
475 |
// Test mapping back into preserve-3D. |
463 |
checkQuadIsRect("d.getBoxQuads({relativeTo:preserve3DTransformChild})", |
476 |
checkQuadIsRect("d", {toStr:"preserve3DTransformChild",tolerance:0.0001}, |
464 |
dX - p3dtcX, dY - p3dtcY, dW, dH, |
477 |
dX - p3dtcX, dY - p3dtcY, dW, dH); |
465 |
{tolerance:0.0001}); |
|
|
466 |
|
478 |
|
467 |
// Test SVG. |
479 |
// Test SVG. |
468 |
var svgContainerX = svgContainer.getBoundingClientRect().left; |
480 |
var svgContainerX = svgContainer.getBoundingClientRect().left; |
469 |
var svgContainerY = svgContainer.getBoundingClientRect().top; |
481 |
var svgContainerY = svgContainer.getBoundingClientRect().top; |
470 |
checkQuadIsRect("circle.getBoxQuads()", |
482 |
checkQuadIsRect("circle", {}, |
471 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
483 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
472 |
// Box types are ignored for SVG elements. |
484 |
// Box types are ignored for SVG elements. |
473 |
checkQuadIsRect("circle.getBoxQuads({box:'content'})", |
485 |
checkQuadIsRect("circle", {box:"content"}, |
474 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
486 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
475 |
checkQuadIsRect("circle.getBoxQuads({box:'padding'})", |
487 |
checkQuadIsRect("circle", {box:"padding"}, |
476 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
488 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
477 |
checkQuadIsRect("circle.getBoxQuads({box:'margin'})", |
489 |
checkQuadIsRect("circle", {box:"margin"}, |
478 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
490 |
svgContainerX + 30, svgContainerY + 30, 40, 40); |
479 |
checkQuadIsRect("d.getBoxQuads({relativeTo:circle})", |
491 |
checkQuadIsRect("d", {toStr:"circle"}, |
480 |
dX - (svgContainerX + 30), dY - (svgContainerY + 30), dW, dH); |
492 |
dX - (svgContainerX + 30), dY - (svgContainerY + 30), dW, dH); |
481 |
// Test foreignObject inside an SVG transform. |
493 |
// Test foreignObject inside an SVG transform. |
482 |
checkQuadIsRect("foreign.getBoxQuads()", |
494 |
checkQuadIsRect("foreign", {}, |
483 |
svgContainerX + 100, svgContainerY + 40, 200, 120); |
495 |
svgContainerX + 100, svgContainerY + 40, 200, 120); |
484 |
|
496 |
|
485 |
// XXX Test SVG text (probably broken; unclear what the best way is to handle it) |
497 |
// XXX Test SVG text (probably broken; unclear what the best way is to handle it) |
486 |
|
498 |
|
487 |
// Test that converting between nodes in different toplevel browsing contexts |
499 |
// Test that converting between nodes in different toplevel browsing contexts |
488 |
// throws an exception. |
500 |
// throws an exception. |
489 |
var openedWindow = window.open("data:text/html,<div id='d'>",""); |
501 |
var openedWindow = window.open("data:text/html,<div id='d'>",""); |
490 |
openedWindow.addEventListener("load", function() { |
502 |
openedWindow.addEventListener("load", function() { |