fixed box sizing and positioning. r=sbrunner (closes #2910)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11749 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
@@ -2,6 +2,49 @@
|
||||
<head>
|
||||
<script src="../OLLoader.js"></script>
|
||||
<script type="text/javascript">
|
||||
function test_Handler_Box_constructor(t) {
|
||||
t.plan(4);
|
||||
var control = new OpenLayers.Control();
|
||||
control.id = Math.random();
|
||||
var callbacks = {done: "bar"};
|
||||
var options = {bar: "foo"};
|
||||
|
||||
var handler = new OpenLayers.Handler.Box(control, callbacks, options);
|
||||
|
||||
t.eq(handler.control.id, control.id, "handler created with the correct control");
|
||||
t.eq(handler.callbacks.done, "bar", "handler created with the correct callback");
|
||||
t.eq(handler.bar, "foo", "handler created with the correct options");
|
||||
t.ok(handler.dragHandler instanceof OpenLayers.Handler.Drag, "drag handler created");
|
||||
}
|
||||
|
||||
function test_Handler_Box_draw(t) {
|
||||
t.plan(12);
|
||||
var map = new OpenLayers.Map('map');
|
||||
var control = new OpenLayers.Control();
|
||||
map.addControl(control);
|
||||
var handler = new OpenLayers.Handler.Box(control, {done: function(e) {
|
||||
t.ok(e.equals(new OpenLayers.Bounds(5, 11, 11, 5)), "box result correct");
|
||||
}});
|
||||
handler.activate();
|
||||
handler.dragHandler.start = {x: 5, y: 5};
|
||||
handler.startBox({x: 5, y: 5});
|
||||
var offset = handler.getBoxOffsets();
|
||||
t.eq(parseInt(handler.zoomBox.style.left), 5 - offset.left, "x position of box correct");
|
||||
t.eq(parseInt(handler.zoomBox.style.top), 5 - offset.top, "y position of box correct");
|
||||
handler.moveBox({x: 10, y: 10});
|
||||
t.eq(parseInt(handler.zoomBox.style.left), 5 - offset.left, "x position of box still correct");
|
||||
t.eq(parseInt(handler.zoomBox.style.top), 5 - offset.top, "y position of box still correct");
|
||||
t.eq(parseInt(handler.zoomBox.style.width), 5 + offset.width + 1, "x dimension of box correct");
|
||||
t.eq(parseInt(handler.zoomBox.style.height), 5 + offset.height + 1, "y dimension of box correct");
|
||||
handler.moveBox({x: 0, y: 0});
|
||||
t.eq(parseInt(handler.zoomBox.style.left), 0 - offset.left, "new x position of box correct");
|
||||
t.eq(parseInt(handler.zoomBox.style.top), 0 - offset.top, "new y position of box correct");
|
||||
t.eq(parseInt(handler.zoomBox.style.width), 5 + offset.width + 1, "x dimension of box still correct");
|
||||
t.eq(parseInt(handler.zoomBox.style.height), 5 + offset.height + 1, "y dimension of box still correct");
|
||||
handler.endBox({x: 11, y: 11});
|
||||
t.eq(handler.zoomBox, null, "box removed after endBox");
|
||||
}
|
||||
|
||||
function test_Handler_Box_destroy(t) {
|
||||
t.plan(1);
|
||||
var map = new OpenLayers.Map('map');
|
||||
@@ -21,6 +64,6 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="width: 300px; height: 150px;"/>
|
||||
<div id="map" style="width: 300px; height: 150px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
52
tests/manual/box-quirks.html
Normal file
52
tests/manual/box-quirks.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Box Handler Quirks Mode Test</title>
|
||||
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../examples/style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
/* simulate quirks mode (traditional box model) in browsers other than IE */
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.olHandlerBoxZoomBox {
|
||||
border: 20px solid red;
|
||||
border-left-width: 10px;
|
||||
border-bottom-width: 30px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map' );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
||||
{layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Box handler Quirks Mode Test</h1>
|
||||
|
||||
<div id="shortdesc">Test the correct appearance of the ZoomBox in quirks mode</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>For the box to be positioned correctly, we need to know the
|
||||
width of the borders.</p>
|
||||
<p>Shift-click on the map. A red box should be visible around the mouse
|
||||
cursor position, with 20 pixels to the top and right, 10 pixels to
|
||||
the left and 30 pixels to the bottom edge of the box.</p>
|
||||
<p>Drag the box both to the top-left and the bottom-right. The cursor
|
||||
should always be at the top-left or bottom-right inner corner of
|
||||
the box.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
tests/manual/box-strict.html
Normal file
46
tests/manual/box-strict.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Box Handler Strict Mode Test</title>
|
||||
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../examples/style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
.olHandlerBoxZoomBox {
|
||||
border: 20px solid red;
|
||||
border-left-width: 10px;
|
||||
border-bottom-width: 30px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map' );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
||||
{layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Box Handler Strict Mode Test</h1>
|
||||
|
||||
<div id="shortdesc">Test the correct appearance of the ZoomBox in strict mode</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>For the box to be positioned correctly, we need to know the
|
||||
width of the borders.</p>
|
||||
<p>Shift-click on the map. A red box should be visible around the mouse
|
||||
cursor position, with 20 pixels to the top and right, 10 pixels to
|
||||
the left and 30 pixels to the bottom edge of the box.</p>
|
||||
<p>Drag the box both to the top-left and the bottom-right. The cursor
|
||||
should always be at the top-left or bottom-right inner corner of
|
||||
the box.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user