selenium-webdriver
Version:
The official WebDriver JavaScript bindings from the Selenium project
1 lines • 182 kB
HTML
<!DOCTYPE html><meta charset="UTF-8"><meta http-equiv="Content-Language" content="en" /><title>style.js</title><link href="../../../../dossier.css" rel="stylesheet" type="text/css"><div id="main-wrapper"><input type="checkbox" id="sidenav-toggle" /><main><header><h1>lib/goog/style/style.js</h1></header><pre><table class="srcfile"><tbody><tr><td><a name="l1" href="#l1">1</a><td>// Copyright 2006 The Closure Library Authors. All Rights Reserved.<tr><td><a name="l2" href="#l2">2</a><td>//<tr><td><a name="l3" href="#l3">3</a><td>// Licensed under the Apache License, Version 2.0 (the "License");<tr><td><a name="l4" href="#l4">4</a><td>// you may not use this file except in compliance with the License.<tr><td><a name="l5" href="#l5">5</a><td>// You may obtain a copy of the License at<tr><td><a name="l6" href="#l6">6</a><td>//<tr><td><a name="l7" href="#l7">7</a><td>// http://www.apache.org/licenses/LICENSE-2.0<tr><td><a name="l8" href="#l8">8</a><td>//<tr><td><a name="l9" href="#l9">9</a><td>// Unless required by applicable law or agreed to in writing, software<tr><td><a name="l10" href="#l10">10</a><td>// distributed under the License is distributed on an "AS-IS" BASIS,<tr><td><a name="l11" href="#l11">11</a><td>// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.<tr><td><a name="l12" href="#l12">12</a><td>// See the License for the specific language governing permissions and<tr><td><a name="l13" href="#l13">13</a><td>// limitations under the License.<tr><td><a name="l14" href="#l14">14</a><td><tr><td><a name="l15" href="#l15">15</a><td>/**<tr><td><a name="l16" href="#l16">16</a><td> * @fileoverview Utilities for element styles.<tr><td><a name="l17" href="#l17">17</a><td> *<tr><td><a name="l18" href="#l18">18</a><td> * @see ../demos/inline_block_quirks.html<tr><td><a name="l19" href="#l19">19</a><td> * @see ../demos/inline_block_standards.html<tr><td><a name="l20" href="#l20">20</a><td> * @see ../demos/style_viewport.html<tr><td><a name="l21" href="#l21">21</a><td> */<tr><td><a name="l22" href="#l22">22</a><td><tr><td><a name="l23" href="#l23">23</a><td>goog.provide('goog.style');<tr><td><a name="l24" href="#l24">24</a><td><tr><td><a name="l25" href="#l25">25</a><td><tr><td><a name="l26" href="#l26">26</a><td>goog.require('goog.array');<tr><td><a name="l27" href="#l27">27</a><td>goog.require('goog.asserts');<tr><td><a name="l28" href="#l28">28</a><td>goog.require('goog.dom');<tr><td><a name="l29" href="#l29">29</a><td>goog.require('goog.dom.NodeType');<tr><td><a name="l30" href="#l30">30</a><td>goog.require('goog.dom.vendor');<tr><td><a name="l31" href="#l31">31</a><td>goog.require('goog.math.Box');<tr><td><a name="l32" href="#l32">32</a><td>goog.require('goog.math.Coordinate');<tr><td><a name="l33" href="#l33">33</a><td>goog.require('goog.math.Rect');<tr><td><a name="l34" href="#l34">34</a><td>goog.require('goog.math.Size');<tr><td><a name="l35" href="#l35">35</a><td>goog.require('goog.object');<tr><td><a name="l36" href="#l36">36</a><td>goog.require('goog.string');<tr><td><a name="l37" href="#l37">37</a><td>goog.require('goog.userAgent');<tr><td><a name="l38" href="#l38">38</a><td><tr><td><a name="l39" href="#l39">39</a><td><tr><td><a name="l40" href="#l40">40</a><td>/**<tr><td><a name="l41" href="#l41">41</a><td> * @define {boolean} Whether we know at compile time that<tr><td><a name="l42" href="#l42">42</a><td> * getBoundingClientRect() is present and bug-free on the browser.<tr><td><a name="l43" href="#l43">43</a><td> */<tr><td><a name="l44" href="#l44">44</a><td>goog.define('goog.style.GET_BOUNDING_CLIENT_RECT_ALWAYS_EXISTS', false);<tr><td><a name="l45" href="#l45">45</a><td><tr><td><a name="l46" href="#l46">46</a><td><tr><td><a name="l47" href="#l47">47</a><td>/**<tr><td><a name="l48" href="#l48">48</a><td> * Sets a style value on an element.<tr><td><a name="l49" href="#l49">49</a><td> *<tr><td><a name="l50" href="#l50">50</a><td> * This function is not indended to patch issues in the browser's style<tr><td><a name="l51" href="#l51">51</a><td> * handling, but to allow easy programmatic access to setting dash-separated<tr><td><a name="l52" href="#l52">52</a><td> * style properties. An example is setting a batch of properties from a data<tr><td><a name="l53" href="#l53">53</a><td> * object without overwriting old styles. When possible, use native APIs:<tr><td><a name="l54" href="#l54">54</a><td> * elem.style.propertyKey = 'value' or (if obliterating old styles is fine)<tr><td><a name="l55" href="#l55">55</a><td> * elem.style.cssText = 'property1: value1; property2: value2'.<tr><td><a name="l56" href="#l56">56</a><td> *<tr><td><a name="l57" href="#l57">57</a><td> * @param {Element} element The element to change.<tr><td><a name="l58" href="#l58">58</a><td> * @param {string|Object} style If a string, a style name. If an object, a hash<tr><td><a name="l59" href="#l59">59</a><td> * of style names to style values.<tr><td><a name="l60" href="#l60">60</a><td> * @param {string|number|boolean=} opt_value If style was a string, then this<tr><td><a name="l61" href="#l61">61</a><td> * should be the value.<tr><td><a name="l62" href="#l62">62</a><td> */<tr><td><a name="l63" href="#l63">63</a><td>goog.style.setStyle = function(element, style, opt_value) {<tr><td><a name="l64" href="#l64">64</a><td> if (goog.isString(style)) {<tr><td><a name="l65" href="#l65">65</a><td> goog.style.setStyle_(element, opt_value, style);<tr><td><a name="l66" href="#l66">66</a><td> } else {<tr><td><a name="l67" href="#l67">67</a><td> for (var key in style) {<tr><td><a name="l68" href="#l68">68</a><td> goog.style.setStyle_(element, style[key], key);<tr><td><a name="l69" href="#l69">69</a><td> }<tr><td><a name="l70" href="#l70">70</a><td> }<tr><td><a name="l71" href="#l71">71</a><td>};<tr><td><a name="l72" href="#l72">72</a><td><tr><td><a name="l73" href="#l73">73</a><td><tr><td><a name="l74" href="#l74">74</a><td>/**<tr><td><a name="l75" href="#l75">75</a><td> * Sets a style value on an element, with parameters swapped to work with<tr><td><a name="l76" href="#l76">76</a><td> * {@code goog.object.forEach()}. Prepends a vendor-specific prefix when<tr><td><a name="l77" href="#l77">77</a><td> * necessary.<tr><td><a name="l78" href="#l78">78</a><td> * @param {Element} element The element to change.<tr><td><a name="l79" href="#l79">79</a><td> * @param {string|number|boolean|undefined} value Style value.<tr><td><a name="l80" href="#l80">80</a><td> * @param {string} style Style name.<tr><td><a name="l81" href="#l81">81</a><td> * @private<tr><td><a name="l82" href="#l82">82</a><td> */<tr><td><a name="l83" href="#l83">83</a><td>goog.style.setStyle_ = function(element, value, style) {<tr><td><a name="l84" href="#l84">84</a><td> var propertyName = goog.style.getVendorJsStyleName_(element, style);<tr><td><a name="l85" href="#l85">85</a><td><tr><td><a name="l86" href="#l86">86</a><td> if (propertyName) {<tr><td><a name="l87" href="#l87">87</a><td> element.style[propertyName] = value;<tr><td><a name="l88" href="#l88">88</a><td> }<tr><td><a name="l89" href="#l89">89</a><td>};<tr><td><a name="l90" href="#l90">90</a><td><tr><td><a name="l91" href="#l91">91</a><td><tr><td><a name="l92" href="#l92">92</a><td>/**<tr><td><a name="l93" href="#l93">93</a><td> * Returns the style property name in camel-case. If it does not exist and a<tr><td><a name="l94" href="#l94">94</a><td> * vendor-specific version of the property does exist, then return the vendor-<tr><td><a name="l95" href="#l95">95</a><td> * specific property name instead.<tr><td><a name="l96" href="#l96">96</a><td> * @param {Element} element The element to change.<tr><td><a name="l97" href="#l97">97</a><td> * @param {string} style Style name.<tr><td><a name="l98" href="#l98">98</a><td> * @return {string} Vendor-specific style.<tr><td><a name="l99" href="#l99">99</a><td> * @private<tr><td><a name="l100" href="#l100">100</a><td> */<tr><td><a name="l101" href="#l101">101</a><td>goog.style.getVendorJsStyleName_ = function(element, style) {<tr><td><a name="l102" href="#l102">102</a><td> var camelStyle = goog.string.toCamelCase(style);<tr><td><a name="l103" href="#l103">103</a><td><tr><td><a name="l104" href="#l104">104</a><td> if (element.style[camelStyle] === undefined) {<tr><td><a name="l105" href="#l105">105</a><td> var prefixedStyle = goog.dom.vendor.getVendorJsPrefix() +<tr><td><a name="l106" href="#l106">106</a><td> goog.string.toTitleCase(camelStyle);<tr><td><a name="l107" href="#l107">107</a><td><tr><td><a name="l108" href="#l108">108</a><td> if (element.style[prefixedStyle] !== undefined) {<tr><td><a name="l109" href="#l109">109</a><td> return prefixedStyle;<tr><td><a name="l110" href="#l110">110</a><td> }<tr><td><a name="l111" href="#l111">111</a><td> }<tr><td><a name="l112" href="#l112">112</a><td><tr><td><a name="l113" href="#l113">113</a><td> return camelStyle;<tr><td><a name="l114" href="#l114">114</a><td>};<tr><td><a name="l115" href="#l115">115</a><td><tr><td><a name="l116" href="#l116">116</a><td><tr><td><a name="l117" href="#l117">117</a><td>/**<tr><td><a name="l118" href="#l118">118</a><td> * Returns the style property name in CSS notation. If it does not exist and a<tr><td><a name="l119" href="#l119">119</a><td> * vendor-specific version of the property does exist, then return the vendor-<tr><td><a name="l120" href="#l120">120</a><td> * specific property name instead.<tr><td><a name="l121" href="#l121">121</a><td> * @param {Element} element The element to change.<tr><td><a name="l122" href="#l122">122</a><td> * @param {string} style Style name.<tr><td><a name="l123" href="#l123">123</a><td> * @return {string} Vendor-specific style.<tr><td><a name="l124" href="#l124">124</a><td> * @private<tr><td><a name="l125" href="#l125">125</a><td> */<tr><td><a name="l126" href="#l126">126</a><td>goog.style.getVendorStyleName_ = function(element, style) {<tr><td><a name="l127" href="#l127">127</a><td> var camelStyle = goog.string.toCamelCase(style);<tr><td><a name="l128" href="#l128">128</a><td><tr><td><a name="l129" href="#l129">129</a><td> if (element.style[camelStyle] === undefined) {<tr><td><a name="l130" href="#l130">130</a><td> var prefixedStyle = goog.dom.vendor.getVendorJsPrefix() +<tr><td><a name="l131" href="#l131">131</a><td> goog.string.toTitleCase(camelStyle);<tr><td><a name="l132" href="#l132">132</a><td><tr><td><a name="l133" href="#l133">133</a><td> if (element.style[prefixedStyle] !== undefined) {<tr><td><a name="l134" href="#l134">134</a><td> return goog.dom.vendor.getVendorPrefix() + '-' + style;<tr><td><a name="l135" href="#l135">135</a><td> }<tr><td><a name="l136" href="#l136">136</a><td> }<tr><td><a name="l137" href="#l137">137</a><td><tr><td><a name="l138" href="#l138">138</a><td> return style;<tr><td><a name="l139" href="#l139">139</a><td>};<tr><td><a name="l140" href="#l140">140</a><td><tr><td><a name="l141" href="#l141">141</a><td><tr><td><a name="l142" href="#l142">142</a><td>/**<tr><td><a name="l143" href="#l143">143</a><td> * Retrieves an explicitly-set style value of a node. This returns '' if there<tr><td><a name="l144" href="#l144">144</a><td> * isn't a style attribute on the element or if this style property has not been<tr><td><a name="l145" href="#l145">145</a><td> * explicitly set in script.<tr><td><a name="l146" href="#l146">146</a><td> *<tr><td><a name="l147" href="#l147">147</a><td> * @param {Element} element Element to get style of.<tr><td><a name="l148" href="#l148">148</a><td> * @param {string} property Property to get, css-style (if you have a camel-case<tr><td><a name="l149" href="#l149">149</a><td> * property, use element.style[style]).<tr><td><a name="l150" href="#l150">150</a><td> * @return {string} Style value.<tr><td><a name="l151" href="#l151">151</a><td> */<tr><td><a name="l152" href="#l152">152</a><td>goog.style.getStyle = function(element, property) {<tr><td><a name="l153" href="#l153">153</a><td> // element.style is '' for well-known properties which are unset.<tr><td><a name="l154" href="#l154">154</a><td> // For for browser specific styles as 'filter' is undefined<tr><td><a name="l155" href="#l155">155</a><td> // so we need to return '' explicitly to make it consistent across<tr><td><a name="l156" href="#l156">156</a><td> // browsers.<tr><td><a name="l157" href="#l157">157</a><td> var styleValue = element.style[goog.string.toCamelCase(property)];<tr><td><a name="l158" href="#l158">158</a><td><tr><td><a name="l159" href="#l159">159</a><td> // Using typeof here because of a bug in Safari 5.1, where this value<tr><td><a name="l160" href="#l160">160</a><td> // was undefined, but === undefined returned false.<tr><td><a name="l161" href="#l161">161</a><td> if (typeof(styleValue) !== 'undefined') {<tr><td><a name="l162" href="#l162">162</a><td> return styleValue;<tr><td><a name="l163" href="#l163">163</a><td> }<tr><td><a name="l164" href="#l164">164</a><td><tr><td><a name="l165" href="#l165">165</a><td> return element.style[goog.style.getVendorJsStyleName_(element, property)] ||<tr><td><a name="l166" href="#l166">166</a><td> '';<tr><td><a name="l167" href="#l167">167</a><td>};<tr><td><a name="l168" href="#l168">168</a><td><tr><td><a name="l169" href="#l169">169</a><td><tr><td><a name="l170" href="#l170">170</a><td>/**<tr><td><a name="l171" href="#l171">171</a><td> * Retrieves a computed style value of a node. It returns empty string if the<tr><td><a name="l172" href="#l172">172</a><td> * value cannot be computed (which will be the case in Internet Explorer) or<tr><td><a name="l173" href="#l173">173</a><td> * "none" if the property requested is an SVG one and it has not been<tr><td><a name="l174" href="#l174">174</a><td> * explicitly set (firefox and webkit).<tr><td><a name="l175" href="#l175">175</a><td> *<tr><td><a name="l176" href="#l176">176</a><td> * @param {Element} element Element to get style of.<tr><td><a name="l177" href="#l177">177</a><td> * @param {string} property Property to get (camel-case).<tr><td><a name="l178" href="#l178">178</a><td> * @return {string} Style value.<tr><td><a name="l179" href="#l179">179</a><td> */<tr><td><a name="l180" href="#l180">180</a><td>goog.style.getComputedStyle = function(element, property) {<tr><td><a name="l181" href="#l181">181</a><td> var doc = goog.dom.getOwnerDocument(element);<tr><td><a name="l182" href="#l182">182</a><td> if (doc.defaultView && doc.defaultView.getComputedStyle) {<tr><td><a name="l183" href="#l183">183</a><td> var styles = doc.defaultView.getComputedStyle(element, null);<tr><td><a name="l184" href="#l184">184</a><td> if (styles) {<tr><td><a name="l185" href="#l185">185</a><td> // element.style[..] is undefined for browser specific styles<tr><td><a name="l186" href="#l186">186</a><td> // as 'filter'.<tr><td><a name="l187" href="#l187">187</a><td> return styles[property] || styles.getPropertyValue(property) || '';<tr><td><a name="l188" href="#l188">188</a><td> }<tr><td><a name="l189" href="#l189">189</a><td> }<tr><td><a name="l190" href="#l190">190</a><td><tr><td><a name="l191" href="#l191">191</a><td> return '';<tr><td><a name="l192" href="#l192">192</a><td>};<tr><td><a name="l193" href="#l193">193</a><td><tr><td><a name="l194" href="#l194">194</a><td><tr><td><a name="l195" href="#l195">195</a><td>/**<tr><td><a name="l196" href="#l196">196</a><td> * Gets the cascaded style value of a node, or null if the value cannot be<tr><td><a name="l197" href="#l197">197</a><td> * computed (only Internet Explorer can do this).<tr><td><a name="l198" href="#l198">198</a><td> *<tr><td><a name="l199" href="#l199">199</a><td> * @param {Element} element Element to get style of.<tr><td><a name="l200" href="#l200">200</a><td> * @param {string} style Property to get (camel-case).<tr><td><a name="l201" href="#l201">201</a><td> * @return {string} Style value.<tr><td><a name="l202" href="#l202">202</a><td> */<tr><td><a name="l203" href="#l203">203</a><td>goog.style.getCascadedStyle = function(element, style) {<tr><td><a name="l204" href="#l204">204</a><td> // TODO(nicksantos): This should be documented to return null. #fixTypes<tr><td><a name="l205" href="#l205">205</a><td> return element.currentStyle ? element.currentStyle[style] : null;<tr><td><a name="l206" href="#l206">206</a><td>};<tr><td><a name="l207" href="#l207">207</a><td><tr><td><a name="l208" href="#l208">208</a><td><tr><td><a name="l209" href="#l209">209</a><td>/**<tr><td><a name="l210" href="#l210">210</a><td> * Cross-browser pseudo get computed style. It returns the computed style where<tr><td><a name="l211" href="#l211">211</a><td> * available. If not available it tries the cascaded style value (IE<tr><td><a name="l212" href="#l212">212</a><td> * currentStyle) and in worst case the inline style value. It shouldn't be<tr><td><a name="l213" href="#l213">213</a><td> * called directly, see http://wiki/Main/ComputedStyleVsCascadedStyle for<tr><td><a name="l214" href="#l214">214</a><td> * discussion.<tr><td><a name="l215" href="#l215">215</a><td> *<tr><td><a name="l216" href="#l216">216</a><td> * @param {Element} element Element to get style of.<tr><td><a name="l217" href="#l217">217</a><td> * @param {string} style Property to get (must be camelCase, not css-style.).<tr><td><a name="l218" href="#l218">218</a><td> * @return {string} Style value.<tr><td><a name="l219" href="#l219">219</a><td> * @private<tr><td><a name="l220" href="#l220">220</a><td> */<tr><td><a name="l221" href="#l221">221</a><td>goog.style.getStyle_ = function(element, style) {<tr><td><a name="l222" href="#l222">222</a><td> return goog.style.getComputedStyle(element, style) ||<tr><td><a name="l223" href="#l223">223</a><td> goog.style.getCascadedStyle(element, style) ||<tr><td><a name="l224" href="#l224">224</a><td> (element.style && element.style[style]);<tr><td><a name="l225" href="#l225">225</a><td>};<tr><td><a name="l226" href="#l226">226</a><td><tr><td><a name="l227" href="#l227">227</a><td><tr><td><a name="l228" href="#l228">228</a><td>/**<tr><td><a name="l229" href="#l229">229</a><td> * Retrieves the computed value of the box-sizing CSS attribute.<tr><td><a name="l230" href="#l230">230</a><td> * Browser support: http://caniuse.com/css3-boxsizing.<tr><td><a name="l231" href="#l231">231</a><td> * @param {!Element} element The element whose box-sizing to get.<tr><td><a name="l232" href="#l232">232</a><td> * @return {?string} 'content-box', 'border-box' or 'padding-box'. null if<tr><td><a name="l233" href="#l233">233</a><td> * box-sizing is not supported (IE7 and below).<tr><td><a name="l234" href="#l234">234</a><td> */<tr><td><a name="l235" href="#l235">235</a><td>goog.style.getComputedBoxSizing = function(element) {<tr><td><a name="l236" href="#l236">236</a><td> return goog.style.getStyle_(element, 'boxSizing') ||<tr><td><a name="l237" href="#l237">237</a><td> goog.style.getStyle_(element, 'MozBoxSizing') ||<tr><td><a name="l238" href="#l238">238</a><td> goog.style.getStyle_(element, 'WebkitBoxSizing') || null;<tr><td><a name="l239" href="#l239">239</a><td>};<tr><td><a name="l240" href="#l240">240</a><td><tr><td><a name="l241" href="#l241">241</a><td><tr><td><a name="l242" href="#l242">242</a><td>/**<tr><td><a name="l243" href="#l243">243</a><td> * Retrieves the computed value of the position CSS attribute.<tr><td><a name="l244" href="#l244">244</a><td> * @param {Element} element The element to get the position of.<tr><td><a name="l245" href="#l245">245</a><td> * @return {string} Position value.<tr><td><a name="l246" href="#l246">246</a><td> */<tr><td><a name="l247" href="#l247">247</a><td>goog.style.getComputedPosition = function(element) {<tr><td><a name="l248" href="#l248">248</a><td> return goog.style.getStyle_(element, 'position');<tr><td><a name="l249" href="#l249">249</a><td>};<tr><td><a name="l250" href="#l250">250</a><td><tr><td><a name="l251" href="#l251">251</a><td><tr><td><a name="l252" href="#l252">252</a><td>/**<tr><td><a name="l253" href="#l253">253</a><td> * Retrieves the computed background color string for a given element. The<tr><td><a name="l254" href="#l254">254</a><td> * string returned is suitable for assigning to another element's<tr><td><a name="l255" href="#l255">255</a><td> * background-color, but is not guaranteed to be in any particular string<tr><td><a name="l256" href="#l256">256</a><td> * format. Accessing the color in a numeric form may not be possible in all<tr><td><a name="l257" href="#l257">257</a><td> * browsers or with all input.<tr><td><a name="l258" href="#l258">258</a><td> *<tr><td><a name="l259" href="#l259">259</a><td> * If the background color for the element is defined as a hexadecimal value,<tr><td><a name="l260" href="#l260">260</a><td> * the resulting string can be parsed by goog.color.parse in all supported<tr><td><a name="l261" href="#l261">261</a><td> * browsers.<tr><td><a name="l262" href="#l262">262</a><td> *<tr><td><a name="l263" href="#l263">263</a><td> * Whether named colors like "red" or "lightblue" get translated into a<tr><td><a name="l264" href="#l264">264</a><td> * format which can be parsed is browser dependent. Calling this function on<tr><td><a name="l265" href="#l265">265</a><td> * transparent elements will return "transparent" in most browsers or<tr><td><a name="l266" href="#l266">266</a><td> * "rgba(0, 0, 0, 0)" in WebKit.<tr><td><a name="l267" href="#l267">267</a><td> * @param {Element} element The element to get the background color of.<tr><td><a name="l268" href="#l268">268</a><td> * @return {string} The computed string value of the background color.<tr><td><a name="l269" href="#l269">269</a><td> */<tr><td><a name="l270" href="#l270">270</a><td>goog.style.getBackgroundColor = function(element) {<tr><td><a name="l271" href="#l271">271</a><td> return goog.style.getStyle_(element, 'backgroundColor');<tr><td><a name="l272" href="#l272">272</a><td>};<tr><td><a name="l273" href="#l273">273</a><td><tr><td><a name="l274" href="#l274">274</a><td><tr><td><a name="l275" href="#l275">275</a><td>/**<tr><td><a name="l276" href="#l276">276</a><td> * Retrieves the computed value of the overflow-x CSS attribute.<tr><td><a name="l277" href="#l277">277</a><td> * @param {Element} element The element to get the overflow-x of.<tr><td><a name="l278" href="#l278">278</a><td> * @return {string} The computed string value of the overflow-x attribute.<tr><td><a name="l279" href="#l279">279</a><td> */<tr><td><a name="l280" href="#l280">280</a><td>goog.style.getComputedOverflowX = function(element) {<tr><td><a name="l281" href="#l281">281</a><td> return goog.style.getStyle_(element, 'overflowX');<tr><td><a name="l282" href="#l282">282</a><td>};<tr><td><a name="l283" href="#l283">283</a><td><tr><td><a name="l284" href="#l284">284</a><td><tr><td><a name="l285" href="#l285">285</a><td>/**<tr><td><a name="l286" href="#l286">286</a><td> * Retrieves the computed value of the overflow-y CSS attribute.<tr><td><a name="l287" href="#l287">287</a><td> * @param {Element} element The element to get the overflow-y of.<tr><td><a name="l288" href="#l288">288</a><td> * @return {string} The computed string value of the overflow-y attribute.<tr><td><a name="l289" href="#l289">289</a><td> */<tr><td><a name="l290" href="#l290">290</a><td>goog.style.getComputedOverflowY = function(element) {<tr><td><a name="l291" href="#l291">291</a><td> return goog.style.getStyle_(element, 'overflowY');<tr><td><a name="l292" href="#l292">292</a><td>};<tr><td><a name="l293" href="#l293">293</a><td><tr><td><a name="l294" href="#l294">294</a><td><tr><td><a name="l295" href="#l295">295</a><td>/**<tr><td><a name="l296" href="#l296">296</a><td> * Retrieves the computed value of the z-index CSS attribute.<tr><td><a name="l297" href="#l297">297</a><td> * @param {Element} element The element to get the z-index of.<tr><td><a name="l298" href="#l298">298</a><td> * @return {string|number} The computed value of the z-index attribute.<tr><td><a name="l299" href="#l299">299</a><td> */<tr><td><a name="l300" href="#l300">300</a><td>goog.style.getComputedZIndex = function(element) {<tr><td><a name="l301" href="#l301">301</a><td> return goog.style.getStyle_(element, 'zIndex');<tr><td><a name="l302" href="#l302">302</a><td>};<tr><td><a name="l303" href="#l303">303</a><td><tr><td><a name="l304" href="#l304">304</a><td><tr><td><a name="l305" href="#l305">305</a><td>/**<tr><td><a name="l306" href="#l306">306</a><td> * Retrieves the computed value of the text-align CSS attribute.<tr><td><a name="l307" href="#l307">307</a><td> * @param {Element} element The element to get the text-align of.<tr><td><a name="l308" href="#l308">308</a><td> * @return {string} The computed string value of the text-align attribute.<tr><td><a name="l309" href="#l309">309</a><td> */<tr><td><a name="l310" href="#l310">310</a><td>goog.style.getComputedTextAlign = function(element) {<tr><td><a name="l311" href="#l311">311</a><td> return goog.style.getStyle_(element, 'textAlign');<tr><td><a name="l312" href="#l312">312</a><td>};<tr><td><a name="l313" href="#l313">313</a><td><tr><td><a name="l314" href="#l314">314</a><td><tr><td><a name="l315" href="#l315">315</a><td>/**<tr><td><a name="l316" href="#l316">316</a><td> * Retrieves the computed value of the cursor CSS attribute.<tr><td><a name="l317" href="#l317">317</a><td> * @param {Element} element The element to get the cursor of.<tr><td><a name="l318" href="#l318">318</a><td> * @return {string} The computed string value of the cursor attribute.<tr><td><a name="l319" href="#l319">319</a><td> */<tr><td><a name="l320" href="#l320">320</a><td>goog.style.getComputedCursor = function(element) {<tr><td><a name="l321" href="#l321">321</a><td> return goog.style.getStyle_(element, 'cursor');<tr><td><a name="l322" href="#l322">322</a><td>};<tr><td><a name="l323" href="#l323">323</a><td><tr><td><a name="l324" href="#l324">324</a><td><tr><td><a name="l325" href="#l325">325</a><td>/**<tr><td><a name="l326" href="#l326">326</a><td> * Retrieves the computed value of the CSS transform attribute.<tr><td><a name="l327" href="#l327">327</a><td> * @param {Element} element The element to get the transform of.<tr><td><a name="l328" href="#l328">328</a><td> * @return {string} The computed string representation of the transform matrix.<tr><td><a name="l329" href="#l329">329</a><td> */<tr><td><a name="l330" href="#l330">330</a><td>goog.style.getComputedTransform = function(element) {<tr><td><a name="l331" href="#l331">331</a><td> var property = goog.style.getVendorStyleName_(element, 'transform');<tr><td><a name="l332" href="#l332">332</a><td> return goog.style.getStyle_(element, property) ||<tr><td><a name="l333" href="#l333">333</a><td> goog.style.getStyle_(element, 'transform');<tr><td><a name="l334" href="#l334">334</a><td>};<tr><td><a name="l335" href="#l335">335</a><td><tr><td><a name="l336" href="#l336">336</a><td><tr><td><a name="l337" href="#l337">337</a><td>/**<tr><td><a name="l338" href="#l338">338</a><td> * Sets the top/left values of an element. If no unit is specified in the<tr><td><a name="l339" href="#l339">339</a><td> * argument then it will add px. The second argument is required if the first<tr><td><a name="l340" href="#l340">340</a><td> * argument is a string or number and is ignored if the first argument<tr><td><a name="l341" href="#l341">341</a><td> * is a coordinate.<tr><td><a name="l342" href="#l342">342</a><td> * @param {Element} el Element to move.<tr><td><a name="l343" href="#l343">343</a><td> * @param {string|number|goog.math.Coordinate} arg1 Left position or coordinate.<tr><td><a name="l344" href="#l344">344</a><td> * @param {string|number=} opt_arg2 Top position.<tr><td><a name="l345" href="#l345">345</a><td> */<tr><td><a name="l346" href="#l346">346</a><td>goog.style.setPosition = function(el, arg1, opt_arg2) {<tr><td><a name="l347" href="#l347">347</a><td> var x, y;<tr><td><a name="l348" href="#l348">348</a><td> var buggyGeckoSubPixelPos = goog.userAgent.GECKO &&<tr><td><a name="l349" href="#l349">349</a><td> (goog.userAgent.MAC || goog.userAgent.X11) &&<tr><td><a name="l350" href="#l350">350</a><td> goog.userAgent.isVersionOrHigher('1.9');<tr><td><a name="l351" href="#l351">351</a><td><tr><td><a name="l352" href="#l352">352</a><td> if (arg1 instanceof goog.math.Coordinate) {<tr><td><a name="l353" href="#l353">353</a><td> x = arg1.x;<tr><td><a name="l354" href="#l354">354</a><td> y = arg1.y;<tr><td><a name="l355" href="#l355">355</a><td> } else {<tr><td><a name="l356" href="#l356">356</a><td> x = arg1;<tr><td><a name="l357" href="#l357">357</a><td> y = opt_arg2;<tr><td><a name="l358" href="#l358">358</a><td> }<tr><td><a name="l359" href="#l359">359</a><td><tr><td><a name="l360" href="#l360">360</a><td> // Round to the nearest pixel for buggy sub-pixel support.<tr><td><a name="l361" href="#l361">361</a><td> el.style.left = goog.style.getPixelStyleValue_(<tr><td><a name="l362" href="#l362">362</a><td> /** @type {number|string} */ (x), buggyGeckoSubPixelPos);<tr><td><a name="l363" href="#l363">363</a><td> el.style.top = goog.style.getPixelStyleValue_(<tr><td><a name="l364" href="#l364">364</a><td> /** @type {number|string} */ (y), buggyGeckoSubPixelPos);<tr><td><a name="l365" href="#l365">365</a><td>};<tr><td><a name="l366" href="#l366">366</a><td><tr><td><a name="l367" href="#l367">367</a><td><tr><td><a name="l368" href="#l368">368</a><td>/**<tr><td><a name="l369" href="#l369">369</a><td> * Gets the offsetLeft and offsetTop properties of an element and returns them<tr><td><a name="l370" href="#l370">370</a><td> * in a Coordinate object<tr><td><a name="l371" href="#l371">371</a><td> * @param {Element} element Element.<tr><td><a name="l372" href="#l372">372</a><td> * @return {!goog.math.Coordinate} The position.<tr><td><a name="l373" href="#l373">373</a><td> */<tr><td><a name="l374" href="#l374">374</a><td>goog.style.getPosition = function(element) {<tr><td><a name="l375" href="#l375">375</a><td> return new goog.math.Coordinate(element.offsetLeft, element.offsetTop);<tr><td><a name="l376" href="#l376">376</a><td>};<tr><td><a name="l377" href="#l377">377</a><td><tr><td><a name="l378" href="#l378">378</a><td><tr><td><a name="l379" href="#l379">379</a><td>/**<tr><td><a name="l380" href="#l380">380</a><td> * Returns the viewport element for a particular document<tr><td><a name="l381" href="#l381">381</a><td> * @param {Node=} opt_node DOM node (Document is OK) to get the viewport element<tr><td><a name="l382" href="#l382">382</a><td> * of.<tr><td><a name="l383" href="#l383">383</a><td> * @return {Element} document.documentElement or document.body.<tr><td><a name="l384" href="#l384">384</a><td> */<tr><td><a name="l385" href="#l385">385</a><td>goog.style.getClientViewportElement = function(opt_node) {<tr><td><a name="l386" href="#l386">386</a><td> var doc;<tr><td><a name="l387" href="#l387">387</a><td> if (opt_node) {<tr><td><a name="l388" href="#l388">388</a><td> doc = goog.dom.getOwnerDocument(opt_node);<tr><td><a name="l389" href="#l389">389</a><td> } else {<tr><td><a name="l390" href="#l390">390</a><td> doc = goog.dom.getDocument();<tr><td><a name="l391" href="#l391">391</a><td> }<tr><td><a name="l392" href="#l392">392</a><td><tr><td><a name="l393" href="#l393">393</a><td> // In old IE versions the document.body represented the viewport<tr><td><a name="l394" href="#l394">394</a><td> if (goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(9) &&<tr><td><a name="l395" href="#l395">395</a><td> !goog.dom.getDomHelper(doc).isCss1CompatMode()) {<tr><td><a name="l396" href="#l396">396</a><td> return doc.body;<tr><td><a name="l397" href="#l397">397</a><td> }<tr><td><a name="l398" href="#l398">398</a><td> return doc.documentElement;<tr><td><a name="l399" href="#l399">399</a><td>};<tr><td><a name="l400" href="#l400">400</a><td><tr><td><a name="l401" href="#l401">401</a><td><tr><td><a name="l402" href="#l402">402</a><td>/**<tr><td><a name="l403" href="#l403">403</a><td> * Calculates the viewport coordinates relative to the page/document<tr><td><a name="l404" href="#l404">404</a><td> * containing the node. The viewport may be the browser viewport for<tr><td><a name="l405" href="#l405">405</a><td> * non-iframe document, or the iframe container for iframe'd document.<tr><td><a name="l406" href="#l406">406</a><td> * @param {!Document} doc The document to use as the reference point.<tr><td><a name="l407" href="#l407">407</a><td> * @return {!goog.math.Coordinate} The page offset of the viewport.<tr><td><a name="l408" href="#l408">408</a><td> */<tr><td><a name="l409" href="#l409">409</a><td>goog.style.getViewportPageOffset = function(doc) {<tr><td><a name="l410" href="#l410">410</a><td> var body = doc.body;<tr><td><a name="l411" href="#l411">411</a><td> var documentElement = doc.documentElement;<tr><td><a name="l412" href="#l412">412</a><td> var scrollLeft = body.scrollLeft || documentElement.scrollLeft;<tr><td><a name="l413" href="#l413">413</a><td> var scrollTop = body.scrollTop || documentElement.scrollTop;<tr><td><a name="l414" href="#l414">414</a><td> return new goog.math.Coordinate(scrollLeft, scrollTop);<tr><td><a name="l415" href="#l415">415</a><td>};<tr><td><a name="l416" href="#l416">416</a><td><tr><td><a name="l417" href="#l417">417</a><td><tr><td><a name="l418" href="#l418">418</a><td>/**<tr><td><a name="l419" href="#l419">419</a><td> * Gets the client rectangle of the DOM element.<tr><td><a name="l420" href="#l420">420</a><td> *<tr><td><a name="l421" href="#l421">421</a><td> * getBoundingClientRect is part of a new CSS object model draft (with a<tr><td><a name="l422" href="#l422">422</a><td> * long-time presence in IE), replacing the error-prone parent offset<tr><td><a name="l423" href="#l423">423</a><td> * computation and the now-deprecated Gecko getBoxObjectFor.<tr><td><a name="l424" href="#l424">424</a><td> *<tr><td><a name="l425" href="#l425">425</a><td> * This utility patches common browser bugs in getBoundingClientRect. It<tr><td><a name="l426" href="#l426">426</a><td> * will fail if getBoundingClientRect is unsupported.<tr><td><a name="l427" href="#l427">427</a><td> *<tr><td><a name="l428" href="#l428">428</a><td> * If the element is not in the DOM, the result is undefined, and an error may<tr><td><a name="l429" href="#l429">429</a><td> * be thrown depending on user agent.<tr><td><a name="l430" href="#l430">430</a><td> *<tr><td><a name="l431" href="#l431">431</a><td> * @param {!Element} el The element whose bounding rectangle is being queried.<tr><td><a name="l432" href="#l432">432</a><td> * @return {Object} A native bounding rectangle with numerical left, top,<tr><td><a name="l433" href="#l433">433</a><td> * right, and bottom. Reported by Firefox to be of object type ClientRect.<tr><td><a name="l434" href="#l434">434</a><td> * @private<tr><td><a name="l435" href="#l435">435</a><td> */<tr><td><a name="l436" href="#l436">436</a><td>goog.style.getBoundingClientRect_ = function(el) {<tr><td><a name="l437" href="#l437">437</a><td> var rect;<tr><td><a name="l438" href="#l438">438</a><td> try {<tr><td><a name="l439" href="#l439">439</a><td> rect = el.getBoundingClientRect();<tr><td><a name="l440" href="#l440">440</a><td> } catch (e) {<tr><td><a name="l441" href="#l441">441</a><td> // In IE < 9, calling getBoundingClientRect on an orphan element raises an<tr><td><a name="l442" href="#l442">442</a><td> // "Unspecified Error". All other browsers return zeros.<tr><td><a name="l443" href="#l443">443</a><td> return {'left': 0, 'top': 0, 'right': 0, 'bottom': 0};<tr><td><a name="l444" href="#l444">444</a><td> }<tr><td><a name="l445" href="#l445">445</a><td><tr><td><a name="l446" href="#l446">446</a><td> // Patch the result in IE only, so that this function can be inlined if<tr><td><a name="l447" href="#l447">447</a><td> // compiled for non-IE.<tr><td><a name="l448" href="#l448">448</a><td> if (goog.userAgent.IE && el.ownerDocument.body) {<tr><td><a name="l449" href="#l449">449</a><td><tr><td><a name="l450" href="#l450">450</a><td> // In IE, most of the time, 2 extra pixels are added to the top and left<tr><td><a name="l451" href="#l451">451</a><td> // due to the implicit 2-pixel inset border. In IE6/7 quirks mode and<tr><td><a name="l452" href="#l452">452</a><td> // IE6 standards mode, this border can be overridden by setting the<tr><td><a name="l453" href="#l453">453</a><td> // document element's border to zero -- thus, we cannot rely on the<tr><td><a name="l454" href="#l454">454</a><td> // offset always being 2 pixels.<tr><td><a name="l455" href="#l455">455</a><td><tr><td><a name="l456" href="#l456">456</a><td> // In quirks mode, the offset can be determined by querying the body's<tr><td><a name="l457" href="#l457">457</a><td> // clientLeft/clientTop, but in standards mode, it is found by querying<tr><td><a name="l458" href="#l458">458</a><td> // the document element's clientLeft/clientTop. Since we already called<tr><td><a name="l459" href="#l459">459</a><td> // getBoundingClientRect we have already forced a reflow, so it is not<tr><td><a name="l460" href="#l460">460</a><td> // too expensive just to query them all.<tr><td><a name="l461" href="#l461">461</a><td><tr><td><a name="l462" href="#l462">462</a><td> // See: http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx<tr><td><a name="l463" href="#l463">463</a><td> var doc = el.ownerDocument;<tr><td><a name="l464" href="#l464">464</a><td> rect.left -= doc.documentElement.clientLeft + doc.body.clientLeft;<tr><td><a name="l465" href="#l465">465</a><td> rect.top -= doc.documentElement.clientTop + doc.body.clientTop;<tr><td><a name="l466" href="#l466">466</a><td> }<tr><td><a name="l467" href="#l467">467</a><td> return /** @type {Object} */ (rect);<tr><td><a name="l468" href="#l468">468</a><td>};<tr><td><a name="l469" href="#l469">469</a><td><tr><td><a name="l470" href="#l470">470</a><td><tr><td><a name="l471" href="#l471">471</a><td>/**<tr><td><a name="l472" href="#l472">472</a><td> * Returns the first parent that could affect the position of a given element.<tr><td><a name="l473" href="#l473">473</a><td> * @param {Element} element The element to get the offset parent for.<tr><td><a name="l474" href="#l474">474</a><td> * @return {Element} The first offset parent or null if one cannot be found.<tr><td><a name="l475" href="#l475">475</a><td> */<tr><td><a name="l476" href="#l476">476</a><td>goog.style.getOffsetParent = function(element) {<tr><td><a name="l477" href="#l477">477</a><td> // element.offsetParent does the right thing in IE7 and below. In other<tr><td><a name="l478" href="#l478">478</a><td> // browsers it only includes elements with position absolute, relative or<tr><td><a name="l479" href="#l479">479</a><td> // fixed, not elements with overflow set to auto or scroll.<tr><td><a name="l480" href="#l480">480</a><td> if (goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(8)) {<tr><td><a name="l481" href="#l481">481</a><td> return element.offsetParent;<tr><td><a name="l482" href="#l482">482</a><td> }<tr><td><a name="l483" href="#l483">483</a><td><tr><td><a name="l484" href="#l484">484</a><td> var doc = goog.dom.getOwnerDocument(element);<tr><td><a name="l485" href="#l485">485</a><td> var positionStyle = goog.style.getStyle_(element, 'position');<tr><td><a name="l486" href="#l486">486</a><td> var skipStatic = positionStyle == 'fixed' || positionStyle == 'absolute';<tr><td><a name="l487" href="#l487">487</a><td> for (var parent = element.parentNode; parent && parent != doc;<tr><td><a name="l488" href="#l488">488</a><td> parent = parent.parentNode) {<tr><td><a name="l489" href="#l489">489</a><td> positionStyle =<tr><td><a name="l490" href="#l490">490</a><td> goog.style.getStyle_(/** @type {!Element} */ (parent), 'position');<tr><td><a name="l491" href="#l491">491</a><td> skipStatic = skipStatic && positionStyle == 'static' &&<tr><td><a name="l492" href="#l492">492</a><td> parent != doc.documentElement && parent != doc.body;<tr><td><a name="l493" href="#l493">493</a><td> if (!skipStatic && (parent.scrollWidth > parent.clientWidth ||<tr><td><a name="l494" href="#l494">494</a><td> parent.scrollHeight > parent.clientHeight ||<tr><td><a name="l495" href="#l495">495</a><td> positionStyle == 'fixed' ||<tr><td><a name="l496" href="#l496">496</a><td> positionStyle == 'absolute' ||<tr><td><a name="l497" href="#l497">497</a><td> positionStyle == 'relative')) {<tr><td><a name="l498" href="#l498">498</a><td> return /** @type {!Element} */ (parent);<tr><td><a name="l499" href="#l499">499</a><td> }<tr><td><a name="l500" href="#l500">500</a><td> }<tr><td><a name="l501" href="#l501">501</a><td> return null;<tr><td><a name="l502" href="#l502">502</a><td>};<tr><td><a name="l503" href="#l503">503</a><td><tr><td><a name="l504" href="#l504">504</a><td><tr><td><a name="l505" href="#l505">505</a><td>/**<tr><td><a name="l506" href="#l506">506</a><td> * Calculates and returns the visible rectangle for a given element. Returns a<tr><td><a name="l507" href="#l507">507</a><td> * box describing the visible portion of the nearest scrollable offset ancestor.<tr><td><a name="l508" href="#l508">508</a><td> * Coordinates are given relative to the document.<tr><td><a name="l509" href="#l509">509</a><td> *<tr><td><a name="l510" href="#l510">510</a><td> * @param {Element} element Element to get the visible rect for.<tr><td><a name="l511" href="#l511">511</a><td> * @return {goog.math.Box} Bounding elementBox describing the visible rect or<tr><td><a name="l512" href="#l512">512</a><td> * null if scrollable ancestor isn't inside the visible viewport.<tr><td><a name="l513" href="#l513">513</a><td> */<tr><td><a name="l514" href="#l514">514</a><td>goog.style.getVisibleRectForElement = function(element) {<tr><td><a name="l515" href="#l515">515</a><td> var visibleRect = new goog.math.Box(0, Infinity, Infinity, 0);<tr><td><a name="l516" href="#l516">516</a><td> var dom = goog.dom.getDomHelper(element);<tr><td><a name="l517" href="#l517">517</a><td> var body = dom.getDocument().body;<tr><td><a name="l518" href="#l518">518</a><td> var documentElement = dom.getDocument().documentElement;<tr><td><a name="l519" href="#l519">519</a><td> var scrollEl = dom.getDocumentScrollElement();<tr><td><a name="l520" href="#l520">520</a><td><tr><td><a name="l521" href="#l521">521</a><td> // Determine the size of the visible rect by climbing the dom accounting for<tr><td><a name="l522" href="#l522">522</a><td> // all scrollable containers.<tr><td><a name="l523" href="#l523">523</a><td> for (var el = element; el = goog.style.getOffsetParent(el); ) {<tr><td><a name="l524" href="#l524">524</a><td> // clientWidth is zero for inline block elements in IE.<tr><td><a name="l525" href="#l525">525</a><td> // on WEBKIT, body element can have clientHeight = 0 and scrollHeight > 0<tr><td><a name="l526" href="#l526">526</a><td> if ((!goog.userAgent.IE || el.clientWidth != 0) &&<tr><td><a name="l527" href="#l527">527</a><td> (!goog.userAgent.WEBKIT || el.clientHeight != 0 || el != body) &&<tr><td><a name="l528" href="#l528">528</a><td> // body may have overflow set on it, yet we still get the entire<tr><td><a name="l529" href="#l529">529</a><td> // viewport. In some browsers, el.offsetParent may be<tr><td><a name="l530" href="#l530">530</a><td> // document.documentElement, so check for that too.<tr><td><a name="l531" href="#l531">531</a><td> (el != body && el != documentElement &&<tr><td><a name="l532" href="#l532">532</a><td> goog.style.getStyle_(el, 'overflow') != 'visible')) {<tr><td><a name="l533" href="#l533">533</a><td> var pos = goog.style.getPageOffset(el);<tr><td><a name="l534" href="#l534">534</a><td> var client = goog.style.getClientLeftTop(el);<tr><td><a name="l535" href="#l535">535</a><td> pos.x += client.x;<tr><td><a name="l536" href="#l536">536</a><td> pos.y += client.y;<tr><td><a name="l537" href="#l537">537</a><td><tr><td><a name="l538" href="#l538">538</a><td> visibleRect.top = Math.max(visibleRect.top, pos.y);<tr><td><a name="l539" href="#l539">539</a><td> visibleRect.right = Math.min(visibleRect.right,<tr><td><a name="l540" href="#l540">540</a><td> pos.x + el.clientWidth);<tr><td><a name="l541" href="#l541">541</a><td> visibleRect.bottom = Math.min(visibleRect.bottom,<tr><td><a name="l542" href="#l542">542</a><td> pos.y + el.clientHeight);<tr><td><a name="l543" href="#l543">543</a><td> visibleRect.left = Math.max(visibleRect.left, pos.x);<tr><td><a name="l544" href="#l544">544</a><td> }<tr><td><a name="l545" href="#l545">545</a><td> }<tr><td><a name="l546" href="#l546">546</a><td><tr><td><a name="l547" href="#l547">547</a><td> // Clip by window's viewport.<tr><td><a name="l548" href="#l548">548</a><td> var scrollX = scrollEl.scrollLeft, scrollY = scrollEl.scrollTop;<tr><td><a name="l549" href="#l549">549</a><td> visibleRect.left = Math.max(visibleRect.left, scrollX);<tr><td><a name="l550" href="#l550">550</a><td> visibleRect.top = Math.max(visibleRect.top, scrollY);<tr><td><a name="l551" href="#l551">551</a><td> var winSize = dom.getViewportSize();<tr><td><a name="l552" href="#l552">552</a><td> visibleRect.right = Math.min(visibleRect.right, scrollX + winSize.width);<tr><td><a name="l553" href="#l553">553</a><td> visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + winSize.height);<tr><td><a name="l554" href="#l554">554</a><td> return visibleRect.top >= 0 && visibleRect.left >= 0 &&<tr><td><a name="l555" href="#l555">555</a><td> visibleRect.bottom > visibleRect.top &&<tr><td><a name="l556" href="#l556">556</a><td> visibleRect.right > visibleRect.left ?<tr><td><a name="l557" href="#l557">557</a><td> visibleRect : null;<tr><td><a name="l558" href="#l558">558</a><td>};<tr><td><a name="l559" href="#l559">559</a><td><tr><td><a name="l560" href="#l560">560</a><td><tr><td><a name="l561" href="#l561">561</a><td>/**<tr><td><a name="l562" href="#l562">562</a><td> * Calculate the scroll position of {@code container} with the minimum amount so<tr><td><a name="l563" href="#l563">563</a><td> * that the content and the borders of the given {@code element} become visible.<tr><td><a name="l564" href="#l564">564</a><td> * If the element is bigger than the container, its top left corner will be<tr><td><a name="l565" href="#l565">565</a><td> * aligned as close to the container's top left corner as possible.<tr><td><a name="l566" href="#l566">566</a><td> *<tr><td><a name="l567" href="#l567">567</a><td> * @param {Element} element The element to make visible.<tr><td><a name="l568" href="#l568">568</a><td> * @param {Element} container The container to scroll.<tr><td><a name="l569" href="#l569">569</a><td> * @param {boolean=} opt_center Whether to center the element in the container.<tr><td><a name="l570" href="#l570">570</a><td> * Defaults to false.<tr><td><a name="l571" href="#l571">571</a><td> * @return {!goog.math.Coordinate} The new scroll position of the container,<tr><td><a name="l572" href="#l572">572</a><td> * in form of goog.math.Coordinate(scrollLeft, scrollTop).<tr><td><a name="l573" href="#l573">573</a><td> */<tr><td><a name="l574" href="#l574">574</a><td>goog.style.getContainerOffsetToScrollInto =<tr><td><a name="l575" href="#l575">575</a><td> function(element, container, opt_center) {<tr><td><a name="l576" href="#l576">576</a><td> // Absolute position of the element's border's top left corner.<tr><td><a name="l577" href="#l577">577</a><td> var elementPos = goog.style.getPageOffset(element);<tr><td><a name="l578" href="#l578">578</a><td> // Absolute position of the container's border's top left corner.<tr><td><a name="l579" href="#l579">579</a><td> var containerPos = goog.style.getPageOffset(container);<tr><td><a name="l580" href="#l580">580</a><td> var containerBorder = goog.style.getBorderBox(container);<tr><td><a name="l581" href="#l581">581</a><td> // Relative pos. of the element's border box to the container's content box.<tr><td><a name="l582" href="#l582">582</a><td> var relX = elementPos.x - containerPos.x - containerBorder.left;<tr><td><a name="l583" href="#l583">583</a><td> var relY = elementPos.y - containerPos.y - containerBorder.top;<tr><td><a name="l584" href="#l584">584</a><td> // How much the element can move in the container, i.e. the difference between<tr><td><a name="l585" href="#l585">585</a><td> // the element's bottom-right-most and top-left-most position where it's<tr><td><a name="l586" href="#l586">586</a><td> // fully visible.<tr><td><a name="l587" href="#l587">587</a><td> var spaceX = container.clientWidth - element.offsetWidth;<tr><td><a name="l588" href="#l588">588</a><td> var spaceY = container.clientHeight - element.offsetHeight;<tr><td><a name="l589" href="#l589">589</a><td><tr><td