RubyGems - closure - Versions diffs - 1.2.701 → 1.3.0 - Mend

closure 1.2.701 → 1.3.0

Files changed (1566) hide show

data/closure-library/closure/goog/demos/imagelessroundedcorner.html DELETED Viewed

@@ -1,231 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!--
-Copyright 2007 The Closure Library Authors. All Rights Reserved.
-Use of this source code is governed by the Apache License, Version 2.0.
-See the COPYING file for details.
--->
-<!--
-  Demo file for imagelessroundedcorner.js.
--->
-<head>
-  <title>Rounded Corner Demo</title>
-  <style type="text/css">
-    input {
-      width: 160px;
-    }
-    .rc {
-      margin: 0;
-      padding-bottom: 5px;
-      padding-right: 5px;
-      position: relative;
-    }
-    #roundedCornerRadiusSliderDiv {
-      height: 20px;
-      margin-top: 5px;
-      width: 160px;
-    }
-    .goog-slider-horizontal {
-      background-color: #cccccc;
-      overflow: hidden;
-      position: relative;
-    }
-    .goog-slider-thumb {
-      background-color: #666666;
-      height: 100%;
-      overflow: hidden;
-      position: absolute;
-      top: 0;
-      width: 20px;
-    }
-    .sliderLine {
-      border-top: 1px inset #ffffff;
-      height: 1px;
-      overflow: hidden;
-      position: absolute;
-      top: 9px;
-      width: 100%;
-    }
-  </style>
-  <script type="text/javascript" src="../base.js"></script>
-  <script type="text/javascript">
-    goog.require('goog.dom');
-    goog.require('goog.ui.ImagelessRoundedCorner');
-    goog.require('goog.ui.Slider');
-  </script>
-  <script type="text/javascript">
-    var roundedCornerRadiusSlider = new goog.ui.Slider();
-    var INT_BASE = 10;
-    /**
-     * Creates 4 rounded corners, by using user-specified values.
-     */
-    function createRoundedCorners() {
-      // Parse user-selected values.
-      var width = parseInt(
-          document.getElementById('roundedCornerWidth').value,
-          INT_BASE);
-      var height = parseInt(
-          document.getElementById('roundedCornerHeight').value,
-          INT_BASE);
-      var color = document.getElementById('roundedCornerColor').value;
-      var backgroundColor =
-          document.getElementById('roundedCornerBackgroundColor').value;
-      var lineWidth = parseInt(
-          document.getElementById('roundedCornerLineWidth').value,
-          INT_BASE);
-      var radius = parseInt(roundedCornerRadiusSlider.getValue(), INT_BASE);
-      // Set maximum value for the slider.
-      var radiusMaximum = (height > width) ? height : width;
-      roundedCornerRadiusSlider.setMaximum(radiusMaximum);
-      // Create the rounded corners and determine the rendering time. Then
-      // display the rendering latency time.
-      var start = new Date();
-      for (var i = 0; i < 4; i++) {
-        var containerDiv = document.getElementById('rc' + i);
-        containerDiv.innerHTML = '';
-        var roundedCorner = goog.ui.ImagelessRoundedCorner.create(
-            containerDiv,
-            width,
-            height,
-            lineWidth,
-            radius,
-            Math.pow(2, i),
-            color,
-            backgroundColor);
-        roundedCorner.draw();
-      }
-      var end = new Date();
-      var diff = end - start;
-      var results = document.getElementById('results');
-      results.innerHTML = 'Rendering Time: ' + diff + 'ms';
-    };
-    /**
-     * Used as the event handler for changes in the rounded corner slider
-     * value, this method will capture the desired value and render the
-     * rounded corners.
-     */
-    function setRoundedCornerRadiusValueAndRender() {
-      var currentRoundedCornerRadius =
-          document.getElementById('currentRoundedCornerRadius');
-      currentRoundedCornerRadius.innerHTML =
-          roundedCornerRadiusSlider.getValue();
-      createRoundedCorners();
-    };
-    /**
-     * Sets the rounded corners in either a stacked position, or in separate
-     * corners, forming a rounded rectangle.
-     */
-    function setCornerPositionsAndRender() {
-      var rc0 = document.getElementById('rc0');
-      var rc1 = document.getElementById('rc1');
-      var rc2 = document.getElementById('rc2');
-      var rc3 = document.getElementById('rc3');
-      var positionsList = document.getElementById('positions');
-      var isStacked = parseInt(positionsList.options[
-          positionsList.selectedIndex].value) == 1;
-      if (isStacked) {
-        if (goog.userAgent.IE) {
-          rc0.style.styleFloat = '';
-          rc2.style.styleFloat = '';
-        } else {
-          rc0.style.cssFloat = '';
-          rc2.style.cssFloat = '';
-        }
-      } else {
-        // Use styleFloat for IE, and cssFloat for everyone else.
-        if (goog.userAgent.IE) {
-          rc0.style.styleFloat = 'left';
-          rc2.style.styleFloat = 'left';
-         } else {
-          rc0.style.cssFloat = 'left';
-          rc2.style.cssFloat = 'left';
-        }
-      }
-      createRoundedCorners();
-    };
-    /**
-     * Takes the initial values of the 'input' elements, and generates 4 rounded
-     * corners.
-     */
-    function init() {
-      // Initialize the radius sliders.
-      var roundedCornerRadiusSliderDiv =
-          document.getElementById('roundedCornerRadiusSliderDiv');
-      roundedCornerRadiusSlider.decorate(roundedCornerRadiusSliderDiv);
-      roundedCornerRadiusSlider.setMinimum(1);
-      goog.events.listen(roundedCornerRadiusSlider,
-                         goog.ui.Component.EventType.CHANGE,
-                         setRoundedCornerRadiusValueAndRender);
-      // Set the event handlers of the input elements.
-      var rcInputs = goog.dom.getElementsByTagNameAndClass(null, 'rcInput');
-      for (var i = 0; i < rcInputs.length; i++) {
-        var rcInput = rcInputs[i];
-        rcInput.onchange = createRoundedCorners;
-      }
-      createRoundedCorners();
-    };
-  </script>
-</head>
-<body>
-  <div id="rcPage"><br>
-    <div>
-      Container Width:<br>
-      <input type="text" class="rcInput" id="roundedCornerWidth" value="100">
-    </div>
-    <div>
-      Container Height:<br>
-      <input type="text" class="rcInput" id="roundedCornerHeight" value="100">
-    </div>
-    <div>
-      Color:<br>
-      <input type="text" class="rcInput" id="roundedCornerColor"
-        value="#000000">
-    </div>
-    <div>
-      Background Color:<br>
-      <input type="text" class="rcInput" id="roundedCornerBackgroundColor"
-        value="#cccccc">
-    </div>
-    <div>
-      Line Width:<br>
-      <input type="text" class="rcInput" id="roundedCornerLineWidth" value="1">
-    </div>
-    <div>
-      Radius:&nbsp;<span id="currentRoundedCornerRadius"></span><br>
-      <div id="roundedCornerRadiusSliderDiv">
-        <div class="sliderLine"></div>
-      </div>
-    </div>
-    <div>
-	  Arrangement:<br>
-	  <select id="positions" onchange="setCornerPositionsAndRender();">
-	    <option value="1">Stacked</option>
-	    <option value="0">Rectangle</option>
-	  </select>
-    </div>
-    <p id="results"></p><br>
-    <div id="rc0" class="rc"></div>
-    <div id="rc1" class="rc"></div>
-    <div id="rc2" class="rc"></div>
-    <div id="rc3" class="rc"></div>
-  </div>
-  <script type="text/javascript">
-    init();
-  </script>
-</body>
-</html>

data/closure-library/closure/goog/demos/index.html DELETED Viewed

@@ -1,19 +0,0 @@
-<html>
-<!--
-Copyright 2010 The Closure Library Authors. All Rights Reserved.
-Use of this source code is governed by the Apache License, Version 2.0.
-See the COPYING file for details.
--->
-<head>
-  <title>Closure Demos</title>
-</head>
-<frameset cols="240,*">
-  <!-- Old school, but it works a lot better than the old page... -->
-  <frame name="nav" id="nav" src="index_nav.html">
-  <frame name="demo" id="demo" src="index_splash.html">
-  <noframes>
-    Are you kidding me?  No frames?!?
-  </noframes>
-</frameset>
-</html>

data/closure-library/closure/goog/demos/index_nav.html DELETED Viewed

@@ -1,253 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!--
-Copyright 2010 The Closure Library Authors. All Rights Reserved.
-Use of this source code is governed by the Apache License, Version 2.0.
-See the COPYING file for details.
--->
-<head>
-  <title>Closure Demos</title>
-  <script src="../base.js"></script>
-  <script>
-    goog.require('goog.ui.tree.TreeControl');
-    goog.require('goog.dom');
-  </script>
-  <script>
-    var treeData = [
-      {name: 'Advanced Tooltip', url: 'advancedtooltip.html'},
-      {name: 'Autocomplete', childNodes: [
-        {name: 'Basic', url: 'autocomplete-basic.html'},
-        {name: 'Remote', url: 'autocompleteremote.html'},
-        {name: 'Rich Remote', url: 'autocompleterichremote.html'}
-      ]},
-      {name: 'Bidi Input', url: 'bidiinput.html'},
-      {name: 'Bubble', url: 'bubble.html'},
-      {name: 'Char Counter', url: 'charcounter.html'},
-      {name: 'Clipboard Buttons', url: 'silverlightclipboardbutton.html'},
-      {name: 'Color Pickers and Palettes', childNodes: [
-        {name: 'Color Contrast', url: 'color-contrast.html'},
-        {name: 'HSV Palette', url: 'hsvpalette.html'},
-        {name: 'HSVA Palette', url: 'hsvapalette.html'},
-        {name: 'Simple Color Grid', url: 'colorpicker.html'},
-        {name: 'Popup Color Picker', url: 'popupcolorpicker.html'},
-        {name: 'Palette Examples', url: 'palette.html'}
-      ]},
-      {name: 'Common UI Controls', childNodes: [
-        {name: 'Buttons', childNodes: [
-          {name: 'CSS 3', url: 'css3button.html'},
-          {name: 'Imageless', url: 'imagelessbutton.html'},
-          {name: 'Simple', url: 'button.html'}
-        ]},
-        {name: 'Checkbox', url: 'checkbox.html'},
-        {name: 'Combobox', url: 'combobox.html'},
-        {name: 'Container', url: 'container.html'},
-        {name: 'Control', url: 'control.html'},
-        {name: 'Dimension Picker', childNodes: [
-          {name: 'LTR', url: 'dimensionpicker.html'},
-          {name: 'RTL', url: 'dimensionpicker_rtl.html'}
-        ]},
-        {name: 'Menu', childNodes: [
-          {name: 'Filtered Menu', url: 'filteredmenu.html'},
-          {name: 'Popup Menu', url: 'popupmenu.html'},
-          {name: 'Simple Menu', url: 'menu.html'},
-          {name: 'Submenus', url: 'submenus.html'},
-          {name: 'Submenus Flyweight', url: 'submenus2.html'}
-        ]},
-        {name: 'Menu Buttons', childNodes: [
-          {name: 'Color', url: 'colormenubutton.html'},
-          {name: 'CSS 3', url: 'css3menubutton.html'},
-          {name: 'Imageless', url: 'imagelessmenubutton.html'},
-          {name: 'Selection', url: 'selectionmenubutton.html'},
-          {name: 'Simple', url: 'menubutton.html'}
-        ]},
-        {name: 'Select', url: 'select.html'},
-        {name: 'Tab Bar and Tabs', url: 'tabbar.html'},
-        {name: 'Tab Pane', url: 'tabpane.html'},
-        {name: 'Toolbar', url: 'toolbar.html'}
-      ]},
-      {name: 'Date Pickers', childNodes: [
-        {name: 'Date Picker', url: 'datepicker.html'},
-        {name: 'Input Date Picker', url: 'inputdatepicker.html'},
-        {name: 'Popup Date Picker', url: 'popupdatepicker.html'}
-      ]},
-      {name: 'Debug', url: 'debug.html'},
-      {name: 'Dependency Graph', url: 'depsgraph.html'},
-      {name: 'Dialog', url: 'dialog.html'},
-      {name: 'Dom Selection', url: 'dom_selection.html'},
-      {name: 'Drag', url: 'drag.html'},
-      {name: 'Drag & Drop', childNodes: [
-        {name: 'Drag & Drop', url: 'dragdrop.html'},
-        {name: 'Drag & Drop Detector', url: 'dragdropdetector.html'},
-        {name: 'Drag List Group', url: 'draglistgroup.html'},
-        {name: 'Dragger', url: 'dragger.html'},
-        {name: 'File Drop Handler', url: 'filedrophandler.html'}
-      ]},
-      {name: 'Editor', childNodes: [
-        {name: 'Field - Basic', url: 'editor/field_basic.html'},
-        {name: 'Full Editor', url: 'editor/editor.html'},
-        {name: 'Hello World Plugin', url: 'editor/helloworld.html'},
-        {name: 'Seamless Field', url: 'editor/seamlessfield.html'}
-      ]},
-      {name: 'Effects', childNodes: [
-        {name: 'Animation', url: 'effects.html'},
-        {name: 'Animation Queue', url: 'animationqueue.html'},
-        {name: 'CSS Sprite Animation', url: 'cssspriteanimation.html'}
-      ]},
-      {name: 'Emoji Picker', url: 'popupemojipicker.html'},
-      {name: 'Events', childNodes: [
-        {name: 'Event Propagation', url: 'event-propagation.html'},
-        {name: 'Event Target', url: 'eventtarget.html'},
-        {name: 'Events', url: 'events.html'},
-        {name: 'Focus Handler', url: 'focushandler.html'},
-        {name: 'Input Handler', url: 'inputhandler.html'},
-        {name: 'Key Handler', url: 'keyhandler.html'},
-        {name: 'Keyboard Shortcuts', url: 'keyboardshortcuts.html'},
-        {name: 'Mouse Wheel Handler', url: 'mousewheelhandler.html'},
-        {name: 'Online Handler', url: 'onlinehandler.html'},
-        {name: 'Paste Handler', url: 'pastehandler.html'},
-        {name: 'Stop Event Propagation', url: 'stopevent.html'}
-      ]},
-      {name: 'Gauge', url: 'gauge.html'},
-      {name: 'Graphics', childNodes: [
-        {name: 'Basic Elements', url: 'graphics/basicelements.html'},
-        {name: 'Events', url: 'graphics/events.html'},
-        {name: 'Imageless Rounded Corner', url: 'imagelessroundedcorner.html'},
-        {name: 'Modify Elements', url: 'graphics/modifyelements.html'},
-        {name: 'Tiger', url: 'graphics/tiger.html'}
-      ]},
-      {name: 'History', childNodes: [
-        {name: 'Demo 1', url: 'history1.html'},
-        {name: 'Demo 2', url: 'history2.html'},
-        {name: 'HTML 5', url: 'html5history.html'},
-        {name: 'Iframe Based', url: 'history3.html'}
-      ]},
-      {name: 'Hover Card', url: 'hovercard.html'},
-      {name: 'Inline Block', childNodes: [
-        {name: 'Quirks mode', url: 'inline_block_quirks.html'},
-        {name: 'Standards mode', url: 'inline_block_standards.html'}
-      ]},
-      {name: 'JSON Pretty Printer', url: 'jsonprettyprinter.html'},
-      {name: 'Label Input', url: 'labelinput.html'},
-      {name: 'Offline UI', url: 'offline.html'},
-      {name: 'Plain Text Spell Checker', url: 'plaintextspellchecker.html'},
-      {name: 'Popup', url: 'popup.html'},
-      {name: 'Progress Bar', url: 'progressbar.html'},
-      {name: 'Prompt', url: 'prompt.html'},
-      {name: 'QuadTree', url: 'quadtree.html'},
-      {name: 'Ratings', url: 'ratings.html'},
-      {name: 'Rich Text Spell Checker', url: 'richtextspellchecker.html'},
-      {name: 'Rounded Panel', url: 'roundedpanel.html'},
-      {name: 'Sample Component', url: 'samplecomponent.html'},
-      {name: 'Scroll Floater', url: 'scrollfloater.html'},
-      {name: 'Server Chart', url: 'serverchart.html'},
-      {name: 'Sliders', childNodes: [
-        {name: 'Slider', url: 'slider.html'},
-        {name: 'Two Thumb Slider', url: 'twothumbslider.html'}
-      ]},
-      {name: 'Split Behavior', url: 'splitbehavior.html'},
-      {name: 'Split Pane', url: 'splitpane.html'},
-      {name: 'Table Sorting', url: 'tablesorter.html'},
-      {name: 'Textarea', url: 'textarea.html'},
-      {name: 'Timer', url: 'timers.html'},
-      {name: 'Tooltips', childNodes: [
-        {name: 'Simple Tooltip', url: 'tooltip.html'},
-        {name: 'Advanced Tooltip', url: 'advancedtooltip.html'}
-      ]},
-      {name: 'Tracer', url: 'tracer.html'},
-      {name: 'Trees', childNodes: [
-        {name: 'Drilldown Row', url: 'drilldownrow.html'},
-        {name: 'Tree', url: 'tree/demo.html'}
-      ]},
-      {name: 'TweakUi', url: 'tweakui.html'},
-      {name: 'User Agent', url: 'useragent.html'},
-      {name: 'Viewport Size Monitor', url: 'viewportsizemonitor.html'},
-      {name: 'XPC', url: 'xpc/'},
-      {name: 'Zippy', url: 'zippy.html'}
-    ];
-    function initTree() {
-      goog.ui.tree.TreeControl.defaultConfig.cleardotPath =
-          '../images/tree/cleardot.gif';
-      var tree = new goog.ui.tree.TreeControl('All Demos');
-      tree.setIsUserCollapsible(false);
-      buildNode(tree, treeData);
-      tree.render(goog.dom.getElement('demo-list'));
-    }
-    function buildNode(parent, nodeArray) {
-      for (var i = 0, node; node = nodeArray[i]; i++) {
-        if (node.name) {
-          var childNode = parent.getTree().createNode();
-          parent.add(childNode);
-          if (node.url) {
-            childNode.setHtml('<a href="' + node.url + '" title="' + node.name +
-                '" target="demo">' + node.name + '</a>');
-            // Need to prevent BaseNode.onClick_ from calling preventDefault.
-            childNode.onClick_ = goog.nullFunction;
-          } else if (node.childNodes) {
-            childNode.setHtml(node.name);
-            buildNode(childNode, node.childNodes);
-          }
-        }
-      }
-    }
-    //function showDemo(node) {
-    //  window.top.frames['demo'].location = node.getClientData();
-    //}
-  </script>
-  <link rel="stylesheet" href="../css/tree.css">
-  <style>
-    body {
-      font: normal 10pt Tahoma, Arial, sans-serif;
-      color: #333;
-      background-color: #eee;
-    }
-    h2 a {
-      font: bold 18pt Tahoma, Arial, sans-serif;
-      color: #333;
-      text-decoration: underline;
-    }
-    h2 a:hover {
-      color: #00f;
-      text-decoration: underline;
-    }
-    .goog-tree-children {
-      background-repeat: repeat-y;
-      background-image: url("../images/tree/I.png") !important;
-      background-position-y: 1px !important; /* IE only */
-      font: icon;
-    }
-    .goog-tree-icon {
-      background-image:url("../images/tree/tree.png");
-    }
-    .goog-tree-item-label {
-      font: bold 10pt Tahoma, Arial, sans-serif;
-      color: #333;
-      text-decoration: none;
-    }
-    .goog-tree-item-label a {
-      font: normal 10pt Tahoma, Arial, sans-serif;
-      color: #333;
-      text-decoration: none;
-    }
-    .goog-tree-item-label a:hover {
-      color: #00f;
-      text-decoration: underline;
-    }
-  </style>
-</head>
-<body>
-  <h2><a href="index_splash.html" title="Home" target="demo">Index</a></h2>
-  <div id="demo-list"></div>
-  <script>initTree();</script>
-</body>
-</html>

data/closure-library/closure/goog/demos/index_splash.html DELETED Viewed

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!--
-Copyright 2010 The Closure Library Authors. All Rights Reserved.
-Use of this source code is governed by the Apache License, Version 2.0.
-See the COPYING file for details.
--->
-<head>
-  <title>Closure Demos</title>
-  <link rel="stylesheet" type="text/css" href="css/demo.css">
-</head>
-<body>
-  <h1>Welcome to Closure!</h1>
-  <p>Use the tree in the navigation pane to view Closure demos.</p>
-  <br>
-  <h2><span style="color:#800;">New!</span> Common UI Controls</h2>
-  <p>Check out these widgets by clicking on the demo links on the left:</p>
-  <img style="margin:10px;border:1px solid #888;padding:0;"
-      alt="Common UI controls" src="../images/ui_controls.jpg">
-</body>
-</html>

data/closure-library/closure/goog/demos/inline_block_quirks.html DELETED Viewed

@@ -1,125 +0,0 @@
-<html>
-<!--
-Copyright 2010 The Closure Library Authors. All Rights Reserved.
-Use of this source code is governed by the Apache License, Version 2.0.
-See the COPYING file for details.
--->
-<head>
-  <title>goog.style.setInlineBlock in quirks mode</title>
-  <link rel="stylesheet" type="text/css" href="css/demo.css">
-  <style type="text/css">
-    .container {
-      margin: 20px;
-      border: 1px solid black;
-      padding: 20px;
-      background-color: #ffc;
-    }
-    .demo {
-      margin: 4px;
-      border: 1px solid blue;
-      padding: 4px;
-      color: red;
-      background-color: white;
-      vertical-align: middle;
-    }
-  </style>
-  <script language="JavaScript" type="text/javascript" src="../base.js"></script>
-  <script language="JavaScript" type="text/javascript">
-    goog.require('goog.style');
-  </script>
-  <script language="JavaScript" type="text/javascript">
-    function inlineBlockify(tag, className, parentElement) {
-      goog.array.forEach(
-          goog.dom.getElementsByTagNameAndClass(tag, className, parentElement),
-          function(el) {
-            goog.style.setInlineBlock(el);
-          });
-    }
-    function inlineBlockifyAll() {
-      inlineBlockify('span', 'demo', goog.dom.getElement('foo'));
-    }
-  </script>
-</head>
-<body>
-  <h1>goog.style.setInlineBlock in quirks mode</h1>
-  <p>
-    This is a demonstration of the <code>goog-inline-block</code> CSS style.
-    This page is in <strong>quirks</strong> mode.
-    <a href="inline_block_standards.html">Click here for standards mode.</a>
-  </p>
-  <div class="container">
-    Hey, are these really
-    <div class="demo goog-inline-block">DIV</div>s
-    inlined in my text here?  I mean, I thought
-    <div class="demo goog-inline-block">DIV</div>s
-    were block-level elements, and you couldn't inline them...
-    Must be that new
-    <div class="demo goog-inline-block">goog-inline-block</div>
-    style...  (Hint:  Try resizing the window to see the
-    <div class="demo goog-inline-block">DIV</div>s
-    flow naturally.)
-    Arv asked for an inline-block DIV with more interesting contents, so here
-    goes:
-    <div class="demo goog-inline-block">
-      <div style="width:320px;font-size:80%;">
-        <img src="../images/gears_bluedot.gif" alt="blue dot"
-             style="float:left; margin: 0 1em 1em 0;"/>
-        Lorem ipsum dolor sit amet,
-        consectetuer adipiscing elit.
-        Donec rhoncus neque ut
-        neque porta consequat.
-        In tincidunt tellus vehicula tellus. Etiam ornare nunc
-        vel lectus. Vivamus quis nibh. Sed nunc.
-        <strong>On FF1.5 and FF2.0, you need to wrap the contents of your
-          inline-block element in a DIV or P with fixed width to get line
-          wrapping.</strong>
-      </div>
-    </div>
-  </div>
-  <div class="container">
-    <p>
-      These are
-      <span class="demo goog-inline-block">SPAN</span>s
-      with the
-      <span class="demo goog-inline-block">goog-inline-block</span>
-      style applied, so you can style them like block-level elements.
-      For example, give them
-      <span class="demo goog-inline-block" style="margin:10px;">10px margin</span>, a
-      <span class="demo goog-inline-block" style="border-width:10px;">10px border</span>, or
-      <span class="demo goog-inline-block" style="padding:10px;">10px padding</span>.
-      I used
-      <span class="demo goog-inline-block" style="">vertical-align: middle</span>
-      to make them all line up reasonably well.
-      (Except on Safari 2.  Go figure.)
-    </p>
-    <p>
-      This is what the same content looks like <strong>without goog-inline-block</strong>:
-    </p>
-    <p id="foo">
-      These are
-      <span class="demo">SPAN</span>s
-      with the
-      <span class="demo">goog-inline-block</span>
-      style applied, so you can style them like block-level elements.
-      For example, give them
-      <span class="demo" style="margin:10px;">10px margin</span>, a
-      <span class="demo" style="border-width:10px;">10px border</span>, or
-      <span class="demo" style="padding:10px;">10px padding</span>.
-      I used
-      <span class="demo" style="">vertical-align: middle</span>
-      to make them all line up reasonably well.
-      (Except on Safari 2.  Go figure.)
-    </p>
-    <p>
-      <a href="#" onclick="inlineBlockifyAll();">Click here</a> to use <code>goog.style.setInlineBlock()</code> to apply the inline-block style to these SPANs.
-    </p>
-  </div>
-  <p>
-    Works on Internet Explorer 6 &amp; 7, Firefox 1.5, 2.0 &amp; 3.0 Beta, Safari 2 &amp; 3,
-    Webkit nightlies, and Opera 9.
-    <em><strong>Note:</strong> DIVs nested in SPANs don't work on Opera.</em>
-  </p>
-</body>
-</html>