Merge branch 'master' of yuisource.corp.yahoo.com:yui3

build/node-core/node-core-debug.js

@@ -282,7 +282,9 @@ Y_Node.one = function(node) {
             cachedNode = instance ? instance._node : null;
             if (!instance || (cachedNode && node !== cachedNode)) { // new Node when nodes don't match
                 instance = new Y_Node(node);
-                Y_Node._instances[instance[UID]] = instance; // cache node
+                if (node.nodeType != 11) { // dont cache document fragment
+                    Y_Node._instances[instance[UID]] = instance; // cache node
+                }
             }
         }
     }

build/node-core/node-core.js

@@ -281,7 +281,9 @@ Y_Node.one = function(node) {
             cachedNode = instance ? instance._node : null;
             if (!instance || (cachedNode && node !== cachedNode)) { // new Node when nodes don't match
                 instance = new Y_Node(node);
-                Y_Node._instances[instance[UID]] = instance; // cache node
+                if (node.nodeType != 11) { // dont cache document fragment
+                    Y_Node._instances[instance[UID]] = instance; // cache node
+                }
             }
         }
     }

src/cssfonts/docs/component.json

@@ -0,0 +1,54 @@
+{
+    "name"       : "cssfonts",
+    "displayName": "CSS Fonts",
+    "description": "CSS Fonts provides typographical normalization and control",
+    "author"     : "msweeney",
+
+    "tags": ["css", "fonts"],
+    "use" : ["cssfonts"],
+
+    "examples": [
+        {
+            "name"       : "cssfonts-basic",
+            "displayName": "Global (Page-Level) Example",
+            "description": "When CSS Fonts is included in a page, it applies a baseline font treatment to all HTML elements. This baseline is Arial at the equivalent of 13px size and 16px line-height.",
+            "modules"    : ["cssfonts"],
+            "tags"       : ["cssfonts"],
+
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "cssfonts-context",
+            "displayName": "Contextual Example",
+            "description": "Use the alternate contextual version of YUI Fonts to have precise control over which regions of the page are targeted.",
+            "modules"    : ["cssfonts"],
+            "tags"       : ["cssfonts"],
+
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "cssfonts-size",
+            "displayName": "Setting Font Size",
+            "description": "Define all non-baseline sizes in percentages when using YUI Fonts.",
+            "modules"    : ["cssfonts"],
+            "tags"       : ["cssfonts"],
+
+            "hideTableOfContents": true
+        }
+
+    ],
+
+    "pages": {
+        "cssfonts-basic-example": {
+            "displayName": "CSS Fonts Page Example",
+            "layout"     : "cssfonts-basic-example"
+        },
+
+        "cssfonts-context-example": {
+            "displayName": "CSS Fonts Contextual Example",
+            "layout"     : "cssfonts-context-example"
+        }
+    }
+}

src/cssfonts/docs/cssfonts-basic-example.mustache

@@ -0,0 +1 @@
+{{>cssfonts-basic-source}}

src/cssfonts/docs/cssfonts-basic.mustache

@@ -0,0 +1,15 @@
+<div class="intro">
+    <p>This example shows a page of HTML elements with CSS Reset and CSS Fonts applied.</p>
+</div>
+
+<p>When CSS Fonts is included in a page it applies a baseline font treatment to all HTML elements. This baseline is Arial (with fallbacks) at the equivalent of 13px size and 16px line-height. This example shows what that looks like.</p>
+<div class="example newwindow">
+    <a href="cssfonts-basic-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h3>Note:</h3>
+<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p>
+
+

src/cssfonts/docs/cssfonts-context-example.mustache

@@ -0,0 +1 @@
+{{>cssfonts-context-source}}

src/cssfonts/docs/cssfonts-context.mustache

@@ -0,0 +1,24 @@
+<div class="intro">
+    <p>This example shows a page of HTML elements with CSS Reset and contextual CSS Fonts applied.</p>
+</div>
+
+    <h2>Contextual Usage</h2>
+    <p>When CSS Fonts is included in a page it applies rules to all HTML elements via type selectors like this: <code>body {font-size:13px;}</code>. An alternate version, <code>cssfonts-context.css</code>, uses only descendent selectors like this: <code>.yui3-cssfonts-context {font-size:13px;}</code>. This means you can put that class value on a node in your document to choose which region(s) of your page CSS Fonts will be applied to.</p>
+
+```
+<div class="yui3-cssfonts">
+    <p>Everything within this container will have CSS Fonts applied.</p>
+</div>
+```
+
+<p>In this example, only the middle block is within the context of CSS Fonts. The other two blocks are unaffected by CSS Fonts since their context is not one matched by the descendent selector of the contextual version of CSS Fonts.</p>
+<div class="example newwindow">
+    <a href="cssfonts-context-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h3>Note:</h3>
+<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p>
+
+

src/cssfonts/docs/cssfonts-size-example.mustache

@@ -0,0 +1 @@
+{{>cssfonts-size-source}}

src/cssfonts/docs/cssfonts-size.mustache

@@ -0,0 +1,44 @@
+<div class="intro">
+    <p>This example shows how to set font sizes using percent ("%") units.</p>
+</div>
+
+<div class="example newwindow">
+    <a href="cssfonts-basic-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h2 class="first">About This Example</h2>
+
+<h3>Use These Percentages</h3>
+
+<div class="short" id="font-size-chart">
+	<table>
+		<tr>
+			<th class="first-col">If you want this size in pixels (px)</th>
+			<th>Declare this percent (%)</th>
+		</tr>
+		<tr class="odd"><td class="first-col">10</td><td>77</td></tr>
+		<tr class="even"><td class="first-col">11</td><td>85</td></tr>
+		<tr class="odd"><td class="first-col">12</td><td>93</td></tr>
+		<tr class="even"><td class="first-col">13</td><td>100</td></tr>
+		<tr class="odd"><td class="first-col">14</td><td>108</td></tr>
+		<tr class="even"><td class="first-col">15</td><td>116</td></tr>
+		<tr class="odd"><td class="first-col">16</td><td>123.1</td></tr>
+		<tr class="even"><td class="first-col">17</td><td>131</td></tr>
+		<tr class="odd"><td class="first-col">18</td><td>138.5</td></tr>
+		<tr class="even"><td class="first-col">19</td><td>146.5</td></tr>
+		<tr class="odd"><td class="first-col">20</td><td>153.9</td></tr>
+		<tr class="even"><td class="first-col">21</td><td>161.6</td></tr>
+		<tr class="odd"><td class="first-col">22</td><td>167</td></tr>
+		<tr class="even"><td class="first-col">23</td><td>174</td></tr>
+		<tr class="odd"><td class="first-col">24</td><td>182</td></tr>
+		<tr class="even"><td class="first-col">25</td><td>189</td></tr>
+		<tr class="odd"><td class="first-col">26</td><td>197</td></tr>
+	</table>
+</div>
+
+<h2>Note:</h2>
+<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p>
+
+

src/cssfonts/docs/index.mustache

@@ -0,0 +1,96 @@
+				<div class="intro">
+
+					<p>The foundational CSS Fonts provides cross-browser typographical normalization and control while still allowing users to choose and adjust their font size. Both Standards and Quirks modes are supported in A-grade browsers.</p>
+
+					<p><strong>Note:</strong> <a href="../cssbase/">CSS Base</a> can complement <a href="../cssreset/">CSS Reset</a> by applying a style foundation for common HTML elements that is consistent for <a href="http://developer.yahoo.com/yui/3/articles/gbs">A-grade browsers</a>.</p>						
+                </div>
+
+				<h2 id="start">Getting Started</h2>
+
+				<h3 id="dependencies">Include Dependencies</h3>
+
+				<p>To use CSS Fonts, include the following source file in your web page with the link element:</p>
+
+```
+<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{$yui3CurrentVersion}/build/cssfonts/fonts-min.css">
+```
+
+				<h3 id="context">Global vs. Contextual</h3>
+
+				<p>YUI's CSS resources apply rules to HTML elements directly (using <a href="http://www.w3.org/TR/CSS21/selector.html#type-selectors">type selectors</a>). An alternate version of the resource is available that target elements by context only. This contextual <code>-context.css</code> version selects HTML elements only when they descend from the <code>.yui3-cssfonts</code> classname.</p>
+
+				<p>Here is how to include the contextual version of CSS Fonts:</p> 
+
+```
+<!-- Source File -->
+<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{$yui3CurrentVersion}/build/cssfonts/fonts-context-min.css">
+```
+				<h2 id="using">Using CSS Fonts</h2>
+
+				<h3 id="default">Default Text</h3>
+
+				<p>With the CSS linked into the page, all text renders in the Arial font, at 13 pixel size, with 16 pixel line-height. The <code>pre</code> and <code>code</code> elements use the "monospace" font-family. <a href="cssfonts-basic.html">Here's an example of HTML elements after Fonts has been applied</a>.</p>
+
+				<h3 id="fontsize">Font-size Adjustment</h3>
+
+				<p>To change the size of a font, use a percentage value from the <a href="#chart">chart</a> below. Always use percentages as the units because they render more consistently than ems, and because they allow user-initiated resizing (unlike pixels). <a href="cssfonts-size.html">See the example</a>.</p>
+
+```
+#demo1 {font-size:85%;}  /*renders 11px */
+#demo2 {font-size:100%;} /*renders 13px */ 
+#demo3 {font-size:108%;} /*renders 14px */
+#demo4 {font-size:123.1%;} /*renders 16px */
+#demo5 {font-size:138.5%;} /*renders 18px */
+```
+
+				<div id="fontsize-chart">
+					<table border="1" cellpadding="3" cellspacing="3" class="auto">
+						<tr>
+							<th class="first-col">For pixels (px)</th>
+							<th>Declare this percent (%)</th>
+						</tr>
+						<tr class="odd"><td class="first-col"> 10 </td><td> 77</td></tr>
+						<tr class="even"><td class="first-col"> 11 </td><td> 85 </td></tr>
+						<tr class="odd"><td class="first-col"> 12 </td><td> 93 </td></tr>
+						<tr class="even"><td class="first-col"> 13 </td><td> 100 </td></tr>
+						<tr class="odd"><td class="first-col"> 14 </td><td> 108 </td></tr>
+						<tr class="even"><td class="first-col"> 15 </td><td> 116 </td></tr>
+						<tr class="odd"><td class="first-col"> 16 </td><td> 123.1 </td></tr>
+						<tr class="even"><td class="first-col"> 17 </td><td> 131 </td></tr>
+						<tr class="odd"><td class="first-col"> 18 </td><td> 138.5 </td></tr>
+						<tr class="even"><td class="first-col"> 19 </td><td> 146.5 </td></tr>
+						<tr class="odd"><td class="first-col"> 20 </td><td> 153.9 </td></tr>
+						<tr class="even"><td class="first-col"> 21 </td><td> 161.6 </td></tr>
+						<tr class="odd"><td class="first-col"> 22 </td><td> 167 </td></tr>
+						<tr class="even"><td class="first-col"> 23 </td><td> 174 </td></tr>
+						<tr class="odd"><td class="first-col"> 24 </td><td> 182 </td></tr>
+						<tr class="even"><td class="first-col"> 25 </td><td> 189 </td></tr>
+						<tr class="odd"><td class="first-col"> 26 </td><td> 197 </td></tr>
+					</table>
+				</div>
+
+				<h2 id="family">Font-family Adjustment</h2>
+				<p>Arial is the default font-family for all text (except <code>pre</code> and <code>code</code>) when you use Fonts CSS. Specify a new font-family when you want something other than Arial. <a href="cssfonts-family.html">See the example</a>.</p>
+
+```
+#demo1 {}
+#demo2 {font-family:monospace;}
+#demo3 {font-family:georgia;}
+#demo4 {font-family:verdana;}
+#demo5 {font-family:times;}
+```
+
+				<h3 id="start-contextually">Using CSS Fonts In Specific Contexts</h3>				
+
+				<p>If you're using the contextual version, CSS Fonts's rules are only applied to elements that descend from a node with a class value of <code>.yui3-cssfonts</code>. The classname can go as high in the DOM tree as desired, including on the <code>&lt;HTML&ht;</code> element directly.</p>
+
+				<p>The following code snippet show how you might apply CSS Fonts to one of two columns:</p>
+
+```
+<div>
+	<div class="yui3-cssfonts"><h1>Lorem Ipsum</h1></div>
+	<div><h1>Lorem Ipsum</h1></div>
+</div>
+```
+
+	<p>Here is an example showing how to <a href="cssfonts-context.html">apply CSS Fonts to a subset of a page</a>.</p>

src/cssfonts/docs/partials/cssfonts-basic-source.mustache

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>YUI 3.x: CSS Fonts Basic Example</title>
+    <link rel="stylesheet" href="../../build/cssreset/reset.css" type="text/css">
+    <link rel="stylesheet" href="../../build/cssfonts/fonts.css" type="text/css">
+</head>
+<body>
+	<h1>This is a H1 element.</h1>
+	<h2>This is a H2 element.</h2>
+	<h3>This is a H3 element.</h3>
+	<h4>This is a H4 element.</h4>
+	<h5>This is a H5 element.</h5>
+	<h6>This is a H6 element.</h6>
+
+	<ul>
+		<li>This is a LI in a UL</li>
+	</ul>
+
+	<ol> 
+		<li>This is a LI in a UL</li>
+	</ol>
+
+	<dl>
+		<dt>This is a DT in a DL</dt>
+		<dd>This is a DD in a DL</dd>
+	</dl>
+
+	<form>
+		<input type="text" value="This is an INPUT type TEXT in a FORM"/>
+
+		<select>
+			<option>This is an OPTION in a SELECT</option>
+			<option>This is an OPTION in a SELECT</option>
+			<optgroup>
+				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
+				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
+			</optgroup>
+			<option>This is an OPTION in a SELECT</option>
+		</select>
+
+		<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>
+
+		<fieldset>	
+			<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
+		</fieldset>
+
+		<button>This is a BUTTON</button>
+
+	</form>
+
+	<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>  
+
+	<blockquote>This is a BLOCKQUOTE element.</blockquote>
+
+	<table>
+		<caption>This is a CAPTION in a TABLE</caption>
+		<thead>
+			<tr>
+				<th>This is a TH in a TR in a THEAD in a TABLE</th>
+				<td>This is a TD in a TR in a THEAD in a TABLE</td>
+			</tr>
+		</thead>
+		<tfoot>
+			<tr>
+				<th>This is a TH in a TR in a TFOOT in a TABLE</th>
+				<td>This is a TD in a TR in a TFOOT in a TABLE</td>
+			</tr>
+		</tfoot>
+		<tbody>
+			<tr>
+				<th>This is a TH in a TR in a TBODY in a TABLE</th>
+				<td>This is a TD in a TR in a TBODY in a TABLE</td>
+			</tr>
+		</tbody>
+	</table>
+
+</body>
+</html>