third_party/WebKit/LayoutTests/fast/dom/nodesFromRect/nodesFromRect-rotate.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Document::nodesFromRect : CSS rotate transforms - bug 85792</title>
   5 <style type="text/css">
   6     #sandbox {
   7         position: absolute;
   8         left: 0px;
   9         top: 0px;
  10         width: 700px;
  11         height: 700px;
  12     }
  13     #layer {
  14         position: absolute;
  15         left: 200px;
  16         top: 200px;
  17         width: 300px;
  18         height: 300px;
  19     }
  20     .rotate45 { transform: rotate(45deg); }
  21     .rotate90 { transform: rotate(90deg); }
  22     .rotate180 { transform: rotate(180deg); }
  23     #layer > #fleft { float: left; width: 50px; height: 300px; }
  24     #layer > #fright { float: right; width: 50px; height: 300px; }
  25     #layer > .hbox { height: 100px; margin-right: 50px; margin-left: 50px }
  26 </style>
  27 <script src="../../../resources/js-test.js"></script>
  28 <script src="resources/nodesFromRect.js"></script>
  29 </head>
  30
  31 <body>
  32     <div id=sandbox>
  33         <div id=layer>
  34             <div id=fleft></div>
  35             <div id=fright></div>
  36             <div id=box1 class=hbox></div>
  37             <div id=box2 class=hbox></div>
  38             <div id=box3 class=hbox></div>
  39         </div>
  40     </div>
  41
  42     <script>
  43         function runTest()
  44         {
  45             description(document.title);
  46             var e = {};
  47
  48             // Set up shortcut access to elements
  49             ['sandbox', 'layer', 'fleft', 'fright', 'box1', 'box2', 'box3'].forEach(function(a) {
  50                 e[a] = document.getElementById(a);
  51             });
  52
  53             window.scrollTo(0, 0);
  54             debug('Check unrotated area-testing for sanity');
  55             check(150, 150, 30, 30, 30, 30, [e.sandbox]);
  56             check(220, 220, 10, 10, 10, 10, [e.fleft]);
  57             check(470, 220, 10, 10, 10, 10, [e.fright]);
  58             check(270, 220, 10, 10, 10, 10, [e.box1]);
  59             check(270, 320, 10, 10, 10, 10, [e.box2]);
  60             check(240, 290, 30, 30, 30, 30, [e.fleft, e.box2, e.box1, e.layer]);
  61             check(180, 220, 10, 30, 10, 0, [e.fleft, e.layer, e.sandbox]);
  62             check(270, 280, 0, 10, 30, 10, [e.box2, e.box1, e.layer]);
  63             check(180, 220, 10, 0, 10, 30, [e.sandbox]);
  64
  65
  66             debug('Check rotated 180deg');
  67             e['layer'].setAttribute('class', 'rotate180');
  68             check(150, 150, 30, 30, 30, 30, [e.sandbox]);
  69             check(220, 220, 10, 10, 10, 10, [e.fright]);
  70             check(470, 220, 10, 10, 10, 10, [e.fleft]);
  71             check(270, 220, 10, 10, 10, 10, [e.box3]);
  72             check(270, 320, 10, 10, 10, 10, [e.box2]);
  73             check(240, 290, 30, 30, 30, 30, [e.fright, e.box3, e.box2, e.layer]);
  74             check(180, 220, 10, 30, 10, 0, [e.fright, e.layer, e.sandbox]);
  75             check(270, 280, 0, 10, 30, 10, [e.box3, e.box2, e.layer]);
  76             check(180, 220, 10, 0, 10, 30, [e.sandbox]);
  77
  78             debug('Check rotated 90deg');
  79             e['layer'].setAttribute('class', 'rotate90');
  80             check(150, 150, 30, 30, 30, 30, [e.sandbox]);
  81             check(220, 280, 10, 10, 10, 10, [e.box3]);
  82             check(470, 280, 10, 10, 10, 10, [e.box1]);
  83             check(270, 220, 10, 10, 10, 10, [e.fleft]);
  84             check(270, 470, 10, 10, 10, 10, [e.fright]);
  85             check(290, 240, 30, 30, 30, 30, [e.fleft, e.box3, e.box2, e.layer]);
  86             check(180, 280, 10, 30, 10, 0, [e.box3, e.layer, e.sandbox]);
  87             check(330, 180, 0, 10, 30, 10, [e.fleft, e.layer, e.sandbox]);
  88             check(280, 260, 40, 10, 10, 10, [e.fleft, e.box3, e.layer]);
  89
  90             debug('Check rotated 45deg');
  91             e['layer'].setAttribute('class', 'rotate45');
  92             check(150, 150, 30, 30, 30, 30, [e.sandbox]);
  93             check(260, 260, 10, 10, 10, 10, [e.fleft]);
  94             check(440, 440, 10, 10, 10, 10, [e.fright]);
  95             check(440, 260, 10, 10, 10, 10, [e.box1]);
  96             check(260, 440, 10, 10, 10, 10, [e.box3]);
  97             check(350, 140, 20, 20, 20, 20, [e.fleft, e.layer, e.sandbox]);
  98             check(350, 140, 20, 20, 70, 20, [e.fleft, e.box1, e.layer, e.sandbox]);
  99             check(350, 350, 40, 40, 40, 40, [e.box3, e.box2, e.box1, e.layer]);
 100             check(260, 260, 1, 27, 1, 27, [e.fleft]);
 101
 102         }
 103
 104         window.onload = runTest;
 105     </script>
 106
 107     <p id='description'></p>
 108     <span id="console"></span>
 109 </body>
 110 </html>
 111