Attachment 807057 Details for Bug 917755

[patch] Part 6: Add tests for getBoxQuads

917755-test (text/plain), 24.79 KB, created by Robert O'Callahan (:roc) (email my personal email if necessary)

(hide)

Description:

Filename:

MIME Type:

Creator: Robert O'Callahan (:roc) (email my personal email if necessary)

Size: 24.79 KB

patch

obsolete

>From: Robert O'Callahan <robert@ocallahan.org>
>Bug 917755. Part 6: Add tests for getBoxQuads. r=matspal
>
>diff --git a/layout/base/tests/Makefile.in b/layout/base/tests/Makefile.in
>--- a/layout/base/tests/Makefile.in
>+++ b/layout/base/tests/Makefile.in
>@@ -139,16 +139,17 @@ MOCHITEST_FILES =	\
> 		  file_bug842853.sjs \
> 		  file_bug842853.html \
> 		test_bug849219.html \
> 		test_bug851485.html \
> 		test_bug851445.html \
> 		  bug851445_helper.html \
> 		test_emulateMedium.html \
> 		enableTestPlugin.js \
>+		test_getBoxQuads.html \
> 		$(NULL)
> 
> ifeq (,$(filter gonk,$(MOZ_WIDGET_TOOLKIT)))
> # THESE TESTS (BELOW) DO NOT RUN ON B2G
> MOCHITEST_FILES += \
> 		test_bug858459.html \
> 		$(NULL)
> # THESE TESTS (ABOVE) DO NOT RUN ON B2G
>diff --git a/layout/base/tests/test_getBoxQuads.html b/layout/base/tests/test_getBoxQuads.html
>new file mode 100644
>--- /dev/null
>+++ b/layout/base/tests/test_getBoxQuads.html
>@@ -0,0 +1,505 @@
>+<!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 
>+<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 && options && 'tolerance' in options &&
>+      Math.abs(a - b) < options.tolerance) {
>+    ok(true, msg + "(" + a + " within " + options.tolerance + " of " + b + ")");
>+    return;
>+  }
>+  is(a, b, msg);
>+}
>+
>+function checkQuadIsRect(expr, x, y, w, h, options) {
>+  var quads = eval(expr);
>+  is(quads.length, 1, expr + " checking quad count");
>+  var q = quads[0];
>+  isApprox(q.p1.x, x, expr + " checking quad.p1.x", options);
>+  isApprox(q.p1.y, y, expr + " checking quad.p1.y", options);
>+  isApprox(q.p2.x, x + w, expr + " checking quad.p2.x", options);
>+  isApprox(q.p2.y, y, expr + " checking quad.p2.y", options);
>+  isApprox(q.p3.x, x + w, expr + " checking quad.p3.x", options);
>+  isApprox(q.p3.y, y + h, expr + " checking quad.p3.y", options);
>+  isApprox(q.p4.x, x, expr + " checking quad.p4.x", options);
>+  isApprox(q.p4.y, y + h, expr + " checking quad.p4.y", options);
>+
>+  isApprox(q.bounds.left, x, expr + " checking quad.bounds.left", options);
>+  isApprox(q.bounds.top, y, expr + " checking quad.bounds.top", options);
>+  isApprox(q.bounds.width, w, expr + " checking quad.bounds.width", options);
>+  isApprox(q.bounds.height, h, expr + " checking quad.bounds.height", options);
>+}
>+
>+function checkQuadIsQuad(expr, x1, y1, x2, y2, x3, y3, x4, y4, options) {
>+  var quads = eval(expr);
>+  is(quads.length, 1, expr + " checking quad count");
>+  var q = quads[0];
>+  isApprox(q.p1.x, x1, expr + " checking quad.p1.x", options);
>+  isApprox(q.p1.y, y1, expr + " checking quad.p1.y", options);
>+  isApprox(q.p2.x, x2, expr + " checking quad.p2.x", options);
>+  isApprox(q.p2.y, y2, expr + " checking quad.p2.y", options);
>+  isApprox(q.p3.x, x3, expr + " checking quad.p3.x", options);
>+  isApprox(q.p3.y, y3, expr + " checking quad.p3.y", options);
>+  isApprox(q.p4.x, x4, expr + " checking quad.p4.x", options);
>+  isApprox(q.p4.y, y4, expr + " checking quad.p4.y", options);
>+
>+  isApprox(q.bounds.left, Math.min(x1,x2,x3,x4), expr + " checking quad.bounds.left", options);
>+  isApprox(q.bounds.top, Math.min(y1,y2,y3,y4), expr + " checking quad.bounds.top", options);
>+  isApprox(q.bounds.right, Math.max(x1,x2,x3,x4), expr + " checking quad.bounds.right", options);
>+  isApprox(q.bounds.bottom, Math.max(y1,y2,y3,y4), expr + " 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>
>+
>+<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"></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 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.getBoxQuads({box:'content'})",
>+                  dX + 4 + 8, dY + 1 + 5, 120, 90);
>+  checkQuadIsRect("d.getBoxQuads({box:'padding'})",
>+                  dX + 8, dY + 5, 120 + 2 + 4, 90 + 1 + 3);
>+  checkQuadIsRect("d.getBoxQuads({box:'border'})",
>+                  dX, dY, dW, dH);
>+  checkQuadIsRect("d.getBoxQuads()",
>+                  dX, dY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
>+  checkQuadIsRect("d.getBoxQuads({box:'margin'})",
>+                  dX - 12, dY - 9, 120 + 2 + 4 + 6 + 8 + 10 + 12, 90 + 1 + 3 + 5 + 7 + 9 + 11);
>+
>+  // Test basic BoxQuadOptions.relativeTo and BoxQuadOptions.relativeToBox.
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'content'})",
>+                  12, 9, dW, dH);
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'padding'})",
>+                  12 + 16, 9 + 13, dW, dH);
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'border'})",
>+                  12 + 16 + 20, 9 + 13 + 17, dW, dH);
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer})",
>+                  12 + 16 + 20, 9 + 13 + 17, dW, dH);
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:dContainer,relativeToBox:'margin'})",
>+                  12 + 16 + 20 + 24, 9 + 13 + 17 + 21, dW, dH);
>+
>+  // Test BoxQuadOptions.relativeTo relative to this document          
>+  checkQuadIsRect("d.getBoxQuads({relativeTo: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.getBoxQuads({relativeTo: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.getBoxQuads({relativeTo:f1.contentWindow.f1d})",
>+                  dX - (f1X + 14), dY - (f1Y + 15), dW, dH); 
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:f1.contentDocument})",
>+                  dX - f1X, dY - f1Y, dW, dH); 
>+  // The box type is irrelevant for a document
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:f1.contentDocument,relativeToBox:'content'})",
>+                  dX - f1X, dY - f1Y, dW, dH); 
>+  // Test one document relative to another
>+  checkQuadIsRect("f1.contentDocument.getBoxQuads({relativeTo:document})",
>+                  f1X, f1Y, 50, 50);
>+  // The box type is irrelevant for a document
>+  checkQuadIsRect("f1.contentDocument.getBoxQuads({box:'content',relativeTo:document})",
>+                  f1X, f1Y, 50, 50);
>+  checkQuadIsRect("f1.contentDocument.getBoxQuads({box:'margin',relativeTo:document})",
>+                  f1X, f1Y, 50, 50);
>+  checkQuadIsRect("f1.contentDocument.getBoxQuads({box:'padding',relativeTo:document})",
>+                  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.getBoxQuads({relativeTo:ibSplit})",
>+                  dX - ibSplitPart1X, dY - ibSplitY, dW, dH);
>+  var tableX = table.getClientRects()[0].left;
>+  var tableY = table.getClientRects()[0].top;
>+  checkQuadIsRect("d.getBoxQuads({relativeTo: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, "InvalidNodeTypeError",
>+       "Exception for comment.getBoxQuads()");
>+  }
>+  try {
>+    d.getBoxQuads({relativeTo:comment});
>+    ok(false, "Exception should have been thrown");
>+  } catch (ex) {
>+    is(ex.name, "InvalidNodeTypeError",
>+       "Exception for getBoxQuads({relativeTo:comment})");
>+  }
>+
>+  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.getBoxQuads({box:'content'})",
>+                  oHX + 4 + 8, oHY + 1 + 5, 120, 90);
>+  checkQuadIsRect("overflowHidden.getBoxQuads({box:'padding'})",
>+                  oHX + 8, oHY + 5, 120 + 2 + 4, 90 + 1 + 3);
>+  checkQuadIsRect("overflowHidden.getBoxQuads({box:'border'})",
>+                  oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
>+  checkQuadIsRect("overflowHidden.getBoxQuads()",
>+                  oHX, oHY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
>+  checkQuadIsRect("overflowHidden.getBoxQuads({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.getBoxQuads({box:'content'})",
>+                  oSX + 4 + 8, oSY + 1 + 5, 120, 90);
>+  checkQuadIsRect("overflowScroll.getBoxQuads({box:'padding'})",
>+                  oSX + 8, oSY + 5, 120 + 2 + 4, 90 + 1 + 3);
>+  checkQuadIsRect("overflowScroll.getBoxQuads({box:'border'})",
>+                  oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
>+  checkQuadIsRect("overflowScroll.getBoxQuads()",
>+                  oSX, oSY, 120 + 2 + 4 + 6 + 8, 90 + 1 + 3 + 5 + 7);
>+  checkQuadIsRect("overflowScroll.getBoxQuads({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.getBoxQuads()",
>+                  stcX, stcY, 140, 160);
>+  var ttcX = translateTransformContainer.getBoundingClientRect().left;
>+  var ttcY = translateTransformContainer.getBoundingClientRect().top;
>+  checkQuadIsRect("translateTransform.getBoxQuads()",
>+                  ttcX + 30, ttcY + 40, 70, 80);
>+  // Test mapping into a transformed element.
>+  checkQuadIsRect("scaleTransform.getBoxQuads({relativeTo: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.getBoxQuads()",
>+                  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.getBoxQuads()",
>+                  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.getBoxQuads()",
>+                  rot45tcX + 50, rot45tcY + 50 - halfDiagonal,
>+                  rot45tcX + 50 + halfDiagonal, rot45tcY + 50,
>+                  rot45tcX + 50, rot45tcY + 50 + halfDiagonal,
>+                  rot45tcX + 50 - halfDiagonal, rot45tcY + 50,
>+                  {tolerance:0.0001});
>+
>+  // Test singular transforms.
>+  var singularTransformX = singularTransform.getBoundingClientRect().left;
>+  var singularTransformY = singularTransform.getBoundingClientRect().top;
>+  // They map everything to a point.
>+  checkQuadIsRect("singularTransform.getBoxQuads()",
>+                  singularTransformX, singularTransformY, 0, 0);
>+  checkQuadIsRect("singularTransformChild2.getBoxQuads()",
>+                  singularTransformX, singularTransformY, 0, 0);
>+  // Mapping into an element with a singular transform from outside sets
>+  // everything to zero.
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:singularTransform})",
>+                  0, 0, 0, 0);
>+  // But mappings within a subtree of an element with a singular transform work.
>+  checkQuadIsRect("singularTransformChild2.getBoxQuads({relativeTo:singularTransformChild1})",
>+                  0, 50, 200, 50);
>+
>+  // Test 3D transforms.
>+  var t3tcX = threeDTransformContainer.getBoundingClientRect().left;
>+  var t3tcY = threeDTransformContainer.getBoundingClientRect().top;
>+  checkQuadIsQuad("threeDTransform.getBoxQuads()",
>+                  t3tcX + 59.446714, t3tcY - 18.569847,
>+                  t3tcX + 129.570778, t3tcY + 13.540874,
>+                  t3tcX + 129.570778, t3tcY + 100,
>+                  t3tcX + 59.446714, t3tcY + 100,
>+                  {tolerance:0.0001});
>+  // Test nested 3D transforms (without preserve-3d).
>+  checkQuadIsQuad("threeDTransformChild.getBoxQuads()",
>+                  t3tcX + 89.395061, t3tcY + 2.243033,
>+                  t3tcX + 113.041727, t3tcY - 2.758530,
>+                  t3tcX + 113.041727, t3tcY + 52.985921,
>+                  t3tcX + 89.395061, t3tcY + 47.571899,
>+                  {tolerance:0.0001});
>+  // Test preserve-3D.
>+  var p3dtcX = preserve3DTransformContainer.getBoundingClientRect().left;
>+  var p3dtcY = preserve3DTransformContainer.getBoundingClientRect().top;
>+  checkQuadIsRect("preserve3DTransformChild.getBoxQuads()",
>+                  p3dtcX, p3dtcY, 200, 50,
>+                  {tolerance:0.0001});
>+  // Test mapping back into preserve-3D.
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:preserve3DTransformChild})",
>+                  dX - p3dtcX, dY - p3dtcY, dW, dH,
>+                  {tolerance:0.0001});
>+
>+  // Test SVG.
>+  var svgContainerX = svgContainer.getBoundingClientRect().left;
>+  var svgContainerY = svgContainer.getBoundingClientRect().top;
>+  checkQuadIsRect("circle.getBoxQuads()",
>+                  svgContainerX + 30, svgContainerY + 30, 40, 40);
>+  // Box types are ignored for SVG elements.
>+  checkQuadIsRect("circle.getBoxQuads({box:'content'})",
>+                  svgContainerX + 30, svgContainerY + 30, 40, 40);
>+  checkQuadIsRect("circle.getBoxQuads({box:'padding'})",
>+                  svgContainerX + 30, svgContainerY + 30, 40, 40);
>+  checkQuadIsRect("circle.getBoxQuads({box:'margin'})",
>+                  svgContainerX + 30, svgContainerY + 30, 40, 40);
>+  checkQuadIsRect("d.getBoxQuads({relativeTo:circle})",
>+                  dX - (svgContainerX + 30), dY - (svgContainerY + 30), dW, dH);
>+  // Test foreignObject inside an SVG transform.
>+  checkQuadIsRect("foreign.getBoxQuads()",
>+                  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>

Actions: View | Diff | Review

Attachments on bug 917755: 807052 | 807053 | 807054 | 807055 | 807056 | 807057 | 8356406 | 8356410 | 8356411 | 8356413 | 8356415 | 8356416 | 8369459 | 8388503 | 8388504 | 8388505 | 8388507 | 8388509 | 8388510 | 8389628 | 8389630 | 8389631 | 8389632 | 8389633

Bugzilla

Quick Search

Attachment 807057 Details for Bug 917755