зеркало из https://github.com/mozilla/gecko-dev.git
Bug 917755. Part 6: Add tests for getBoxQuads. r=matspal
This commit is contained in:
Robert O'Callahan
Родитель
05e0309b2b
Коммит
7cf35d690c
|
|
@ -458,6 +458,7 @@ skip-if = toolkit == "win"
|
|||
skip-if = toolkit == "win"
|
||||
[test_flush_on_paint.html]
|
||||
skip-if = true || (toolkit == 'android') || (toolkit == "cocoa") # Bug 688128, bug 539356
|
||||
[test_getBoxQuads_convertPointRectQuad.html]
|
||||
[test_bug687297.html]
|
||||
skip-if = (buildapp == 'b2g' && toolkit != 'gonk') # Bug 948948
|
||||
support-files =
|
||||
|
|
|
|||
|
|
@ -0,0 +1,525 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
</head>
|
||||
<body onload="startTest()">
|
||||
<p id="display"></p>
|
||||
<script>
|
||||
// Global variables we want eval() to be able to reference from anywhere
|
||||
var f1d;
|
||||
var text;
|
||||
var suppressedText;
|
||||
var notInDocument = document.createElement('div');
|
||||
|
||||
function isEval(expr, b) {
|
||||
is(eval(expr), b, expr);
|
||||
}
|
||||
|
||||
function isApprox(a, b, msg, options) {
|
||||
if (a != b && 'tolerance' in options &&
|
||||
Math.abs(a - b) < options.tolerance) {
|
||||
ok(true, msg + "(" + a + " within " + options.tolerance + " of " + b + ")");
|
||||
return;
|
||||
}
|
||||
is(a, b, msg);
|
||||
}
|
||||
|
||||
function makeQuadsExpr(fromStr, options) {
|
||||
var getBoxQuadsOptionParts = [];
|
||||
if ('box' in options) {
|
||||
getBoxQuadsOptionParts.push("box:'" + options.box + "'");
|
||||
}
|
||||
if ('toStr' in options) {
|
||||
getBoxQuadsOptionParts.push("relativeTo:" + options.toStr);
|
||||
}
|
||||
return fromStr + ".getBoxQuads({" + getBoxQuadsOptionParts.join(',') + "})";
|
||||
}
|
||||
|
||||
function checkQuadIsRect(fromStr, options, x, y, w, h) {
|
||||
var quadsExpr = makeQuadsExpr(fromStr, options);
|
||||
var quads = eval(quadsExpr);
|
||||
is(quads.length, 1, quadsExpr + " checking quad count");
|
||||
var q = quads[0];
|
||||
isApprox(q.p1.x, x, quadsExpr + " checking quad.p1.x", options);
|
||||
isApprox(q.p1.y, y, quadsExpr + " checking quad.p1.y", options);
|
||||
isApprox(q.p2.x, x + w, quadsExpr + " checking quad.p2.x", options);
|
||||
isApprox(q.p2.y, y, quadsExpr + " checking quad.p2.y", options);
|
||||
isApprox(q.p3.x, x + w, quadsExpr + " checking quad.p3.x", options);
|
||||
isApprox(q.p3.y, y + h, quadsExpr + " checking quad.p3.y", options);
|
||||
isApprox(q.p4.x, x, quadsExpr + " checking quad.p4.x", options);
|
||||
isApprox(q.p4.y, y + h, quadsExpr + " checking quad.p4.y", options);
|
||||
|
||||
isApprox(q.bounds.left, x, quadsExpr + " checking quad.bounds.left", options);
|
||||
isApprox(q.bounds.top, y, quadsExpr + " checking quad.bounds.top", options);
|
||||
isApprox(q.bounds.width, w, quadsExpr + " checking quad.bounds.width", options);
|
||||
isApprox(q.bounds.height, h, quadsExpr + " checking quad.bounds.height", options);
|
||||
}
|
||||
|
||||
function checkQuadIsQuad(fromStr, options, x1, y1, x2, y2, x3, y3, x4, y4) {
|
||||
var quadsExpr = makeQuadsExpr(fromStr, options);
|
||||
var quads = eval(quadsExpr);
|
||||
is(quads.length, 1, quadsExpr + " checking quad count");
|
||||
var q = quads[0];
|
||||
isApprox(q.p1.x, x1, quadsExpr + " checking quad.p1.x", options);
|
||||
isApprox(q.p1.y, y1, quadsExpr + " checking quad.p1.y", options);
|
||||
isApprox(q.p2.x, x2, quadsExpr + " checking quad.p2.x", options);
|
||||
isApprox(q.p2.y, y2, quadsExpr + " checking quad.p2.y", options);
|
||||
isApprox(q.p3.x, x3, quadsExpr + " checking quad.p3.x", options);
|
||||
isApprox(q.p3.y, y3, quadsExpr + " checking quad.p3.y", options);
|
||||
isApprox(q.p4.x, x4, quadsExpr + " checking quad.p4.x", options);
|
||||
isApprox(q.p4.y, y4, quadsExpr + " checking quad.p4.y", options);
|
||||
|
||||
isApprox(q.bounds.left, Math.min(x1,x2,x3,x4), quadsExpr + " checking quad.bounds.left", options);
|
||||
isApprox(q.bounds.top, Math.min(y1,y2,y3,y4), quadsExpr + " checking quad.bounds.top", options);
|
||||
isApprox(q.bounds.right, Math.max(x1,x2,x3,x4), quadsExpr + " checking quad.bounds.right", options);
|
||||
isApprox(q.bounds.bottom, Math.max(y1,y2,y3,y4), quadsExpr + " checking quad.bounds.bottom", options);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
em {
|
||||
display:inline-block; height:10px; background:gray;
|
||||
}
|
||||
</style>
|
||||
<div id="dContainer"
|
||||
style="padding:13px 14px 15px 16px;
|
||||
border-width:17px 18px 19px 20px; border-style:solid; border-color:yellow;
|
||||
margin:21px 22px 23px 24px;">
|
||||
<div id="d"
|
||||
style="width:120px; height:90px; padding:1px 2px 3px 4px;
|
||||
border-width:5px 6px 7px 8px; border-style:solid; border-color:yellow;
|
||||
margin:9px 10px 11px 12px; background:blue;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dUnrelated" style="width:50px; height:50px;"></div>
|
||||
|
||||
<iframe id="f1" style="width:50px; height:50px; border:0; background:lime;"
|
||||
src="data:text/html,<!DOCTYPE HTML><html style='padding:25px'><div id='f1d' style='position:absolute; left:14px; top:15px; width:16px; height:17px; background:pink'></div>">
|
||||
</iframe>
|
||||
<!--
|
||||
It matters that the first part of this span is on the same line as the above <iframe>!
|
||||
That ensures the first quad's X position is not equal to the anonymous block's X position.
|
||||
-->
|
||||
<span id="ibSplit"
|
||||
><em id="ibSplitPart1" style="width:100px;"></em
|
||||
><div style="width:110px; height:20px; background:black"></div
|
||||
><em style="width:130px;"></em></span>
|
||||
|
||||
<table cellspacing="0" id="table" style="border:0; margin:0; padding:0; background:orange">
|
||||
<tbody style="padding:0; margin:0; border:0; background:blue">
|
||||
<tr style="height:50px; padding:0; margin:0; border:0">
|
||||
<td style="border:0; margin:0; padding:0">Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<caption style="height:40px; background:yellow">Caption</caption>
|
||||
</table>
|
||||
|
||||
<div style="height:80px; -moz-column-count:2; -moz-column-fill:auto; border:2px solid black;">
|
||||
<div style="height:20px;"></div>
|
||||
<div id="colSplit" style="height:80px; background:blue; border:10px solid red; border-bottom-width:15px"></div>
|
||||
</div>
|
||||
|
||||
<div style="width:200px; border:2px solid black;"
|
||||
><em style="width:150px;"></em
|
||||
><span id="inlineSplit" style="background:pink; border:10px solid red; border-right-width:15px"
|
||||
><em style="width:20px; background:green"></em><em style="width:60px"></em
|
||||
></span
|
||||
></div>
|
||||
|
||||
<div style="width:200px; border:2px solid black;"
|
||||
><em style="width:150px;"></em
|
||||
><span id="textContainer">T
|
||||
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</span
|
||||
></div>
|
||||
|
||||
<div id="suppressedTextContainer"> </div>
|
||||
|
||||
<div id="commentContainer"><!-- COMMENT --></div>
|
||||
|
||||
<div id="displayNone" style="display:none"></div>
|
||||
|
||||
<div id="overflowHidden"
|
||||
style="overflow:hidden; width:120px; height:90px; padding:1px 2px 3px 4px;
|
||||
border-width:5px 6px 7px 8px; border-style:solid; border-color:yellow;
|
||||
margin:9px 10px 11px 12px; background:blue;">
|
||||
<div style="height:400px; background:lime;"></div>
|
||||
</div>
|
||||
|
||||
<div id="overflowScroll"
|
||||
style="overflow:scroll; width:120px; height:90px; padding:1px 2px 3px 4px;
|
||||
border-width:5px 6px 7px 8px; border-style:solid; border-color:yellow;
|
||||
margin:9px 10px 11px 12px; background:blue; background-clip:content-box;">
|
||||
<div id="overflowScrollChild" style="height:400px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="scaleTransformContainer" style="width:200px; height:200px;">
|
||||
<div id="scaleTransform"
|
||||
style="transform:scale(2); transform-origin:top left; width:70px; height:80px; background:yellow"></div>
|
||||
</div>
|
||||
|
||||
<div id="translateTransformContainer" style="width:200px; height:200px;">
|
||||
<div id="translateTransform"
|
||||
style="transform:translate(30px,40px); width:70px; height:80px; background:yellow"></div>
|
||||
</div>
|
||||
|
||||
<div id="rotateTransformContainer" style="width:200px; height:200px;">
|
||||
<div id="rotateTransform"
|
||||
style="transform:rotate(90deg); width:70px; height:80px; background:yellow"></div>
|
||||
</div>
|
||||
|
||||
<div id="flipTransformContainer" style="width:200px; height:200px;">
|
||||
<div id="flipTransform"
|
||||
style="transform:scaleY(-1); width:70px; height:80px; background:yellow"></div>
|
||||
</div>
|
||||
|
||||
<div id="rot45TransformContainer" style="width:200px; height:200px;">
|
||||
<div id="rot45Transform"
|
||||
style="transform:rotate(45deg); width:100px; height:100px; background:yellow"></div>
|
||||
</div>
|
||||
|
||||
<div id="singularTransform" style="transform:scale(0); width:200px; height:200px;">
|
||||
<div id="singularTransformChild1" style="height:50px;"></div>
|
||||
<div id="singularTransformChild2" style="height:50px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="threeDTransformContainer" style="perspective:600px; width:200px; height:200px">
|
||||
<div id="threeDTransform" style="transform:rotateY(70deg); background:yellow; height:100px; perspective:600px">
|
||||
<div id="threeDTransformChild" style="transform:rotateY(-70deg); background:blue; height:50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preserve3DTransformContainer" style="perspective:600px; width:200px; height:200px">
|
||||
<div id="preserve3DTransform" style="transform:rotateY(70deg); transform-style:preserve-3d; background:yellow; height:100px;">
|
||||
<div id="preserve3DTransformChild" style="transform:rotateY(-70deg); background:blue; height:50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="svgContainer">
|
||||
<svg id="svg" style="width:200px; height:200px; background:lightgray;">
|
||||
<circle id="circle" cx="50" cy="50" r="20" fill="red" style="margin:20px; padding:10px; border:15px solid black"></circle>
|
||||
<g transform="scale(2)">
|
||||
<foreignObject x="50" y="20">
|
||||
<div id="foreign" style="width:100px; height:60px; background:purple"></div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
|
||||
window.scrollTo(0,0);
|
||||
|
||||
function startTest() {
|
||||
SpecialPowers.pushPrefEnv({"set": [["layout.css.DOMPoint.enabled", true],
|
||||
["layout.css.DOMQuad.enabled", true],
|
||||
["layout.css.getBoxQuads.enabled", true]]}, runTest);
|
||||
}
|
||||
|
||||
function runTest() {
|
||||
// Setup globals
|
||||
f1d = f1.contentWindow.f1d;
|
||||
text = textContainer.firstChild;
|
||||
suppressedText = suppressedTextContainer.firstChild;
|
||||
|
||||
// Test basic BoxQuadOptions.box.
|
||||
var dX = d.getBoundingClientRect().left;
|
||||
var dY = d.getBoundingClientRect().top;
|
||||
var dW = d.getBoundingClientRect().width;
|
||||
var dH = d.getBoundingClientRect().height;
|
||||
|
||||
checkQuadIsRect("d", {box:"content"},
|
||||
dX + 4 + 8, dY + 1 + 5, 120, 90);
|
||||
checkQuadIsRect("d", {box:"padding"},
|
||||
dX + 8, dY + 5, 120 + 2 + 4, 90 + 1 + 3);
|
||||
checkQuadIsRect("d", {box:"border"},
|
||||
dX, dY, dW, dH);
|
||||
checkQuadIsRect("d", {},
|
||||
dX, dY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
|
||||
checkQuadIsRect("d", {box:"margin"},
|
||||
dX - 12, dY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11);
|
||||
|
||||
// Test basic BoxQuadOptions.relativeTo
|
||||
checkQuadIsRect("d", {toStr:"dContainer"},
|
||||
12 + 16 + 20, 9 + 13 + 17, dW, dH);
|
||||
|
||||
// Test BoxQuadOptions.relativeTo relative to this document
|
||||
checkQuadIsRect("d", {toStr:"document"},
|
||||
dX, dY, dW, dH);
|
||||
// Test BoxQuadOptions.relativeTo relative to a non-ancestor.
|
||||
var dUnrelatedX = dUnrelated.getBoundingClientRect().left;
|
||||
var dUnrelatedY = dUnrelated.getBoundingClientRect().top;
|
||||
checkQuadIsRect("d", {toStr:"dUnrelated"},
|
||||
dX - dUnrelatedX, dY - dUnrelatedY, dW, dH);
|
||||
// Test BoxQuadOptions.relativeTo relative to an element in a different document (and the document)
|
||||
var f1X = f1.getBoundingClientRect().left;
|
||||
var f1Y = f1.getBoundingClientRect().top;
|
||||
checkQuadIsRect("d", {toStr:"f1.contentWindow.f1d"},
|
||||
dX - (f1X + 14), dY - (f1Y + 15), dW, dH);
|
||||
checkQuadIsRect("d", {toStr:"f1.contentDocument"},
|
||||
dX - f1X, dY - f1Y, dW, dH);
|
||||
// Test one document relative to another
|
||||
checkQuadIsRect("f1.contentDocument", {toStr:"document"},
|
||||
f1X, f1Y, 50, 50);
|
||||
// The box type is irrelevant for a document
|
||||
checkQuadIsRect("f1.contentDocument", {toStr:"document",box:"content"},
|
||||
f1X, f1Y, 50, 50);
|
||||
checkQuadIsRect("f1.contentDocument", {toStr:"document",box:"margin"},
|
||||
f1X, f1Y, 50, 50);
|
||||
checkQuadIsRect("f1.contentDocument", {toStr:"document",box:"padding"},
|
||||
f1X, f1Y, 50, 50);
|
||||
|
||||
// Test that anonymous boxes are correctly ignored when building quads.
|
||||
var ibSplitPart1X = ibSplitPart1.getBoundingClientRect().left;
|
||||
var ibSplitY = ibSplit.getBoundingClientRect().top;
|
||||
isEval("ibSplit.getBoxQuads().length", 3);
|
||||
isEval("ibSplit.getBoxQuads()[0].bounds.left", ibSplitPart1X);
|
||||
isEval("ibSplit.getBoxQuads()[0].bounds.width", 100);
|
||||
isEval("ibSplit.getBoxQuads()[1].bounds.width", 110);
|
||||
isEval("ibSplit.getBoxQuads()[2].bounds.width", 130);
|
||||
isEval("table.getBoxQuads().length", 2);
|
||||
isEval("table.getBoxQuads()[0].bounds.height", 50);
|
||||
isEval("table.getBoxQuads()[1].bounds.height", 40);
|
||||
|
||||
// Test that we skip anonymous boxes when finding the right box to be relative to.
|
||||
checkQuadIsRect("d", {toStr:"ibSplit"},
|
||||
dX - ibSplitPart1X, dY - ibSplitY, dW, dH);
|
||||
var tableX = table.getClientRects()[0].left;
|
||||
var tableY = table.getClientRects()[0].top;
|
||||
checkQuadIsRect("d", {toStr:"table"},
|
||||
dX - tableX, dY - tableY, dW, dH);
|
||||
|
||||
// Test boxes generated by block splitting. Check for borders being placed correctly.
|
||||
var colSplitY = colSplit.getClientRects()[0].top;
|
||||
isEval("colSplit.getBoxQuads().length", 2);
|
||||
isEval("colSplit.getBoxQuads()[0].bounds.top", colSplitY);
|
||||
isEval("colSplit.getBoxQuads()[0].bounds.height", 60);
|
||||
isEval("colSplit.getBoxQuads()[1].bounds.top", colSplitY - 20);
|
||||
isEval("colSplit.getBoxQuads()[1].bounds.height", 45);
|
||||
isEval("colSplit.getBoxQuads({box:'content'}).length", 2);
|
||||
// The first box for the block has the top border; the second box has the bottom border.
|
||||
isEval("colSplit.getBoxQuads({box:'content'})[0].bounds.top", colSplitY + 10);
|
||||
isEval("colSplit.getBoxQuads({box:'content'})[0].bounds.height", 50);
|
||||
isEval("colSplit.getBoxQuads({box:'content'})[1].bounds.top", colSplitY - 20);
|
||||
isEval("colSplit.getBoxQuads({box:'content'})[1].bounds.height", 30);
|
||||
|
||||
var inlineSplitX = inlineSplit.getClientRects()[0].left;
|
||||
isEval("inlineSplit.getBoxQuads().length", 2);
|
||||
isEval("inlineSplit.getBoxQuads()[0].bounds.left", inlineSplitX);
|
||||
isEval("inlineSplit.getBoxQuads()[0].bounds.width", 30);
|
||||
isEval("inlineSplit.getBoxQuads()[1].bounds.left", inlineSplitX - 150);
|
||||
isEval("inlineSplit.getBoxQuads()[1].bounds.width", 75);
|
||||
isEval("inlineSplit.getBoxQuads({box:'content'}).length", 2);
|
||||
// The first box for the inline has the left border; the second box has the right border.
|
||||
isEval("inlineSplit.getBoxQuads({box:'content'})[0].bounds.left", inlineSplitX + 10);
|
||||
isEval("inlineSplit.getBoxQuads({box:'content'})[0].bounds.width", 20);
|
||||
isEval("inlineSplit.getBoxQuads({box:'content'})[1].bounds.left", inlineSplitX - 150);
|
||||
isEval("inlineSplit.getBoxQuads({box:'content'})[1].bounds.width", 60);
|
||||
|
||||
var textX = textContainer.getClientRects()[0].left;
|
||||
isEval("text.getBoxQuads().length", 2);
|
||||
isEval("text.getBoxQuads()[0].bounds.left", textX);
|
||||
isEval("text.getBoxQuads()[1].bounds.left", textX - 150);
|
||||
// Box types are irrelevant for text
|
||||
isEval("text.getBoxQuads({box:'content'}).length", 2);
|
||||
isEval("text.getBoxQuads({box:'content'})[0].bounds.left", textX);
|
||||
isEval("text.getBoxQuads({box:'content'})[1].bounds.left", textX - 150);
|
||||
isEval("text.getBoxQuads({box:'padding'}).length", 2);
|
||||
isEval("text.getBoxQuads({box:'padding'})[0].bounds.left", textX);
|
||||
isEval("text.getBoxQuads({box:'padding'})[1].bounds.left", textX - 150);
|
||||
isEval("text.getBoxQuads({box:'margin'}).length", 2);
|
||||
isEval("text.getBoxQuads({box:'margin'})[0].bounds.left", textX);
|
||||
isEval("text.getBoxQuads({box:'margin'})[1].bounds.left", textX - 150);
|
||||
|
||||
// Check that a text node whose layout might have been optimized away gives
|
||||
// correct results.
|
||||
var suppressedTextContainerX = suppressedTextContainer.getBoundingClientRect().left;
|
||||
isEval("suppressedText.getBoxQuads().length", 1);
|
||||
isEval("suppressedText.getBoxQuads()[0].bounds.left", suppressedTextContainerX);
|
||||
isEval("suppressedText.getBoxQuads()[0].bounds.width", 0);
|
||||
|
||||
var comment = commentContainer.firstChild;
|
||||
try {
|
||||
comment.getBoxQuads();
|
||||
ok(false, "Exception should have been thrown");
|
||||
} catch (ex) {
|
||||
is(ex.name, "TypeError",
|
||||
"Exception for comment.getBoxQuads()");
|
||||
}
|
||||
try {
|
||||
d.getBoxQuads({relativeTo:comment});
|
||||
ok(false, "Exception should have been thrown");
|
||||
} catch (ex) {
|
||||
is(ex.name, "TypeError",
|
||||
"Exception for getBoxQuads({relativeTo:comment})");
|
||||
}
|
||||
|
||||
var fragment = document.createDocumentFragment();
|
||||
try {
|
||||
fragment.getBoxQuads();
|
||||
ok(false, "Exception should have been thrown");
|
||||
} catch (ex) {
|
||||
is(ex.name, "TypeError",
|
||||
"Exception for fragment.getBoxQuads()");
|
||||
}
|
||||
try {
|
||||
d.getBoxQuads({relativeTo:fragment});
|
||||
ok(false, "Exception should have been thrown");
|
||||
} catch (ex) {
|
||||
is(ex.name, "TypeError",
|
||||
"Exception for getBoxQuads({relativeTo:fragment})");
|
||||
}
|
||||
|
||||
isEval("displayNone.getBoxQuads().length", 0);
|
||||
isEval("notInDocument.getBoxQuads().length", 0);
|
||||
|
||||
// Test an overflow:hidden version of d. overflow:hidden should not affect
|
||||
// the quads, basically.
|
||||
var oHX = overflowHidden.getBoundingClientRect().left;
|
||||
var oHY = overflowHidden.getBoundingClientRect().top;
|
||||
checkQuadIsRect("overflowHidden", {box:"content"},
|
||||
oHX + 4 + 8, oHY + 1 + 5, 120, 90);
|
||||
checkQuadIsRect("overflowHidden", {box:"padding"},
|
||||
oHX + 8, oHY + 5, 120 + 2 + 4, 90 + 1 + 3);
|
||||
checkQuadIsRect("overflowHidden", {box:"border"},
|
||||
oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
|
||||
checkQuadIsRect("overflowHidden", {},
|
||||
oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
|
||||
checkQuadIsRect("overflowHidden", {box:"margin"},
|
||||
oHX - 12, oHY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11);
|
||||
|
||||
// Test an overflow:scroll version of d. I assume that boxes aren't affected
|
||||
// by the scrollbar although it's not clear that this is correct.
|
||||
var oSX = overflowScroll.getBoundingClientRect().left;
|
||||
var oSY = overflowScroll.getBoundingClientRect().top;
|
||||
checkQuadIsRect("overflowScroll", {box:"content"},
|
||||
oSX + 4 + 8, oSY + 1 + 5, 120, 90);
|
||||
checkQuadIsRect("overflowScroll", {box:"padding"},
|
||||
oSX + 8, oSY + 5, 120 + 2 + 4, 90 + 1 + 3);
|
||||
checkQuadIsRect("overflowScroll", {box:"border"},
|
||||
oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
|
||||
checkQuadIsRect("overflowScroll", {},
|
||||
oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
|
||||
checkQuadIsRect("overflowScroll", {box:"margin"},
|
||||
oSX - 12, oSY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11);
|
||||
|
||||
// Test simple 2D transforms.
|
||||
var stcX = scaleTransformContainer.getBoundingClientRect().left;
|
||||
var stcY = scaleTransformContainer.getBoundingClientRect().top;
|
||||
checkQuadIsRect("scaleTransform", {},
|
||||
stcX, stcY, 140, 160);
|
||||
var ttcX = translateTransformContainer.getBoundingClientRect().left;
|
||||
var ttcY = translateTransformContainer.getBoundingClientRect().top;
|
||||
checkQuadIsRect("translateTransform", {},
|
||||
ttcX + 30, ttcY + 40, 70, 80);
|
||||
// Test mapping into a transformed element.
|
||||
checkQuadIsRect("scaleTransform", {toStr:"translateTransform"},
|
||||
stcX - (ttcX + 30), stcY - (ttcY + 40), 140, 160);
|
||||
// Test 90 degree rotation.
|
||||
var rotatetcX = rotateTransformContainer.getBoundingClientRect().left;
|
||||
var rotatetcY = rotateTransformContainer.getBoundingClientRect().top;
|
||||
checkQuadIsQuad("rotateTransform", {},
|
||||
rotatetcX + 75, rotatetcY + 5,
|
||||
rotatetcX + 75, rotatetcY + 75,
|
||||
rotatetcX - 5, rotatetcY + 75,
|
||||
rotatetcX - 5, rotatetcY + 5);
|
||||
// Test vertical flip.
|
||||
var fliptcX = flipTransformContainer.getBoundingClientRect().left;
|
||||
var fliptcY = flipTransformContainer.getBoundingClientRect().top;
|
||||
checkQuadIsQuad("flipTransform", {},
|
||||
fliptcX, fliptcY + 80,
|
||||
fliptcX + 70, fliptcY + 80,
|
||||
fliptcX + 70, fliptcY,
|
||||
fliptcX, fliptcY);
|
||||
// Test non-90deg rotation.
|
||||
var rot45tcX = rot45TransformContainer.getBoundingClientRect().left;
|
||||
var rot45tcY = rot45TransformContainer.getBoundingClientRect().top;
|
||||
var halfDiagonal = 100/Math.sqrt(2);
|
||||
checkQuadIsQuad("rot45Transform", {tolerance:0.0001},
|
||||
rot45tcX + 50, rot45tcY + 50 - halfDiagonal,
|
||||
rot45tcX + 50 + halfDiagonal, rot45tcY + 50,
|
||||
rot45tcX + 50, rot45tcY + 50 + halfDiagonal,
|
||||
rot45tcX + 50 - halfDiagonal, rot45tcY + 50);
|
||||
|
||||
// Test singular transforms.
|
||||
var singularTransformX = singularTransform.getBoundingClientRect().left;
|
||||
var singularTransformY = singularTransform.getBoundingClientRect().top;
|
||||
// They map everything to a point.
|
||||
checkQuadIsRect("singularTransform", {},
|
||||
singularTransformX, singularTransformY, 0, 0);
|
||||
checkQuadIsRect("singularTransformChild2", {},
|
||||
singularTransformX, singularTransformY, 0, 0);
|
||||
// Mapping into an element with a singular transform from outside sets
|
||||
// everything to zero.
|
||||
checkQuadIsRect("d", {toStr:"singularTransform"},
|
||||
0, 0, 0, 0);
|
||||
// But mappings within a subtree of an element with a singular transform work.
|
||||
checkQuadIsRect("singularTransformChild2", {toStr:"singularTransformChild1"},
|
||||
0, 50, 200, 50);
|
||||
|
||||
// Test 3D transforms.
|
||||
var t3tcX = threeDTransformContainer.getBoundingClientRect().left;
|
||||
var t3tcY = threeDTransformContainer.getBoundingClientRect().top;
|
||||
checkQuadIsQuad("threeDTransform", {tolerance:0.0001},
|
||||
t3tcX + 59.446714, t3tcY - 18.569847,
|
||||
t3tcX + 129.570778, t3tcY + 13.540874,
|
||||
t3tcX + 129.570778, t3tcY + 100,
|
||||
t3tcX + 59.446714, t3tcY + 100);
|
||||
// Test nested 3D transforms (without preserve-3d).
|
||||
checkQuadIsQuad("threeDTransformChild", {tolerance:0.0001},
|
||||
t3tcX + 89.395061, t3tcY + 2.243033,
|
||||
t3tcX + 113.041727, t3tcY - 2.758530,
|
||||
t3tcX + 113.041727, t3tcY + 52.985921,
|
||||
t3tcX + 89.395061, t3tcY + 47.571899);
|
||||
// Test preserve-3D.
|
||||
var p3dtcX = preserve3DTransformContainer.getBoundingClientRect().left;
|
||||
var p3dtcY = preserve3DTransformContainer.getBoundingClientRect().top;
|
||||
checkQuadIsRect("preserve3DTransformChild", {tolerance:0.0001},
|
||||
p3dtcX, p3dtcY, 200, 50,
|
||||
{tolerance:0.0001});
|
||||
// Test mapping back into preserve-3D.
|
||||
checkQuadIsRect("d", {toStr:"preserve3DTransformChild",tolerance:0.0001},
|
||||
dX - p3dtcX, dY - p3dtcY, dW, dH);
|
||||
|
||||
// Test SVG.
|
||||
var svgContainerX = svgContainer.getBoundingClientRect().left;
|
||||
var svgContainerY = svgContainer.getBoundingClientRect().top;
|
||||
checkQuadIsRect("circle", {},
|
||||
svgContainerX + 30, svgContainerY + 30, 40, 40);
|
||||
// Box types are ignored for SVG elements.
|
||||
checkQuadIsRect("circle", {box:"content"},
|
||||
svgContainerX + 30, svgContainerY + 30, 40, 40);
|
||||
checkQuadIsRect("circle", {box:"padding"},
|
||||
svgContainerX + 30, svgContainerY + 30, 40, 40);
|
||||
checkQuadIsRect("circle", {box:"margin"},
|
||||
svgContainerX + 30, svgContainerY + 30, 40, 40);
|
||||
checkQuadIsRect("d", {toStr:"circle"},
|
||||
dX - (svgContainerX + 30), dY - (svgContainerY + 30), dW, dH);
|
||||
// Test foreignObject inside an SVG transform.
|
||||
checkQuadIsRect("foreign", {},
|
||||
svgContainerX + 100, svgContainerY + 40, 200, 120);
|
||||
|
||||
// XXX Test SVG text (probably broken; unclear what the best way is to handle it)
|
||||
|
||||
// Test that converting between nodes in different toplevel browsing contexts
|
||||
// throws an exception.
|
||||
var openedWindow = window.open("data:text/html,<div id='d'>","");
|
||||
openedWindow.addEventListener("load", function() {
|
||||
try {
|
||||
openedWindow.d.getBoxQuads({relativeTo:document});
|
||||
ok(false, "Exception should have been thrown");
|
||||
} catch (ex) {
|
||||
is(ex.name, "NotFoundError",
|
||||
"Exception for getBoxQuads on nodes in different toplevel browsing contexts");
|
||||
}
|
||||
openedWindow.close();
|
||||
|
||||
SimpleTest.finish();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче