CSS Rounded Corners Magnifying Glass Test

by Joshua Dwire

HTML

<div id="all">
    <div id="magnifyContainer">
        <div id="div1">
            <div id="div3"></div>
            <div id="div2">Hac sed amet proin augue sit augue lacus tristique arcu, rhoncus, urna, sociis aenean hac tempor vut rhoncus est in ut pulvinar adipiscing dignissim? Vel. Placerat enim phasellus dignissim et est pellentesque. Scelerisque cum. Mattis egestas? In egestas nisi scelerisque? Dignissim eros, quis mid diam, sociis aliquet et! Sed ridiculus, dictumst? Cum? Augue integer, diam sed. Elementum ut, montes ac lundium urna dictumst ridiculus porttitor, arcu. Etiam phasellus, dapibus vel, in sed! Nisi pellentesque parturient! Ut auctor ut? Proin turpis augue velit, tincidunt aliquam? Tincidunt magna enim nisi arcu sit amet sit sociis vel cum ut sagittis nec et enim.
        
        Urna ut nec pulvinar? Ut. Augue a lorem augue nascetur et porttitor odio elementum ac mauris ac massa nisi, natoque? Arcu? Porta ac purus mid lacus adipiscing, ut scelerisque porttitor integer hac nisi, a, mid parturient vel, ridiculus nascetur? Integer vel. Sit vel, magna nec arcu a porta ridiculus amet placerat mid integer vel velit purus vut egestas lectus tincidunt? Arcu dictumst odio sociis adipiscing pellentesque nunc! Platea magnis! Tempor adipiscing arcu mus in amet. Rhoncus turpis massa cursus, dolor ut nisi egestas, natoque, massa montes sed turpis pulvinar vel etiam placerat scelerisque urna? Aliquet, nunc porttitor, sed nascetur.
        
        Et lundium etiam turpis, nec cras. Quis, odio? A, odio parturient? A nec amet elit, et pulvinar elit scelerisque? Enim dapibus. Est? Turpis penatibus! Magna pulvinar nascetur? Elementum mauris. Cras lectus vel aenean, porttitor natoque vut penatibus vel, et elementum nec elementum et, mattis augue quis! Amet tristique augue! Dapibus mauris, velit elementum magnis eros rhoncus odio vut natoque aenean, purus sit ac? Nascetur integer, magna elementum arcu eu adipiscing et mus integer vut! Odio elementum dapibus...

CSS

#all
{
margin:50px;
}

#div1
{
border:2px solid #a1a1a1;
width:100px;
height:100px;
border-radius:100%;
overflow:hidden;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
background-color:white;
}
#div2
{
font-size:200%;
}
#div3
{
background-image:url(http://openclipart.org/image/100px/svg_to_png/169058/red_point.png);
width:100px;
height:100px;
position:absolute;
}
#magnifyContainer
{
width:1000px;
height:1000px;
position:absolute;
}
#content
{
width:40em;
height:40em;
}
#div2
{
width:40em;
height:40em;
}

JavaScript

Drag.MagnifyingGlass = new Class({

    Extends: Drag,

    options: {
/*
        onEnter: function(thisElement, overed){},
        onLeave: function(thisElement, overed){},
        onDrop: function(thisElement, overed, event){},*/
        droppables: [],
        container: false,
        precalculate: false,
        includeMargins: false,
        checkDroppables: true
    },

    initialize: function(elementOuter, elementInner, options) {
        this.parent(elementOuter, options);
        element = this.element;
        this.elementInner = document.id(elementInner);

        this.droppables = $$(this.options.droppables);
        this.container = document.id(this.options.container);

        if (this.container && typeOf(this.container) != 'element') this.container = document.id(this.container.getDocument().body);

        this.addEvent('start', this.checkDroppables, true);
        this.overed = null;
    },

    start: function(event) {
        if (this.container) this.options.limit = this.calculateLimit();

        if (this.options.precalculate) {
            this.positions = this.droppables.map(function(el) {
                return el.getCoordinates();
            });
        }

        this.parent(event);
    },

    calculateLimit: function() {
        var element = this.element,
            container = this.container,

            offsetParent = document.id(element.getOffsetParent()) || document.body,
            containerCoordinates = container.getCoordinates(offsetParent),
            elementBorder = {},
            containerMargin = {},
            containerBorder = {},
            offsetParentPadding = {};

        ['top', 'right', 'bottom', 'left'].each(function(pad) {
            elementBorder[pad] = element.getStyle('border-' + pad).toInt();
            containerMargin[pad] = container.getStyle('margin-' + pad).toInt();
            containerBorder[pad] = container.getStyle('border-' + pad).toInt();
            offsetParentPadding[pad] =...