ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed box sizing and positioning. r=sbrunner (closes #2910)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11749 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-03-29 13:44:04 +00:00
parent 54b58e3faf
commit c5dfe37bd4
4 changed files with 204 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/manual/box-quirks.html
+52
View 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>
tests/manual/box-strict.html
+46
View 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>