| <html> |
| <head> |
| <style> |
| .drag { |
| -webkit-app-region: drag; |
| } |
| |
| .nodrag { |
| -webkit-app-region: no-drag; |
| } |
| |
| .transform { |
| transform: scale(0.5, 0.5); |
| } |
| |
| #draggable { |
| position: absolute; |
| top: 10px; |
| left: 20px; |
| width: 100px; |
| height: 60px; |
| background-color: green; |
| } |
| |
| #nondraggable { |
| left: 0px; |
| top: 0px; |
| width: 60px; |
| height: 20px; |
| background-color: blue; |
| } |
| </style> |
| </head> |
| |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| description("This tests that transformed annotated regions have the correct bounds."); |
| function getBoundsFromClientRectList(rects) { |
| if (rects && rects.length == 1) |
| return rects[0].left + "," + rects[0].top + "+" + rects[0].width + "x" + rects[0].height; |
| return ''; |
| } |
| |
| function draggableRegions() { |
| return getBoundsFromClientRectList(window.internals.draggableRegions(document)); |
| } |
| |
| function nonDraggableRegions() { |
| return getBoundsFromClientRectList(window.internals.nonDraggableRegions(document)); |
| } |
| |
| function startTest() { |
| shouldBe("draggableRegions()", "''"); |
| shouldBe("nonDraggableRegions()", "''"); |
| |
| draggable.classList.add("drag"); |
| shouldBe("draggableRegions()", "'20,10+100x60'"); |
| shouldBe("nonDraggableRegions()", "''"); |
| |
| draggable.classList.add('transform'); |
| shouldBe("draggableRegions()", "'45,25+50x30'"); |
| shouldBe("nonDraggableRegions()", "''"); |
| |
| nondraggable.classList.add('nodrag'); |
| shouldBe("draggableRegions()", "'45,25+50x30'"); |
| shouldBe("nonDraggableRegions()", "'45,25+30x10'"); |
| |
| draggable.classList.remove('transform'); |
| shouldBe("draggableRegions()", "'20,10+100x60'"); |
| shouldBe("nonDraggableRegions()", "'20,10+60x20'"); |
| |
| finishJSTest(); |
| } |
| |
| window.jsTestIsAsync = true; |
| window.onload = startTest; |
| </script> |
| |
| <body> |
| <div id="draggable"> |
| <div id="nondraggable"></div> |
| </div> |
| <p id="description"></p> |
| <div id="console"></div> |
| </body> |
| </html> |
