tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_getTransformTo.html (3444B)

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>Test Element::getTransformToViewport</title>
      6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
      8 <style>
      9 body {
     10  margin: 0px;
     11 }
     12 .box {
     13  background-color: red;
     14  height: 20px;
     15  width: 80px;
     16 }
     17 .a {
     18  margin: 10px;
     19 }
     20 .b {
     21  margin: 20px;
     22 }
     23 .c {
     24  transform: translate(11px, -11px);
     25 }
     26 .d {
     27  transform: skewx(-45deg);
     28 }
     29 
     30 </style>
     31 <script>
     32 'use strict';
     33 
     34 SimpleTest.waitForExplicitFinish();
     35 
     36 function testTransformToParent() {
     37  let expectedData = [
     38    ["boxA", "1,0,0,0,0,1,0,0,0,0,1,0,10,0,0,1"],
     39    ["boxB", "1,0,0,0,0,1,0,0,0,0,1,0,20,0,0,1"],
     40    ["boxC", "1,0,0,0,0,1,0,0,0,0,1,0,11,-11,0,1"],
     41    ["boxD", "1,0,0,0,-1,1,0,0,0,0,1,0,10,0,0,1"],
     42  ];
     43 
     44  // Test transform to parent.
     45  for (let i = 0; i < expectedData.length; ++i) {
     46    let expected = expectedData[i];
     47    let element = document.getElementById(expected[0]);
     48 
     49    let transform = element.getTransformToParent();
     50    let transformFloats = transform.toFloat32Array();
     51    let transformString = transformFloats.toString();
     52    is(transformString, expected[1], "Element " + expected[0] + " has expected transform to parent.");
     53  }
     54 }
     55 
     56 function testTransformToAncestorAndViewport() {
     57  let expectedData = [
     58    ["boxA", "1,0,0,0,0,1,0,0,0,0,1,0,10,10,0,1"],
     59    ["boxB", "1,0,0,0,0,1,0,0,0,0,1,0,20,50,0,1"],
     60    ["boxC", "1,0,0,0,0,1,0,0,0,0,1,0,11,79,0,1"],
     61  ];
     62 
     63  // Test transform to document (an actual ancestor unchanged by embedding within the mochitest framework).
     64  for (let i = 0; i < expectedData.length; ++i) {
     65    let expected = expectedData[i];
     66    let element = document.getElementById(expected[0]);
     67 
     68    let transform = element.getTransformToAncestor(document.documentElement);
     69    let transformFloats = transform.toFloat32Array();
     70    let transformString = transformFloats.toString();
     71    is(transformString, expected[1], "Element " + expected[0] + " has expected transform to ancestor.");
     72  }
     73 
     74  // Test transform to a non-ancestor is equivalent to transform to viewport.
     75  let nonAncestorElement = document.getElementById("nonAncestor");
     76  for (let i = 0; i < expectedData.length; ++i) {
     77    let expected = expectedData[i];
     78    let element = document.getElementById(expected[0]);
     79 
     80    let transform = element.getTransformToAncestor(nonAncestorElement);
     81    let transformFloats = transform.toFloat32Array();
     82    let transformString = transformFloats.toString();
     83 
     84    let transformToViewport = element.getTransformToViewport();
     85    let transformToViewportFloats = transformToViewport.toFloat32Array();
     86    let transformToViewportString = transformToViewportFloats.toString();
     87    is(transformString, transformToViewportString, "Element " + expected[0] + " transform to non-ancestor is equivalent to transform to viewport.");
     88  }
     89 }
     90 
     91 function runTests() {
     92  testTransformToParent();
     93  testTransformToAncestorAndViewport();
     94 
     95  SimpleTest.finish();
     96 }
     97 </script>
     98 </head>
     99 <body onLoad="runTests();">
    100 
    101 <div id="boxAParent">
    102  <div id="boxA" class="box a">boxA</div>
    103 </div>
    104 <div id="boxBParent">
    105  <div id="boxB" class="box b">boxB</div>
    106 </div>
    107 <div id="boxCParent">
    108  <div id="boxC" class="box c">boxC</div>
    109 </div>
    110 <div id="boxDParent">
    111  <div id="boxD" class="box d">boxD</div>
    112 </div>
    113 
    114 <div id="nonAncestor">This div is not an ancestor of any of the boxes.</div>
    115 
    116 </body>
    117 </html>