RubyGems - closure - Versions diffs - 1.1.692 - Mend

closure 1.1.692

Files changed (1494) hide show

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

@@ -0,0 +1,231 @@
+<!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 ADDED Viewed

@@ -0,0 +1,19 @@
+<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 ADDED Viewed

@@ -0,0 +1,253 @@
+<!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 ADDED Viewed

@@ -0,0 +1,22 @@
+<!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 ADDED Viewed

@@ -0,0 +1,125 @@
+<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>