RubyGems - survivalkit - Versions diffs - 0.3.2 → 0.3.3 - Mend

survivalkit 0.3.2 → 0.3.3

Files changed (1261) hide show

data/templates/drupal/sources/pie/tests/iPhoneBackButton.png ADDED Viewed

Binary file

data/templates/drupal/sources/pie/tests/icon-chrome.png ADDED Viewed

Binary file

data/templates/drupal/sources/pie/tests/icon-firefox.png ADDED Viewed

Binary file

data/templates/drupal/sources/pie/tests/icon-ie.png ADDED Viewed

Binary file

data/templates/drupal/sources/pie/tests/icon-opera.png ADDED Viewed

Binary file

data/templates/drupal/sources/pie/tests/icon-safari.png ADDED Viewed

Binary file

data/templates/drupal/sources/pie/tests/img.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>&lt;img&gt; elements</title>
+    <style type="text/css">
+        img {
+            border-radius: 40px;
+            behavior: url(../build/PIE_uncompressed.htc);
+            border: 0;
+            position: relative;
+        }
+        #shadow {
+            -webkit-box-shadow: 0 0 10px red;
+            -moz-box-shadow: 0 0 10px red;
+            box-shadow: 0 0 10px red;
+        }
+        #pngfixCont {
+            padding: 10px;
+            background: url(background1.gif);
+        }
+        #pngfix {
+            border-radius: 0;
+            -pie-png-fix: true;
+        }
+    </style>
+</head>
+<body>
+    <h1>Images</h1>
+    <h2>Rounded corners</h2>
+    <img src="photo.jpg" />
+    <h2>Rounded, scaled down</h2>
+    <img src="photo.jpg" width="320" height="240" />
+    <h2>Aspect</h2>
+    <img src="photo.jpg" width="128" height="480" />
+    <img src="photo.jpg" width="640" height="128" />
+    <h2>With shadow</h2>
+    <img src="photo.jpg" id="shadow" width="320" height="240" />
+    <h2>In link (should remain clickable)</h2>
+    <a href="#" onclick="alert('clicked'); return false;"><img src="photo.jpg" width="320" height="240" /></a>
+    <h2>With border</h2>
+    <img src="border.png" style="border:10px solid red;" />
+    <h2>Rollover</h2>
+    <img src="icon-safari.png" onmouseover="this.src='icon-chrome.png'" onmouseout="this.src='icon-safari.png'" />
+</body>
+</html>

data/templates/drupal/sources/pie/tests/margin-auto-tests.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>PIE Position After Window Resize</title>
+    <meta name="robots" content="noindex, nofollow" />
+    <style type="text/css" media="screen">
+        #wrapper {
+            width: 700px;
+            margin: 20px auto;
+        }
+        #test,
+        #control {
+            border: 10px solid #000;
+            -moz-border-radius: 5px; /* FF1+ */
+            -webkit-border-radius: 5px; /* Saf3+, Chrome */
+            -khtml-border-radius: 5px; /* Konqueror */
+            border-radius: 5px; /* Standard. IE9 */
+            margin: 10px;
+            padding:10px;
+        }
+        #test {
+            behavior: url(../build/PIE.htc);
+            border-color: red;
+        }
+        #control {
+            border-color: green;
+        }
+    </style>
+</head>
+<body>
+    <h1>PIE Position After Window Resize</h1>
+    <p>Resize Window.</p>
+    <h2 id="expected-behavior">Expected Behavior</h2>
+    <p>Borders should update position with box.</p>
+    <div id="wrapper">
+        <div id="test">
+            PIE.
+        </div><!--/test-->
+        <div id="control">
+            No PIE.
+        </div><!--/test-->
+    </div><!--/wrapper-->
+</body>
+</html>

data/templates/drupal/sources/pie/tests/margin-collapsing-tests.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>CSS3 PIE Margin Test</title>
+    <meta name="robots" content="noindex, nofollow" />
+    <style type="text/css" media="screen">
+        .box {
+            -moz-border-radius: 5px; /* FF1+ */
+            -webkit-border-radius: 5px; /* Saf3+, Chrome */
+            -khtml-border-radius: 5px; /* Konqueror */
+            border-radius: 5px; /* Standard. IE9 */
+            margin: 20px 0;
+            overflow: hidden;
+        }
+        .inside {
+            background: #fff;
+            -moz-border-radius: 5px; /* FF1+ */
+            -webkit-border-radius: 5px; /* Saf3+, Chrome */
+            -khtml-border-radius: 5px; /* Konqueror */
+            border-radius: 5px; /* Standard. IE9 */
+            margin: 20px;
+        }
+        #test {
+            behavior: url(../build/PIE.htc);
+            background: red;
+        }
+        #test .inside {
+            behavior: url(../build/PIE.htc);
+        }
+        #test2 {
+            background: red;
+            position: relative;
+        }
+        #test2 .inside {
+            behavior: url(../build/PIE.htc);
+        }
+        #control {
+            behavior: url(../build/PIE.htc);
+            background: green;
+        }
+    </style>
+</head>
+<body>
+    <h1>Margin/Overflow Treatment with PIE</h1>
+    <p>These boxes have <code>overflow:hidden</code>. Inside is a <code>div</code> with margin. The expected behavior is for that margin not to collapse (because of the overflow setting).</p>
+    <div id="test" class="box">
+        <div class="inside">
+            This box has PIE on the outside and the inside. This box should be spaced 20px on all sides.
+        </div><!--/inside-->
+    </div><!--/test-->
+    <div id="test2" class="box">
+        <div class="inside">
+            This box has PIE on the inside only. This box should be spaced 20px on all sides.
+        </div><!--/inside-->
+    </div><!--/test2-->
+    <div id="control" class="box">
+        <div class="inside">
+            This box has PIE on the outside, but not on the inside.
+        </div><!--/test2-->
+    </div><!--/test-->
+</body>
+</html>

data/templates/drupal/sources/pie/tests/misc-tests.html ADDED Viewed

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <script type="text/javascript">
+        function toggleClass( el, cls ) {
+            var re = new RegExp( '\\b' + cls + '\\b' );
+            if( re.test( el.className ) ) {
+                el.className = el.className.replace( re, '' );
+            } else {
+                el.className += ' ' + cls;
+            }
+        }
+        function log( txt ) {
+            var el = log._el;
+            if(!el) {
+                el =log._el = document.createElement( 'div' );
+                el.style.position = 'absolute';
+                el.style.bottom = '1em';
+                el.style.right = '1em';
+                el.style.width = '200px';
+                el.style.height = '100px';
+                el.style.overflow = 'auto';
+                el.style.background = '#FFF';
+                el.style.border = '1px solid #EEE';
+                el.style.fontSize = '9px';
+                document.body.appendChild( el );
+            }
+            var item = document.createElement( 'div' );
+            item.appendChild( document.createTextNode( txt ) );
+            el.appendChild( item )
+        }
+        function animate( el, fromX, fromY, toX, toY ) {
+            el.style.position = 'absolute';
+            var i = 0;
+            function step() {
+                el.style.left = fromX + ( toX - fromX ) * i / 100 + 'px';
+                el.style.top = fromY + ( toY - fromY ) * i / 100 + 'px';
+                i++;
+                if( i < 100 ) {
+                    setTimeout( step, 10 );
+                }
+            }
+            step();
+        }
+    </script>
+    <style>
+        body {
+            /*background:url(border.png);*/
+        }
+        .shadow {
+            behavior: url(../build/PIE.htc);
+            background: #EEE;
+            float: left;
+            padding: 50px;
+            margin: 10px;
+        }
+        #test1 {
+            box-shadow: #000 0 0 3px;
+            -moz-box-shadow: #000 0 0 3px;
+            -webkit-box-shadow: #000 0 0 3px;
+        }
+        #test2 {
+            box-shadow: #000 0 0 5px;
+            -moz-box-shadow: #000 0 0 5px;
+            -webkit-box-shadow: #000 0 0 5px;
+        }
+        #test3 {
+            box-shadow: #000 0 0 8px;
+            -moz-box-shadow: #000 0 0 8px;
+            -webkit-box-shadow: #000 0 0 8px;
+        }
+        #test4 {
+            box-shadow: #000 0 0 10px;
+            -moz-box-shadow: #000 0 0 10px;
+            -webkit-box-shadow: #000 0 0 10px;
+        }
+        #test5 {
+            clear: both;
+            float: none;
+            -moz-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
+            -webkit-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
+            border-radius: 20px 20px 30px / 10px 20px 30px 40px;
+            box-shadow: #000 0 0 8px;
+            -moz-box-shadow: #000 0 0 8px;
+            -webkit-box-shadow: #000 0 0 8px;
+        }
+        #test6 {
+            clear: both;
+            -moz-border-radius: 100%;
+            -webkit-border-radius: 100%;
+            border-radius: 100%;
+            box-shadow: #000 0 0 20px;
+            -moz-box-shadow: #000 0 0 20px;
+            -webkit-box-shadow: #000 0 0 20px;
+        }
+        #test6.classed {
+            border-radius: 25%;
+            -moz-border-radius: 25%;
+            -webkit-border-radius: 25%;
+            background-color: #CEF;
+        }
+        #test7 {
+            clear: both;
+            -moz-border-radius: 100%;
+            -webkit-border-radius: 100%;
+            border-radius: 100%;
+            box-shadow: #000 0 0 20px;
+            -moz-box-shadow: #000 0 0 20px;
+            -webkit-box-shadow: #000 0 0 20px;
+            -pie-watch-ancestors: 2;
+        }
+        .classed #test7 {
+            -moz-border-radius: 25%;
+            -webkit-border-radius: 25%;
+            border-radius: 25%;
+            background-color: #CEF;
+        }
+        #test8 {
+            clear: both;
+            width: 100px;
+            height: 50px;
+            padding: 10px;
+            text-align: center;
+            -moz-border-radius: 20px 40px;
+            -webkit-border-radius: 20px 40px;
+            border-radius: 20px 40px;
+            box-shadow: #000 0 0 5px;
+            -moz-box-shadow: #000 0 0 5px;
+            -webkit-box-shadow: #000 0 0 5px;
+        }
+        #test8.changed {
+            -moz-border-radius: 20px 80px;
+            -webkit-border-radius: 20px 80px;
+            border-radius: 20px 80px;
+        }
+        #test9 {
+            clear: both;
+            width: 40%;
+            -moz-border-radius: 20px 40px;
+            -webkit-border-radius: 20px 40px;
+            border-radius: 20px 40px;
+            background: #EEE url(border.png) repeat 50% 50%;
+            box-shadow: #000 0 0 10px;
+            -moz-box-shadow: #000 0 0 10px;
+            -webkit-box-shadow: #000 0 0 10px;
+            border: 1px dotted;
+        }
+        #test10 {
+            clear: both;
+            width: 40%;
+            -moz-border-radius: 20px;
+            -webkit-border-radius: 20px;
+            border-radius: 20px;
+            border-width: 6px;
+            border-color: red green blue black;
+            border-style: dashed dotted solid double;
+            background: #EEE url(border.png);
+            box-shadow: #000 0 0 10px;
+            -moz-box-shadow: #000 0 0 10px;
+            -webkit-box-shadow: #000 0 0 10px;
+        }
+        #test11 {
+            clear: both;
+            width: 80%;
+            background: transparent;
+            border-width: 20px;
+            border-bottom-width: 30px;
+            border-image: url(border.png) 27 stretch;
+            -moz-border-image: url(border.png) 27 stretch;
+            -webkit-border-image: url(border.png) 27 stretch;
+        }
+        #test12 {
+            clear: both;
+            margin: 50px;
+            background: url(border.png);
+            padding: 40px;
+        }
+        #test12 div {
+            behavior: url(../build/PIE.htc);
+            background: #EEE;
+            -moz-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
+            -webkit-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
+            box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
+            position: relative;
+        }
+        #test13 {
+            clear: both;
+            background: #EEE;
+            border-radius: 10px;
+            -moz-border-radius: 10px;
+            -webkit-border-radius: 10px;
+            border: 1px solid;
+            position: relative;
+        }
+        #test13:hover {
+            border-radius: 30px / 20px;
+            -webkit-border-radius: 30px 20px;
+            -moz-border-radius: 30px / 20px;
+            background: url(border.png);
+            border: 4px dotted blue;
+            left: 20px;
+            width: 50%;
+            -webkit-box-shadow: blue 0 0 10px;
+            -moz-box-shadow: blue 0 0 10px;
+            box-shadow: blue 0 0 10px;
+        }
+    </style>
+</head>
+<body>
+    <div id="test1" class="shadow">test 1 <a href="misc-tests.html#" onclick="animate(this.parentNode, 20, 20, 400, 400)">anim</a></div>
+    <div id="test2" class="shadow">test 2</div>
+    <div id="test3" class="shadow">test 3</div>
+    <div id="test4" class="shadow">test 4</div>
+    <div id="test5" class="shadow">box shadow w/rounded corners <button onclick="this.parentNode.appendChild( document.createTextNode(' ... some extra text ... some extra text  ... some extra text ... some extra text ') )">enlarge</button> </div>
+    <div id="test6" class="shadow">test 6
+        <button onclick="toggleClass(this.parentNode, 'classed')">Toggle className</button>
+    </div>
+    <div id="test7cont">
+        <div>
+            <div id="test7" class="shadow">test 7
+                <button onclick="toggleClass(document.getElementById('test7cont'), 'classed')">Toggle parent className</button>
+            </div>
+        </div>
+    </div>
+    <div class="shadow" id="test8">test 8 <button onclick="toggleClass(this.parentNode, 'changed')">change</button></div>
+    <div class="shadow" id="test9">test 9</div>
+    <div class="shadow" id="test10">test 10</div>
+    <div class="shadow" id="test11">test 11</div>
+    <div id="test12"><div>test 12 - rgba color for box-shadow</div></div>
+    <div class="shadow" id="test13">test 13 - :hover</div>
+</body>
+</html>