diff options
| author |  Benjamin Jones <bjones@galois.com> | 2012-09-27 12:49:34 -0700 |
|---|---|---|
| committer | Benjamin Jones <bjones@galois.com> | 2012-09-27 15:12:48 -0700 |
| commit | 599b9ac75de5d4868b6ea390460d4dbe6784f06e (patch) | |
| tree | c049deaae840a7365eacdeb90d3089d78ecb184c /contexts/data/lib/closure-library/closure/goog/style | |
| parent | c1b9103d298842b30e0c7e0481a803b217c0e837 (diff) | |
updated Google closure library to 9-27-2012 SVN trunk
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/style')
35 files changed, 679 insertions, 7807 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/all-wcprops b/contexts/data/lib/closure-library/closure/goog/style/.svn/all-wcprops deleted file mode 100644 index 3200ae0..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/all-wcprops +++ /dev/null @@ -1,83 +0,0 @@ -K 25 -svn:wc:ra_dav:version-url -V 43 -/svn/!svn/ver/1488/trunk/closure/goog/style -END -cursor_test.html -K 25 -svn:wc:ra_dav:version-url -V 60 -/svn/!svn/ver/1292/trunk/closure/goog/style/cursor_test.html -END -style_test_iframe_quirk.html -K 25 -svn:wc:ra_dav:version-url -V 71 -/svn/!svn/ver/850/trunk/closure/goog/style/style_test_iframe_quirk.html -END -style_quirks_test.html -K 25 -svn:wc:ra_dav:version-url -V 66 -/svn/!svn/ver/1472/trunk/closure/goog/style/style_quirks_test.html -END -style_test_standard.html -K 25 -svn:wc:ra_dav:version-url -V 67 -/svn/!svn/ver/850/trunk/closure/goog/style/style_test_standard.html -END -style_test.html -K 25 -svn:wc:ra_dav:version-url -V 59 -/svn/!svn/ver/1468/trunk/closure/goog/style/style_test.html -END -style_test_iframe_standard.html -K 25 -svn:wc:ra_dav:version-url -V 74 -/svn/!svn/ver/850/trunk/closure/goog/style/style_test_iframe_standard.html -END -transition.js -K 25 -svn:wc:ra_dav:version-url -V 57 -/svn/!svn/ver/1103/trunk/closure/goog/style/transition.js -END -cursor.js -K 25 -svn:wc:ra_dav:version-url -V 52 -/svn/!svn/ver/850/trunk/closure/goog/style/cursor.js -END -style_test.js -K 25 -svn:wc:ra_dav:version-url -V 57 -/svn/!svn/ver/1488/trunk/closure/goog/style/style_test.js -END -style.js -K 25 -svn:wc:ra_dav:version-url -V 52 -/svn/!svn/ver/1472/trunk/closure/goog/style/style.js -END -transition_test.html -K 25 -svn:wc:ra_dav:version-url -V 64 -/svn/!svn/ver/1103/trunk/closure/goog/style/transition_test.html -END -style_test_quirk.html -K 25 -svn:wc:ra_dav:version-url -V 64 -/svn/!svn/ver/850/trunk/closure/goog/style/style_test_quirk.html -END -style_webkit_scrollbars_test.html -K 25 -svn:wc:ra_dav:version-url -V 77 -/svn/!svn/ver/1290/trunk/closure/goog/style/style_webkit_scrollbars_test.html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/entries b/contexts/data/lib/closure-library/closure/goog/style/.svn/entries deleted file mode 100644 index f7cf03c..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/entries +++ /dev/null @@ -1,470 +0,0 @@ -10 - -dir -1494 -http://closure-library.googlecode.com/svn/trunk/closure/goog/style -http://closure-library.googlecode.com/svn - - - -2011-12-19T21:39:20.000000Z -1488 -rodarmor@google.com - - - - - - - - - - - - - - -0b95b8e8-c90f-11de-9d4f-f947ee5921c8 - -cursor_test.html -file - - - - -2011-12-23T22:42:31.865372Z -7e25010999cbc41743dd8e90dfb47c8b -2011-09-22T17:21:12.000000Z -1292 -marcosalmeida@google.com -has-props - - - - - - - - - - - - - - - - - - - - -4632 - -style_test_iframe_quirk.html -file - - - - -2011-12-23T22:42:31.866372Z -1e858874248ce9bdea6916b8919c43fc -2011-04-12T20:35:47.000000Z -850 -diegosalas@google.com -has-props - - - - - - - - - - - - - - - - - - - - -485 - -style_quirks_test.html -file - - - - -2011-12-23T22:42:31.867372Z -c0e46468c46f4149cb2c44160876d9ae -2011-12-13T22:20:28.000000Z -1472 -ccalabro@google.com -has-props - - - - - - - - - - - - - - - - - - - - -74185 - -style_test_standard.html -file - - - - -2011-12-23T22:42:31.867372Z -7a8878612db18d63e39d3254e187e60c -2011-04-12T20:35:47.000000Z -850 -diegosalas@google.com -has-props - - - - - - - - - - - - - - - - - - - - -399 - -style_test.html -file - - - - -2011-12-23T22:42:31.868372Z -0aa6c07156ce2054045166ae740ea55d -2011-12-09T21:03:16.000000Z -1468 -nicksantos@google.com -has-props - - - - - - - - - - - - - - - - - - - - -76009 - -style_test_iframe_standard.html -file - - - - -2011-12-23T22:42:31.869372Z -a8e5c5ba148fc9169ff098ea886acf8d -2011-04-12T20:35:47.000000Z -850 -diegosalas@google.com -has-props - - - - - - - - - - - - - - - - - - - - -501 - -transition.js -file - - - - -2011-12-23T22:42:31.870372Z -1f470a3df7936955d5e17c8eaeb3e687 -2011-07-06T22:48:20.000000Z -1103 -chrishenry@google.com -has-props - - - - - - - - - - - - - - - - - - - - -4044 - -cursor.js -file - - - - -2011-12-23T22:42:31.871372Z -d9a3752e8d0cbbcc919c3fc23cc46c1a -2011-04-12T20:35:47.000000Z -850 -diegosalas@google.com -has-props - - - - - - - - - - - - - - - - - - - - -4240 - -style_test.js -file - - - - -2011-12-23T22:42:31.872372Z -b169352a90bf2eaed8803a65eb4894ba -2011-12-19T21:39:20.000000Z -1488 -rodarmor@google.com -has-props - - - - - - - - - - - - - - - - - - - - -2774 - -style.js -file - - - - -2011-12-23T22:42:31.873373Z -3f3abe5e06b90fbd21e4010e3af660b3 -2011-12-13T22:20:28.000000Z -1472 -ccalabro@google.com -has-props - - - - - - - - - - - - - - - - - - - - -66565 - -transition_test.html -file - - - - -2011-12-23T22:42:31.874373Z -8b96eccd6b3abeb52be518c93fa64e87 -2011-07-06T22:48:20.000000Z -1103 -chrishenry@google.com -has-props - - - - - - - - - - - - - - - - - - - - -3535 - -style_test_quirk.html -file - - - - -2011-12-23T22:42:31.874373Z -64a69c35d7ead36d1260e23551c6136b -2011-04-12T20:35:47.000000Z -850 -diegosalas@google.com -has-props - - - - - - - - - - - - - - - - - - - - -317 - -style_webkit_scrollbars_test.html -file - - - - -2011-12-23T22:42:31.875373Z -851942dffcd8a41d679903499d4f7874 -2011-09-21T09:17:27.000000Z -1290 -flan@google.com -has-props - - - - - - - - - - - - - - - - - - - - -1907 - diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/cursor.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/cursor.js.svn-base deleted file mode 100644 index 530636b..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/cursor.js.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 15 -text/javascript -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/cursor_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/cursor_test.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/cursor_test.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style.js.svn-base deleted file mode 100644 index 530636b..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style.js.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 15 -text/javascript -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_quirks_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_quirks_test.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_quirks_test.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test.js.svn-base deleted file mode 100644 index 530636b..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test.js.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 15 -text/javascript -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_iframe_quirk.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_iframe_quirk.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_iframe_quirk.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_iframe_standard.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_iframe_standard.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_iframe_standard.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_quirk.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_quirk.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_quirk.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_standard.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_standard.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_test_standard.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_webkit_scrollbars_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_webkit_scrollbars_test.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/style_webkit_scrollbars_test.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/transition.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/transition.js.svn-base deleted file mode 100644 index 530636b..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/transition.js.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 15 -text/javascript -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/transition_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/transition_test.html.svn-base deleted file mode 100644 index d356868..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/prop-base/transition_test.html.svn-base +++ /dev/null @@ -1,5 +0,0 @@ -K 13 -svn:mime-type -V 9 -text/html -END diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/cursor.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/cursor.js.svn-base deleted file mode 100644 index 581bf31..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/cursor.js.svn-base +++ /dev/null @@ -1,115 +0,0 @@ -// Copyright 2005 The Closure Library Authors. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS-IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -/** - * @fileoverview Functions to create special cursor styles, like "draggable" - * (open hand) or "dragging" (closed hand). - * - */ - -goog.provide('goog.style.cursor'); - -goog.require('goog.userAgent'); - - -/** - * The file name for the open-hand (draggable) cursor. - * @type {string} - */ -goog.style.cursor.OPENHAND_FILE = 'openhand.cur'; - - -/** - * The file name for the close-hand (dragging) cursor. - * @type {string} - */ -goog.style.cursor.CLOSEDHAND_FILE = 'closedhand.cur'; - - -/** - * Create the style for the draggable cursor based on browser and OS. - * The value can be extended to be '!important' if needed. - * - * @param {string} absoluteDotCurFilePath The absolute base path of - * 'openhand.cur' file to be used if the browser supports it. - * @param {boolean=} opt_obsolete Just for compiler backward compatibility. - * @return {string} The "draggable" mouse cursor style value. - */ -goog.style.cursor.getDraggableCursorStyle = function( - absoluteDotCurFilePath, opt_obsolete) { - return goog.style.cursor.getCursorStyle_( - '-moz-grab', - absoluteDotCurFilePath + goog.style.cursor.OPENHAND_FILE, - 'default'); -}; - - -/** - * Create the style for the dragging cursor based on browser and OS. - * The value can be extended to be '!important' if needed. - * - * @param {string} absoluteDotCurFilePath The absolute base path of - * 'closedhand.cur' file to be used if the browser supports it. - * @param {boolean=} opt_obsolete Just for compiler backward compatibility. - * @return {string} The "dragging" mouse cursor style value. - */ -goog.style.cursor.getDraggingCursorStyle = function( - absoluteDotCurFilePath, opt_obsolete) { - return goog.style.cursor.getCursorStyle_( - '-moz-grabbing', - absoluteDotCurFilePath + goog.style.cursor.CLOSEDHAND_FILE, - 'move'); -}; - - -/** - * Create the style for the cursor based on browser and OS. - * - * @param {string} geckoNonWinBuiltInStyleValue The Gecko on non-Windows OS, - * built in cursor style. - * @param {string} absoluteDotCurFilePath The .cur file absolute file to be - * used if the browser supports it. - * @param {string} defaultStyle The default fallback cursor style. - * @return {string} The computed mouse cursor style value. - * @private - */ -goog.style.cursor.getCursorStyle_ = function(geckoNonWinBuiltInStyleValue, - absoluteDotCurFilePath, defaultStyle) { - // Use built in cursors for Gecko on non Windows OS. - // We prefer our custom cursor, but Firefox Mac and Firefox Linux - // cannot do custom cursors. They do have a built-in hand, so use it: - if (goog.userAgent.GECKO && !goog.userAgent.WINDOWS) { - return geckoNonWinBuiltInStyleValue; - } - - // Use the custom cursor file. - var cursorStyleValue = 'url("' + absoluteDotCurFilePath + '")'; - // Change hot-spot for Safari. - if (goog.userAgent.WEBKIT) { - // Safari seems to ignore the hotspot specified in the .cur file (it uses - // 0,0 instead). This causes the cursor to jump as it transitions between - // openhand and pointer which is especially annoying when trying to hover - // over the route for draggable routes. We specify the hotspot here as 7,5 - // in the css - unfortunately ie6 can't understand this and falls back to - // the builtin cursors so we just do this for safari (but ie DOES correctly - // use the hotspot specified in the file so this is ok). The appropriate - // coordinates were determined by looking at a hex dump and the format - // description from wikipedia. - cursorStyleValue += ' 7 5'; - } - // Add default cursor fallback. - cursorStyleValue += ', ' + defaultStyle; - return cursorStyleValue; -}; - diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/cursor_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/cursor_test.html.svn-base deleted file mode 100644 index 6e2a311..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/cursor_test.html.svn-base +++ /dev/null @@ -1,132 +0,0 @@ -<!DOCTYPE html> -<html> -<!-- -Copyright 2009 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. ---> -<!-- - Author: dgajda@google.com (Damian Gajda) ---> -<head> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> -<title>Closure Unit Tests - goog.style.cursor</title> -<script src="../base.js"></script> -<script> - goog.require('goog.testing.jsunit'); - - goog.require('goog.style.cursor'); - goog.require('goog.userAgent'); -</script> -</head> -<body> -<script> - -var baseCursorUrl = '/images/2/'; -var origWindowsUserAgentValue; -var origGeckoUserAgentValue; -var origWebkitUserAgentValue; - - -function setUp() { - origWindowsUserAgentValue = goog.userAgent.WINDOWS; - origGeckoUserAgentValue = goog.userAgent.GECKO; - origWebkitUserAgentValue = goog.userAgent.WEBKIT; -} - - -function tearDown() { - goog.userAgent.WINDOWS = origWindowsUserAgentValue; - goog.userAgent.GECKO = origGeckoUserAgentValue; - goog.userAgent.WEBKIT = origWebkitUserAgentValue; -} - - -function testGetCursorStylesWebkit() { - goog.userAgent.GECKO = false; - goog.userAgent.WEBKIT = true; - - assertEquals('Webkit should get a cursor style with moved hot-spot.', - 'url("/images/2/openhand.cur") 7 5, default', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl)); - assertEquals('Webkit should get a cursor style with moved hot-spot.', - 'url("/images/2/openhand.cur") 7 5, default', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl, true)); - - assertEquals('Webkit should get a cursor style with moved hot-spot.', - 'url("/images/2/closedhand.cur") 7 5, move', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl)); - assertEquals('Webkit should get a cursor style with moved hot-spot.', - 'url("/images/2/closedhand.cur") 7 5, move', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl, true)); -} - - -function testGetCursorStylesFireFoxNonWin() { - goog.userAgent.GECKO = true; - goog.userAgent.WEBKIT = false; - goog.userAgent.WINDOWS = false; - - assertEquals('FireFox on non Windows should get a custom cursor style.', - '-moz-grab', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl)); - assertEquals('FireFox on non Windows should get a custom cursor style and ' + - 'no !important modifier.', - '-moz-grab', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl, true)); - - assertEquals('FireFox on non Windows should get a custom cursor style.', - '-moz-grabbing', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl)); - assertEquals('FireFox on non Windows should get a custom cursor style and ' + - 'no !important modifier.', - '-moz-grabbing', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl, true)); -} - - -function testGetCursorStylesFireFoxWin() { - goog.userAgent.GECKO = true; - goog.userAgent.WEBKIT = false; - goog.userAgent.WINDOWS = true; - - assertEquals('FireFox should get a cursor style with URL.', - 'url("/images/2/openhand.cur"), default', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl)); - assertEquals('FireFox should get a cursor style with URL and no !important' + - ' modifier.', - 'url("/images/2/openhand.cur"), default', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl, true)); - - assertEquals('FireFox should get a cursor style with URL.', - 'url("/images/2/closedhand.cur"), move', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl)); - assertEquals('FireFox should get a cursor style with URL and no !important' + - ' modifier.', - 'url("/images/2/closedhand.cur"), move', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl, true)); -} - - -function testGetCursorStylesOther() { - goog.userAgent.GECKO = false; - goog.userAgent.WEBKIT = false; - - assertEquals('Other browsers (IE) should get a cursor style with URL.', - 'url("/images/2/openhand.cur"), default', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl)); - assertEquals('Other browsers (IE) should get a cursor style with URL.', - 'url("/images/2/openhand.cur"), default', - goog.style.cursor.getDraggableCursorStyle(baseCursorUrl, true)); - - assertEquals('Other browsers (IE) should get a cursor style with URL.', - 'url("/images/2/closedhand.cur"), move', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl)); - assertEquals('Other browsers (IE) should get a cursor style with URL.', - 'url("/images/2/closedhand.cur"), move', - goog.style.cursor.getDraggingCursorStyle(baseCursorUrl, true)); -} -</script> -</body> -</html> diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style.js.svn-base deleted file mode 100644 index 8b10643..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style.js.svn-base +++ /dev/null @@ -1,1811 +0,0 @@ -// Copyright 2006 The Closure Library Authors. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS-IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -/** - * @fileoverview Utilities for element styles. - * - * @see ../demos/inline_block_quirks.html - * @see ../demos/inline_block_standards.html - * @see ../demos/style_viewport.html - */ - -goog.provide('goog.style'); - - -goog.require('goog.array'); -goog.require('goog.dom'); -goog.require('goog.math.Box'); -goog.require('goog.math.Coordinate'); -goog.require('goog.math.Rect'); -goog.require('goog.math.Size'); -goog.require('goog.object'); -goog.require('goog.string'); -goog.require('goog.userAgent'); - - -/** - * Sets a style value on an element. - * - * This function is not indended to patch issues in the browser's style - * handling, but to allow easy programmatic access to setting dash-separated - * style properties. An example is setting a batch of properties from a data - * object without overwriting old styles. When possible, use native APIs: - * elem.style.propertyKey = 'value' or (if obliterating old styles is fine) - * elem.style.cssText = 'property1: value1; property2: value2'. - * - * @param {Element} element The element to change. - * @param {string|Object} style If a string, a style name. If an object, a hash - * of style names to style values. - * @param {string|number|boolean=} opt_value If style was a string, then this - * should be the value. - */ -goog.style.setStyle = function(element, style, opt_value) { - if (goog.isString(style)) { - goog.style.setStyle_(element, opt_value, style); - } else { - goog.object.forEach(style, goog.partial(goog.style.setStyle_, element)); - } -}; - - -/** - * Sets a style value on an element, with parameters swapped to work with - * {@code goog.object.forEach()}. - * @param {Element} element The element to change. - * @param {string|number|boolean|undefined} value Style value. - * @param {string} style Style name. - * @private - */ -goog.style.setStyle_ = function(element, value, style) { - element.style[goog.string.toCamelCase(style)] = value; -}; - - -/** - * Retrieves an explicitly-set style value of a node. This returns '' if there - * isn't a style attribute on the element or if this style property has not been - * explicitly set in script. - * - * @param {Element} element Element to get style of. - * @param {string} property Property to get, css-style (if you have a camel-case - * property, use element.style[style]). - * @return {string} Style value. - */ -goog.style.getStyle = function(element, property) { - // element.style is '' for well-known properties which are unset. - // For for browser specific styles as 'filter' is undefined - // so we need to return '' explicitly to make it consistent across - // browsers. - return element.style[goog.string.toCamelCase(property)] || ''; -}; - - -/** - * Retrieves a computed style value of a node. It returns empty string if the - * value cannot be computed (which will be the case in Internet Explorer) or - * "none" if the property requested is an SVG one and it has not been - * explicitly set (firefox and webkit). - * - * @param {Element} element Element to get style of. - * @param {string} property Property to get (camel-case). - * @return {string} Style value. - */ -goog.style.getComputedStyle = function(element, property) { - var doc = goog.dom.getOwnerDocument(element); - if (doc.defaultView && doc.defaultView.getComputedStyle) { - var styles = doc.defaultView.getComputedStyle(element, null); - if (styles) { - // element.style[..] is undefined for browser specific styles - // as 'filter'. - return styles[property] || styles.getPropertyValue(property); - } - } - - return ''; -}; - - -/** - * Gets the cascaded style value of a node, or null if the value cannot be - * computed (only Internet Explorer can do this). - * - * @param {Element} element Element to get style of. - * @param {string} style Property to get (camel-case). - * @return {string} Style value. - */ -goog.style.getCascadedStyle = function(element, style) { - return element.currentStyle ? element.currentStyle[style] : null; -}; - - -/** - * Cross-browser pseudo get computed style. It returns the computed style where - * available. If not available it tries the cascaded style value (IE - * currentStyle) and in worst case the inline style value. It shouldn't be - * called directly, see http://wiki/Main/ComputedStyleVsCascadedStyle for - * discussion. - * - * @param {Element} element Element to get style of. - * @param {string} style Property to get (must be camelCase, not css-style.). - * @return {string} Style value. - * @private - */ -goog.style.getStyle_ = function(element, style) { - return goog.style.getComputedStyle(element, style) || - goog.style.getCascadedStyle(element, style) || - (element.style && element.style[style]); -}; - - -/** - * Retrieves the computed value of the position CSS attribute. - * @param {Element} element The element to get the position of. - * @return {string} Position value. - */ -goog.style.getComputedPosition = function(element) { - return goog.style.getStyle_(element, 'position'); -}; - - -/** - * Retrieves the computed background color string for a given element. The - * string returned is suitable for assigning to another element's - * background-color, but is not guaranteed to be in any particular string - * format. Accessing the color in a numeric form may not be possible in all - * browsers or with all input. - * - * If the background color for the element is defined as a hexadecimal value, - * the resulting string can be parsed by goog.color.parse in all supported - * browsers. - * - * Whether named colors like "red" or "lightblue" get translated into a - * format which can be parsed is browser dependent. Calling this function on - * transparent elements will return "transparent" in most browsers or - * "rgba(0, 0, 0, 0)" in WebKit. - * @param {Element} element The element to get the background color of. - * @return {string} The computed string value of the background color. - */ -goog.style.getBackgroundColor = function(element) { - return goog.style.getStyle_(element, 'backgroundColor'); -}; - - -/** - * Retrieves the computed value of the overflow-x CSS attribute. - * @param {Element} element The element to get the overflow-x of. - * @return {string} The computed string value of the overflow-x attribute. - */ -goog.style.getComputedOverflowX = function(element) { - return goog.style.getStyle_(element, 'overflowX'); -}; - - -/** - * Retrieves the computed value of the overflow-y CSS attribute. - * @param {Element} element The element to get the overflow-y of. - * @return {string} The computed string value of the overflow-y attribute. - */ -goog.style.getComputedOverflowY = function(element) { - return goog.style.getStyle_(element, 'overflowY'); -}; - - -/** - * Retrieves the computed value of the z-index CSS attribute. - * @param {Element} element The element to get the z-index of. - * @return {string|number} The computed value of the z-index attribute. - */ -goog.style.getComputedZIndex = function(element) { - return goog.style.getStyle_(element, 'zIndex'); -}; - - -/** - * Retrieves the computed value of the text-align CSS attribute. - * @param {Element} element The element to get the text-align of. - * @return {string} The computed string value of the text-align attribute. - */ -goog.style.getComputedTextAlign = function(element) { - return goog.style.getStyle_(element, 'textAlign'); -}; - - -/** - * Retrieves the computed value of the cursor CSS attribute. - * @param {Element} element The element to get the cursor of. - * @return {string} The computed string value of the cursor attribute. - */ -goog.style.getComputedCursor = function(element) { - return goog.style.getStyle_(element, 'cursor'); -}; - - -/** - * Sets the top/left values of an element. If no unit is specified in the - * argument then it will add px. - * @param {Element} el Element to move. - * @param {string|number|goog.math.Coordinate} arg1 Left position or coordinate. - * @param {string|number=} opt_arg2 Top position. - */ -goog.style.setPosition = function(el, arg1, opt_arg2) { - var x, y; - var buggyGeckoSubPixelPos = goog.userAgent.GECKO && - (goog.userAgent.MAC || goog.userAgent.X11) && - goog.userAgent.isVersion('1.9'); - - if (arg1 instanceof goog.math.Coordinate) { - x = arg1.x; - y = arg1.y; - } else { - x = arg1; - y = opt_arg2; - } - - // Round to the nearest pixel for buggy sub-pixel support. - el.style.left = goog.style.getPixelStyleValue_( - /** @type {number|string} */ (x), buggyGeckoSubPixelPos); - el.style.top = goog.style.getPixelStyleValue_( - /** @type {number|string} */ (y), buggyGeckoSubPixelPos); -}; - - -/** - * Gets the offsetLeft and offsetTop properties of an element and returns them - * in a Coordinate object - * @param {Element} element Element. - * @return {!goog.math.Coordinate} The position. - */ -goog.style.getPosition = function(element) { - return new goog.math.Coordinate(element.offsetLeft, element.offsetTop); -}; - - -/** - * Returns the viewport element for a particular document - * @param {Node=} opt_node DOM node (Document is OK) to get the viewport element - * of. - * @return {Element} document.documentElement or document.body. - */ -goog.style.getClientViewportElement = function(opt_node) { - var doc; - if (opt_node) { - if (opt_node.nodeType == goog.dom.NodeType.DOCUMENT) { - doc = opt_node; - } else { - doc = goog.dom.getOwnerDocument(opt_node); - } - } else { - doc = goog.dom.getDocument(); - } - - // In old IE versions the document.body represented the viewport - if (goog.userAgent.IE && !goog.userAgent.isDocumentMode(9) && - !goog.dom.getDomHelper(doc).isCss1CompatMode()) { - return doc.body; - } - return doc.documentElement; -}; - - -/** - * Gets the client rectangle of the DOM element. - * - * getBoundingClientRect is part of a new CSS object model draft (with a - * long-time presence in IE), replacing the error-prone parent offset - * computation and the now-deprecated Gecko getBoxObjectFor. - * - * This utility patches common browser bugs in getClientBoundingRect. It - * will fail if getClientBoundingRect is unsupported. - * - * If the element is not in the DOM, the result is undefined, and an error may - * be thrown depending on user agent. - * - * @param {Element} el The element whose bounding rectangle is being queried. - * @return {Object} A native bounding rectangle with numerical left, top, - * right, and bottom. Reported by Firefox to be of object type ClientRect. - * @private - */ -goog.style.getBoundingClientRect_ = function(el) { - var rect = el.getBoundingClientRect(); - // Patch the result in IE only, so that this function can be inlined if - // compiled for non-IE. - if (goog.userAgent.IE) { - - // In IE, most of the time, 2 extra pixels are added to the top and left - // due to the implicit 2-pixel inset border. In IE6/7 quirks mode and - // IE6 standards mode, this border can be overridden by setting the - // document element's border to zero -- thus, we cannot rely on the - // offset always being 2 pixels. - - // In quirks mode, the offset can be determined by querying the body's - // clientLeft/clientTop, but in standards mode, it is found by querying - // the document element's clientLeft/clientTop. Since we already called - // getClientBoundingRect we have already forced a reflow, so it is not - // too expensive just to query them all. - - // See: http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx - var doc = el.ownerDocument; - rect.left -= doc.documentElement.clientLeft + doc.body.clientLeft; - rect.top -= doc.documentElement.clientTop + doc.body.clientTop; - } - return /** @type {Object} */ (rect); -}; - - -/** - * Returns the first parent that could affect the position of a given element. - * @param {Element} element The element to get the offset parent for. - * @return {Element} The first offset parent or null if one cannot be found. - */ -goog.style.getOffsetParent = function(element) { - // element.offsetParent does the right thing in IE7 and below. In other - // browsers it only includes elements with position absolute, relative or - // fixed, not elements with overflow set to auto or scroll. - if (goog.userAgent.IE && !goog.userAgent.isDocumentMode(8)) { - return element.offsetParent; - } - - var doc = goog.dom.getOwnerDocument(element); - var positionStyle = goog.style.getStyle_(element, 'position'); - var skipStatic = positionStyle == 'fixed' || positionStyle == 'absolute'; - for (var parent = element.parentNode; parent && parent != doc; - parent = parent.parentNode) { - positionStyle = - goog.style.getStyle_(/** @type {!Element} */ (parent), 'position'); - skipStatic = skipStatic && positionStyle == 'static' && - parent != doc.documentElement && parent != doc.body; - if (!skipStatic && (parent.scrollWidth > parent.clientWidth || - parent.scrollHeight > parent.clientHeight || - positionStyle == 'fixed' || - positionStyle == 'absolute' || - positionStyle == 'relative')) { - return /** @type {!Element} */ (parent); - } - } - return null; -}; - - -/** - * Calculates and returns the visible rectangle for a given element. Returns a - * box describing the visible portion of the nearest scrollable offset ancestor. - * Coordinates are given relative to the document. - * - * @param {Element} element Element to get the visible rect for. - * @return {goog.math.Box} Bounding elementBox describing the visible rect or - * null if scrollable ancestor isn't inside the visible viewport. - */ -goog.style.getVisibleRectForElement = function(element) { - var visibleRect = new goog.math.Box(0, Infinity, Infinity, 0); - var dom = goog.dom.getDomHelper(element); - var body = dom.getDocument().body; - var documentElement = dom.getDocument().documentElement; - var scrollEl = dom.getDocumentScrollElement(); - - // Determine the size of the visible rect by climbing the dom accounting for - // all scrollable containers. - for (var el = element; el = goog.style.getOffsetParent(el); ) { - // clientWidth is zero for inline block elements in IE. - // on WEBKIT, body element can have clientHeight = 0 and scrollHeight > 0 - if ((!goog.userAgent.IE || el.clientWidth != 0) && - (!goog.userAgent.WEBKIT || el.clientHeight != 0 || el != body) && - // body may have overflow set on it, yet we still get the entire - // viewport. In some browsers, el.offsetParent may be - // document.documentElement, so check for that too. - (el != body && el != documentElement && - goog.style.getStyle_(el, 'overflow') != 'visible')) { - var pos = goog.style.getPageOffset(el); - var client = goog.style.getClientLeftTop(el); - pos.x += client.x; - pos.y += client.y; - - visibleRect.top = Math.max(visibleRect.top, pos.y); - visibleRect.right = Math.min(visibleRect.right, - pos.x + el.clientWidth); - visibleRect.bottom = Math.min(visibleRect.bottom, - pos.y + el.clientHeight); - visibleRect.left = Math.max(visibleRect.left, pos.x); - } - } - - // Clip by window's viewport. - var scrollX = scrollEl.scrollLeft, scrollY = scrollEl.scrollTop; - visibleRect.left = Math.max(visibleRect.left, scrollX); - visibleRect.top = Math.max(visibleRect.top, scrollY); - var winSize = dom.getViewportSize(); - visibleRect.right = Math.min(visibleRect.right, scrollX + winSize.width); - visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + winSize.height); - return visibleRect.top >= 0 && visibleRect.left >= 0 && - visibleRect.bottom > visibleRect.top && - visibleRect.right > visibleRect.left ? - visibleRect : null; -}; - - -/** - * Changes the scroll position of {@code container} with the minimum amount so - * that the content and the borders of the given {@code element} become visible. - * If the element is bigger than the container, its top left corner will be - * aligned as close to the container's top left corner as possible. - * - * @param {Element} element The element to make visible. - * @param {Element} container The container to scroll. - * @param {boolean=} opt_center Whether to center the element in the container. - * Defaults to false. - */ -goog.style.scrollIntoContainerView = function(element, container, opt_center) { - // Absolute position of the element's border's top left corner. - var elementPos = goog.style.getPageOffset(element); - // Absolute position of the container's border's top left corner. - var containerPos = goog.style.getPageOffset(container); - var containerBorder = goog.style.getBorderBox(container); - // Relative pos. of the element's border box to the container's content box. - var relX = elementPos.x - containerPos.x - containerBorder.left; - var relY = elementPos.y - containerPos.y - containerBorder.top; - // How much the element can move in the container, i.e. the difference between - // the element's bottom-right-most and top-left-most position where it's - // fully visible. - var spaceX = container.clientWidth - element.offsetWidth; - var spaceY = container.clientHeight - element.offsetHeight; - - if (opt_center) { - // All browsers round non-integer scroll positions down. - container.scrollLeft += relX - spaceX / 2; - container.scrollTop += relY - spaceY / 2; - } else { - // This formula was designed to give the correct scroll values in the - // following cases: - // - element is higher than container (spaceY < 0) => scroll down by relY - // - element is not higher that container (spaceY >= 0): - // - it is above container (relY < 0) => scroll up by abs(relY) - // - it is below container (relY > spaceY) => scroll down by relY - spaceY - // - it is in the container => don't scroll - container.scrollLeft += Math.min(relX, Math.max(relX - spaceX, 0)); - container.scrollTop += Math.min(relY, Math.max(relY - spaceY, 0)); - } -}; - - -/** - * Returns clientLeft (width of the left border and, if the directionality is - * right to left, the vertical scrollbar) and clientTop as a coordinate object. - * - * @param {Element} el Element to get clientLeft for. - * @return {!goog.math.Coordinate} Client left and top. - */ -goog.style.getClientLeftTop = function(el) { - // NOTE(eae): Gecko prior to 1.9 doesn't support clientTop/Left, see - // https://bugzilla.mozilla.org/show_bug.cgi?id=111207 - if (goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9')) { - var left = parseFloat(goog.style.getComputedStyle(el, 'borderLeftWidth')); - if (goog.style.isRightToLeft(el)) { - var scrollbarWidth = el.offsetWidth - el.clientWidth - left - - parseFloat(goog.style.getComputedStyle(el, 'borderRightWidth')); - left += scrollbarWidth; - } - return new goog.math.Coordinate(left, - parseFloat(goog.style.getComputedStyle(el, 'borderTopWidth'))); - } - - return new goog.math.Coordinate(el.clientLeft, el.clientTop); -}; - - -/** - * Returns a Coordinate object relative to the top-left of the HTML document. - * Implemented as a single function to save having to do two recursive loops in - * opera and safari just to get both coordinates. If you just want one value do - * use goog.style.getPageOffsetLeft() and goog.style.getPageOffsetTop(), but - * note if you call both those methods the tree will be analysed twice. - * - * @param {Element} el Element to get the page offset for. - * @return {!goog.math.Coordinate} The page offset. - */ -goog.style.getPageOffset = function(el) { - var box, doc = goog.dom.getOwnerDocument(el); - var positionStyle = goog.style.getStyle_(el, 'position'); - - // NOTE(eae): Gecko pre 1.9 normally use getBoxObjectFor to calculate the - // position. When invoked for an element with position absolute and a negative - // position though it can be off by one. Therefor the recursive implementation - // is used in those (relatively rare) cases. - var BUGGY_GECKO_BOX_OBJECT = goog.userAgent.GECKO && doc.getBoxObjectFor && - !el.getBoundingClientRect && positionStyle == 'absolute' && - (box = doc.getBoxObjectFor(el)) && (box.screenX < 0 || box.screenY < 0); - - // NOTE(arv): If element is hidden (display none or disconnected or any the - // ancestors are hidden) we get (0,0) by default but we still do the - // accumulation of scroll position. - - // TODO(arv): Should we check if the node is disconnected and in that case - // return (0,0)? - - var pos = new goog.math.Coordinate(0, 0); - var viewportElement = goog.style.getClientViewportElement(doc); - if (el == viewportElement) { - // viewport is always at 0,0 as that defined the coordinate system for this - // function - this avoids special case checks in the code below - return pos; - } - - // IE and Gecko 1.9+. - if (el.getBoundingClientRect) { - box = goog.style.getBoundingClientRect_(el); - // Must add the scroll coordinates in to get the absolute page offset - // of element since getBoundingClientRect returns relative coordinates to - // the viewport. - var scrollCoord = goog.dom.getDomHelper(doc).getDocumentScroll(); - pos.x = box.left + scrollCoord.x; - pos.y = box.top + scrollCoord.y; - - // Gecko prior to 1.9. - } else if (doc.getBoxObjectFor && !BUGGY_GECKO_BOX_OBJECT) { - // Gecko ignores the scroll values for ancestors, up to 1.9. See: - // https://bugzilla.mozilla.org/show_bug.cgi?id=328881 and - // https://bugzilla.mozilla.org/show_bug.cgi?id=330619 - - box = doc.getBoxObjectFor(el); - // TODO(user): Fix the off-by-one error when window is scrolled down - // or right more than 1 pixel. The viewport offset does not move in lock - // step with the window scroll; it moves in increments of 2px and at - // somewhat random intervals. - var vpBox = doc.getBoxObjectFor(viewportElement); - pos.x = box.screenX - vpBox.screenX; - pos.y = box.screenY - vpBox.screenY; - - // Safari, Opera and Camino up to 1.0.4. - } else { - var parent = el; - do { - pos.x += parent.offsetLeft; - pos.y += parent.offsetTop; - // For safari/chrome, we need to add parent's clientLeft/Top as well. - if (parent != el) { - pos.x += parent.clientLeft || 0; - pos.y += parent.clientTop || 0; - } - // In Safari when hit a position fixed element the rest of the offsets - // are not correct. - if (goog.userAgent.WEBKIT && - goog.style.getComputedPosition(parent) == 'fixed') { - pos.x += doc.body.scrollLeft; - pos.y += doc.body.scrollTop; - break; - } - parent = parent.offsetParent; - } while (parent && parent != el); - - // Opera & (safari absolute) incorrectly account for body offsetTop. - if (goog.userAgent.OPERA || (goog.userAgent.WEBKIT && - positionStyle == 'absolute')) { - pos.y -= doc.body.offsetTop; - } - - for (parent = el; (parent = goog.style.getOffsetParent(parent)) && - parent != doc.body && parent != viewportElement; ) { - pos.x -= parent.scrollLeft; - // Workaround for a bug in Opera 9.2 (and earlier) where table rows may - // report an invalid scroll top value. The bug was fixed in Opera 9.5 - // however as that version supports getBoundingClientRect it won't - // trigger this code path. https://bugs.opera.com/show_bug.cgi?id=249965 - if (!goog.userAgent.OPERA || parent.tagName != 'TR') { - pos.y -= parent.scrollTop; - } - } - } - - return pos; -}; - - -/** - * Returns the left coordinate of an element relative to the HTML document - * @param {Element} el Elements. - * @return {number} The left coordinate. - */ -goog.style.getPageOffsetLeft = function(el) { - return goog.style.getPageOffset(el).x; -}; - - -/** - * Returns the top coordinate of an element relative to the HTML document - * @param {Element} el Elements. - * @return {number} The top coordinate. - */ -goog.style.getPageOffsetTop = function(el) { - return goog.style.getPageOffset(el).y; -}; - - -/** - * Returns a Coordinate object relative to the top-left of an HTML document - * in an ancestor frame of this element. Used for measuring the position of - * an element inside a frame relative to a containing frame. - * - * @param {Element} el Element to get the page offset for. - * @param {Window} relativeWin The window to measure relative to. If relativeWin - * is not in the ancestor frame chain of the element, we measure relative to - * the top-most window. - * @return {!goog.math.Coordinate} The page offset. - */ -goog.style.getFramedPageOffset = function(el, relativeWin) { - var position = new goog.math.Coordinate(0, 0); - - // Iterate up the ancestor frame chain, keeping track of the current window - // and the current element in that window. - var currentWin = goog.dom.getWindow(goog.dom.getOwnerDocument(el)); - var currentEl = el; - do { - // if we're at the top window, we want to get the page offset. - // if we're at an inner frame, we only want to get the window position - // so that we can determine the actual page offset in the context of - // the outer window. - var offset = currentWin == relativeWin ? - goog.style.getPageOffset(currentEl) : - goog.style.getClientPosition(currentEl); - - position.x += offset.x; - position.y += offset.y; - } while (currentWin && currentWin != relativeWin && - (currentEl = currentWin.frameElement) && - (currentWin = currentWin.parent)); - - return position; -}; - - -/** - * Translates the specified rect relative to origBase page, for newBase page. - * If origBase and newBase are the same, this function does nothing. - * - * @param {goog.math.Rect} rect The source rectangle relative to origBase page, - * and it will have the translated result. - * @param {goog.dom.DomHelper} origBase The DomHelper for the input rectangle. - * @param {goog.dom.DomHelper} newBase The DomHelper for the resultant - * coordinate. This must be a DOM for an ancestor frame of origBase - * or the same as origBase. - */ -goog.style.translateRectForAnotherFrame = function(rect, origBase, newBase) { - if (origBase.getDocument() != newBase.getDocument()) { - var body = origBase.getDocument().body; - var pos = goog.style.getFramedPageOffset(body, newBase.getWindow()); - - // Adjust Body's margin. - pos = goog.math.Coordinate.difference(pos, goog.style.getPageOffset(body)); - - if (goog.userAgent.IE && !origBase.isCss1CompatMode()) { - pos = goog.math.Coordinate.difference(pos, origBase.getDocumentScroll()); - } - - rect.left += pos.x; - rect.top += pos.y; - } -}; - - -/** - * Returns the position of an element relative to another element in the - * document. A relative to B - * @param {Element|Event|goog.events.Event} a Element or mouse event whose - * position we're calculating. - * @param {Element|Event|goog.events.Event} b Element or mouse event position - * is relative to. - * @return {!goog.math.Coordinate} The relative position. - */ -goog.style.getRelativePosition = function(a, b) { - var ap = goog.style.getClientPosition(a); - var bp = goog.style.getClientPosition(b); - return new goog.math.Coordinate(ap.x - bp.x, ap.y - bp.y); -}; - - -/** - * Returns the position of the event or the element's border box relative to - * the client viewport. - * @param {Element|Event|goog.events.Event} el Element or a mouse / touch event. - * @return {!goog.math.Coordinate} The position. - */ -goog.style.getClientPosition = function(el) { - var pos = new goog.math.Coordinate; - if (el.nodeType == goog.dom.NodeType.ELEMENT) { - if (el.getBoundingClientRect) { // IE and Gecko 1.9+ - var box = goog.style.getBoundingClientRect_(/** @type {Element} */ (el)); - pos.x = box.left; - pos.y = box.top; - } else { - var scrollCoord = goog.dom.getDomHelper(/** @type {Element} */ (el)) - .getDocumentScroll(); - var pageCoord = goog.style.getPageOffset(/** @type {Element} */ (el)); - pos.x = pageCoord.x - scrollCoord.x; - pos.y = pageCoord.y - scrollCoord.y; - } - } else { - var isAbstractedEvent = goog.isFunction(el.getBrowserEvent); - var targetEvent = el; - - if (el.targetTouches) { - targetEvent = el.targetTouches[0]; - } else if (isAbstractedEvent && el.getBrowserEvent().targetTouches) { - targetEvent = el.getBrowserEvent().targetTouches[0]; - } - - pos.x = targetEvent.clientX; - pos.y = targetEvent.clientY; - } - - return pos; -}; - - -/** - * Moves an element to the given coordinates relative to the client viewport. - * @param {Element} el Absolutely positioned element to set page offset for. - * It must be in the document. - * @param {number|goog.math.Coordinate} x Left position of the element's margin - * box or a coordinate object. - * @param {number=} opt_y Top position of the element's margin box. - */ -goog.style.setPageOffset = function(el, x, opt_y) { - // Get current pageoffset - var cur = goog.style.getPageOffset(el); - - if (x instanceof goog.math.Coordinate) { - opt_y = x.y; - x = x.x; - } - - // NOTE(arv): We cannot allow strings for x and y. We could but that would - // require us to manually transform between different units - - // Work out deltas - var dx = x - cur.x; - var dy = opt_y - cur.y; - - // Set position to current left/top + delta - goog.style.setPosition(el, el.offsetLeft + dx, el.offsetTop + dy); -}; - - -/** - * Sets the width/height values of an element. If an argument is numeric, - * or a goog.math.Size is passed, it is assumed to be pixels and will add - * 'px' after converting it to an integer in string form. (This just sets the - * CSS width and height properties so it might set content-box or border-box - * size depending on the box model the browser is using.) - * - * @param {Element} element Element to set the size of. - * @param {string|number|goog.math.Size} w Width of the element, or a - * size object. - * @param {string|number=} opt_h Height of the element. Required if w is not a - * size object. - */ -goog.style.setSize = function(element, w, opt_h) { - var h; - if (w instanceof goog.math.Size) { - h = w.height; - w = w.width; - } else { - if (opt_h == undefined) { - throw Error('missing height argument'); - } - h = opt_h; - } - - goog.style.setWidth(element, /** @type {string|number} */ (w)); - goog.style.setHeight(element, /** @type {string|number} */ (h)); -}; - - -/** - * Helper function to create a string to be set into a pixel-value style - * property of an element. Can round to the nearest integer value. - * - * @param {string|number} value The style value to be used. If a number, - * 'px' will be appended, otherwise the value will be applied directly. - * @param {boolean} round Whether to round the nearest integer (if property - * is a number). - * @return {string} The string value for the property. - * @private - */ -goog.style.getPixelStyleValue_ = function(value, round) { - if (typeof value == 'number') { - value = (round ? Math.round(value) : value) + 'px'; - } - - return value; -}; - - -/** - * Set the height of an element. Sets the element's style property. - * @param {Element} element Element to set the height of. - * @param {string|number} height The height value to set. If a number, 'px' - * will be appended, otherwise the value will be applied directly. - */ -goog.style.setHeight = function(element, height) { - element.style.height = goog.style.getPixelStyleValue_(height, true); -}; - - -/** - * Set the width of an element. Sets the element's style property. - * @param {Element} element Element to set the height of. - * @param {string|number} width The width value to set. If a number, 'px' - * will be appended, otherwise the value will be applied directly. - */ -goog.style.setWidth = function(element, width) { - element.style.width = goog.style.getPixelStyleValue_(width, true); -}; - - -/** - * Gets the height and width of an element, even if its display is none. - * Specifically, this returns the height and width of the border box, - * irrespective of the box model in effect. - * @param {Element} element Element to get size of. - * @return {!goog.math.Size} Object with width/height properties. - */ -goog.style.getSize = function(element) { - if (goog.style.getStyle_(element, 'display') != 'none') { - return goog.style.getSizeWithDisplay_(element); - } - - var style = element.style; - var originalDisplay = style.display; - var originalVisibility = style.visibility; - var originalPosition = style.position; - - style.visibility = 'hidden'; - style.position = 'absolute'; - style.display = 'inline'; - - var size = goog.style.getSizeWithDisplay_(element); - - style.display = originalDisplay; - style.position = originalPosition; - style.visibility = originalVisibility; - - return size; -}; - - -/** - * Gets the height and with of an element when the display is not none. - * @param {Element} element Element to get size of. - * @return {!goog.math.Size} Object with width/height properties. - * @private - */ -goog.style.getSizeWithDisplay_ = function(element) { - var offsetWidth = element.offsetWidth; - var offsetHeight = element.offsetHeight; - var webkitOffsetsZero = - goog.userAgent.WEBKIT && !offsetWidth && !offsetHeight; - if ((!goog.isDef(offsetWidth) || webkitOffsetsZero) && - element.getBoundingClientRect) { - // Fall back to calling getBoundingClientRect when offsetWidth or - // offsetHeight are not defined, or when they are zero in WebKit browsers. - // This makes sure that we return for the correct size for SVG elements, but - // will still return 0 on Webkit prior to 534.8, see - // http://trac.webkit.org/changeset/67252. - var clientRect = goog.style.getBoundingClientRect_(element); - return new goog.math.Size(clientRect.right - clientRect.left, - clientRect.bottom - clientRect.top); - } - return new goog.math.Size(offsetWidth, offsetHeight); -}; - - -/** - * Returns a bounding rectangle for a given element in page space. - * @param {Element} element Element to get bounds of. - * @return {!goog.math.Rect} Bounding rectangle for the element. - */ -goog.style.getBounds = function(element) { - var o = goog.style.getPageOffset(element); - var s = goog.style.getSize(element); - return new goog.math.Rect(o.x, o.y, s.width, s.height); -}; - - -/** - * Converts a CSS selector in the form style-property to styleProperty. - * @param {*} selector CSS Selector. - * @return {string} Camel case selector. - * @deprecated Use goog.string.toCamelCase instead. - */ -goog.style.toCamelCase = function(selector) { - return goog.string.toCamelCase(String(selector)); -}; - - -/** - * Converts a CSS selector in the form styleProperty to style-property. - * @param {string} selector Camel case selector. - * @return {string} Selector cased. - * @deprecated Use goog.string.toSelectorCase instead. - */ -goog.style.toSelectorCase = function(selector) { - return goog.string.toSelectorCase(selector); -}; - - -/** - * Gets the opacity of a node (x-browser). This gets the inline style opacity - * of the node, and does not take into account the cascaded or the computed - * style for this node. - * @param {Element} el Element whose opacity has to be found. - * @return {number|string} Opacity between 0 and 1 or an empty string {@code ''} - * if the opacity is not set. - */ -goog.style.getOpacity = function(el) { - var style = el.style; - var result = ''; - if ('opacity' in style) { - result = style.opacity; - } else if ('MozOpacity' in style) { - result = style.MozOpacity; - } else if ('filter' in style) { - var match = style.filter.match(/alpha\(opacity=([\d.]+)\)/); - if (match) { - result = String(match[1] / 100); - } - } - return result == '' ? result : Number(result); -}; - - -/** - * Sets the opacity of a node (x-browser). - * @param {Element} el Elements whose opacity has to be set. - * @param {number|string} alpha Opacity between 0 and 1 or an empty string - * {@code ''} to clear the opacity. - */ -goog.style.setOpacity = function(el, alpha) { - var style = el.style; - if ('opacity' in style) { - style.opacity = alpha; - } else if ('MozOpacity' in style) { - style.MozOpacity = alpha; - } else if ('filter' in style) { - // TODO(arv): Overwriting the filter might have undesired side effects. - if (alpha === '') { - style.filter = ''; - } else { - style.filter = 'alpha(opacity=' + alpha * 100 + ')'; - } - } -}; - - -/** - * Sets the background of an element to a transparent image in a browser- - * independent manner. - * - * This function does not support repeating backgrounds or alternate background - * positions to match the behavior of Internet Explorer. It also does not - * support sizingMethods other than crop since they cannot be replicated in - * browsers other than Internet Explorer. - * - * @param {Element} el The element to set background on. - * @param {string} src The image source URL. - */ -goog.style.setTransparentBackgroundImage = function(el, src) { - var style = el.style; - // It is safe to use the style.filter in IE only. In Safari 'filter' is in - // style object but access to style.filter causes it to throw an exception. - // Note: IE8 supports images with an alpha channel. - if (goog.userAgent.IE && !goog.userAgent.isVersion('8')) { - // See TODO in setOpacity. - style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + - 'src="' + src + '", sizingMethod="crop")'; - } else { - // Set style properties individually instead of using background shorthand - // to prevent overwriting a pre-existing background color. - style.backgroundImage = 'url(' + src + ')'; - style.backgroundPosition = 'top left'; - style.backgroundRepeat = 'no-repeat'; - } -}; - - -/** - * Clears the background image of an element in a browser independent manner. - * @param {Element} el The element to clear background image for. - */ -goog.style.clearTransparentBackgroundImage = function(el) { - var style = el.style; - if ('filter' in style) { - // See TODO in setOpacity. - style.filter = ''; - } else { - // Set style properties individually instead of using background shorthand - // to prevent overwriting a pre-existing background color. - style.backgroundImage = 'none'; - } -}; - - -/** - * Shows or hides an element from the page. Hiding the element is done by - * setting the display property to "none", removing the element from the - * rendering hierarchy so it takes up no space. To show the element, the default - * inherited display property is restored (defined either in stylesheets or by - * the browser's default style rules.) - * - * Caveat 1: if the inherited display property for the element is set to "none" - * by the stylesheets, that is the property that will be restored by a call to - * showElement(), effectively toggling the display between "none" and "none". - * - * Caveat 2: if the element display style is set inline (by setting either - * element.style.display or a style attribute in the HTML), a call to - * showElement will clear that setting and defer to the inherited style in the - * stylesheet. - * @param {Element} el Element to show or hide. - * @param {*} display True to render the element in its default style, - * false to disable rendering the element. - */ -goog.style.showElement = function(el, display) { - el.style.display = display ? '' : 'none'; -}; - - -/** - * Test whether the given element has been shown or hidden via a call to - * {@link #showElement}. - * - * Note this is strictly a companion method for a call - * to {@link #showElement} and the same caveats apply; in particular, this - * method does not guarantee that the return value will be consistent with - * whether or not the element is actually visible. - * - * @param {Element} el The element to test. - * @return {boolean} Whether the element has been shown. - * @see #showElement - */ -goog.style.isElementShown = function(el) { - return el.style.display != 'none'; -}; - - -/** - * Installs the styles string into the window that contains opt_element. If - * opt_element is null, the main window is used. - * @param {string} stylesString The style string to install. - * @param {Node=} opt_node Node whose parent document should have the - * styles installed. - * @return {Element|StyleSheet} The style element created. - */ -goog.style.installStyles = function(stylesString, opt_node) { - var dh = goog.dom.getDomHelper(opt_node); - var styleSheet = null; - - if (goog.userAgent.IE) { - styleSheet = dh.getDocument().createStyleSheet(); - goog.style.setStyles(styleSheet, stylesString); - } else { - var head = dh.getElementsByTagNameAndClass('head')[0]; - - // In opera documents are not guaranteed to have a head element, thus we - // have to make sure one exists before using it. - if (!head) { - var body = dh.getElementsByTagNameAndClass('body')[0]; - head = dh.createDom('head'); - body.parentNode.insertBefore(head, body); - } - styleSheet = dh.createDom('style'); - // NOTE(user): Setting styles after the style element has been appended - // to the head results in a nasty Webkit bug in certain scenarios. Please - // refer to https://bugs.webkit.org/show_bug.cgi?id=26307 for additional - // details. - goog.style.setStyles(styleSheet, stylesString); - dh.appendChild(head, styleSheet); - } - return styleSheet; -}; - - -/** - * Removes the styles added by {@link #installStyles}. - * @param {Element|StyleSheet} styleSheet The value returned by - * {@link #installStyles}. - */ -goog.style.uninstallStyles = function(styleSheet) { - var node = styleSheet.ownerNode || styleSheet.owningElement || - /** @type {Element} */ (styleSheet); - goog.dom.removeNode(node); -}; - - -/** - * Sets the content of a style element. The style element can be any valid - * style element. This element will have its content completely replaced by - * the new stylesString. - * @param {Element|StyleSheet} element A stylesheet element as returned by - * installStyles. - * @param {string} stylesString The new content of the stylesheet. - */ -goog.style.setStyles = function(element, stylesString) { - if (goog.userAgent.IE) { - // Adding the selectors individually caused the browser to hang if the - // selector was invalid or there were CSS comments. Setting the cssText of - // the style node works fine and ignores CSS that IE doesn't understand - element.cssText = stylesString; - } else { - var propToSet = goog.userAgent.WEBKIT ? 'innerText' : 'innerHTML'; - element[propToSet] = stylesString; - } -}; - - -/** - * Sets 'white-space: pre-wrap' for a node (x-browser). - * - * There are as many ways of specifying pre-wrap as there are browsers. - * - * CSS3/IE8: white-space: pre-wrap; - * Mozilla: white-space: -moz-pre-wrap; - * Opera: white-space: -o-pre-wrap; - * IE6/7: white-space: pre; word-wrap: break-word; - * - * @param {Element} el Element to enable pre-wrap for. - */ -goog.style.setPreWrap = function(el) { - var style = el.style; - if (goog.userAgent.IE && !goog.userAgent.isVersion('8')) { - style.whiteSpace = 'pre'; - style.wordWrap = 'break-word'; - } else if (goog.userAgent.GECKO) { - style.whiteSpace = '-moz-pre-wrap'; - } else { - style.whiteSpace = 'pre-wrap'; - } -}; - - -/** - * Sets 'display: inline-block' for an element (cross-browser). - * @param {Element} el Element to which the inline-block display style is to be - * applied. - * @see ../demos/inline_block_quirks.html - * @see ../demos/inline_block_standards.html - */ -goog.style.setInlineBlock = function(el) { - var style = el.style; - // Without position:relative, weirdness ensues. Just accept it and move on. - style.position = 'relative'; - - if (goog.userAgent.IE && !goog.userAgent.isVersion('8')) { - // IE8 supports inline-block so fall through to the else - // Zoom:1 forces hasLayout, display:inline gives inline behavior. - style.zoom = '1'; - style.display = 'inline'; - } else if (goog.userAgent.GECKO) { - // Pre-Firefox 3, Gecko doesn't support inline-block, but -moz-inline-box - // is close enough. - style.display = goog.userAgent.isVersion('1.9a') ? 'inline-block' : - '-moz-inline-box'; - } else { - // Opera, Webkit, and Safari seem to do OK with the standard inline-block - // style. - style.display = 'inline-block'; - } -}; - - -/** - * Returns true if the element is using right to left (rtl) direction. - * @param {Element} el The element to test. - * @return {boolean} True for right to left, false for left to right. - */ -goog.style.isRightToLeft = function(el) { - return 'rtl' == goog.style.getStyle_(el, 'direction'); -}; - - -/** - * The CSS style property corresponding to an element being - * unselectable on the current browser platform (null if none). - * Opera and IE instead use a DOM attribute 'unselectable'. - * @type {?string} - * @private - */ -goog.style.unselectableStyle_ = - goog.userAgent.GECKO ? 'MozUserSelect' : - goog.userAgent.WEBKIT ? 'WebkitUserSelect' : - null; - - -/** - * Returns true if the element is set to be unselectable, false otherwise. - * Note that on some platforms (e.g. Mozilla), even if an element isn't set - * to be unselectable, it will behave as such if any of its ancestors is - * unselectable. - * @param {Element} el Element to check. - * @return {boolean} Whether the element is set to be unselectable. - */ -goog.style.isUnselectable = function(el) { - if (goog.style.unselectableStyle_) { - return el.style[goog.style.unselectableStyle_].toLowerCase() == 'none'; - } else if (goog.userAgent.IE || goog.userAgent.OPERA) { - return el.getAttribute('unselectable') == 'on'; - } - return false; -}; - - -/** - * Makes the element and its descendants selectable or unselectable. Note - * that on some platforms (e.g. Mozilla), even if an element isn't set to - * be unselectable, it will behave as such if any of its ancestors is - * unselectable. - * @param {Element} el The element to alter. - * @param {boolean} unselectable Whether the element and its descendants - * should be made unselectable. - * @param {boolean=} opt_noRecurse Whether to only alter the element's own - * selectable state, and leave its descendants alone; defaults to false. - */ -goog.style.setUnselectable = function(el, unselectable, opt_noRecurse) { - // TODO(attila): Do we need all of TR_DomUtil.makeUnselectable() in Closure? - var descendants = !opt_noRecurse ? el.getElementsByTagName('*') : null; - var name = goog.style.unselectableStyle_; - if (name) { - // Add/remove the appropriate CSS style to/from the element and its - // descendants. - var value = unselectable ? 'none' : ''; - el.style[name] = value; - if (descendants) { - for (var i = 0, descendant; descendant = descendants[i]; i++) { - descendant.style[name] = value; - } - } - } else if (goog.userAgent.IE || goog.userAgent.OPERA) { - // Toggle the 'unselectable' attribute on the element and its descendants. - var value = unselectable ? 'on' : ''; - el.setAttribute('unselectable', value); - if (descendants) { - for (var i = 0, descendant; descendant = descendants[i]; i++) { - descendant.setAttribute('unselectable', value); - } - } - } -}; - - -/** - * Gets the border box size for an element. - * @param {Element} element The element to get the size for. - * @return {!goog.math.Size} The border box size. - */ -goog.style.getBorderBoxSize = function(element) { - return new goog.math.Size(element.offsetWidth, element.offsetHeight); -}; - - -/** - * Sets the border box size of an element. This is potentially expensive in IE - * if the document is CSS1Compat mode - * @param {Element} element The element to set the size on. - * @param {goog.math.Size} size The new size. - */ -goog.style.setBorderBoxSize = function(element, size) { - var doc = goog.dom.getOwnerDocument(element); - var isCss1CompatMode = goog.dom.getDomHelper(doc).isCss1CompatMode(); - - if (goog.userAgent.IE && - (!isCss1CompatMode || !goog.userAgent.isVersion('8'))) { - var style = element.style; - if (isCss1CompatMode) { - var paddingBox = goog.style.getPaddingBox(element); - var borderBox = goog.style.getBorderBox(element); - style.pixelWidth = size.width - borderBox.left - paddingBox.left - - paddingBox.right - borderBox.right; - style.pixelHeight = size.height - borderBox.top - paddingBox.top - - paddingBox.bottom - borderBox.bottom; - } else { - style.pixelWidth = size.width; - style.pixelHeight = size.height; - } - } else { - goog.style.setBoxSizingSize_(element, size, 'border-box'); - } -}; - - -/** - * Gets the content box size for an element. This is potentially expensive in - * all browsers. - * @param {Element} element The element to get the size for. - * @return {!goog.math.Size} The content box size. - */ -goog.style.getContentBoxSize = function(element) { - var doc = goog.dom.getOwnerDocument(element); - var ieCurrentStyle = goog.userAgent.IE && element.currentStyle; - if (ieCurrentStyle && - goog.dom.getDomHelper(doc).isCss1CompatMode() && - ieCurrentStyle.width != 'auto' && ieCurrentStyle.height != 'auto' && - !ieCurrentStyle.boxSizing) { - // If IE in CSS1Compat mode than just use the width and height. - // If we have a boxSizing then fall back on measuring the borders etc. - var width = goog.style.getIePixelValue_(element, ieCurrentStyle.width, - 'width', 'pixelWidth'); - var height = goog.style.getIePixelValue_(element, ieCurrentStyle.height, - 'height', 'pixelHeight'); - return new goog.math.Size(width, height); - } else { - var borderBoxSize = goog.style.getBorderBoxSize(element); - var paddingBox = goog.style.getPaddingBox(element); - var borderBox = goog.style.getBorderBox(element); - return new goog.math.Size(borderBoxSize.width - - borderBox.left - paddingBox.left - - paddingBox.right - borderBox.right, - borderBoxSize.height - - borderBox.top - paddingBox.top - - paddingBox.bottom - borderBox.bottom); - } -}; - - -/** - * Sets the content box size of an element. This is potentially expensive in IE - * if the document is BackCompat mode. - * @param {Element} element The element to set the size on. - * @param {goog.math.Size} size The new size. - */ -goog.style.setContentBoxSize = function(element, size) { - var doc = goog.dom.getOwnerDocument(element); - var isCss1CompatMode = goog.dom.getDomHelper(doc).isCss1CompatMode(); - if (goog.userAgent.IE && - (!isCss1CompatMode || !goog.userAgent.isVersion('8'))) { - var style = element.style; - if (isCss1CompatMode) { - style.pixelWidth = size.width; - style.pixelHeight = size.height; - } else { - var paddingBox = goog.style.getPaddingBox(element); - var borderBox = goog.style.getBorderBox(element); - style.pixelWidth = size.width + borderBox.left + paddingBox.left + - paddingBox.right + borderBox.right; - style.pixelHeight = size.height + borderBox.top + paddingBox.top + - paddingBox.bottom + borderBox.bottom; - } - } else { - goog.style.setBoxSizingSize_(element, size, 'content-box'); - } -}; - - -/** - * Helper function that sets the box sizing as well as the width and height - * @param {Element} element The element to set the size on. - * @param {goog.math.Size} size The new size to set. - * @param {string} boxSizing The box-sizing value. - * @private - */ -goog.style.setBoxSizingSize_ = function(element, size, boxSizing) { - var style = element.style; - if (goog.userAgent.GECKO) { - style.MozBoxSizing = boxSizing; - } else if (goog.userAgent.WEBKIT) { - style.WebkitBoxSizing = boxSizing; - } else { - // Includes IE8 and Opera 9.50+ - style.boxSizing = boxSizing; - } - - // Setting this to a negative value will throw an exception on IE - // (and doesn't do anything different than setting it to 0). - style.width = Math.max(size.width, 0) + 'px'; - style.height = Math.max(size.height, 0) + 'px'; -}; - - -/** - * IE specific function that converts a non pixel unit to pixels. - * @param {Element} element The element to convert the value for. - * @param {string} value The current value as a string. The value must not be - * ''. - * @param {string} name The CSS property name to use for the converstion. This - * should be 'left', 'top', 'width' or 'height'. - * @param {string} pixelName The CSS pixel property name to use to get the - * value in pixels. - * @return {number} The value in pixels. - * @private - */ -goog.style.getIePixelValue_ = function(element, value, name, pixelName) { - // Try if we already have a pixel value. IE does not do half pixels so we - // only check if it matches a number followed by 'px'. - if (/^\d+px?$/.test(value)) { - return parseInt(value, 10); - } else { - var oldStyleValue = element.style[name]; - var oldRuntimeValue = element.runtimeStyle[name]; - // set runtime style to prevent changes - element.runtimeStyle[name] = element.currentStyle[name]; - element.style[name] = value; - var pixelValue = element.style[pixelName]; - // restore - element.style[name] = oldStyleValue; - element.runtimeStyle[name] = oldRuntimeValue; - return pixelValue; - } -}; - - -/** - * Helper function for getting the pixel padding or margin for IE. - * @param {Element} element The element to get the padding for. - * @param {string} propName The property name. - * @return {number} The pixel padding. - * @private - */ -goog.style.getIePixelDistance_ = function(element, propName) { - return goog.style.getIePixelValue_(element, - goog.style.getCascadedStyle(element, propName), - 'left', 'pixelLeft'); -}; - - -/** - * Gets the computed paddings or margins (on all sides) in pixels. - * @param {Element} element The element to get the padding for. - * @param {string} stylePrefix Pass 'padding' to retrieve the padding box, - * or 'margin' to retrieve the margin box. - * @return {!goog.math.Box} The computed paddings or margins. - * @private - */ -goog.style.getBox_ = function(element, stylePrefix) { - if (goog.userAgent.IE) { - var left = goog.style.getIePixelDistance_(element, stylePrefix + 'Left'); - var right = goog.style.getIePixelDistance_(element, stylePrefix + 'Right'); - var top = goog.style.getIePixelDistance_(element, stylePrefix + 'Top'); - var bottom = goog.style.getIePixelDistance_( - element, stylePrefix + 'Bottom'); - return new goog.math.Box(top, right, bottom, left); - } else { - // On non-IE browsers, getComputedStyle is always non-null. - var left = /** @type {string} */ ( - goog.style.getComputedStyle(element, stylePrefix + 'Left')); - var right = /** @type {string} */ ( - goog.style.getComputedStyle(element, stylePrefix + 'Right')); - var top = /** @type {string} */ ( - goog.style.getComputedStyle(element, stylePrefix + 'Top')); - var bottom = /** @type {string} */ ( - goog.style.getComputedStyle(element, stylePrefix + 'Bottom')); - - // NOTE(arv): Gecko can return floating point numbers for the computed - // style values. - return new goog.math.Box(parseFloat(top), - parseFloat(right), - parseFloat(bottom), - parseFloat(left)); - } -}; - - -/** - * Gets the computed paddings (on all sides) in pixels. - * @param {Element} element The element to get the padding for. - * @return {!goog.math.Box} The computed paddings. - */ -goog.style.getPaddingBox = function(element) { - return goog.style.getBox_(element, 'padding'); -}; - - -/** - * Gets the computed margins (on all sides) in pixels. - * @param {Element} element The element to get the margins for. - * @return {!goog.math.Box} The computed margins. - */ -goog.style.getMarginBox = function(element) { - return goog.style.getBox_(element, 'margin'); -}; - - -/** - * A map used to map the border width keywords to a pixel width. - * @type {Object} - * @private - */ -goog.style.ieBorderWidthKeywords_ = { - 'thin': 2, - 'medium': 4, - 'thick': 6 -}; - - -/** - * Helper function for IE to get the pixel border. - * @param {Element} element The element to get the pixel border for. - * @param {string} prop The part of the property name. - * @return {number} The value in pixels. - * @private - */ -goog.style.getIePixelBorder_ = function(element, prop) { - if (goog.style.getCascadedStyle(element, prop + 'Style') == 'none') { - return 0; - } - var width = goog.style.getCascadedStyle(element, prop + 'Width'); - if (width in goog.style.ieBorderWidthKeywords_) { - return goog.style.ieBorderWidthKeywords_[width]; - } - return goog.style.getIePixelValue_(element, width, 'left', 'pixelLeft'); -}; - - -/** - * Gets the computed border widths (on all sides) in pixels - * @param {Element} element The element to get the border widths for. - * @return {!goog.math.Box} The computed border widths. - */ -goog.style.getBorderBox = function(element) { - if (goog.userAgent.IE) { - var left = goog.style.getIePixelBorder_(element, 'borderLeft'); - var right = goog.style.getIePixelBorder_(element, 'borderRight'); - var top = goog.style.getIePixelBorder_(element, 'borderTop'); - var bottom = goog.style.getIePixelBorder_(element, 'borderBottom'); - return new goog.math.Box(top, right, bottom, left); - } else { - // On non-IE browsers, getComputedStyle is always non-null. - var left = /** @type {string} */ ( - goog.style.getComputedStyle(element, 'borderLeftWidth')); - var right = /** @type {string} */ ( - goog.style.getComputedStyle(element, 'borderRightWidth')); - var top = /** @type {string} */ ( - goog.style.getComputedStyle(element, 'borderTopWidth')); - var bottom = /** @type {string} */ ( - goog.style.getComputedStyle(element, 'borderBottomWidth')); - - return new goog.math.Box(parseFloat(top), - parseFloat(right), - parseFloat(bottom), - parseFloat(left)); - } -}; - - -/** - * Returns the font face applied to a given node. Opera and IE should return - * the font actually displayed. Firefox returns the author's most-preferred - * font (whether the browser is capable of displaying it or not.) - * @param {Element} el The element whose font family is returned. - * @return {string} The font family applied to el. - */ -goog.style.getFontFamily = function(el) { - var doc = goog.dom.getOwnerDocument(el); - var font = ''; - if (doc.body.createTextRange) { - var range = doc.body.createTextRange(); - range.moveToElementText(el); - /** @preserveTry */ - try { - font = range.queryCommandValue('FontName'); - } catch (e) { - // This is a workaround for a awkward exception. - // On some IE, there is an exception coming from it. - // The error description from this exception is: - // This window has already been registered as a drop target - // This is bogus description, likely due to a bug in ie. - font = ''; - } - } - if (!font) { - // Note if for some reason IE can't derive FontName with a TextRange, we - // fallback to using currentStyle - font = goog.style.getStyle_(el, 'fontFamily'); - } - - // Firefox returns the applied font-family string (author's list of - // preferred fonts.) We want to return the most-preferred font, in lieu of - // the *actually* applied font. - var fontsArray = font.split(','); - if (fontsArray.length > 1) font = fontsArray[0]; - - // Sanitize for x-browser consistency: - // Strip quotes because browsers aren't consistent with how they're - // applied; Opera always encloses, Firefox sometimes, and IE never. - return goog.string.stripQuotes(font, '"\''); -}; - - -/** - * Regular expression used for getLengthUnits. - * @type {RegExp} - * @private - */ -goog.style.lengthUnitRegex_ = /[^\d]+$/; - - -/** - * Returns the units used for a CSS length measurement. - * @param {string} value A CSS length quantity. - * @return {?string} The units of measurement. - */ -goog.style.getLengthUnits = function(value) { - var units = value.match(goog.style.lengthUnitRegex_); - return units && units[0] || null; -}; - - -/** - * Map of absolute CSS length units - * @type {Object} - * @private - */ -goog.style.ABSOLUTE_CSS_LENGTH_UNITS_ = { - 'cm' : 1, - 'in' : 1, - 'mm' : 1, - 'pc' : 1, - 'pt' : 1 -}; - - -/** - * Map of relative CSS length units that can be accurately converted to px - * font-size values using getIePixelValue_. Only units that are defined in - * relation to a font size are convertible (%, small, etc. are not). - * @type {Object} - * @private - */ -goog.style.CONVERTIBLE_RELATIVE_CSS_UNITS_ = { - 'em' : 1, - 'ex' : 1 -}; - - -/** - * Returns the font size, in pixels, of text in an element. - * @param {Element} el The element whose font size is returned. - * @return {number} The font size (in pixels). - */ -goog.style.getFontSize = function(el) { - var fontSize = goog.style.getStyle_(el, 'fontSize'); - var sizeUnits = goog.style.getLengthUnits(fontSize); - if (fontSize && 'px' == sizeUnits) { - // NOTE(user): This could be parseFloat instead, but IE doesn't return - // decimal fractions in getStyle_ and Firefox reports the fractions, but - // ignores them when rendering. Interestingly enough, when we force the - // issue and size something to e.g., 50% of 25px, the browsers round in - // opposite directions with Firefox reporting 12px and IE 13px. I punt. - return parseInt(fontSize, 10); - } - - // In IE, we can convert absolute length units to a px value using - // goog.style.getIePixelValue_. Units defined in relation to a font size - // (em, ex) are applied relative to the element's parentNode and can also - // be converted. - if (goog.userAgent.IE) { - if (sizeUnits in goog.style.ABSOLUTE_CSS_LENGTH_UNITS_) { - return goog.style.getIePixelValue_(el, - fontSize, - 'left', - 'pixelLeft'); - } else if (el.parentNode && - el.parentNode.nodeType == goog.dom.NodeType.ELEMENT && - sizeUnits in goog.style.CONVERTIBLE_RELATIVE_CSS_UNITS_) { - // Check the parent size - if it is the same it means the relative size - // value is inherited and we therefore don't want to count it twice. If - // it is different, this element either has explicit style or has a CSS - // rule applying to it. - var parentElement = /** @type {Element} */ (el.parentNode); - var parentSize = goog.style.getStyle_(parentElement, 'fontSize'); - return goog.style.getIePixelValue_(parentElement, - fontSize == parentSize ? - '1em' : fontSize, - 'left', - 'pixelLeft'); - } - } - - // Sometimes we can't cleanly find the font size (some units relative to a - // node's parent's font size are difficult: %, smaller et al), so we create - // an invisible, absolutely-positioned span sized to be the height of an 'M' - // rendered in its parent's (i.e., our target element's) font size. This is - // the definition of CSS's font size attribute. - var sizeElement = goog.dom.createDom( - 'span', - {'style': 'visibility:hidden;position:absolute;' + - 'line-height:0;padding:0;margin:0;border:0;height:1em;'}); - goog.dom.appendChild(el, sizeElement); - fontSize = sizeElement.offsetHeight; - goog.dom.removeNode(sizeElement); - - return fontSize; -}; - - -/** - * Parses a style attribute value. Converts CSS property names to camel case. - * @param {string} value The style attribute value. - * @return {!Object} Map of CSS properties to string values. - */ -goog.style.parseStyleAttribute = function(value) { - var result = {}; - goog.array.forEach(value.split(/\s*;\s*/), function(pair) { - var keyValue = pair.split(/\s*:\s*/); - if (keyValue.length == 2) { - result[goog.string.toCamelCase(keyValue[0].toLowerCase())] = keyValue[1]; - } - }); - return result; -}; - - -/** - * Reverse of parseStyleAttribute; that is, takes a style object and returns the - * corresponding attribute value. Converts camel case property names to proper - * CSS selector names. - * @param {Object} obj Map of CSS properties to values. - * @return {string} The style attribute value. - */ -goog.style.toStyleAttribute = function(obj) { - var buffer = []; - goog.object.forEach(obj, function(value, key) { - buffer.push(goog.string.toSelectorCase(key), ':', value, ';'); - }); - return buffer.join(''); -}; - - -/** - * Sets CSS float property on an element. - * @param {Element} el The element to set float property on. - * @param {string} value The value of float CSS property to set on this element. - */ -goog.style.setFloat = function(el, value) { - el.style[goog.userAgent.IE ? 'styleFloat' : 'cssFloat'] = value; -}; - - -/** - * Gets value of explicitly-set float CSS property on an element. - * @param {Element} el The element to get float property of. - * @return {string} The value of explicitly-set float CSS property on this - * element. - */ -goog.style.getFloat = function(el) { - return el.style[goog.userAgent.IE ? 'styleFloat' : 'cssFloat'] || ''; -}; - - -/** - * Returns the scroll bar width (represents the width of both horizontal - * and vertical scroll). - * - * @param {string=} opt_className An optional class name (or names) to apply - * to the invisible div created to measure the scrollbar. This is necessary - * if some scrollbars are styled differently than others. - * @return {number} The scroll bar width in px. - */ -goog.style.getScrollbarWidth = function(opt_className) { - // Add two hidden divs. The child div is larger than the parent and - // forces scrollbars to appear on it. - // Using overflow:scroll does not work consistently with scrollbars that - // are styled with ::-webkit-scrollbar. - var outerDiv = goog.dom.createElement('div'); - if (opt_className) { - outerDiv.className = opt_className; - } - outerDiv.style.cssText = 'visiblity:hidden;overflow:auto;' + - 'position:absolute;top:0;width:100px;height:100px'; - var innerDiv = goog.dom.createElement('div'); - goog.style.setSize(innerDiv, '200px', '200px'); - outerDiv.appendChild(innerDiv); - goog.dom.appendChild(goog.dom.getDocument().body, outerDiv); - var width = outerDiv.offsetWidth - outerDiv.clientWidth; - goog.dom.removeNode(outerDiv); - return width; -}; diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_quirks_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_quirks_test.html.svn-base deleted file mode 100644 index f39cff0..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_quirks_test.html.svn-base +++ /dev/null @@ -1,2241 +0,0 @@ -<!-- BackCompat --> -<!-- - - This is a copy of style_test.html but without a doctype. Make sure these two - are in sync. - ---> -<html> -<!-- -Copyright 2006 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> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> -<title>Closure Unit Tests - goog.dom.style</title> -<script src="../base.js"></script> -<script> - -goog.require('goog.color'); -goog.require('goog.dom'); -goog.require('goog.math.Coordinate'); -goog.require('goog.math.Size'); -goog.require('goog.style'); -goog.require('goog.testing.ExpectedFailures'); -goog.require('goog.testing.jsunit'); -goog.require('goog.userAgent'); -goog.require('goog.userAgent.product'); -goog.require('goog.userAgent.product.isVersion'); - -</script> -<script> -var isBorderBox = true; -</script> -<style> - -* { - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; -} - -</style> -<style> - -i { - font-family: Times, sans-serif; - font-size: 5em; -} - -#testEl5 { - display: none; -} - -#styleTest1 { - width: 120px; - text-decoration: underline; -} - -#bgcolorTest0 { - background-color: #f00; -} - -#bgcolorTest1 { - background-color: #ff0000; -} - -#bgcolorTest2 { - background-color: rgb(255, 0, 0); -} - -#bgcolorTest3 { - background-color: rgb(100%, 0%, 0%); -} - -#bgcolorTest5 { - background-color: lightblue; -} - -#bgcolorTest6 { - background-color: inherit; -} - -#bgcolorTest7 { - background-color: transparent; -} - -.rtl { - direction: rtl; -} - -.ltr { - direction: ltr; -} - -#pos-scroll-abs { - position: absolute; - top: 200px; - left: 100px; -} - -#pos-scroll-abs-1 { - overflow: scroll; - width: 100px; - height: 100px; -} - -#pos-scroll-abs-2 { - position: absolute; - top: 100px; - left: 100px; - width: 500px; - background-color: pink; -} - -#abs-upper-left { - position: absolute; - top: 0px; - left: 0px; -} - -#no-text-font-styles { - font-family: "Helvetica", Times, serif; - font-size: 30px; -} - -.century { - font-family: "Comic Sans MS", "Century Schoolbook L", serif; -} - -#size-a, -#size-e { - width: 100px; - height: 100px; - background: red; - padding: 0; - border-style: solid; - border-color: black; - border-width: 0; -} - -#size-b { - width: 100px; - height: 100px; - background: red; - border: 10px solid black; -} - -#size-c { - width: 100px; - height: 100px; - background: red; - border: 10px solid black; - padding: 10px; - overflow: auto; -} -#size-f { - border-width: 0; - margin: 0; - padding: 0; -} - - -#size-d { - width: 10em; - height: 2cm; - background: red; - border: thick solid black; - padding: 2mm; -} - -#test-opacity { - opacity: 0.5; - -moz-opacity: 0.5; - filter: alpha(opacity=50); -} - -#test-frame-offset { - display: block; - position: absolute; - top: 50px; - left: 50px; - width: 50px; - height: 50px; -} - -#test-visible { - background: yellow; - position: absolute; - overflow: hidden; -} - -#test-visible2 { - background: #ebebeb; - position: absolute; - overflow: hidden; -} - -.scrollable-container { - border: 8px solid blue; - padding: 16px; - margin: 32px; - width: 100px; - height: 100px; - overflow: auto; - position: absolute; - left: 400px; - top: 0; -} - -.scrollable-container-item { - margin: 1px; - border: 2px solid gray; - padding: 4px; - width: auto; - /* The overflow is different from style_test so that we have consistent - scroll positions in all browsers. */ - overflow: hidden; - height: 20px; -} - -</style> -</head> -<body> - <div id="testEl"> - <span>Test Element</span> - </div> - - <div id="testEl5"> - <span>Test Element 5</span> - </div> - - <table id="table1"> - <tr> - <td id="td1">td1</td> - </tr> - </table> - - <span id="span0">span0</span> - - <ul> - <li id="li1">li1</li> - </ul> - - <span id="span1" class="test1"></span> - <span id="span2" class="test1"></span> - <span id="span3" class="test2"></span> - <span id="span4" class="test3"></span> - <span id="span5" class="test1"></span> - <span id="span6" class="test1"></span> - - <p id="p1"></p> - - <div id="styleTest1"></div> - <div id="styleTest2" style="width:100px;text-decoration:underline"></div> - <div id="styleTest3"></div> - - <!-- Paragraph to test element child and sibling --> - <p id="p2"> - <!-- Comment --> - a - <b id="b1">c</b> - d - <!-- Comment --> - e - <b id="b2">f</b> - g - <!-- Comment --> - </p> - - <p style="background-color: #eee"> - <span id="bgcolorTest0">1</span> - <span id="bgcolorTest1">1</span> - <span id="bgcolorTest2">2</span> - <span id="bgcolorTest3">3</span> - <span id="bgcolorTest4" style="background-color:#ff0000">4</span> - <span id="bgcolorTest5">5</span> - <span id="bgcolorTest6">6</span> - <span id="bgcolorTest7">7</span> - <span id="bgcolorDest">Dest</span> - <span id="installTest0">Styled 0</span> - <span id="installTest1">Styled 1</span> - </p> - - <div class='rtl-test' dir='ltr' id='rtl1'> - <div dir='rtl' id='rtl2'>right to left</div> - <div dir='ltr' id='rtl3'>left to right</div> - <div id='rtl4'>left to right (inherited)</div> - <div id='rtl5' style="direction: rtl">right to left (style)</div> - <div id='rtl6' style="direction: ltr">left to right (style)</div> - <div id='rtl7' class=rtl>right to left (css)</div> - <div id='rtl8' class=ltr>left to right (css)</div> - <div class=rtl> - <div id='rtl9'>right to left (css)</div> - </div> - <div class=ltr> - <div id='rtl10'>left to right (css)</div> - </div> - </div> - - <div id="pos-scroll-abs"> - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text some - text some text some text some text some text some text. Some text some text - some text some text some text some text some text some text some text some - text. Some text some text some text some text some text some text some text - some text some text some text. - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text some - text some text some text some text some text some text. Some text some text - some text some text some text some text some text some text some text some - text. Some text some text some text some text some text some text some text - some text some text some text. - - <div id="pos-scroll-abs-1"> - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text - some text some text some text some text some text some text. Some text - some text some text some text some text some text some text some text some - text some text. Some text some text some text some text some text some - text some text some text some text some text. - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text - some text some text some text some text some text some text. Some text - some text some text some text some text some text some text some text some - text some text. Some text some text some text some text some text some - text some text some text some text some text. - - <div id="pos-scroll-abs-2"> - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text - some text some text some text some text some text some text. Some text - some text some text some text some text some text some text some text - some text some text. Some text some text some text some text some text - some text some text some text some text some text. - - </div> - - </div> - - </div> - - <div id="abs-upper-left"> - foo - </div> - - <div id="no-text-font-styles"> - <font size="+1" face="Times,serif" id="font-tag">Times</font> - <pre id="pre-font">pre text</pre> - <span style="font:inherit" id="inherit-font">inherited</span> - <span style="font-family:Times,sans-serif; font-size:3in" - id="times-font-family">Times</span> - <b id="bold-font">Bolded</b> - <i id="css-html-tag-redefinition">Times</i> - <span id="small-text" class="century" style="font-size:small">eensy</span> - <span id="x-small-text" style="font-size:x-small">weensy</span> - <span style="font:50% badFont" id="font-style-badfont"> - badFont - <span style="font:inherit" id="inherit-50pct-font"> - same size as badFont - </span> - </span> - <span id="icon-font" style="font:icon">Icon Font</span> - </div> - <span id="no-font-style">plain</span> - <span style="font-family:Arial" id="nested-font">Arial<span style="font-family:Times">Times nested inside Arial</span></span> - <img id="img-font-test" src=""/> - - <span style="font-size:25px"> - <span style="font-size:12.5px" id="font-size-12-point-5-px">12.5PX</span> - <span style="font-size:0.5em" id="font-size-50-pct-of-25-px">12.5PX</span> - </span> - -<div id="size-a"></div> - -<div id="size-b"></div> - -<div id="size-c">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -<div id="size-f">hello</div> - -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -xxxxxxxxxxxxxxxx</div> - -<div id="size-d">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -xxxxxxxx x</div> - -<div id="size-e"></div> - -<div id="no-float"></div> - -<div id="float-none" style="float:none"></div> - -<div id="float-left" style="float:left"></div> - -<div id="float-test"></div> - -<div id="height-test" style="display:inline-block;position:relative"> - <div id="height-test-inner" style="display:inline-block"> - foo - </div> -</div> - -<div id="test-opacity"></div> - -<iframe id="test-frame-offset"></iframe> - -<iframe id="test-translate-frame-standard" src="style_test_standard.html" - style="overflow:auto;position:absolute;left:100px;top:150px;width:200px;height:200px;border:0px;"> -</iframe> -<iframe id="test-translate-frame-quirk" src="style_test_quirk.html" - style="overflow:auto;position:absolute;left:100px;top:350px;width:200px;height:200px;border:0px;margin:0px;"> -</iframe> - -<iframe - id="test-visible-frame" - src="style_test_iframe_quirk.html" - style="width: 200px; height: 200px; border: 0px;"> -</iframe> - -<div id="test-scrollbarwidth" style="background-color: orange; width: 100px; height: 100px; overflow: auto;"> - <div style='width: 200px; height: 200px; background-color: red'>Test Scroll bar width with scroll</div> -</div> - -<div id="scrollable-container" class="scrollable-container"> - <!-- - Workaround for overlapping top padding of the container and top margin of - the first item in Internet Explorer 6 and 7. - See http://www.quirksmode.org/bugreports/archives/2005/01/IE_nested_boxes_padding_topmargin_top.html#c11285 - --> - <div style="height: 0"><!-- --></div> - <div id="item1" class="scrollable-container-item">1</div> - <div id="item2" class="scrollable-container-item">2</div> - <div id="item3" class="scrollable-container-item">3</div> - <div id="item4" class="scrollable-container-item">4</div> - <div id="item5" class="scrollable-container-item">5</div> - <div id="item6" class="scrollable-container-item">6</div> - <div id="item7" class="scrollable-container-item">7</div> - <div id="item8" class="scrollable-container-item">8</div> -</div> - -<div id="test-visible"> -Test-visible -<div id="test-visible-el" style="height:200px;">Test-visible</div> -Test-visible -</div> - -<div id="test-visible2"></div> - -<div id="msFilter" style="-ms-filter:'alpha(opacity=0)'"> - A div</div> -<div id="filter" style="filter:alpha(opacity=0)"> - Another div</div> - -<div id="offset-parent" style="position:relative"> - <div id="offset-child">child</div> -</div> - -<div id="offset-parent-overflow" - style="overflow: scroll; width: 50px; height: 50px;"> - <a id="offset-child-overflow"> - scrollscrollscrollscrollscrollscrollscrollscroll - </a> -</div> - -<script> - -var EPSILON = 2; -var expectedFailures = new goog.testing.ExpectedFailures(); - -function setUpPage() { - var viewportSize = goog.dom.getViewportSize(); - // When the window is too short or not wide enough, some tests, especially - // those for off-screen elements, fail. Oddly, the most reliable - // height sometimes includes a scroll bar. We can make no assumptions on - // window size on the Selenium farm. - if (goog.userAgent.IE && !viewportSize.width) { - // Move to origin, since IE won't resize outside the screen. - window.moveTo(0, 0); - window.resizeTo(640, 480); - } -} - -function setUp() { - window.scrollTo(0, 0); -} - -function tearDown() { - expectedFailures.handleTearDown(); - var testVisibleDiv2 = goog.dom.getElement('test-visible2'); - testVisibleDiv2.setAttribute('style', ''); - testVisibleDiv2.innerHTML = ''; -} - -function testSetStyle() { - var el = goog.dom.getElement('span1'); - goog.style.setStyle(el, 'textDecoration', 'underline'); - assertEquals('Should be underline', 'underline', el.style.textDecoration); -} - -function testSetStyleMap() { - var el = goog.dom.getElement('span6'); - - var styles = { - 'background-color': 'blue', - 'font-size': '100px', - textAlign: 'center' - }; - - goog.style.setStyle(el, styles); - - var answers = { - backgroundColor: 'blue', - fontSize: '100px', - textAlign: 'center' - }; - - goog.object.forEach(answers, function(value, style) { - assertEquals('Should be ' + value, value, el.style[style]); - }); -} - -function testSetStyleWithNonCamelizedString() { - var el = goog.dom.getElement('span5'); - goog.style.setStyle(el, 'text-decoration', 'underline'); - assertEquals('Should be underline', 'underline', el.style.textDecoration); -} - -function testGetStyle() { - var el = goog.dom.getElement('styleTest3'); - goog.style.setStyle(el, 'width', '80px'); - goog.style.setStyle(el, 'textDecoration', 'underline'); - - assertEquals('80px', goog.style.getStyle(el, 'width')); - assertEquals('underline', goog.style.getStyle(el, 'textDecoration')); - assertEquals('underline', goog.style.getStyle(el, 'text-decoration')); - // Non set properties are always empty strings. - assertEquals('', goog.style.getStyle(el, 'border')); -} - -function testGetStyleMsFilter() { - // Element with -ms-filter style set. - var e = goog.dom.getElement('msFilter'); - - if (goog.userAgent.IE && goog.userAgent.isVersion(8)) { - // Only IE8 supports -ms-filter and returns it as value for the "filter" - // property. When in compatibility mode, -ms-filter is not supported - // and IE8 behaves as IE7 so the other case will apply. - assertEquals('alpha(opacity=0)', goog.style.getStyle(e, 'filter')); - } else { - // Any other browser does not support ms-filter so it returns empty string. - assertEquals('', goog.style.getStyle(e, 'filter')); - } -} - -function testGetStyleFilter() { - // Element with filter style set. - var e = goog.dom.getElement('filter'); - - if (goog.userAgent.IE) { - // Filter supported. - assertEquals('alpha(opacity=0)', goog.style.getStyle(e, 'filter')); - } else { - assertEquals('', goog.style.getStyle(e, 'filter')); - } -} - -function testGetComputedStyleMsFilter() { - // Element with -ms-filter style set. - var e = goog.dom.getElement('msFilter'); - - if (goog.userAgent.IE) { - // IE always returns empty string for computed styles. - assertEquals('', goog.style.getComputedStyle(e, 'filter')); - } else { - // Non IE returns 'none' for filter as it is an SVG property - assertEquals('none', goog.style.getComputedStyle(e, 'filter')); - } -} - -function testGetComputedStyleFilter() { - // Element with filter style set. - var e = goog.dom.getElement('filter'); - - if (goog.userAgent.IE) { - // IE always returns empty string for computed styles. - assertEquals('', goog.style.getComputedStyle(e, 'filter')); - } else { - // Non IE returns 'none' for filter as it is an SVG property - assertEquals('none', goog.style.getComputedStyle(e, 'filter')); - } -} - -function testGetBackgroundColor() { - var dest = goog.dom.getElement('bgcolorDest'); - - for (var i = 0; goog.dom.getElement('bgcolorTest' + i); i++) { - var src = goog.dom.getElement('bgcolorTest' + i); - var bgColor = goog.style.getBackgroundColor(src); - - dest.style.backgroundColor = bgColor; - assertEquals('Background colors should be equal', - goog.style.getBackgroundColor(src), - goog.style.getBackgroundColor(dest)); - - try { - // goog.color.parse throws a generic exception if handed input it - // doesn't understand. - var c = goog.color.parse(bgColor); - assertEquals('rgb(255,0,0)', goog.color.hexToRgbStyle(c.hex)); - } catch (e) { - // Internet Explorer is unable to parse colors correctly after test 4. - // Other browsers may vary, but all should be able to handle straight - // hex input. - assertFalse('Should be able to parse color "' + bgColor + '"', i < 5); - } - } -} - -function testSetPosition() { - var el = goog.dom.getElement('testEl'); - - goog.style.setPosition(el, 100, 100); - assertEquals('100px', el.style.left); - assertEquals('100px', el.style.top); - - goog.style.setPosition(el, '50px', '25px'); - assertEquals('50px', el.style.left); - assertEquals('25px', el.style.top); - - goog.style.setPosition(el, '10ex', '25px'); - assertEquals('10ex', el.style.left); - assertEquals('25px', el.style.top); - - goog.style.setPosition(el, '10%', '25%'); - assertEquals('10%', el.style.left); - assertEquals('25%', el.style.top); - - // ignores stupid units - goog.style.setPosition(el, 0, 0); - // TODO(user): IE errors if you set these values. Should we make setStyle - // catch these? Or leave it up to the app. Fixing the tests for now. - //goog.style.setPosition(el, '10rainbows', '25rainbows'); - assertEquals('0px', el.style.left); - assertEquals('0px', el.style.top); - - - goog.style.setPosition(el, new goog.math.Coordinate(20,40)); - assertEquals('20px', el.style.left); - assertEquals('40px', el.style.top); -} - -function testGetClientPositionAbsPositionElement() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - document.body.appendChild(div); - var pos = goog.style.getClientPosition(div); - assertEquals(100, pos.x); - assertEquals(200, pos.y); -} - -function testGetClientPositionNestedElements() { - var innerDiv = goog.dom.createDom('DIV'); - innerDiv.style.position = 'relative'; - innerDiv.style.left = '-10px'; - innerDiv.style.top = '-10px'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '150px'; - div.style.top = '250px'; - div.appendChild(innerDiv); - document.body.appendChild(div); - var pos = goog.style.getClientPosition(innerDiv); - assertEquals(140, pos.x); - assertEquals(240, pos.y); -} - -function testGetClientPositionOfOffscreenElement() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '2000px'; - div.style.top = '2000px'; - div.style.width = '10px'; - div.style.height = '10px'; - document.body.appendChild(div); - - window.scroll(0, 0); - var pos = goog.style.getClientPosition(div); - assertEquals(2000, pos.x); - assertEquals(2000, pos.y); - - // The following tests do not work in Gecko 1.8 and below, due to an - // obscure off-by-one bug in goog.style.getPageOffset. Same for IE. - if (!(goog.userAgent.IE) && - !(goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9'))) { - window.scroll(1, 1); - var pos = goog.style.getClientPosition(div); - assertEquals(1999, pos.x); - assertEquals(1999, pos.y); - - window.scroll(2, 2); - pos = goog.style.getClientPosition(div); - assertEquals(1998, pos.x); - assertEquals(1998, pos.y); - - window.scroll(100, 100); - pos = goog.style.getClientPosition(div); - assertEquals(1900, pos.x); - assertEquals(1900, pos.y); - } -} - -function testGetPageOffsetAbsPositionedElement() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - assertEquals(100, pos.x); - assertEquals(200, pos.y); -} - -function testGetPageOffsetNestedElements() { - var innerDiv = goog.dom.createDom('DIV'); - innerDiv.style.position = 'relative'; - innerDiv.style.left = '-10px'; - innerDiv.style.top = '-10px'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '150px'; - div.style.top = '250px'; - div.appendChild(innerDiv); - document.body.appendChild(div); - var pos = goog.style.getPageOffset(innerDiv); - assertEquals(140, pos.x); - assertEquals(240, pos.y); -} - -function testGetPageOffsetWithBodyPadding() { - try { - document.body.style.margin = '40px' - document.body.style.padding = '60px' - document.body.style.borderWidth = '70px'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - // Margin will affect position, but padding and borders should not. - div.style.margin = '1px'; - div.style.padding = '2px'; - div.style.borderWidth = '3px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - assertEquals(101, pos.x); - assertEquals(201, pos.y); - } finally { - document.body.style.margin = ''; - document.body.style.padding = ''; - document.body.style.borderWidth = ''; - } -} - -function testGetPageOffsetWithDocumentElementPadding() { - try { - document.documentElement.style.margin = '40px'; - document.documentElement.style.padding = '60px'; - document.documentElement.style.borderWidth = '70px'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - // Margin will affect position, but padding and borders should not. - div.style.margin = '1px'; - div.style.padding = '2px'; - div.style.borderWidth = '3px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - // FF3 (but not beyond) gets confused by document margins. - if (goog.userAgent.GECKO && goog.userAgent.isVersion('1.9') && - !goog.userAgent.isVersion('1.9.1')) { - assertEquals(141, pos.x); - assertEquals(241, pos.y); - } else { - assertEquals(101, pos.x); - assertEquals(201, pos.y); - } - } finally { - document.documentElement.style.margin = ''; - document.documentElement.style.padding = ''; - document.documentElement.style.borderWidth = ''; - } -} - -function testGetPageOffsetElementOffscreen() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '10000px'; - div.style.top = '20000px'; - document.body.appendChild(div); - window.scroll(0, 0); - var pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - - // The following tests do not work in Gecko 1.8 and below, due to an - // obscure off-by-one bug in goog.style.getPageOffset. Same for IE. - if (!(goog.userAgent.IE) && - !(goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9'))) { - window.scroll(1, 1); - pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - - window.scroll(1000, 2000); - pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - - window.scroll(10000, 20000); - pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - } - - // Undo changes. - document.body.removeChild(div); - window.scroll(0, 0); -} - -function testGetPageOffsetFixedPositionElements() { - // Skip these tests in certain browsers. - // position:fixed is not supported in IE before version 7 - // TODO(gboyer): This conditional looks fishy: it excludes all versions of - // IE version 6 and greater. - if (!goog.userAgent.IE || !goog.userAgent.isVersion('6')) { - // Test with a position fixed element - var div = goog.dom.createDom('DIV'); - div.style.position = 'fixed'; - div.style.top = '10px'; - div.style.left = '10px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - assertEquals(10, pos.x); - assertEquals(10, pos.y); - - // Test with a position fixed element as parent - var innerDiv = goog.dom.createDom('DIV'); - div = goog.dom.createDom('DIV'); - div.style.position = 'fixed'; - div.style.top = '10px'; - div.style.left = '10px'; - div.style.padding = '5px'; - div.appendChild(innerDiv); - document.body.appendChild(div); - pos = goog.style.getPageOffset(innerDiv); - assertEquals(15, pos.x); - assertEquals(15, pos.y); - } -} - -function testGetPositionTolerantToNoDocumentElementBorder() { - // In IE, removing the border on the document element undoes the normal - // 2-pixel offset. Ensure that we're correctly compensating for both cases. - try { - document.documentElement.style.borderWidth = '0'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - document.body.appendChild(div); - // Test all major positioning methods. - // Temporarily disabled for IE8 - IE8 returns dimensions multiplied by 100 - expectedFailures.expectFailureFor(isIE8()); - try { - var pos = goog.style.getClientPosition(div); - assertEquals(100, pos.x); - assertEquals(200, pos.y); - var offset = goog.style.getPageOffset(div); - assertEquals(100, offset.x); - assertEquals(200, offset.y); - } catch (e) { - expectedFailures.handleException(e); - } - } finally { - document.documentElement.style.borderWidth = ''; - } -} - -function testSetSize() { - var el = goog.dom.getElement('testEl'); - - goog.style.setSize(el, 100, 100); - assertEquals('100px', el.style.width); - assertEquals('100px', el.style.height); - - goog.style.setSize(el, '50px', '25px'); - assertEquals('should be "50px"', '50px', el.style.width); - assertEquals('should be "25px"', '25px', el.style.height); - - goog.style.setSize(el, '10ex', '25px'); - assertEquals('10ex', el.style.width); - assertEquals('25px', el.style.height); - - goog.style.setSize(el, '10%', '25%'); - assertEquals('10%', el.style.width); - assertEquals('25%', el.style.height); - - // ignores stupid units - goog.style.setSize(el, 0, 0); - // TODO(user): IE errors if you set these values. Should we make setStyle - // catch these? Or leave it up to the app. Fixing the tests for now. - //goog.style.setSize(el, '10rainbows', '25rainbows'); - assertEquals('0px', el.style.width); - assertEquals('0px', el.style.height); - - goog.style.setSize(el, new goog.math.Size(20,40)); - assertEquals('20px', el.style.width); - assertEquals('40px', el.style.height); -} - -function testSetWidthAndHeight() { - var el = goog.dom.getElement('testEl'); - - // Replicate all of the setSize tests above. - - goog.style.setWidth(el, 100); - goog.style.setHeight(el, 100); - assertEquals('100px', el.style.width); - assertEquals('100px', el.style.height); - - goog.style.setWidth(el, '50px'); - goog.style.setHeight(el, '25px'); - assertEquals('should be "50px"', '50px', el.style.width); - assertEquals('should be "25px"', '25px', el.style.height); - - goog.style.setWidth(el, '10ex'); - goog.style.setHeight(el, '25px'); - assertEquals('10ex', el.style.width); - assertEquals('25px', el.style.height); - - goog.style.setWidth(el, '10%'); - goog.style.setHeight(el, '25%'); - assertEquals('10%', el.style.width); - assertEquals('25%', el.style.height); - - goog.style.setWidth(el, 0); - goog.style.setHeight(el, 0); - assertEquals('0px', el.style.width); - assertEquals('0px', el.style.height); - - goog.style.setWidth(el, 20); - goog.style.setHeight(el, 40); - assertEquals('20px', el.style.width); - assertEquals('40px', el.style.height); - - // Additional tests testing each separately. - goog.style.setWidth(el, ''); - goog.style.setHeight(el, ''); - assertEquals('', el.style.width); - assertEquals('', el.style.height); - - goog.style.setHeight(el, 20); - assertEquals('', el.style.width); - assertEquals('20px', el.style.height); - - goog.style.setWidth(el, 40); - assertEquals('40px', el.style.width); - assertEquals('20px', el.style.height); -} - -function testGetSize() { - var el = goog.dom.getElement('testEl'); - goog.style.setSize(el, 100, 100); - - var dims = goog.style.getSize(el); - assertEquals(100, dims.width); - assertEquals(100, dims.height); - - goog.style.setStyle(el, 'display', 'none'); - dims = goog.style.getSize(el); - assertEquals(100, dims.width); - assertEquals(100, dims.height); - - el = goog.dom.getElement('testEl5'); - goog.style.setSize(el, 100, 100); - dims = goog.style.getSize(el); - assertEquals(100, dims.width); - assertEquals(100, dims.height); - - el = goog.dom.getElement('span0'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = goog.dom.getElement('table1'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = goog.dom.getElement('td1'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = goog.dom.getElement('li1'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = goog.dom.getElementsByTagNameAndClass('html')[0]; - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = goog.dom.getElementsByTagNameAndClass('body')[0]; - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); -} - -function testGetSizeSvgElements() { - var svgEl = document.createElementNS && - document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - if (!svgEl || svgEl.getAttribute('transform') == '' || - (goog.userAgent.WEBKIT && !goog.userAgent.isVersion(534.8))) { - // SVG not supported, or getBoundingClientRect not supported on SVG - // elements. - return; - } - - document.body.appendChild(svgEl); - el = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - el.setAttribute('x', 10); - el.setAttribute('y', 10); - el.setAttribute('width', 32); - el.setAttribute('height', 21); - el.setAttribute('fill', '#000'); - - svgEl.appendChild(el); - - dims = goog.style.getSize(el); - assertEquals(32, dims.width); - assertEquals(21, dims.height); - - dims = goog.style.getSize(svgEl); - if (goog.userAgent.WEBKIT) { - // The size of the <svg> will be the viewport size on WebKit browsers. - assertTrue(dims.width >= 32); - assertTrue(dims.height >= 21); - } else { - assertEquals(32, dims.width); - assertEquals(21, dims.height); - } - - el.style.visibility = 'none'; - - dims = goog.style.getSize(el); - assertEquals(32, dims.width); - assertEquals(21, dims.height); - - dims = goog.style.getSize(svgEl); - if (goog.userAgent.WEBKIT) { - // The size of the <svg> will be the viewport size on WebKit browsers. - assertTrue(dims.width >= 32); - assertTrue(dims.height >= 21); - } else { - assertEquals(32, dims.width); - assertEquals(21, dims.height); - } -} - -function testGetSizeInlineBlock() { - var el = goog.dom.getElement('height-test-inner'); - var dims = goog.style.getSize(el); - assertNotEquals(0, dims.height); -} - -function testGetBounds() { - var el = goog.dom.getElement('testEl'); - - var dims = goog.style.getSize(el); - var pos = goog.style.getPageOffset(el); - - var rect = goog.style.getBounds(el); - - // Relies on getSize and getPageOffset being correct. - assertEquals(dims.width, rect.width); - assertEquals(dims.height, rect.height); - assertEquals(pos.x, rect.left); - assertEquals(pos.y, rect.top); -} - -function testInstallStyles() { - var el = goog.dom.getElement('installTest0'); - var originalBackground = goog.style.getBackgroundColor(el); - - // Uses background-color because it's easy to get the computed value - var result = goog.style.installStyles( - '#installTest0 { background-color: rgb(255, 192, 203); }'); - - assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el)); - - goog.style.uninstallStyles(result); - assertEquals(originalBackground, goog.style.getBackgroundColor(el)); -} - -function testSetStyles() { - var el = goog.dom.getElement('installTest1'); - - // Change to pink - var ss = goog.style.installStyles( - '#installTest1 { background-color: rgb(255, 192, 203); }'); - assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el)); - - // Now change to orange - goog.style.setStyles(ss, - '#installTest1 { background-color: rgb(255, 255, 0); }'); - assertColorRgbEquals('rgb(255,255,0)', goog.style.getBackgroundColor(el)); -} - - -function assertColorRgbEquals(expected, actual) { - assertEquals(expected, - goog.color.hexToRgbStyle(goog.color.parse(actual).hex)); -} - -function testIsRightToLeft() { - assertFalse(goog.style.isRightToLeft(goog.dom.getElement('rtl1'))); - assertTrue(goog.style.isRightToLeft(goog.dom.getElement('rtl2'))); - assertFalse(goog.style.isRightToLeft(goog.dom.getElement('rtl3'))); - assertFalse(goog.style.isRightToLeft(goog.dom.getElement('rtl4'))); - assertTrue(goog.style.isRightToLeft(goog.dom.getElement('rtl5'))); - assertFalse(goog.style.isRightToLeft(goog.dom.getElement('rtl6'))); - assertTrue(goog.style.isRightToLeft(goog.dom.getElement('rtl7'))); - assertFalse(goog.style.isRightToLeft(goog.dom.getElement('rtl8'))); - assertTrue(goog.style.isRightToLeft(goog.dom.getElement('rtl9'))); - assertFalse(goog.style.isRightToLeft(goog.dom.getElement('rtl10'))); -} - -function testPosWithAbsoluteAndScroll() { - var el = goog.dom.getElement('pos-scroll-abs') - var el1 = goog.dom.getElement('pos-scroll-abs-1'); - var el2 = goog.dom.getElement('pos-scroll-abs-2'); - - el1.scrollTop = 200; - var pos = goog.style.getPageOffset(el2); - - assertEquals(200, pos.x); - // Don't bother with IE in quirks mode - if (!goog.userAgent.IE || document.compatMode == 'CSS1Compat') { - assertEquals(300, pos.y); - } -} - -function testPosWithAbsoluteAndWindowScroll() { - window.scrollBy(0, 200); - var el = goog.dom.getElement('abs-upper-left'); - var pos = goog.style.getPageOffset(el); - assertEquals('Top should be about 0', 0, pos.y); -} - -function testGetBorderBoxSize() { - // Strict mode - var getBorderBoxSize = goog.style.getBorderBoxSize; - - var el = goog.dom.getElement('size-a'); - var rect = getBorderBoxSize(el); - assertEquals('width:100px', 100, rect.width); - assertEquals('height:100px', 100, rect.height); - - // with border: 10px - el = goog.dom.getElement('size-b'); - rect = getBorderBoxSize(el); - assertEquals('width:100px;border:10px', isBorderBox ? 100 : 120, rect.width); - assertEquals('height:100px;border:10px', isBorderBox ? 100 : 120, - rect.height); - - // with border: 10px; padding: 10px - el = goog.dom.getElement('size-c'); - rect = getBorderBoxSize(el); - assertEquals('width:100px;border:10px;padding:10px', - isBorderBox ? 100 : 140, rect.width); - assertEquals('height:100px;border:10px;padding:10px', - isBorderBox ? 100 : 140, rect.height); - - // size, padding and borders are all in non pixel units - // all we test here is that we get a number out - el = goog.dom.getElement('size-d'); - rect = getBorderBoxSize(el); - assertEquals('number', typeof rect.width); - assertEquals('number', typeof rect.height); - assertFalse(isNaN(rect.width)); - assertFalse(isNaN(rect.height)); -} - -function testGetContentBoxSize() { - // Strict mode - var getContentBoxSize = goog.style.getContentBoxSize; - - var el = goog.dom.getElement('size-a'); - var rect = getContentBoxSize(el); - assertEquals('width:100px', 100, rect.width); - assertEquals('height:100px', 100, rect.height); - - // with border: 10px - el = goog.dom.getElement('size-b'); - rect = getContentBoxSize(el); - assertEquals('width:100px;border:10px', - isBorderBox ? 80 : 100, rect.width); - assertEquals('height:100px;border:10px', - isBorderBox ? 80 : 100, rect.height); - - // with border: 10px; padding: 10px - el = goog.dom.getElement('size-c'); - rect = getContentBoxSize(el); - assertEquals('width:100px;border:10px;padding:10px', - isBorderBox ? 60 : 100, rect.width); - assertEquals('height:100px;border:10px;padding:10px', - isBorderBox ? 60 : 100, rect.height); - - // test whether getContentBoxSize works when width and height - // aren't explicitly set, but the default of 'auto'. - // 'size-f' has no margin, border, or padding, so offsetWidth/Height - // should match the content box size - el = goog.dom.getElement('size-f'); - rect = getContentBoxSize(el); - assertEquals(el.offsetWidth, rect.width); - assertEquals(el.offsetHeight, rect.height); - - // size, padding and borders are all in non pixel units - // all we test here is that we get a number out - el = goog.dom.getElement('size-d'); - rect = getContentBoxSize(el); - assertEquals('number', typeof rect.width); - assertEquals('number', typeof rect.height); - assertFalse(isNaN(rect.width)); - assertFalse(isNaN(rect.height)); -} - -function testSetBorderBoxSize() { - // Strict mode - var el = goog.dom.getElement('size-e'); - var Size = goog.math.Size; - var setBorderBoxSize = goog.style.setBorderBoxSize; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - setBorderBoxSize(el, new Size(100, 100)); - - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - el.style.borderWidth = '10px'; - setBorderBoxSize(el, new Size(100, 100)); - - assertEquals('width:100px;border:10px', 100, el.offsetWidth); - assertEquals('height:100px;border:10px', 100, el.offsetHeight); - - el.style.padding = '10px'; - setBorderBoxSize(el, new Size(100, 100)); - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - el.style.borderWidth = '0'; - setBorderBoxSize(el, new Size(100, 100)); - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - if (goog.userAgent.GECKO) { - assertEquals('border-box', el.style.MozBoxSizing); - } else if (goog.userAgent.WEBKIT) { - assertEquals('border-box', el.style.WebkitBoxSizing); - } else if (goog.userAgent.OPERA || - goog.userAgent.IE && goog.userAgent.isVersion('8')) { - assertEquals('border-box', el.style.boxSizing); - } - - // Try a negative width/height. - setBorderBoxSize(el, new Size(-10, -10)); - - // Setting the border box smaller than the borders will just give you - // a content box of size 0. - // NOTE(nicksantos): I'm not really sure why IE7 is special here. - var isIeLt8 = goog.userAgent.IE && !goog.userAgent.isVersion('8'); - assertEquals(20, el.offsetWidth); - assertEquals(isIeLt8 ? 39 : 20, el.offsetHeight); -} - -function testSetContentBoxSize() { - // Strict mode - var el = goog.dom.getElement('size-e'); - var Size = goog.math.Size; - var setContentBoxSize = goog.style.setContentBoxSize; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - setContentBoxSize(el, new Size(100, 100)); - - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - el.style.borderWidth = '10px'; - setContentBoxSize(el, new Size(100, 100)); - assertEquals('width:100px;border-width:10px', 120, el.offsetWidth); - assertEquals('height:100px;border-width:10px', 120, el.offsetHeight); - - el.style.padding = '10px'; - setContentBoxSize(el, new Size(100, 100)); - assertEquals('width:100px;border-width:10px;padding:10px', - 140, el.offsetWidth); - assertEquals('height:100px;border-width:10px;padding:10px', - 140, el.offsetHeight); - - el.style.borderWidth = '0'; - setContentBoxSize(el, new Size(100, 100)); - assertEquals('width:100px;padding:10px', 120, el.offsetWidth); - assertEquals('height:100px;padding:10px', 120, el.offsetHeight); - - if (goog.userAgent.GECKO) { - assertEquals('content-box', el.style.MozBoxSizing); - } else if (goog.userAgent.WEBKIT) { - assertEquals('content-box', el.style.WebkitBoxSizing); - } else if (goog.userAgent.OPERA || - goog.userAgent.IE && goog.userAgent.isVersion('8')) { - assertEquals('content-box', el.style.boxSizing); - } - - // Try a negative width/height. - setContentBoxSize(el, new Size(-10, -10)); - - // NOTE(nicksantos): I'm not really sure why IE7 is special here. - var isIeLt8 = goog.userAgent.IE && !goog.userAgent.isVersion('8'); - assertEquals(20, el.offsetWidth); - assertEquals(isIeLt8 ? 39 : 20, el.offsetHeight); -} - -function testGetPaddingBox() { - // Strict mode - var el = goog.dom.getElement('size-e'); - var Size = goog.math.Size; - var getPaddingBox = goog.style.getPaddingBox; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - el.style.padding = '10px'; - var rect = getPaddingBox(el); - assertEquals(10, rect.left); - assertEquals(10, rect.right); - assertEquals(10, rect.top); - assertEquals(10, rect.bottom); - - el.style.padding = '0'; - rect = getPaddingBox(el); - assertEquals(0, rect.left); - assertEquals(0, rect.right); - assertEquals(0, rect.top); - assertEquals(0, rect.bottom); - - el.style.padding = '1px 2px 3px 4px'; - rect = getPaddingBox(el); - assertEquals(1, rect.top); - assertEquals(2, rect.right); - assertEquals(3, rect.bottom); - assertEquals(4, rect.left); - - el.style.padding = '1mm 2em 3ex 4%'; - rect = getPaddingBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - assertTrue(rect.right >= 0); - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); -} - -function testGetMarginBox() { - // Strict mode - var el = goog.dom.getElement('size-e'); - var Size = goog.math.Size; - var getMarginBox = goog.style.getMarginBox; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - el.style.margin = '10px'; - var rect = getMarginBox(el); - assertEquals(10, rect.left); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertEquals(10, rect.right); - } - assertEquals(10, rect.top); - assertEquals(10, rect.bottom); - - el.style.margin = '0'; - rect = getMarginBox(el); - assertEquals(0, rect.left); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertEquals(0, rect.right); - } - assertEquals(0, rect.top); - assertEquals(0, rect.bottom); - - el.style.margin = '1px 2px 3px 4px'; - rect = getMarginBox(el); - assertEquals(1, rect.top); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertEquals(2, rect.right); - } - assertEquals(3, rect.bottom); - assertEquals(4, rect.left); - - el.style.margin = '1mm 2em 3ex 4%'; - rect = getMarginBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertTrue(rect.right >= 0); - } - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); -} - -function testGetBorderBox() { - // Strict mode - var el = goog.dom.getElement('size-e'); - var Size = goog.math.Size; - var getBorderBox = goog.style.getBorderBox; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - el.style.borderWidth = '10px'; - var rect = getBorderBox(el); - assertEquals(10, rect.left); - assertEquals(10, rect.right); - assertEquals(10, rect.top); - assertEquals(10, rect.bottom); - - el.style.borderWidth = '0'; - rect = getBorderBox(el); - assertEquals(0, rect.left); - assertEquals(0, rect.right); - assertEquals(0, rect.top); - assertEquals(0, rect.bottom); - - el.style.borderWidth = '1px 2px 3px 4px'; - rect = getBorderBox(el); - assertEquals(1, rect.top); - assertEquals(2, rect.right); - assertEquals(3, rect.bottom); - assertEquals(4, rect.left); - - // % does not work for border widths in IE - el.style.borderWidth = '1mm 2em 3ex 4pt'; - rect = getBorderBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - assertTrue(rect.right >= 0); - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); - - el.style.borderWidth = 'thin medium thick 1px'; - rect = getBorderBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - assertTrue(rect.right >= 0); - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); -} - -function testGetFontFamily() { - // I tried to use common fonts for these tests. It's possible the test fails - // because the testing platform doesn't have one of these fonts installed: - // Comic Sans MS or Century Schoolbook L - // Times - // Helvetica - - var tmpFont = goog.style.getFontFamily(goog.dom.getElement('font-tag')); - assertTrue('FontFamily should be detectable when set via <font face>', - 'Times' == tmpFont || 'Times New Roman' == tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('small-text')); - assertTrue('Multiword fonts should be reported with quotes stripped.', - 'Comic Sans MS' == tmpFont || - 'Century Schoolbook L' == tmpFont); - // Firefox fails this test & retuns a generic 'monospace' instead of the - // actually displayed font (e.g., "Times New"). - //tmpFont = goog.style.getFontFamily(goog.dom.getElement('pre-font')); - //assertEquals('<pre> tags should use a fixed-width font', - // 'Times New', - // tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('inherit-font')); - assertEquals('Explicitly inherited fonts should be detectable', - 'Helvetica', - tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('times-font-family')); - assertEquals('Font-family set via style attribute should be detected', - 'Times', - tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('bold-font')); - assertEquals('Implicitly inherited font should be detected', - 'Helvetica', - tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('css-html-tag-redefinition')); - assertEquals('HTML tag CSS rewrites should be detected', - 'Times', - tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('no-text-font-styles')); - assertEquals('Font family should exist even with no text', - 'Helvetica', - tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('icon-font')); - assertNotEquals('icon is a special font-family value', - 'icon', - tmpFont.toLowerCase()); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('font-style-badfont')); - // Firefox fails this test and reports the specified "badFont", which is - // obviously not displayed. - //assertEquals('Invalid fonts should not be returned', - // 'Helvetica', - // tmpFont); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('img-font-test')); - assertTrue('Even img tags should inherit the document body\'s font', - tmpFont != ''); - tmpFont = goog.style.getFontFamily(goog.dom.getElement('nested-font')); - assertEquals('An element with nested content should be unaffected.', - 'Arial', - tmpFont); -} - -function testGetFontSize() { - assertEquals('Font size should be determined even without any text', - 30, - goog.style.getFontSize( - goog.dom.getElement('no-text-font-styles'))); - assertEquals('A 5em font should be 5x larger than its parent.', - 150, - goog.style.getFontSize( - goog.dom.getElement('css-html-tag-redefinition'))); - assertTrue('Setting font size=-1 should result in a positive font size.', - goog.style.getFontSize(goog.dom.getElement('font-tag')) > 0); - assertEquals('Inheriting a 50% font-size should have no additional effect', - goog.style.getFontSize( - goog.dom.getElement('font-style-badfont')), - goog.style.getFontSize( - goog.dom.getElement('inherit-50pct-font'))); - assertTrue('In pretty much any display, 3in should be > 8px', - goog.style.getFontSize(goog.dom.getElement('times-font-family')) > - goog.style.getFontSize( - goog.dom.getElement('no-text-font-styles'))); - assertTrue('With no applied styles, font-size should still be defined.', - goog.style.getFontSize(goog.dom.getElement('no-font-style')) > 0); - assertEquals('50% of 30px is 15', - 15, - goog.style.getFontSize( - goog.dom.getElement('font-style-badfont'))); - assertTrue('x-small text should be smaller than small text', - goog.style.getFontSize(goog.dom.getElement('x-small-text')) < - goog.style.getFontSize(goog.dom.getElement('small-text'))); - // IE fails this test, the decimal portion of px lengths isn't reported - // by getCascadedStyle. Firefox passes, but only because it ignores the - // decimals altogether. - //assertEquals('12.5px should be the same as 0.5em nested in a 25px node.', - // goog.style.getFontSize( - // goog.dom.getElement('font-size-12-point-5-px')), - // goog.style.getFontSize( - // goog.dom.getElement('font-size-50-pct-of-25-px'))); -} - -function testGetLengthUnits() { - assertEquals('px', goog.style.getLengthUnits('15px')); - assertEquals('%', goog.style.getLengthUnits('99%')); - assertNull(goog.style.getLengthUnits('')); -} - -function testGetFloat() { - assertEquals('', goog.style.getFloat(goog.dom.getElement('no-float'))); - assertEquals('none', goog.style.getFloat(goog.dom.getElement('float-none'))); - assertEquals('left', goog.style.getFloat(goog.dom.getElement('float-left'))); -} - -function testSetFloat() { - var el = goog.dom.getElement('float-test'); - - goog.style.setFloat(el, 'left'); - assertEquals('left', goog.style.getFloat(el)); - - goog.style.setFloat(el, 'right'); - assertEquals('right', goog.style.getFloat(el)); - - goog.style.setFloat(el, 'none'); - assertEquals('none', goog.style.getFloat(el)); - - goog.style.setFloat(el, ''); - assertEquals('', goog.style.getFloat(el)); -} - -function testIsElementShown() { - var el = goog.dom.getElement('testEl'); - - goog.style.showElement(el, false); - assertFalse(goog.style.isElementShown(el)); - - goog.style.showElement(el, true); - assertTrue(goog.style.isElementShown(el)); -} - -function testGetOpacity() { - var el1 = { - style: { - opacity: '0.3' - } - }; - - var el2 = { - style: { - MozOpacity: '0.1' - } - }; - - var el3 = { - style: { - filter: 'some:other,filter;alpha(opacity=25.5);alpha(more=100);' - } - }; - - assertEquals(0.3, goog.style.getOpacity(el1)); - assertEquals(0.1, goog.style.getOpacity(el2)); - assertEquals(0.255, goog.style.getOpacity(el3)); - - el1.style.opacity = '0'; - el2.style.MozOpacity = '0'; - el3.style.filter = 'some:other,filter;alpha(opacity=0);alpha(more=100);'; - - assertEquals(0, goog.style.getOpacity(el1)); - assertEquals(0, goog.style.getOpacity(el2)); - assertEquals(0, goog.style.getOpacity(el3)); - - el1.style.opacity = ''; - el2.style.MozOpacity = ''; - el3.style.filter = ''; - - assertEquals('', goog.style.getOpacity(el1)); - assertEquals('', goog.style.getOpacity(el2)); - assertEquals('', goog.style.getOpacity(el3)); - - var el4 = { - style: {} - } - - assertEquals('', goog.style.getOpacity(el4)); - assertEquals('', goog.style.getOpacity(goog.dom.getElement('test-opacity'))); -} - -function testSetOpacity() { - var el1 = { - style: { - opacity: '0.3' - } - }; - goog.style.setOpacity(el1, 0.8); - - var el2 = { - style: { - MozOpacity: '0.1' - } - }; - goog.style.setOpacity(el2, 0.5); - - var el3 = { - style: { - filter: 'alpha(opacity=25)' - } - }; - goog.style.setOpacity(el3, 0.1); - - assertEquals(0.8, Number(el1.style.opacity)); - assertEquals(0.5, Number(el2.style.MozOpacity)); - assertEquals('alpha(opacity=10)', el3.style.filter); - - goog.style.setOpacity(el1, 0); - goog.style.setOpacity(el2, 0); - goog.style.setOpacity(el3, 0); - - assertEquals(0, Number(el1.style.opacity)); - assertEquals(0, Number(el2.style.MozOpacity)); - assertEquals('alpha(opacity=0)', el3.style.filter); - - goog.style.setOpacity(el1, ''); - goog.style.setOpacity(el2, ''); - goog.style.setOpacity(el3, ''); - - assertEquals('', el1.style.opacity); - assertEquals('', el2.style.MozOpacity); - assertEquals('', el3.style.filter); -} - -function testFramedPageOffset() { - // Set up a complicated iframe ancestor chain. - var iframe = goog.dom.getElement('test-frame-offset'); - var iframeDoc = goog.dom.getFrameContentDocument(iframe); - var iframeWindow = goog.dom.getWindow(iframeDoc); - - var iframePos = 'style="display:block;position:absolute;' + - 'top:50px;left:50px;width:50px;height:50px;"'; - iframeDoc.write('<iframe id="test-frame-offset-2" ' + - iframePos + '></iframe>' + - '<div id="test-element-2" ' + - ' style="position:absolute;left:300px;top:300px">hi mom!</div>'); - iframeDoc.close(); - var iframe2 = iframeDoc.getElementById('test-frame-offset-2'); - var testElement2 = iframeDoc.getElementById('test-element-2'); - var iframeDoc2 = goog.dom.getFrameContentDocument(iframe2); - var iframeWindow2 = goog.dom.getWindow(iframeDoc2); - - iframeDoc2.write( - '<div id="test-element-3" ' + - ' style="position:absolute;left:500px;top:500px">hi mom!</div>'); - iframeDoc2.close(); - var testElement3 = iframeDoc2.getElementById('test-element-3'); - - assertCoordinateApprox(300, 300, 0, - goog.style.getPageOffset(testElement2)); - assertCoordinateApprox(500, 500, 0, - goog.style.getPageOffset(testElement3)); - - assertCoordinateApprox(350, 350, 0, - goog.style.getFramedPageOffset(testElement2, window)); - assertCoordinateApprox(300, 300, 0, - goog.style.getFramedPageOffset(testElement2, iframeWindow)); - - assertCoordinateApprox(600, 600, 0, - goog.style.getFramedPageOffset(testElement3, window)); - assertCoordinateApprox(550, 550, 0, - goog.style.getFramedPageOffset(testElement3, iframeWindow)); - assertCoordinateApprox(500, 500, 0, - goog.style.getFramedPageOffset(testElement3, iframeWindow2)); - - // Scroll the iframes a bit. - window.scrollBy(0, 5); - iframeWindow.scrollBy(0, 11); - iframeWindow2.scrollBy(0, 18); - - // On Firefox 2, scrolling inner iframes causes off by one errors - // in the page position, because we're using screen coords to compute them. - assertCoordinateApprox(300, 300, 2, - goog.style.getPageOffset(testElement2)); - assertCoordinateApprox(500, 500, 2, - goog.style.getPageOffset(testElement3)); - - assertCoordinateApprox(350, 350 - 11, 2, - goog.style.getFramedPageOffset(testElement2, window)); - assertCoordinateApprox(300, 300, 2, - goog.style.getFramedPageOffset(testElement2, iframeWindow)); - - assertCoordinateApprox(600, 600 - 18 - 11, 2, - goog.style.getFramedPageOffset(testElement3, window)); - assertCoordinateApprox(550, 550 - 18, 2, - goog.style.getFramedPageOffset(testElement3, iframeWindow)); - assertCoordinateApprox(500, 500, 2, - goog.style.getFramedPageOffset(testElement3, iframeWindow2)); -} - -/** - * Asserts that the coordinate is approximately equal to the given - * x and y coordinates, give or take delta. - */ -function assertCoordinateApprox(x, y, delta, coord) { - assertTrue('Expected x: ' + x + ', actual x: ' + coord.x, - coord.x >= x - delta && coord.x <= x + delta); - assertTrue('Expected y: ' + y + ', actual y: ' + coord.y, - coord.y >= y - delta && coord.y <= y + delta); -} - -function testTranslateRectForAnotherFrame() { - var rect = new goog.math.Rect(1, 2, 3, 4); - var thisDom = goog.dom.getDomHelper(); - goog.style.translateRectForAnotherFrame(rect, thisDom, thisDom); - assertEquals(1, rect.left); - assertEquals(2, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - var iframe = goog.dom.getElement('test-translate-frame-standard'); - var iframeDoc = goog.dom.getFrameContentDocument(iframe); - var iframeDom = goog.dom.getDomHelper(iframeDoc); - // Cannot rely on iframe starting at origin. - iframeDom.getWindow().scrollTo(0, 0); - // iframe is at (100, 150) and its body is not scrolled. - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100, rect.left); - assertEquals(2 + 150, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - iframeDom.getWindow().scrollTo(11, 13); - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100 - 11, rect.left); - assertEquals(2 + 150 - 13, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - iframe = goog.dom.getElement('test-translate-frame-quirk'); - iframeDoc = goog.dom.getFrameContentDocument(iframe); - iframeDom = goog.dom.getDomHelper(iframeDoc); - // Cannot rely on iframe starting at origin. - iframeDom.getWindow().scrollTo(0, 0); - // iframe is at (100, 350) and its body is not scrolled. - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100, rect.left); - assertEquals(2 + 350, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - iframeDom.getWindow().scrollTo(11, 13); - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100 - 11, rect.left); - assertEquals(2 + 350 - 13, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); -}; - -function testGetVisibleRectForElement() { - var container = goog.dom.getElement('test-visible'); - var el = goog.dom.getElement('test-visible-el'); - var dom = goog.dom.getDomHelper(el); - var winScroll = dom.getDocumentScroll(); - var winSize = dom.getViewportSize(); - - // Skip this test if the window size is small. Firefox3/Linux in Selenium - // sometimes fails without this check. - if (winSize.width < 20 || winSize.height < 20) { - return; - } - - // Move the container element to the window's viewport. - var h = winSize.height < 100 ? winSize.height / 2 : 100; - goog.style.setSize(container, winSize.width / 2, h); - goog.style.setPosition(container, 8, winScroll.y + winSize.height - h); - var visible = goog.style.getVisibleRectForElement(el); - var bounds = goog.style.getBounds(container); - // VisibleRect == Bounds rect of the offsetParent - assertNotNull(visible); - assertEquals(bounds.left, visible.left); - assertEquals(bounds.top, visible.top); - // Firefox sometimes returns a non-integer. - assertRoughlyEquals(bounds.left + bounds.width, visible.right, 1); - assertRoughlyEquals(bounds.top + bounds.height, visible.bottom, 1); - - // Move a part of the container element to outside of the viewpoert. - goog.style.setPosition(container, 8, winScroll.y + winSize.height - h / 2); - visible = goog.style.getVisibleRectForElement(el); - bounds = goog.style.getBounds(container); - // Confirm VisibleRect == Intersection of the bounds rect of the - // offsetParent and the viewport. - assertNotNull(visible); - assertEquals(bounds.left, visible.left); - assertEquals(bounds.top, visible.top); - assertRoughlyEquals(bounds.left + bounds.width, visible.right, 1); - assertRoughlyEquals(winScroll.y + winSize.height, visible.bottom, 1); - - // Move the container element to outside of the viewpoert. - goog.style.setPosition(container, 8, winScroll.y + winSize.height); - visible = goog.style.getVisibleRectForElement(el); - assertNull(visible); - - // Test the case with body element of height 0 - var iframe = goog.dom.getElement('test-visible-frame'); - var iframeDoc = goog.dom.getFrameContentDocument(iframe); - el = iframeDoc.getElementById('test-visible'); - visible = goog.style.getVisibleRectForElement(el); - - var iframeViewportSize = goog.dom.getDomHelper(el).getViewportSize(); - // NOTE(user): For iframe, the clipping viewport is always the iframe - // viewport, and not the actual browser viewport. - assertNotNull(visible); - assertEquals(0, visible.top); - assertEquals(iframeViewportSize.height, visible.bottom); - assertEquals(0, visible.left); - assertEquals(iframeViewportSize.width, visible.right); -}; - -function testGetVisibleRectForElementWithBodyScrolled() { - var container = goog.dom.getElement('test-visible2'); - var dom = goog.dom.getDomHelper(container); - var el = dom.createDom('div', undefined, 'Test'); - el.style.position = 'absolute'; - dom.append(container, el); - - container.style.position = 'absolute'; - goog.style.setPosition(container, 20, 500); - goog.style.setSize(container, 100, 150); - - // Scroll body container such that container is exactly at top. - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - // Top 100px is clipped by window viewport. - window.scrollTo(0, 600); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(600, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - var winSize = dom.getViewportSize(); - - // Left 50px is clipped by window viewport. - // Right part is clipped by window viewport. - goog.style.setSize(container, 10000, 150); - window.scrollTo(70, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(70, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(70 + winSize.width, visibleRect.right, EPSILON); - - // Bottom part is clipped by window viewport. - goog.style.setSize(container, 100, 2000); - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - assertRoughlyEquals(500 + winSize.height, visibleRect.bottom, EPSILON); - - goog.style.setPosition(container, 10000, 10000); - assertNull(goog.style.getVisibleRectForElement(el)); -} - -function testGetVisibleRectForElementWithNestedAreaAndNonOffsetAncestor() { - // IE7 quirks mode somehow consider container2 below as offset parent - // of the element, which is incorrect. - if (goog.userAgent.IE && !goog.userAgent.isVersion('8')) { - return; - } - - var container = goog.dom.getElement('test-visible2'); - var dom = goog.dom.getDomHelper(container); - var container2 = dom.createDom('div'); - var el = dom.createDom('div', undefined, 'Test'); - el.style.position = 'absolute'; - dom.append(container, container2); - dom.append(container2, el); - - container.style.position = 'absolute'; - goog.style.setPosition(container, 20, 500); - goog.style.setSize(container, 100, 150); - - // container2 is a scrollable container but is not an offsetParent of - // the element. It is ignored in the computation. - container2.style.overflow = 'hidden'; - container2.style.marginTop = '50px'; - container2.style.marginLeft = '100px'; - goog.style.setSize(container2, 150, 100); - - // Scroll body container such that container is exactly at top. - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - // Top 100px is clipped by window viewport. - window.scrollTo(0, 600); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(600, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - var winSize = dom.getViewportSize(); - - // Left 50px is clipped by window viewport. - // Right part is clipped by window viewport. - goog.style.setSize(container, 10000, 150); - window.scrollTo(70, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(70, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(70 + winSize.width, visibleRect.right, EPSILON); - - // Bottom part is clipped by window viewport. - goog.style.setSize(container, 100, 2000); - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - assertRoughlyEquals(500 + winSize.height, visibleRect.bottom, EPSILON); - - goog.style.setPosition(container, 10000, 10000); - assertNull(goog.style.getVisibleRectForElement(el)); -} - -function testGetVisibleRectForElementInsideNestedScrollableArea() { - var container = goog.dom.getElement('test-visible2'); - var dom = goog.dom.getDomHelper(container); - var container2 = dom.createDom('div'); - var el = dom.createDom('div', undefined, 'Test'); - el.style.position = 'absolute'; - dom.append(container, container2); - dom.append(container2, el); - - container.style.position = 'absolute'; - goog.style.setPosition(container, 100 /* left */, 500 /* top */); - goog.style.setSize(container, 300 /* width */, 300 /* height */); - - container2.style.overflow = 'hidden'; - container2.style.position = 'relative'; - goog.style.setPosition(container2, 100, 50); - goog.style.setSize(container2, 150, 100); - - // Scroll body container such that container is exactly at top. - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(350, visibleRect.right, EPSILON); - - // Left 50px is clipped by container. - goog.style.setPosition(container2, -50, 50); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(100, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(200, visibleRect.right, EPSILON); - - // Right part is clipped by container. - goog.style.setPosition(container2, 100, 50); - goog.style.setWidth(container2, 1000, 100); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(400, visibleRect.right, EPSILON); - - // Top 50px is clipped by container. - goog.style.setStyle(container2, 'width', '150px'); - goog.style.setStyle(container2, 'top', '-50px'); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(550, visibleRect.bottom, EPSILON); - assertRoughlyEquals(350, visibleRect.right, EPSILON); - - // Bottom part is clipped by container. - goog.style.setStyle(container2, 'top', '50px'); - goog.style.setStyle(container2, 'height', '1000px'); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(800, visibleRect.bottom, EPSILON); - assertRoughlyEquals(350, visibleRect.right, EPSILON); - - // Outside viewport. - goog.style.setStyle(container2, 'top', '10000px'); - goog.style.setStyle(container2, 'left', '10000px'); - assertNull(goog.style.getVisibleRectForElement(el)); -} - -function testScrollIntoContainerView() { - var container = goog.dom.getElement('scrollable-container'); - - // Scroll the minimum amount to make the elements visible. - goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container); - assertEquals('scroll to item7', 79, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item8'), container); - assertEquals('scroll to item8', 100, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container); - assertEquals('item7 still visible', 100, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item1'), container); - assertEquals('scroll to item1', 17, container.scrollTop); - - // Center the element in the first argument. - goog.style.scrollIntoContainerView(goog.dom.getElement('item1'), container, - true); - assertEquals('center item1', 0, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item4'), container, - true); - assertEquals('center item4', 48, container.scrollTop); - - // The element is higher than the container. - goog.dom.getElement('item3').style.height = '140px'; - goog.style.scrollIntoContainerView(goog.dom.getElement('item3'), container); - assertEquals('show item3 with increased height', 59, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item3'), container, - true); - assertEquals('center item3 with increased height', 87, container.scrollTop); - goog.dom.getElement('item3').style.height = ''; - - // Scroll to non-integer position. - goog.dom.getElement('item4').style.height = '21px'; - goog.style.scrollIntoContainerView(goog.dom.getElement('item4'), container, - true); - assertEquals('scroll position is rounded down', 48, container.scrollTop); - goog.dom.getElement('item4').style.height = ''; -} - -function testScrollBarWidth() { - var width = goog.style.getScrollbarWidth(); - assertTrue(width > 0); - - var outer = goog.dom.getElement('test-scrollbarwidth'); - var inner = goog.dom.getElementsByTagNameAndClass('div', null, outer)[0]; - assertTrue('should have a scroll bar', hasVerticalScroll(outer)); - assertTrue('should have a scroll bar', hasHorizontalScroll(outer)); - - // Get the inner div absolute width - goog.style.setStyle(outer, 'width', '100%'); - assertTrue('should have a scroll bar', hasVerticalScroll(outer)); - assertFalse('should not have a scroll bar', hasHorizontalScroll(outer)); - var innerAbsoluteWidth = inner.offsetWidth; - - // Leave the vertical scroll and remove the horizontal by using the scroll - // bar width calculation. - goog.style.setStyle(outer, 'width', - (innerAbsoluteWidth + width) + 'px'); - assertTrue('should have a scroll bar', hasVerticalScroll(outer)); - assertFalse('should not have a scroll bar', hasHorizontalScroll(outer)); - - // verify by adding 1 more pixel (brings back the vertical scroll bar). - goog.style.setStyle(outer, 'width', - (innerAbsoluteWidth + width - 1) + 'px'); - assertTrue('should have a scroll bar', hasVerticalScroll(outer)); - assertTrue('should have a scroll bar', hasHorizontalScroll(outer)); -} - -function testOffsetParent() { - var parent = goog.dom.getElement('offset-parent'); - var child = goog.dom.getElement('offset-child'); - assertEquals(parent, goog.style.getOffsetParent(child)); -} - -function testOverflowOffsetParent() { - var $ = goog.dom.getElement; - var parent = goog.dom.getElement('offset-parent-overflow'); - var child = goog.dom.getElement('offset-child-overflow'); - assertEquals(parent, goog.style.getOffsetParent(child)); -} - -function hasVerticalScroll(el) { - return el.clientWidth != 0 && el.offsetWidth - el.clientWidth > 0; -} - -function hasHorizontalScroll(el) { - return el.clientHeight != 0 && el.offsetHeight - el.clientHeight > 0; -} - -function isIE8() { - return goog.userAgent.IE && goog.userAgent.product.isVersion('8') && - !goog.userAgent.product.isVersion('9'); -} -</script> - -</body> -</html> diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test.html.svn-base deleted file mode 100644 index 015b260..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test.html.svn-base +++ /dev/null @@ -1,2353 +0,0 @@ -<!DOCTYPE html> -<!-- - - When changing this, make sure that style_quirks_test.html is kept in sync. - ---> -<html> -<!-- -Copyright 2006 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> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> -<title>Closure Unit Tests - goog.dom.style</title> -<script src="../base.js"></script> -<script> - -goog.require('goog.color'); -goog.require('goog.dom'); -goog.require('goog.events.BrowserEvent'); -goog.require('goog.math.Coordinate'); -goog.require('goog.math.Size'); -goog.require('goog.style'); -goog.require('goog.style_test'); -goog.require('goog.testing.jsunit'); -goog.require('goog.userAgent'); - -</script> -<script> -// IE before version 6 will always be border box -var isBorderBox = goog.userAgent.IE && !goog.userAgent.isVersion('6'); -</script> -<style> - -i { - font-family: Times, sans-serif; - font-size: 5em; -} - -#testEl5 { - display: none; -} - -#styleTest1 { - width: 120px; - text-decoration: underline; -} - -#bgcolorTest0 { - background-color: #f00; -} - -#bgcolorTest1 { - background-color: #ff0000; -} - -#bgcolorTest2 { - background-color: rgb(255, 0, 0); -} - -#bgcolorTest3 { - background-color: rgb(100%, 0%, 0%); -} - -#bgcolorTest5 { - background-color: lightblue; -} - -#bgcolorTest6 { - background-color: inherit; -} - -#bgcolorTest7 { - background-color: transparent; -} - -.rtl { - direction: rtl; -} - -.ltr { - direction: ltr; -} - -#pos-scroll-abs { - position: absolute; - top: 200px; - left: 100px; -} - -#pos-scroll-abs-1 { - overflow: scroll; - width: 100px; - height: 100px; -} - -#pos-scroll-abs-2 { - position: absolute; - top: 100px; - left: 100px; - width: 500px; - background-color: pink; -} - -#abs-upper-left { - position: absolute; - top: 0px; - left: 0px; -} - -#no-text-font-styles { - font-family: "Helvetica", Times, serif; - font-size: 30px; -} - -.century { - font-family: "Comic Sans MS", "Century Schoolbook L", serif; -} - -#size-a, -#size-e { - width: 100px; - height: 100px; - background: red; - padding: 0; - border-style: solid; - border-color: black; - border-width: 0; -} - -#size-b { - width: 100px; - height: 100px; - background: red; - border: 10px solid black; -} - -#size-c { - width: 100px; - height: 100px; - background: red; - border: 10px solid black; - padding: 10px; - overflow: auto; -} - -#size-d { - width: 10em; - height: 2cm; - background: red; - border: thick solid black; - padding: 2mm; -} - -#size-f { - border-width: 0; - margin: 0; - padding: 0; -} - -#css-position-absolute { - position: absolute; -} - -#css-overflow-hidden { - overflow: hidden; -} - -#css-z-index-200 { - position:relative; - z-index: 200; -} - -#css-text-align-center { - text-align: center; -} - -#css-cursor-pointer { - cursor: pointer; -} - -#test-opacity { - opacity: 0.5; - -moz-opacity: 0.5; - filter: alpha(opacity=50); -} - -#test-frame-offset { - display: block; - position: absolute; - top: 50px; - left: 50px; - width: 50px; - height: 50px; -} - -#test-visible { - background: yellow; - position: absolute; - overflow: hidden; -} - -#test-visible2 { - background: #ebebeb; - position: absolute; - overflow: hidden; -} - -.scrollable-container { - border: 8px solid blue; - padding: 16px; - margin: 32px; - width: 100px; - height: 100px; - overflow: auto; - position: absolute; - left: 400px; - top: 0; -} - -.scrollable-container-item { - margin: 1px; - border: 2px solid gray; - padding: 4px; - width: auto; - height: 20px; -} - -</style> -</head> -<body> - <div id="testEl"> - <span>Test Element</span> - </div> - - <div id="testEl5"> - <span>Test Element 5</span> - </div> - - <table id="table1"> - <tr> - <td id="td1">td1</td> - </tr> - </table> - - <span id="span0">span0</span> - - <ul> - <li id="li1">li1</li> - </ul> - - <span id="span1" class="test1"></span> - <span id="span2" class="test1"></span> - <span id="span3" class="test2"></span> - <span id="span4" class="test3"></span> - <span id="span5" class="test1"></span> - <span id="span6" class="test1"></span> - - <p id="p1"></p> - - <div id="styleTest1"></div> - <div id="styleTest2" style="width:100px;text-decoration:underline"></div> - <div id="styleTest3"></div> - - <!-- Paragraph to test element child and sibling --> - <p id="p2"> - <!-- Comment --> - a - <b id="b1">c</b> - d - <!-- Comment --> - e - <b id="b2">f</b> - g - <!-- Comment --> - </p> - - <p style="background-color: #eee"> - <span id="bgcolorTest0">1</span> - <span id="bgcolorTest1">1</span> - <span id="bgcolorTest2">2</span> - <span id="bgcolorTest3">3</span> - <span id="bgcolorTest4" style="background-color:#ff0000">4</span> - <span id="bgcolorTest5">5</span> - <span id="bgcolorTest6">6</span> - <span id="bgcolorTest7">7</span> - <span id="bgcolorDest">Dest</span> - <span id="installTest0">Styled 0</span> - <span id="installTest1">Styled 1</span> - </p> - - <div class='rtl-test' dir='ltr' id='rtl1'> - <div dir='rtl' id='rtl2'>right to left</div> - <div dir='ltr' id='rtl3'>left to right</div> - <div id='rtl4'>left to right (inherited)</div> - <div id='rtl5' style="direction: rtl">right to left (style)</div> - <div id='rtl6' style="direction: ltr">left to right (style)</div> - <div id='rtl7' class=rtl>right to left (css)</div> - <div id='rtl8' class=ltr>left to right (css)</div> - <div class=rtl> - <div id='rtl9'>right to left (css)</div> - </div> - <div class=ltr> - <div id='rtl10'>left to right (css)</div> - </div> - </div> - - <div id="pos-scroll-abs"> - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text some - text some text some text some text some text some text. Some text some text - some text some text some text some text some text some text some text some - text. Some text some text some text some text some text some text some text - some text some text some text. - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text some - text some text some text some text some text some text. Some text some text - some text some text some text some text some text some text some text some - text. Some text some text some text some text some text some text some text - some text some text some text. - - <div id="pos-scroll-abs-1"> - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text - some text some text some text some text some text some text. Some text - some text some text some text some text some text some text some text some - text some text. Some text some text some text some text some text some - text some text some text some text some text. - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text - some text some text some text some text some text some text. Some text - some text some text some text some text some text some text some text some - text some text. Some text some text some text some text some text some - text some text some text some text some text. - - <div id="pos-scroll-abs-2"> - - <p>Some text some text some text some text some text some text some text - some text some text some text. Some text some text some text some text - some text some text some text some text some text some text. Some text - some text some text some text some text some text some text some text - some text some text. Some text some text some text some text some text - some text some text some text some text some text. - - </div> - - </div> - - </div> - - <div id="abs-upper-left"> - foo - </div> - - <div id="no-text-font-styles"> - <font size="+1" face="Times,serif" id="font-tag">Times</font> - <pre id="pre-font">pre text</pre> - <span style="font:inherit" id="inherit-font">inherited</span> - <span style="font-family:Times,sans-serif; font-size:3in" - id="times-font-family">Times</span> - <b id="bold-font">Bolded</b> - <i id="css-html-tag-redefinition">Times</i> - <span id="small-text" class="century" style="font-size:small">eensy</span> - <span id="x-small-text" style="font-size:x-small">weensy</span> - <span style="font:50% badFont" id="font-style-badfont"> - badFont - <span style="font:inherit" id="inherit-50pct-font"> - same size as badFont - </span> - </span> - <span id="icon-font" style="font:icon">Icon Font</span> - </div> - <span id="no-font-style">plain</span> - <span style="font-family:Arial" id="nested-font">Arial<span style="font-family:Times">Times nested inside Arial</span></span> - <img id="img-font-test" src=""/> - - <span style="font-size:25px"> - <span style="font-size:12.5px" id="font-size-12-point-5-px">12.5PX</span> - <span style="font-size:0.5em" id="font-size-50-pct-of-25-px">12.5PX</span> - </span> - -<div id="size-a"></div> - -<div id="size-b"></div> - -<div id="size-c">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -xxxxxxxxxxxxxxxx</div> - -<div id="size-d">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx -xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx -xxxxxxxx x</div> - -<div id="size-e"></div> - -<div id="size-f">hello</div> - -<div style="font-size: 1px"> - <div style="font-size: 2em"><span id="em-font-size"></span></div> -</div> - -<div id="no-float"></div> - -<div id="float-none" style="float:none"></div> - -<div id="float-left" style="float:left"></div> - -<div id="float-test"></div> - -<div id="position-unset"></div> -<div id="style-position-relative" style="position:relative"></div> -<div id="style-position-fixed" style="position:fixed"></div> -<div id="css-position-absolute"></div> - -<div id="style-overflow-scroll" style="overflow:scroll"></div> -<div id="css-overflow-hidden"></div> - -<!-- Getting the computed z-index of an unpositioned element is unspecified. --> -<div id="style-z-index-200" style="position:relative;z-index:200"></div> -<div id="css-z-index-200"></div> - -<div id="style-text-align-right" style="text-align:right"> - <div id="style-text-align-right-inner">foo</div> -</div> -<div id="css-text-align-center"></div> - -<div id="style-cursor-move" style="cursor:move"> - <span id="style-cursor-move-inner">foo</span> -</div> -<div id="css-cursor-pointer"></div> - -<div id="height-test" style="display:inline-block;position:relative"> - <div id="height-test-inner" style="display:inline-block"> - foo - </div> -</div> - -<div id="test-opacity"></div> - -<iframe id="test-frame-offset"></iframe> - -<iframe id="test-translate-frame-standard" src="style_test_standard.html" - style="overflow:auto;position:absolute;left:100px;top:150px;width:200px;height:200px;border:0px;"> -</iframe> -<iframe id="test-translate-frame-quirk" src="style_test_quirk.html" - style="overflow:auto;position:absolute;left:100px;top:350px;width:200px;height:200px;border:0px;margin:0px;"> -</iframe> - -<iframe - id="test-visible-frame" - src="style_test_iframe_standard.html" - style="width: 200px; height: 200px; border: 0px;"> -</iframe> - -<div id="test-scrollbarwidth" style="background-color: orange; width: 100px; height: 100px; overflow: auto;"> - <div style='width: 200px; height: 200px; background-color: red'>Test Scroll bar width with scroll</div> -</div> - -<div id="scrollable-container" class="scrollable-container"> - <!-- - Workaround for overlapping top padding of the container and top margin of - the first item in Internet Explorer 6 and 7. - See http://www.quirksmode.org/bugreports/archives/2005/01/IE_nested_boxes_padding_topmargin_top.html#c11285 - --> - <div style="height: 0"><!-- --></div> - <div id="item1" class="scrollable-container-item">1</div> - <div id="item2" class="scrollable-container-item">2</div> - <div id="item3" class="scrollable-container-item">3</div> - <div id="item4" class="scrollable-container-item">4</div> - <div id="item5" class="scrollable-container-item">5</div> - <div id="item6" class="scrollable-container-item">6</div> - <div id="item7" class="scrollable-container-item">7</div> - <div id="item8" class="scrollable-container-item">8</div> -</div> - -<div id="test-visible"> -Test-visible -<div id="test-visible-el" style="height:200px;">Test-visible</div> -Test-visible -</div> - -<div id="test-visible2"></div> - -<div id="msFilter" style="-ms-filter:'alpha(opacity=0)'"> - A div</div> -<div id="filter" style="filter:alpha(opacity=0)"> - Another div</div> - -<div id="offset-parent" style="position:relative"> - <div id="offset-child">child</div> -</div> - -<div id="offset-parent-overflow" - style="overflow: scroll; width: 50px; height: 50px;"> - <a id="offset-child-overflow"> - scrollscrollscrollscrollscrollscrollscrollscroll - </a> -</div> - -<script> - -var EPSILON = 2; -var $ = goog.dom.getElement; - -function setUpPage() { - var viewportSize = goog.dom.getViewportSize(); - // When the window is too short or not wide enough, some tests, especially - // those for off-screen elements, fail. Oddly, the most reliable - // indicator is a width of zero (which is of course erroneous), since - // height sometimes includes a scroll bar. We can make no assumptions on - // window size on the Selenium farm. - if (goog.userAgent.IE && !viewportSize.width) { - // Move to origin, since IE won't resize outside the screen. - window.moveTo(0, 0); - window.resizeTo(640, 480); - } -} - -function setUp() { - window.scrollTo(0, 0); -} - -function tearDown() { - var testVisibleDiv2 = goog.dom.getElement('test-visible2'); - testVisibleDiv2.setAttribute('style', ''); - testVisibleDiv2.innerHTML = ''; -} - -function testSetStyle() { - var el = $('span1'); - goog.style.setStyle(el, 'textDecoration', 'underline'); - assertEquals('Should be underline', 'underline', el.style.textDecoration); -} - -function testSetStyleMap() { - var el = $('span6'); - - var styles = { - 'background-color': 'blue', - 'font-size': '100px', - textAlign: 'center' - }; - - goog.style.setStyle(el, styles); - - var answers = { - backgroundColor: 'blue', - fontSize: '100px', - textAlign: 'center' - }; - - goog.object.forEach(answers, function(value, style) { - assertEquals('Should be ' + value, value, el.style[style]); - }); -} - -function testSetStyleWithNonCamelizedString() { - var el = $('span5'); - goog.style.setStyle(el, 'text-decoration', 'underline'); - assertEquals('Should be underline', 'underline', el.style.textDecoration); -} - -function testGetStyle() { - var el = goog.dom.getElement('styleTest3'); - goog.style.setStyle(el, 'width', '80px'); - goog.style.setStyle(el, 'textDecoration', 'underline'); - - assertEquals('80px', goog.style.getStyle(el, 'width')); - assertEquals('underline', goog.style.getStyle(el, 'textDecoration')); - assertEquals('underline', goog.style.getStyle(el, 'text-decoration')); - // Non set properties are always empty strings. - assertEquals('', goog.style.getStyle(el, 'border')); -} - -function testGetStyleMsFilter() { - // Element with -ms-filter style set. - var e = goog.dom.getElement('msFilter'); - - if (goog.userAgent.IE && goog.userAgent.isVersion(8)) { - // Only IE8 supports -ms-filter and returns it as value for the "filter" - // property. When in compatibility mode, -ms-filter is not supported - // and IE8 behaves as IE7 so the other case will apply. - assertEquals('alpha(opacity=0)', goog.style.getStyle(e, 'filter')); - } else { - // Any other browser does not support ms-filter so it returns empty string. - assertEquals('', goog.style.getStyle(e, 'filter')); - } -} - -function testGetStyleFilter() { - // Element with filter style set. - var e = goog.dom.getElement('filter'); - - if (goog.userAgent.IE) { - // Filter supported. - assertEquals('alpha(opacity=0)', goog.style.getStyle(e, 'filter')); - } else { - assertEquals('', goog.style.getStyle(e, 'filter')); - } -} - -function testGetComputedStyleMsFilter() { - // Element with -ms-filter style set. - var e = goog.dom.getElement('msFilter'); - - if (goog.userAgent.IE) { - // IE always returns empty string for computed styles. - assertEquals('', goog.style.getComputedStyle(e, 'filter')); - } else { - // Non IE returns 'none' for filter as it is an SVG property - assertEquals('none', goog.style.getComputedStyle(e, 'filter')); - } -} - -function testGetComputedStyleFilter() { - // Element with filter style set. - var e = goog.dom.getElement('filter'); - - if (goog.userAgent.IE) { - // IE always returns empty string for computed styles. - assertEquals('', goog.style.getComputedStyle(e, 'filter')); - } else { - // Non IE returns 'none' for filter as it is an SVG property - assertEquals('none', goog.style.getComputedStyle(e, 'filter')); - } -} - -function testGetComputedPosition() { - assertEquals('position not set', 'static', - goog.style.getComputedPosition($('position-unset'))); - assertEquals('position:relative in style attribute', 'relative', - goog.style.getComputedPosition($('style-position-relative'))); - assertEquals('position:fixed in style attribute', 'fixed', - goog.style.getComputedPosition($('style-position-fixed'))); - assertEquals('position:absolute in css', 'absolute', - goog.style.getComputedPosition($('css-position-absolute'))); -} - -function testGetComputedOverflowXAndY() { - assertEquals('overflow-x:scroll in style attribute', 'scroll', - goog.style.getComputedOverflowX($('style-overflow-scroll'))); - assertEquals('overflow-y:scroll in style attribute', 'scroll', - goog.style.getComputedOverflowY($('style-overflow-scroll'))); - assertEquals('overflow-x:hidden in css', 'hidden', - goog.style.getComputedOverflowX($('css-overflow-hidden'))); - assertEquals('overflow-y:hidden in css', 'hidden', - goog.style.getComputedOverflowY($('css-overflow-hidden'))); -} - -function testGetComputedZIndex() { - assertEquals('z-index:200 in style attribute', '200', - '' + goog.style.getComputedZIndex($('style-z-index-200'))); - assertEquals('z-index:200 in css', '200', - '' + goog.style.getComputedZIndex($('css-z-index-200'))); -} - -function testGetComputedTextAlign() { - assertEquals('text-align:right in style attribute', 'right', - goog.style.getComputedTextAlign($('style-text-align-right'))); - assertEquals( - 'text-align:right inherited from parent', 'right', - goog.style.getComputedTextAlign($('style-text-align-right-inner'))); - assertEquals('text-align:center in css', 'center', - goog.style.getComputedTextAlign($('css-text-align-center'))); -} - -function testGetComputedCursor() { - assertEquals('cursor:move in style attribute', 'move', - goog.style.getComputedCursor($('style-cursor-move'))); - assertEquals('cursor:move inherited from parent', 'move', - goog.style.getComputedCursor($('style-cursor-move-inner'))); - assertEquals('cursor:poiner in css', 'pointer', - goog.style.getComputedCursor($('css-cursor-pointer'))); -} - -function testGetBackgroundColor() { - var dest = $('bgcolorDest'); - - for (var i = 0; $('bgcolorTest' + i); i++) { - var src = $('bgcolorTest' + i); - var bgColor = goog.style.getBackgroundColor(src); - - dest.style.backgroundColor = bgColor; - assertEquals('Background colors should be equal', - goog.style.getBackgroundColor(src), - goog.style.getBackgroundColor(dest)); - - try { - // goog.color.parse throws a generic exception if handed input it - // doesn't understand. - var c = goog.color.parse(bgColor); - assertEquals('rgb(255,0,0)', goog.color.hexToRgbStyle(c.hex)); - } catch (e) { - // Internet Explorer is unable to parse colors correctly after test 4. - // Other browsers may vary, but all should be able to handle straight - // hex input. - assertFalse('Should be able to parse color "' + bgColor + '"', i < 5); - } - } -} - -function testSetPosition() { - var el = $('testEl'); - - goog.style.setPosition(el, 100, 100); - assertEquals('100px', el.style.left); - assertEquals('100px', el.style.top); - - goog.style.setPosition(el, '50px', '25px'); - assertEquals('50px', el.style.left); - assertEquals('25px', el.style.top); - - goog.style.setPosition(el, '10ex', '25px'); - assertEquals('10ex', el.style.left); - assertEquals('25px', el.style.top); - - goog.style.setPosition(el, '10%', '25%'); - assertEquals('10%', el.style.left); - assertEquals('25%', el.style.top); - - // ignores stupid units - goog.style.setPosition(el, 0, 0); - // TODO(user): IE errors if you set these values. Should we make setStyle - // catch these? Or leave it up to the app. Fixing the tests for now. - //goog.style.setPosition(el, '10rainbows', '25rainbows'); - assertEquals('0px', el.style.left); - assertEquals('0px', el.style.top); - - - goog.style.setPosition(el, new goog.math.Coordinate(20,40)); - assertEquals('20px', el.style.left); - assertEquals('40px', el.style.top); -} - -function testGetClientPositionAbsPositionElement() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - document.body.appendChild(div); - var pos = goog.style.getClientPosition(div); - assertEquals(100, pos.x); - assertEquals(200, pos.y); -} - -function testGetClientPositionNestedElements() { - var innerDiv = goog.dom.createDom('DIV'); - innerDiv.style.position = 'relative'; - innerDiv.style.left = '-10px'; - innerDiv.style.top = '-10px'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '150px'; - div.style.top = '250px'; - div.appendChild(innerDiv); - document.body.appendChild(div); - var pos = goog.style.getClientPosition(innerDiv); - assertEquals(140, pos.x); - assertEquals(240, pos.y); -} - -function testGetClientPositionOfOffscreenElement() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '2000px'; - div.style.top = '2000px'; - div.style.width = '10px'; - div.style.height = '10px'; - document.body.appendChild(div); - - try { - window.scroll(0, 0); - var pos = goog.style.getClientPosition(div); - assertEquals(2000, pos.x); - assertEquals(2000, pos.y); - - // The following tests do not work in Gecko 1.8 and below, due to an - // obscure off-by-one bug in goog.style.getPageOffset. Same for IE. - if (!goog.userAgent.IE && - !(goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9'))) { - window.scroll(1, 1); - var pos = goog.style.getClientPosition(div); - assertEquals(1999, pos.x); - assertEquals(1999, pos.y); - - window.scroll(2, 2); - pos = goog.style.getClientPosition(div); - assertEquals(1998, pos.x); - assertEquals(1998, pos.y); - - window.scroll(100, 100); - pos = goog.style.getClientPosition(div); - assertEquals(1900, pos.x); - assertEquals(1900, pos.y); - } - } - finally { - window.scroll(0, 0); - document.body.removeChild(div); - } -} - -function testGetClientPositionEvent() { - var mockEvent = {}; - mockEvent.clientX = 100; - mockEvent.clientY = 200; - var pos = goog.style.getClientPosition(mockEvent); - assertEquals(100, pos.x); - assertEquals(200, pos.y); -} - -function testGetClientPositionTouchEvent() { - var mockTouchEvent = {}; - - mockTouchEvent.targetTouches = [{}]; - mockTouchEvent.targetTouches[0].clientX = 100; - mockTouchEvent.targetTouches[0].clientY = 200; - - mockTouchEvent.touches = [{}]; - mockTouchEvent.touches[0].clientX = 100; - mockTouchEvent.touches[0].clientY = 200; - - var pos = goog.style.getClientPosition(mockTouchEvent); - assertEquals(100, pos.x); - assertEquals(200, pos.y); -} - -function testGetClientPositionAbstractedTouchEvent() { - var e = new goog.events.BrowserEvent(); - e.event_ = {}; - e.event_.touches = [{}]; - e.event_.touches[0].clientX = 100; - e.event_.touches[0].clientY = 200; - e.event_.targetTouches = [{}]; - e.event_.targetTouches[0].clientX = 100; - e.event_.targetTouches[0].clientY = 200; - var pos = goog.style.getClientPosition(e); - assertEquals(100, pos.x); - assertEquals(200, pos.y); -} - -function testGetPageOffsetAbsPositionedElement() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - assertEquals(100, pos.x); - assertEquals(200, pos.y); -} - -function testGetPageOffsetNestedElements() { - var innerDiv = goog.dom.createDom('DIV'); - innerDiv.style.position = 'relative'; - innerDiv.style.left = '-10px'; - innerDiv.style.top = '-10px'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '150px'; - div.style.top = '250px'; - div.appendChild(innerDiv); - document.body.appendChild(div); - var pos = goog.style.getPageOffset(innerDiv); - assertEquals(140, pos.x); - assertEquals(240, pos.y); -} - -function testGetPageOffsetWithBodyPadding() { - document.body.style.margin = '40px' - document.body.style.padding = '60px' - document.body.style.borderWidth = '70px'; - try { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - // Margin will affect position, but padding and borders should not. - div.style.margin = '1px'; - div.style.padding = '2px'; - div.style.borderWidth = '3px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - assertEquals(101, pos.x); - assertEquals(201, pos.y); - } - finally { - document.body.removeChild(div); - document.body.style.margin = ''; - document.body.style.padding = ''; - document.body.style.borderWidth = ''; - } -} - -function testGetPageOffsetWithDocumentElementPadding() { - document.documentElement.style.margin = '40px'; - document.documentElement.style.padding = '60px'; - document.documentElement.style.borderWidth = '70px'; - try { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - // Margin will affect position, but padding and borders should not. - div.style.margin = '1px'; - div.style.padding = '2px'; - div.style.borderWidth = '3px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - // FF3 (but not beyond) gets confused by document margins. - if (goog.userAgent.GECKO && goog.userAgent.isVersion('1.9') && - !goog.userAgent.isVersion('1.9.1')) { - assertEquals(141, pos.x); - assertEquals(241, pos.y); - } else { - assertEquals(101, pos.x); - assertEquals(201, pos.y); - } - } - finally { - document.body.removeChild(div); - document.documentElement.style.margin = ''; - document.documentElement.style.padding = ''; - document.documentElement.style.borderWidth = ''; - } -} - -function testGetPageOffsetElementOffscreen() { - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '10000px'; - div.style.top = '20000px'; - document.body.appendChild(div); - window.scroll(0, 0); - try { - var pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - - // The following tests do not work in Gecko 1.8 and below, due to an - // obscure off-by-one bug in goog.style.getPageOffset. Same for IE. - if (!(goog.userAgent.IE) && - !(goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9'))) { - window.scroll(1, 1); - pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - - window.scroll(1000, 2000); - pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - - window.scroll(10000, 20000); - pos = goog.style.getPageOffset(div); - assertEquals(10000, pos.x); - assertEquals(20000, pos.y); - } - } - // Undo changes. - finally { - document.body.removeChild(div); - window.scroll(0, 0); - } -} - -function testGetPageOffsetFixedPositionElements() { - // Skip these tests in certain browsers. - // position:fixed is not supported in IE before version 7 - if (!goog.userAgent.IE || !goog.userAgent.isVersion('6')) { - // Test with a position fixed element - var div = goog.dom.createDom('DIV'); - div.style.position = 'fixed'; - div.style.top = '10px'; - div.style.left = '10px'; - document.body.appendChild(div); - var pos = goog.style.getPageOffset(div); - assertEquals(10, pos.x); - assertEquals(10, pos.y); - - // Test with a position fixed element as parent - var innerDiv = goog.dom.createDom('DIV'); - div = goog.dom.createDom('DIV'); - div.style.position = 'fixed'; - div.style.top = '10px'; - div.style.left = '10px'; - div.style.padding = '5px'; - div.appendChild(innerDiv); - document.body.appendChild(div); - pos = goog.style.getPageOffset(innerDiv); - assertEquals(15, pos.x); - assertEquals(15, pos.y); - } -} - -function testGetPositionTolerantToNoDocumentElementBorder() { - // In IE, removing the border on the document element undoes the normal - // 2-pixel offset. Ensure that we're correctly compensating for both cases. - try { - document.documentElement.style.borderWidth = '0'; - var div = goog.dom.createDom('DIV'); - div.style.position = 'absolute'; - div.style.left = '100px'; - div.style.top = '200px'; - document.body.appendChild(div); - // Test all major positioning methods. - var pos = goog.style.getClientPosition(div); - assertEquals(100, pos.x); - assertEquals(200, pos.y); - var offset = goog.style.getPageOffset(div); - assertEquals(100, offset.x); - assertEquals(200, offset.y); - } finally { - document.documentElement.style.borderWidth = ''; - } -} - -function testSetSize() { - var el = $('testEl'); - - goog.style.setSize(el, 100, 100); - assertEquals('100px', el.style.width); - assertEquals('100px', el.style.height); - - goog.style.setSize(el, '50px', '25px'); - assertEquals('should be "50px"', '50px', el.style.width); - assertEquals('should be "25px"', '25px', el.style.height); - - goog.style.setSize(el, '10ex', '25px'); - assertEquals('10ex', el.style.width); - assertEquals('25px', el.style.height); - - goog.style.setSize(el, '10%', '25%'); - assertEquals('10%', el.style.width); - assertEquals('25%', el.style.height); - - // ignores stupid units - goog.style.setSize(el, 0, 0); - // TODO(user): IE errors if you set these values. Should we make setStyle - // catch these? Or leave it up to the app. Fixing the tests for now. - //goog.style.setSize(el, '10rainbows', '25rainbows'); - assertEquals('0px', el.style.width); - assertEquals('0px', el.style.height); - - goog.style.setSize(el, new goog.math.Size(20,40)); - assertEquals('20px', el.style.width); - assertEquals('40px', el.style.height); -} - -function testSetWidthAndHeight() { - var el = $('testEl'); - - // Replicate all of the setSize tests above. - - goog.style.setWidth(el, 100); - goog.style.setHeight(el, 100); - assertEquals('100px', el.style.width); - assertEquals('100px', el.style.height); - - goog.style.setWidth(el, '50px'); - goog.style.setHeight(el, '25px'); - assertEquals('should be "50px"', '50px', el.style.width); - assertEquals('should be "25px"', '25px', el.style.height); - - goog.style.setWidth(el, '10ex'); - goog.style.setHeight(el, '25px'); - assertEquals('10ex', el.style.width); - assertEquals('25px', el.style.height); - - goog.style.setWidth(el, '10%'); - goog.style.setHeight(el, '25%'); - assertEquals('10%', el.style.width); - assertEquals('25%', el.style.height); - - goog.style.setWidth(el, 0); - goog.style.setHeight(el, 0); - assertEquals('0px', el.style.width); - assertEquals('0px', el.style.height); - - goog.style.setWidth(el, 20); - goog.style.setHeight(el, 40); - assertEquals('20px', el.style.width); - assertEquals('40px', el.style.height); - - // Additional tests testing each separately. - goog.style.setWidth(el, ''); - goog.style.setHeight(el, ''); - assertEquals('', el.style.width); - assertEquals('', el.style.height); - - goog.style.setHeight(el, 20); - assertEquals('', el.style.width); - assertEquals('20px', el.style.height); - - goog.style.setWidth(el, 40); - assertEquals('40px', el.style.width); - assertEquals('20px', el.style.height); -} - -function testGetSize() { - var el = $('testEl'); - goog.style.setSize(el, 100, 100); - - var dims = goog.style.getSize(el); - assertEquals(100, dims.width); - assertEquals(100, dims.height); - - goog.style.setStyle(el, 'display', 'none'); - dims = goog.style.getSize(el); - assertEquals(100, dims.width); - assertEquals(100, dims.height); - - el = $('testEl5'); - goog.style.setSize(el, 100, 100); - dims = goog.style.getSize(el); - assertEquals(100, dims.width); - assertEquals(100, dims.height); - - el = $('span0'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = $('table1'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = $('td1'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = $('li1'); - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = goog.dom.getElementsByTagNameAndClass('html')[0]; - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); - - el = goog.dom.getElementsByTagNameAndClass('body')[0]; - dims = goog.style.getSize(el); - assertNotEquals(0, dims.width); - assertNotEquals(0, dims.height); -} - -function testGetSizeSvgElements() { - var svgEl = document.createElementNS && - document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - if (!svgEl || svgEl.getAttribute('transform') == '' || - (goog.userAgent.WEBKIT && !goog.userAgent.isVersion(534.8))) { - // SVG not supported, or getBoundingClientRect not supported on SVG - // elements. - return; - } - - document.body.appendChild(svgEl); - el = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - el.setAttribute('x', 10); - el.setAttribute('y', 10); - el.setAttribute('width', 32); - el.setAttribute('height', 21); - el.setAttribute('fill', '#000'); - - svgEl.appendChild(el); - - dims = goog.style.getSize(el); - assertEquals(32, dims.width); - assertEquals(21, dims.height); - - dims = goog.style.getSize(svgEl); - if (goog.userAgent.WEBKIT) { - // The size of the <svg> will be the viewport size on WebKit browsers. - assertTrue(dims.width >= 32); - assertTrue(dims.height >= 21); - } else { - assertEquals(32, dims.width); - assertEquals(21, dims.height); - } - - el.style.visibility = 'none'; - - dims = goog.style.getSize(el); - assertEquals(32, dims.width); - assertEquals(21, dims.height); - - dims = goog.style.getSize(svgEl); - if (goog.userAgent.WEBKIT) { - // The size of the <svg> will be the viewport size on WebKit browsers. - assertTrue(dims.width >= 32); - assertTrue(dims.height >= 21); - } else { - assertEquals(32, dims.width); - assertEquals(21, dims.height); - } -} - -function testGetSizeInlineBlock() { - var el = $('height-test-inner'); - var dims = goog.style.getSize(el); - assertNotEquals(0, dims.height); -} - -function testGetBounds() { - var el = $('testEl'); - - var dims = goog.style.getSize(el); - var pos = goog.style.getPageOffset(el); - - var rect = goog.style.getBounds(el); - - // Relies on getSize and getPageOffset being correct. - assertEquals(dims.width, rect.width); - assertEquals(dims.height, rect.height); - assertEquals(pos.x, rect.left); - assertEquals(pos.y, rect.top); -} - -function testInstallStyles() { - var el = $('installTest0'); - var originalBackground = goog.style.getBackgroundColor(el); - - // Uses background-color because it's easy to get the computed value - var result = goog.style.installStyles( - '#installTest0 { background-color: rgb(255, 192, 203); }'); - - assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el)); - - goog.style.uninstallStyles(result); - assertEquals(originalBackground, goog.style.getBackgroundColor(el)); -} - -function testSetStyles() { - var el = $('installTest1'); - - // Change to pink - var ss = goog.style.installStyles( - '#installTest1 { background-color: rgb(255, 192, 203); }'); - assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el)); - - // Now change to orange - goog.style.setStyles(ss, - '#installTest1 { background-color: rgb(255, 255, 0); }'); - assertColorRgbEquals('rgb(255,255,0)', goog.style.getBackgroundColor(el)); -} - -function assertColorRgbEquals(expected, actual) { - assertEquals(expected, - goog.color.hexToRgbStyle(goog.color.parse(actual).hex)); -} - -function testIsRightToLeft() { - assertFalse(goog.style.isRightToLeft($('rtl1'))); - assertTrue(goog.style.isRightToLeft($('rtl2'))); - assertFalse(goog.style.isRightToLeft($('rtl3'))); - assertFalse(goog.style.isRightToLeft($('rtl4'))); - assertTrue(goog.style.isRightToLeft($('rtl5'))); - assertFalse(goog.style.isRightToLeft($('rtl6'))); - assertTrue(goog.style.isRightToLeft($('rtl7'))); - assertFalse(goog.style.isRightToLeft($('rtl8'))); - assertTrue(goog.style.isRightToLeft($('rtl9'))); - assertFalse(goog.style.isRightToLeft($('rtl10'))); -} - -function testPosWithAbsoluteAndScroll() { - var el = $('pos-scroll-abs') - var el1 = $('pos-scroll-abs-1'); - var el2 = $('pos-scroll-abs-2'); - - el1.scrollTop = 200; - var pos = goog.style.getPageOffset(el2); - - assertEquals(200, pos.x); - // Don't bother with IE in quirks mode - if (!goog.userAgent.IE || document.compatMode == 'CSS1Compat') { - assertEquals(300, pos.y); - } -} - -function testPosWithAbsoluteAndWindowScroll() { - window.scrollBy(0, 200); - var el = $('abs-upper-left'); - var pos = goog.style.getPageOffset(el); - assertEquals('Top should be about 0', 0, pos.y); -} - -function testGetBorderBoxSize() { - // Strict mode - var getBorderBoxSize = goog.style.getBorderBoxSize; - - var el = $('size-a'); - var rect = getBorderBoxSize(el); - assertEquals('width:100px', 100, rect.width); - assertEquals('height:100px', 100, rect.height); - - // with border: 10px - el = $('size-b'); - rect = getBorderBoxSize(el); - assertEquals('width:100px;border:10px', isBorderBox ? 100 : 120, rect.width); - assertEquals('height:100px;border:10px', isBorderBox ? 100 : 120, - rect.height); - - // with border: 10px; padding: 10px - el = $('size-c'); - rect = getBorderBoxSize(el); - assertEquals('width:100px;border:10px;padding:10px', - isBorderBox ? 100 : 140, rect.width); - assertEquals('height:100px;border:10px;padding:10px', - isBorderBox ? 100 : 140, rect.height); - - // size, padding and borders are all in non pixel units - // all we test here is that we get a number out - el = $('size-d'); - rect = getBorderBoxSize(el); - assertEquals('number', typeof rect.width); - assertEquals('number', typeof rect.height); - assertFalse(isNaN(rect.width)); - assertFalse(isNaN(rect.height)); -} - -function testGetContentBoxSize() { - // Strict mode - var getContentBoxSize = goog.style.getContentBoxSize; - - var el = $('size-a'); - var rect = getContentBoxSize(el); - assertEquals('width:100px', 100, rect.width); - assertEquals('height:100px', 100, rect.height); - - // with border: 10px - el = $('size-b'); - rect = getContentBoxSize(el); - assertEquals('width:100px;border:10px', - isBorderBox ? 80 : 100, rect.width); - assertEquals('height:100px;border:10px', - isBorderBox ? 80 : 100, rect.height); - - // with border: 10px; padding: 10px - el = $('size-c'); - rect = getContentBoxSize(el); - assertEquals('width:100px;border:10px;padding:10px', - isBorderBox ? 60 : 100, rect.width); - assertEquals('height:100px;border:10px;padding:10px', - isBorderBox ? 60 : 100, rect.height); - - // size, padding and borders are all in non pixel units - // all we test here is that we get a number out - el = $('size-d'); - rect = getContentBoxSize(el); - assertEquals('number', typeof rect.width); - assertEquals('number', typeof rect.height); - assertFalse(isNaN(rect.width)); - assertFalse(isNaN(rect.height)); - - // test whether getContentBoxSize works when width and height - // aren't explicitly set, but the default of 'auto'. - // 'size-f' has no margin, border, or padding, so offsetWidth/Height - // should match the content box size - el = $('size-f'); - rect = getContentBoxSize(el); - assertEquals(el.offsetWidth, rect.width); - assertEquals(el.offsetHeight, rect.height); -} - -function testSetBorderBoxSize() { - // Strict mode - var el = $('size-e'); - var Size = goog.math.Size; - var setBorderBoxSize = goog.style.setBorderBoxSize; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - setBorderBoxSize(el, new Size(100, 100)); - - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - el.style.borderWidth = '10px'; - setBorderBoxSize(el, new Size(100, 100)); - - assertEquals('width:100px;border:10px', 100, el.offsetWidth); - assertEquals('height:100px;border:10px', 100, el.offsetHeight); - - el.style.padding = '10px'; - setBorderBoxSize(el, new Size(100, 100)); - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - el.style.borderWidth = '0'; - setBorderBoxSize(el, new Size(100, 100)); - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - if (goog.userAgent.GECKO) { - assertEquals('border-box', el.style.MozBoxSizing); - } else if (goog.userAgent.WEBKIT) { - assertEquals('border-box', el.style.WebkitBoxSizing); - } else if (goog.userAgent.OPERA || - goog.userAgent.IE && goog.userAgent.isVersion('8')) { - assertEquals('border-box', el.style.boxSizing); - } - - // Try a negative width/height. - setBorderBoxSize(el, new Size(-10, -10)); - - // Setting the border box smaller than the borders will just give you - // a content box of size 0. - assertEquals(20, el.offsetWidth); - assertEquals(20, el.offsetHeight); -} - -function testSetContentBoxSize() { - // Strict mode - var el = $('size-e'); - var Size = goog.math.Size; - var setContentBoxSize = goog.style.setContentBoxSize; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - setContentBoxSize(el, new Size(100, 100)); - - assertEquals(100, el.offsetWidth); - assertEquals(100, el.offsetHeight); - - el.style.borderWidth = '10px'; - setContentBoxSize(el, new Size(100, 100)); - assertEquals('width:100px;border-width:10px', 120, el.offsetWidth); - assertEquals('height:100px;border-width:10px', 120, el.offsetHeight); - - el.style.padding = '10px'; - setContentBoxSize(el, new Size(100, 100)); - assertEquals('width:100px;border-width:10px;padding:10px', - 140, el.offsetWidth); - assertEquals('height:100px;border-width:10px;padding:10px', - 140, el.offsetHeight); - - el.style.borderWidth = '0'; - setContentBoxSize(el, new Size(100, 100)); - assertEquals('width:100px;padding:10px', 120, el.offsetWidth); - assertEquals('height:100px;padding:10px', 120, el.offsetHeight); - - if (goog.userAgent.GECKO) { - assertEquals('content-box', el.style.MozBoxSizing); - } else if (goog.userAgent.WEBKIT) { - assertEquals('content-box', el.style.WebkitBoxSizing); - } else if (goog.userAgent.OPERA || - goog.userAgent.IE && goog.userAgent.isVersion('8')) { - assertEquals('content-box', el.style.boxSizing); - } - - // Try a negative width/height. - setContentBoxSize(el, new Size(-10, -10)); - assertEquals(20, el.offsetWidth); - assertEquals(20, el.offsetHeight); -} - -function testGetPaddingBox() { - // Strict mode - var el = $('size-e'); - var Size = goog.math.Size; - var getPaddingBox = goog.style.getPaddingBox; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - el.style.padding = '10px'; - var rect = getPaddingBox(el); - assertEquals(10, rect.left); - assertEquals(10, rect.right); - assertEquals(10, rect.top); - assertEquals(10, rect.bottom); - - el.style.padding = '0'; - rect = getPaddingBox(el); - assertEquals(0, rect.left); - assertEquals(0, rect.right); - assertEquals(0, rect.top); - assertEquals(0, rect.bottom); - - el.style.padding = '1px 2px 3px 4px'; - rect = getPaddingBox(el); - assertEquals(1, rect.top); - assertEquals(2, rect.right); - assertEquals(3, rect.bottom); - assertEquals(4, rect.left); - - el.style.padding = '1mm 2em 3ex 4%'; - rect = getPaddingBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - assertTrue(rect.right >= 0); - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); -} - -function testGetMarginBox() { - // Strict mode - var el = $('size-e'); - var Size = goog.math.Size; - var getMarginBox = goog.style.getMarginBox; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - el.style.margin = '10px'; - var rect = getMarginBox(el); - assertEquals(10, rect.left); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertEquals(10, rect.right); - } - assertEquals(10, rect.top); - assertEquals(10, rect.bottom); - - el.style.margin = '0'; - rect = getMarginBox(el); - assertEquals(0, rect.left); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertEquals(0, rect.right); - } - assertEquals(0, rect.top); - assertEquals(0, rect.bottom); - - el.style.margin = '1px 2px 3px 4px'; - rect = getMarginBox(el); - assertEquals(1, rect.top); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertEquals(2, rect.right); - } - assertEquals(3, rect.bottom); - assertEquals(4, rect.left); - - el.style.margin = '1mm 2em 3ex 4%'; - rect = getMarginBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - // In webkit the right margin is the calculated distance from right edge and - // not the computed right margin so it is not reliable. - // See https://bugs.webkit.org/show_bug.cgi?id=19828 - if (!goog.userAgent.WEBKIT) { - assertTrue(rect.right >= 0); - } - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); -} - -function testGetBorderBox() { - // Strict mode - var el = $('size-e'); - var Size = goog.math.Size; - var getBorderBox = goog.style.getBorderBox; - - // Clean up - // style element has 100x100, no border and no padding - el.style.padding = ''; - el.style.margin = ''; - el.style.borderWidth = ''; - el.style.width = ''; - el.style.height = ''; - - el.style.borderWidth = '10px'; - var rect = getBorderBox(el); - assertEquals(10, rect.left); - assertEquals(10, rect.right); - assertEquals(10, rect.top); - assertEquals(10, rect.bottom); - - el.style.borderWidth = '0'; - rect = getBorderBox(el); - assertEquals(0, rect.left); - assertEquals(0, rect.right); - assertEquals(0, rect.top); - assertEquals(0, rect.bottom); - - el.style.borderWidth = '1px 2px 3px 4px'; - rect = getBorderBox(el); - assertEquals(1, rect.top); - assertEquals(2, rect.right); - assertEquals(3, rect.bottom); - assertEquals(4, rect.left); - - // % does not work for border widths in IE - el.style.borderWidth = '1mm 2em 3ex 4pt'; - rect = getBorderBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - assertTrue(rect.right >= 0); - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); - - el.style.borderWidth = 'thin medium thick 1px'; - rect = getBorderBox(el); - assertFalse(isNaN(rect.top)); - assertFalse(isNaN(rect.right)); - assertFalse(isNaN(rect.bottom)); - assertFalse(isNaN(rect.left)); - assertTrue(rect.top >= 0); - assertTrue(rect.right >= 0); - assertTrue(rect.bottom >= 0); - assertTrue(rect.left >= 0); -} - -function testGetFontFamily() { - // I tried to use common fonts for these tests. It's possible the test fails - // because the testing platform doesn't have one of these fonts installed: - // Comic Sans MS or Century Schoolbook L - // Times - // Helvetica - - var tmpFont = goog.style.getFontFamily($('font-tag')); - assertTrue('FontFamily should be detectable when set via <font face>', - 'Times' == tmpFont || 'Times New Roman' == tmpFont); - tmpFont = goog.style.getFontFamily($('small-text')); - assertTrue('Multiword fonts should be reported with quotes stripped.', - 'Comic Sans MS' == tmpFont || - 'Century Schoolbook L' == tmpFont); - // Firefox fails this test & retuns a generic 'monospace' instead of the - // actually displayed font (e.g., "Times New"). - //tmpFont = goog.style.getFontFamily($('pre-font')); - //assertEquals('<pre> tags should use a fixed-width font', - // 'Times New', - // tmpFont); - tmpFont = goog.style.getFontFamily($('inherit-font')); - assertEquals('Explicitly inherited fonts should be detectable', - 'Helvetica', - tmpFont); - tmpFont = goog.style.getFontFamily($('times-font-family')); - assertEquals('Font-family set via style attribute should be detected', - 'Times', - tmpFont); - tmpFont = goog.style.getFontFamily($('bold-font')); - assertEquals('Implicitly inherited font should be detected', - 'Helvetica', - tmpFont); - tmpFont = goog.style.getFontFamily($('css-html-tag-redefinition')); - assertEquals('HTML tag CSS rewrites should be detected', - 'Times', - tmpFont); - tmpFont = goog.style.getFontFamily($('no-text-font-styles')); - assertEquals('Font family should exist even with no text', - 'Helvetica', - tmpFont); - tmpFont = goog.style.getFontFamily($('icon-font')); - assertNotEquals('icon is a special font-family value', - 'icon', - tmpFont.toLowerCase()); - tmpFont = goog.style.getFontFamily($('font-style-badfont')); - // Firefox fails this test and reports the specified "badFont", which is - // obviously not displayed. - //assertEquals('Invalid fonts should not be returned', - // 'Helvetica', - // tmpFont); - tmpFont = goog.style.getFontFamily($('img-font-test')); - assertTrue('Even img tags should inherit the document body\'s font', - tmpFont != ''); - tmpFont = goog.style.getFontFamily($('nested-font')); - assertEquals('An element with nested content should be unaffected.', - 'Arial', - tmpFont); -} - -function testGetFontSize() { - assertEquals('Font size should be determined even without any text', - 30, - goog.style.getFontSize($('no-text-font-styles'))); - assertEquals('A 5em font should be 5x larger than its parent.', - 150, - goog.style.getFontSize($('css-html-tag-redefinition'))); - assertTrue('Setting font size=-1 should result in a positive font size.', - goog.style.getFontSize($('font-tag')) > 0); - assertEquals('Inheriting a 50% font-size should have no additional effect', - goog.style.getFontSize($('font-style-badfont')), - goog.style.getFontSize($('inherit-50pct-font'))); - assertTrue('In pretty much any display, 3in should be > 8px', - goog.style.getFontSize($('times-font-family')) > - goog.style.getFontSize($('no-text-font-styles'))); - assertTrue('With no applied styles, font-size should still be defined.', - goog.style.getFontSize($('no-font-style')) > 0); - assertEquals('50% of 30px is 15', - 15, - goog.style.getFontSize($('font-style-badfont'))); - assertTrue('x-small text should be smaller than small text', - goog.style.getFontSize($('x-small-text')) < - goog.style.getFontSize($('small-text'))); - // IE fails this test, the decimal portion of px lengths isn't reported - // by getCascadedStyle. Firefox passes, but only because it ignores the - // decimals altogether. - //assertEquals('12.5px should be the same as 0.5em nested in a 25px node.', - // goog.style.getFontSize($('font-size-12-point-5-px')), - // goog.style.getFontSize($('font-size-50-pct-of-25-px'))); - - assertEquals('Font size should not doubly count em values', - 2, goog.style.getFontSize($('em-font-size'))); -} - -function testGetLengthUnits() { - assertEquals('px', goog.style.getLengthUnits('15px')); - assertEquals('%', goog.style.getLengthUnits('99%')); - assertNull(goog.style.getLengthUnits('')); -} - -function testParseStyleAttribute() { - var css = 'left: 0px; text-align: center'; - var expected = {'left': '0px', 'textAlign': 'center'}; - - assertObjectEquals(expected, goog.style.parseStyleAttribute(css)); -} - -function testToStyleAttribute() { - var object = {'left': '0px', 'textAlign': 'center'}; - var expected = 'left:0px;text-align:center;'; - - assertEquals(expected, goog.style.toStyleAttribute(object)); -} - -function testStyleAttributePassthrough() { - var object = {'left': '0px', 'textAlign': 'center'}; - - assertObjectEquals(object, - goog.style.parseStyleAttribute(goog.style.toStyleAttribute(object))); -} - -function testGetFloat() { - assertEquals('', goog.style.getFloat($('no-float'))); - assertEquals('none', goog.style.getFloat($('float-none'))); - assertEquals('left', goog.style.getFloat($('float-left'))); -} - -function testSetFloat() { - var el = $('float-test'); - - goog.style.setFloat(el, 'left'); - assertEquals('left', goog.style.getFloat(el)); - - goog.style.setFloat(el, 'right'); - assertEquals('right', goog.style.getFloat(el)); - - goog.style.setFloat(el, 'none'); - assertEquals('none', goog.style.getFloat(el)); - - goog.style.setFloat(el, ''); - assertEquals('', goog.style.getFloat(el)); -} - -function testIsElementShown() { - var el = $('testEl'); - - goog.style.showElement(el, false); - assertFalse(goog.style.isElementShown(el)); - - goog.style.showElement(el, true); - assertTrue(goog.style.isElementShown(el)); -} - -function testGetOpacity() { - var el1 = { - style: { - opacity: '0.3' - } - }; - - var el2 = { - style: { - MozOpacity: '0.1' - } - }; - - var el3 = { - style: { - filter: 'some:other,filter;alpha(opacity=25.5);alpha(more=100);' - } - }; - - assertEquals(0.3, goog.style.getOpacity(el1)); - assertEquals(0.1, goog.style.getOpacity(el2)); - assertEquals(0.255, goog.style.getOpacity(el3)); - - el1.style.opacity = '0'; - el2.style.MozOpacity = '0'; - el3.style.filter = 'some:other,filter;alpha(opacity=0);alpha(more=100);'; - - assertEquals(0, goog.style.getOpacity(el1)); - assertEquals(0, goog.style.getOpacity(el2)); - assertEquals(0, goog.style.getOpacity(el3)); - - el1.style.opacity = ''; - el2.style.MozOpacity = ''; - el3.style.filter = ''; - - assertEquals('', goog.style.getOpacity(el1)); - assertEquals('', goog.style.getOpacity(el2)); - assertEquals('', goog.style.getOpacity(el3)); - - var el4 = { - style: {} - } - - assertEquals('', goog.style.getOpacity(el4)); - assertEquals('', goog.style.getOpacity($('test-opacity'))); -} - -function testSetOpacity() { - var el1 = { - style: { - opacity: '0.3' - } - }; - goog.style.setOpacity(el1, 0.8); - - var el2 = { - style: { - MozOpacity: '0.1' - } - }; - goog.style.setOpacity(el2, 0.5); - - var el3 = { - style: { - filter: 'alpha(opacity=25)' - } - }; - goog.style.setOpacity(el3, 0.1); - - assertEquals(0.8, Number(el1.style.opacity)); - assertEquals(0.5, Number(el2.style.MozOpacity)); - assertEquals('alpha(opacity=10)', el3.style.filter); - - goog.style.setOpacity(el1, 0); - goog.style.setOpacity(el2, 0); - goog.style.setOpacity(el3, 0); - - assertEquals(0, Number(el1.style.opacity)); - assertEquals(0, Number(el2.style.MozOpacity)); - assertEquals('alpha(opacity=0)', el3.style.filter); - - goog.style.setOpacity(el1, ''); - goog.style.setOpacity(el2, ''); - goog.style.setOpacity(el3, ''); - - assertEquals('', el1.style.opacity); - assertEquals('', el2.style.MozOpacity); - assertEquals('', el3.style.filter); -} - -function testFramedPageOffset() { - // Set up a complicated iframe ancestor chain. - var iframe = goog.dom.getElement('test-frame-offset'); - var iframeDoc = goog.dom.getFrameContentDocument(iframe); - var iframeWindow = goog.dom.getWindow(iframeDoc); - - var iframePos = 'style="display:block;position:absolute;' + - 'top:50px;left:50px;width:50px;height:50px;"'; - iframeDoc.write('<iframe id="test-frame-offset-2" ' + - iframePos + '></iframe>' + - '<div id="test-element-2" ' + - ' style="position:absolute;left:300px;top:300px">hi mom!</div>'); - iframeDoc.close(); - var iframe2 = iframeDoc.getElementById('test-frame-offset-2'); - var testElement2 = iframeDoc.getElementById('test-element-2'); - var iframeDoc2 = goog.dom.getFrameContentDocument(iframe2); - var iframeWindow2 = goog.dom.getWindow(iframeDoc2); - - iframeDoc2.write( - '<div id="test-element-3" ' + - ' style="position:absolute;left:500px;top:500px">hi mom!</div>'); - iframeDoc2.close(); - var testElement3 = iframeDoc2.getElementById('test-element-3'); - - assertCoordinateApprox(300, 300, 0, - goog.style.getPageOffset(testElement2)); - assertCoordinateApprox(500, 500, 0, - goog.style.getPageOffset(testElement3)); - - assertCoordinateApprox(350, 350, 0, - goog.style.getFramedPageOffset(testElement2, window)); - assertCoordinateApprox(300, 300, 0, - goog.style.getFramedPageOffset(testElement2, iframeWindow)); - - assertCoordinateApprox(600, 600, 0, - goog.style.getFramedPageOffset(testElement3, window)); - assertCoordinateApprox(550, 550, 0, - goog.style.getFramedPageOffset(testElement3, iframeWindow)); - assertCoordinateApprox(500, 500, 0, - goog.style.getFramedPageOffset(testElement3, iframeWindow2)); - - // Scroll the iframes a bit. - window.scrollBy(0, 5); - iframeWindow.scrollBy(0, 11); - iframeWindow2.scrollBy(0, 18); - - // On Firefox 2, scrolling inner iframes causes off by one errors - // in the page position, because we're using screen coords to compute them. - assertCoordinateApprox(300, 300, 2, - goog.style.getPageOffset(testElement2)); - assertCoordinateApprox(500, 500, 2, - goog.style.getPageOffset(testElement3)); - - assertCoordinateApprox(350, 350 - 11, 2, - goog.style.getFramedPageOffset(testElement2, window)); - assertCoordinateApprox(300, 300, 2, - goog.style.getFramedPageOffset(testElement2, iframeWindow)); - - assertCoordinateApprox(600, 600 - 18 - 11, 2, - goog.style.getFramedPageOffset(testElement3, window)); - assertCoordinateApprox(550, 550 - 18, 2, - goog.style.getFramedPageOffset(testElement3, iframeWindow)); - assertCoordinateApprox(500, 500, 2, - goog.style.getFramedPageOffset(testElement3, iframeWindow2)); -} - -/** - * Asserts that the coordinate is approximately equal to the given - * x and y coordinates, give or take delta. - */ -function assertCoordinateApprox(x, y, delta, coord) { - assertTrue('Expected x: ' + x + ', actual x: ' + coord.x, - coord.x >= x - delta && coord.x <= x + delta); - assertTrue('Expected y: ' + y + ', actual y: ' + coord.y, - coord.y >= y - delta && coord.y <= y + delta); -} - -function testTranslateRectForAnotherFrame() { - var rect = new goog.math.Rect(1, 2, 3, 4); - var thisDom = goog.dom.getDomHelper(); - goog.style.translateRectForAnotherFrame(rect, thisDom, thisDom); - assertEquals(1, rect.left); - assertEquals(2, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - var iframe = $('test-translate-frame-standard'); - var iframeDoc = goog.dom.getFrameContentDocument(iframe); - var iframeDom = goog.dom.getDomHelper(iframeDoc); - // Cannot rely on iframe starting at origin. - iframeDom.getWindow().scrollTo(0, 0); - // iframe is at (100, 150) and its body is not scrolled. - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100, rect.left); - assertEquals(2 + 150, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - iframeDom.getWindow().scrollTo(11, 13); - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100 - 11, rect.left); - assertEquals(2 + 150 - 13, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - iframe = $('test-translate-frame-quirk'); - iframeDoc = goog.dom.getFrameContentDocument(iframe); - iframeDom = goog.dom.getDomHelper(iframeDoc); - // Cannot rely on iframe starting at origin. - iframeDom.getWindow().scrollTo(0, 0); - // iframe is at (100, 350) and its body is not scrolled. - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100, rect.left); - assertEquals(2 + 350, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); - - iframeDom.getWindow().scrollTo(11, 13); - rect = new goog.math.Rect(1, 2, 3, 4); - goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom); - assertEquals(1 + 100 - 11, rect.left); - assertEquals(2 + 350 - 13, rect.top); - assertEquals(3, rect.width); - assertEquals(4, rect.height); -}; - -function testGetVisibleRectForElement() { - var container = goog.dom.getElement('test-visible'); - var el = goog.dom.getElement('test-visible-el'); - var dom = goog.dom.getDomHelper(el); - var winScroll = dom.getDocumentScroll(); - var winSize = dom.getViewportSize(); - - // Skip this test if the window size is small. Firefox3/Linux in Selenium - // sometimes fails without this check. - if (winSize.width < 20 || winSize.height < 20) { - return; - } - - // Move the container element to the window's viewport. - var h = winSize.height < 100 ? winSize.height / 2 : 100; - goog.style.setSize(container, winSize.width / 2, h); - goog.style.setPosition(container, 8, winScroll.y + winSize.height - h); - var visible = goog.style.getVisibleRectForElement(el); - var bounds = goog.style.getBounds(container); - // VisibleRect == Bounds rect of the offsetParent - assertNotNull(visible); - assertEquals(bounds.left, visible.left); - assertEquals(bounds.top, visible.top); - assertEquals(bounds.left + bounds.width, visible.right); - assertEquals(bounds.top + bounds.height, visible.bottom); - - // Move a part of the container element to outside of the viewpoert. - goog.style.setPosition(container, 8, winScroll.y + winSize.height - h / 2); - visible = goog.style.getVisibleRectForElement(el); - bounds = goog.style.getBounds(container); - // Confirm VisibleRect == Intersection of the bounds rect of the - // offsetParent and the viewport. - assertNotNull(visible); - assertEquals(bounds.left, visible.left); - assertEquals(bounds.top, visible.top); - assertEquals(bounds.left + bounds.width, visible.right); - assertEquals(winScroll.y + winSize.height, visible.bottom); - - // Move the container element to outside of the viewpoert. - goog.style.setPosition(container, 8, winScroll.y + winSize.height); - visible = goog.style.getVisibleRectForElement(el); - assertNull(visible); - - // Test the case with body element of height 0 - var iframe = goog.dom.getElement('test-visible-frame'); - var iframeDoc = goog.dom.getFrameContentDocument(iframe); - el = iframeDoc.getElementById('test-visible'); - visible = goog.style.getVisibleRectForElement(el); - - var iframeViewportSize = goog.dom.getDomHelper(el).getViewportSize(); - // NOTE(user): For iframe, the clipping viewport is always the iframe - // viewport, and not the actual browser viewport. - assertNotNull(visible); - assertEquals(0, visible.top); - assertEquals(iframeViewportSize.height, visible.bottom); - assertEquals(0, visible.left); - assertEquals(iframeViewportSize.width, visible.right); -}; - -function testGetVisibleRectForElementWithBodyScrolled() { - var container = goog.dom.getElement('test-visible2'); - var dom = goog.dom.getDomHelper(container); - var el = dom.createDom('div', undefined, 'Test'); - el.style.position = 'absolute'; - dom.append(container, el); - - container.style.position = 'absolute'; - goog.style.setPosition(container, 20, 500); - goog.style.setSize(container, 100, 150); - - // Scroll body container such that container is exactly at top. - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - // Top 100px is clipped by window viewport. - window.scrollTo(0, 600); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(600, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - var winSize = dom.getViewportSize(); - - // Left 50px is clipped by window viewport. - // Right part is clipped by window viewport. - goog.style.setSize(container, 10000, 150); - window.scrollTo(70, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(70, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(70 + winSize.width, visibleRect.right, EPSILON); - - // Bottom part is clipped by window viewport. - goog.style.setSize(container, 100, 2000); - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - assertRoughlyEquals(500 + winSize.height, visibleRect.bottom, EPSILON); - - goog.style.setPosition(container, 10000, 10000); - assertNull(goog.style.getVisibleRectForElement(el)); -} - -function testGetVisibleRectForElementWithNestedAreaAndNonOffsetAncestor() { - var container = goog.dom.getElement('test-visible2'); - var dom = goog.dom.getDomHelper(container); - var container2 = dom.createDom('div'); - var el = dom.createDom('div', undefined, 'Test'); - el.style.position = 'absolute'; - dom.append(container, container2); - dom.append(container2, el); - - container.style.position = 'absolute'; - goog.style.setPosition(container, 20, 500); - goog.style.setSize(container, 100, 150); - - // container2 is a scrollable container but is not an offsetParent of - // the element. It is ignored in the computation. - container2.style.overflow = 'hidden'; - container2.style.marginTop = '50px'; - container2.style.marginLeft = '100px'; - goog.style.setSize(container2, 150, 100); - - // Scroll body container such that container is exactly at top. - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - // Top 100px is clipped by window viewport. - window.scrollTo(0, 600); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(600, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - - var winSize = dom.getViewportSize(); - - // Left 50px is clipped by window viewport. - // Right part is clipped by window viewport. - goog.style.setSize(container, 10000, 150); - window.scrollTo(70, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(70, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(70 + winSize.width, visibleRect.right, EPSILON); - - // Bottom part is clipped by window viewport. - goog.style.setSize(container, 100, 2000); - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(20, visibleRect.left, EPSILON); - assertRoughlyEquals(120, visibleRect.right, EPSILON); - assertRoughlyEquals(500 + winSize.height, visibleRect.bottom, EPSILON); - - goog.style.setPosition(container, 10000, 10000); - assertNull(goog.style.getVisibleRectForElement(el)); -} - -function testGetVisibleRectForElementInsideNestedScrollableArea() { - var container = goog.dom.getElement('test-visible2'); - var dom = goog.dom.getDomHelper(container); - var container2 = dom.createDom('div'); - var el = dom.createDom('div', undefined, 'Test'); - el.style.position = 'absolute'; - dom.append(container, container2); - dom.append(container2, el); - - container.style.position = 'absolute'; - goog.style.setPosition(container, 100 /* left */, 500 /* top */); - goog.style.setSize(container, 300 /* width */, 300 /* height */); - - container2.style.overflow = 'hidden'; - container2.style.position = 'relative'; - goog.style.setPosition(container2, 100, 50); - goog.style.setSize(container2, 150, 100); - - // Scroll body container such that container is exactly at top. - window.scrollTo(0, 500); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(350, visibleRect.right, EPSILON); - - // Left 50px is clipped by container. - goog.style.setPosition(container2, -50, 50); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(100, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(200, visibleRect.right, EPSILON); - - // Right part is clipped by container. - goog.style.setPosition(container2, 100, 50); - goog.style.setWidth(container2, 1000, 100); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(650, visibleRect.bottom, EPSILON); - assertRoughlyEquals(400, visibleRect.right, EPSILON); - - // Top 50px is clipped by container. - goog.style.setStyle(container2, 'width', '150px'); - goog.style.setStyle(container2, 'top', '-50px'); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(500, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(550, visibleRect.bottom, EPSILON); - assertRoughlyEquals(350, visibleRect.right, EPSILON); - - // Bottom part is clipped by container. - goog.style.setStyle(container2, 'top', '50px'); - goog.style.setStyle(container2, 'height', '1000px'); - var visibleRect = goog.style.getVisibleRectForElement(el); - assertNotNull(visibleRect); - assertRoughlyEquals(550, visibleRect.top, EPSILON); - assertRoughlyEquals(200, visibleRect.left, EPSILON); - assertRoughlyEquals(800, visibleRect.bottom, EPSILON); - assertRoughlyEquals(350, visibleRect.right, EPSILON); - - // Outside viewport. - goog.style.setStyle(container2, 'top', '10000px'); - goog.style.setStyle(container2, 'left', '10000px'); - assertNull(goog.style.getVisibleRectForElement(el)); -} - -function testGeckoMacOrX11RoundPosition() { - if ((goog.userAgent.MAC || goog.userAgent.X11) && goog.userAgent.GECKO && - goog.userAgent.isVersion('1.9')) { - - var pos = new goog.math.Coordinate(1.5, 1.4); - var el = document.createElement('div'); - goog.style.setPosition(el, pos); - assertEquals('The left position should have been rounded', - '2px', el.style.left); - assertEquals('The top position should have been rounded', - '1px', el.style.top); - } -} - -function testScrollIntoContainerView() { - var container = goog.dom.getElement('scrollable-container'); - - // Scroll the minimum amount to make the elements visible. - goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container); - assertEquals('scroll to item7', 115, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item8'), container); - assertEquals('scroll to item8', 148, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container); - assertEquals('item7 still visible', 148, container.scrollTop); - goog.style.scrollIntoContainerView(goog.dom.getElement('item1'), container); - assertEquals('scroll to item1', 17, container.scrollTop); - - // Center the element in the first argument. - goog.style.scrollIntoContainerView( - goog.dom.getElement('item1'), container, true); - assertEquals('center item1', 0, container.scrollTop); - goog.style.scrollIntoContainerView( - goog.dom.getElement('item4'), container, true); - assertEquals('center item4', 66, container.scrollTop); - - // The element is higher than the container. - goog.dom.getElement('item3').style.height = '140px'; - goog.style.scrollIntoContainerView(goog.dom.getElement('item3'), container); - assertEquals('show item3 with increased height', 83, container.scrollTop); - goog.style.scrollIntoContainerView( - goog.dom.getElement('item3'), container, true); - assertEquals('center item3 with increased height', 93, container.scrollTop); - goog.dom.getElement('item3').style.height = ''; - - // Scroll to non-integer position. - goog.dom.getElement('item4').style.height = '21px'; - goog.style.scrollIntoContainerView( - goog.dom.getElement('item4'), container, true); - assertEquals('scroll position is rounded down', 66, container.scrollTop); - goog.dom.getElement('item4').style.height = ''; -} - -function testScrollBarWidth() { - goog.style_test.testScrollbarWidth(); -} - -function testOffsetParent() { - var parent = goog.dom.getElement('offset-parent'); - var child = goog.dom.getElement('offset-child'); - assertEquals(parent, goog.style.getOffsetParent(child)); -} - -function testOverflowOffsetParent() { - var parent = goog.dom.getElement('offset-parent-overflow'); - var child = goog.dom.getElement('offset-child-overflow'); - assertEquals(parent, goog.style.getOffsetParent(child)); -} - -function hasVerticalScroll(el) { - return el.clientWidth != 0 && el.offsetWidth - el.clientWidth > 0; -} - -function hasHorizontalScroll(el) { - return el.clientHeight != 0 && el.offsetHeight - el.clientHeight > 0; -} -</script> - -</body> -</html> diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test.js.svn-base deleted file mode 100644 index fc84a7b..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test.js.svn-base +++ /dev/null @@ -1,78 +0,0 @@ -// Copyright 2011 The Closure Library Authors. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS-IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -/** - * @fileoverview Shared unit tests for scrollbar measurement - * - * @author flan@google.com (Ian Flanigan) - */ - -goog.provide('goog.style_test'); - -goog.require('goog.dom'); -goog.require('goog.style'); -goog.require('goog.testing.asserts'); -goog.setTestOnly('Tests for scrollbars'); - - -/** - * Tests the scrollbar width calculation. Assumes that there is an element with - * id 'test-scrollbarwidth' in the page. - */ -goog.style_test.testScrollbarWidth = function() { - var width = goog.style.getScrollbarWidth(); - assertTrue(width > 0); - - var outer = goog.dom.getElement('test-scrollbarwidth'); - var inner = goog.dom.getElementsByTagNameAndClass('div', null, outer)[0]; - assertTrue('should have a scroll bar', - goog.style_test.hasVerticalScroll(outer)); - assertTrue('should have a scroll bar', - goog.style_test.hasHorizontalScroll(outer)); - - // Get the inner div absolute width - goog.style.setStyle(outer, 'width', '100%'); - assertTrue('should have a scroll bar', - goog.style_test.hasVerticalScroll(outer)); - assertFalse('should not have a scroll bar', - goog.style_test.hasHorizontalScroll(outer)); - var innerAbsoluteWidth = inner.offsetWidth; - - // Leave the vertical scroll and remove the horizontal by using the scroll - // bar width calculation. - goog.style.setStyle(outer, 'width', - (innerAbsoluteWidth + width) + 'px'); - assertTrue('should have a scroll bar', - goog.style_test.hasVerticalScroll(outer)); - assertFalse('should not have a scroll bar', - goog.style_test.hasHorizontalScroll(outer)); - - // verify by adding 1 more pixel (brings back the vertical scroll bar). - goog.style.setStyle(outer, 'width', - (innerAbsoluteWidth + width - 1) + 'px'); - assertTrue('should have a scroll bar', - goog.style_test.hasVerticalScroll(outer)); - assertTrue('should have a scroll bar', - goog.style_test.hasHorizontalScroll(outer)); -}; - - -goog.style_test.hasVerticalScroll = function(el) { - return el.clientWidth != 0 && el.offsetWidth - el.clientWidth > 0; -} - - -goog.style_test.hasHorizontalScroll = function(el) { - return el.clientHeight != 0 && el.offsetHeight - el.clientHeight > 0; -} diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_iframe_quirk.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_iframe_quirk.html.svn-base deleted file mode 100644 index 11180b7..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_iframe_quirk.html.svn-base +++ /dev/null @@ -1,29 +0,0 @@ -<!-- - ---> -<html> -<!-- -Copyright 2009 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> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> - <style> - #test-visible { - position: absolute; - background: blue; - } - - body { - overflow: hidden; - margin: 0px; - } - </style> -</head> -<body> - <div id="test-visible">Test</div> -</body> -</html> - diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_iframe_standard.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_iframe_standard.html.svn-base deleted file mode 100644 index cf6fe4b..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_iframe_standard.html.svn-base +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<!-- - ---> -<html> -<!-- -Copyright 2009 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> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> - <style> - #test-visible { - position: absolute; - background: blue; - } - - body { - overflow: hidden; - margin: 0px; - } - </style> -</head> -<body> - <div id="test-visible">Test</div> -</body> -</html> - diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_quirk.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_quirk.html.svn-base deleted file mode 100644 index ba3c46f..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_quirk.html.svn-base +++ /dev/null @@ -1,9 +0,0 @@ -<!-- ---> -<html><body style="border:0px;margin:0px;"><div style="width:400px;height:400px;background-color:yellow;"></div></body></html> -<!-- -Copyright 2009 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. ---> diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_standard.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_standard.html.svn-base deleted file mode 100644 index 46c94da..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_test_standard.html.svn-base +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" - "http://www.w3.org/TR/html4/loose.dtd"> -<!-- ---> -<html><body style="border:0px;width:400px;height:400px;background-color:blue;"></body></html> -<!-- -Copyright 2009 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. ---> diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_webkit_scrollbars_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_webkit_scrollbars_test.html.svn-base deleted file mode 100644 index d1a769a..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/style_webkit_scrollbars_test.html.svn-base +++ /dev/null @@ -1,80 +0,0 @@ -<!DOCTYPE html> -<html> -<!-- -Copyright 2011 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> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> -<title>Closure Unit Tests - goog.dom.style</title> -<script src="../base.js"></script> -<script> - -goog.require('goog.style'); -goog.require('goog.style_test'); -goog.require('goog.testing.jsunit'); -goog.require('goog.testing.ExpectedFailures'); -goog.require('goog.userAgent'); - -</script> -<style> -/* - * Note that we have to apply these styles when the page is loaded or the - * scrollbars might not pick them up. - */ -::-webkit-scrollbar { - width: 16px; - height: 16px; -} - -.otherScrollBar::-webkit-scrollbar { - width: 10px; - height: 10px; -} -</style> -</head> -<body> - -<div id="test-scrollbarwidth" style="background-color: orange; width: 100px; height: 100px; overflow: auto;"> - <div style='width: 200px; height: 200px; background-color: red'>Test Scroll bar width with scroll</div> -</div> - -<script> -var expectedFailures = new goog.testing.ExpectedFailures(); - -function tearDown() { - expectedFailures.handleTearDown(); -} - -function testScrollBarWidth() { - goog.style_test.testScrollbarWidth(); -} - -function testScrollBarWidth_webkitScrollbar() { - expectedFailures.expectFailureFor(!goog.userAgent.WEBKIT); - - try { - var width = goog.style.getScrollbarWidth(); - assertEquals('Scrollbar width should be 16', 16, width); - } catch (e) { - expectedFailures.handleException(e); - } -} - -function testScrollBarWidth_webkitScrollbarWithCustomClass() { - expectedFailures.expectFailureFor(!goog.userAgent.WEBKIT); - - try { - var customWidth = goog.style.getScrollbarWidth('otherScrollBar'); - assertEquals('Custom width should be 10', 10, customWidth); - } catch (e) { - expectedFailures.handleException(e); - } -} - -</script> - -</body> -</html> diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/transition.js.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/transition.js.svn-base deleted file mode 100644 index 5a4c5da..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/transition.js.svn-base +++ /dev/null @@ -1,124 +0,0 @@ -// Copyright 2011 The Closure Library Authors. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS-IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -/** - * @fileoverview Utility methods to deal with CSS3 transitions - * programmatically. - */ - -goog.provide('goog.style.transition'); -goog.provide('goog.style.transition.Css3Property'); - -goog.require('goog.array'); -goog.require('goog.asserts'); - - -/** - * A typedef to represent a CSS3 transition property. Duration and delay - * are both in seconds. Timing is CSS3 timing function string, such as - * 'easein', 'linear'. - * - * Alternatively, specifying string in the form of '[property] [duration] - * [timing] [delay]' as specified in CSS3 transition is fine too. - * - * @typedef { { - * property: string, - * duration: number, - * timing: string, - * delay: number - * } | string } - */ -goog.style.transition.Css3Property; - - -/** - * Sets the element CSS3 transition to properties. - * @param {Element} element The element to set transition on. - * @param {goog.style.transition.Css3Property| - * Array.<goog.style.transition.Css3Property>} properties A single CSS3 - * transition property or array of properties. - */ -goog.style.transition.set = function(element, properties) { - if (!goog.isArray(properties)) { - properties = [properties]; - } - goog.asserts.assert( - properties.length > 0, 'At least one Css3Property should be specified.'); - - var values = goog.array.map( - properties, function(p) { - if (goog.isString(p)) { - return p; - } else { - goog.asserts.assert(p && p.property && goog.isNumber(p.duration) && - p.timing && goog.isNumber(p.delay)); - return p.property + ' ' + p.duration + 's ' + p.timing + ' ' + - p.delay + 's'; - } - }); - goog.style.transition.setPropertyValue_(element, values.join(',')); -}; - - -/** - * Removes any programmatically-added CSS3 transition in the given element. - * @param {Element} element The element to remove transition from. - */ -goog.style.transition.removeAll = function(element) { - goog.style.transition.setPropertyValue_(element, ''); -}; - - -/** - * @return {boolean} Whether CSS3 transition is supported. - */ -goog.style.transition.isSupported = function() { - if (!goog.isDef(goog.style.transition.css3TransitionSupported_)) { - // We create a test element with style=-webkit-transition, etc. - // We then detect whether those style properties are recognized and - // available from js. - var el = document.createElement('div'); - el.innerHTML = '<div style="-webkit-transition:opacity 1s linear;' + - '-moz-transition:opacity 1s linear;-o-transition:opacity 1s linear">'; - - var testElement = el.firstChild; - goog.style.transition.css3TransitionSupported_ = - goog.isDef(testElement.style.WebkitTransition) || - goog.isDef(testElement.style.MozTransition) || - goog.isDef(testElement.style.OTransition); - } - - return goog.style.transition.css3TransitionSupported_; -}; - - -/** - * Whether CSS3 transition is supported. - * @type {boolean} - * @private - */ -goog.style.transition.css3TransitionSupported_; - - -/** - * Sets CSS3 transition property value to the given value. - * @param {Element} element The element to set transition on. - * @param {string} transitionValue The CSS3 transition property value. - * @private - */ -goog.style.transition.setPropertyValue_ = function(element, transitionValue) { - element.style.WebkitTransition = transitionValue; - element.style.MozTransition = transitionValue; - element.style.OTransition = transitionValue; -}; diff --git a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/transition_test.html.svn-base b/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/transition_test.html.svn-base deleted file mode 100644 index c9235cb..0000000 --- a/contexts/data/lib/closure-library/closure/goog/style/.svn/text-base/transition_test.html.svn-base +++ /dev/null @@ -1,132 +0,0 @@ -<!DOCTYPE html> -<html> -<!-- -Copyright 2011 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> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> -<title>Closure Unit Tests - goog.style.transition</title> -<script src="../base.js"></script> -<script> - goog.require('goog.style.transition'); - goog.require('goog.testing.jsunit'); - goog.require('goog.userAgent'); -</script> -</head> -<body> -<script> - -/** Fake element. */ -var element; - - -function setUp() { - element = {'style': {}}; -} - - -function testSetWithNoProperty() { - try { - goog.style.transition.set(element, []); - } catch (e) { - return; - } - fail('Should fail when no property is given.'); -} - - -function testSetWithString() { - goog.style.transition.set(element, 'opacity 1s ease-in 0.125s'); - assertEquals('opacity 1s ease-in 0.125s', element.style.WebkitTransition); - assertEquals('opacity 1s ease-in 0.125s', element.style.MozTransition); - assertEquals('opacity 1s ease-in 0.125s', element.style.OTransition); -} - - -function testSetWithSingleProperty() { - goog.style.transition.set(element, - {property: 'opacity', duration: 1, timing: 'ease-in', delay: 0.125}); - assertEquals('opacity 1s ease-in 0.125s', element.style.WebkitTransition); - assertEquals('opacity 1s ease-in 0.125s', element.style.MozTransition); - assertEquals('opacity 1s ease-in 0.125s', element.style.OTransition); -} - - -function testSetWithMultipleStrings() { - goog.style.transition.set(element, [ - 'width 1s ease-in', - 'height 0.5s linear 1s' - ]); - assertEquals('width 1s ease-in,height 0.5s linear 1s', - element.style.WebkitTransition); - assertEquals('width 1s ease-in,height 0.5s linear 1s', - element.style.MozTransition); - assertEquals('width 1s ease-in,height 0.5s linear 1s', - element.style.OTransition); -} - - -function testSetWithMultipleProperty() { - goog.style.transition.set(element, [ - {property: 'width', duration: 1, timing: 'ease-in', delay: 0}, - {property: 'height', duration: 0.5, timing: 'linear', delay: 1} - ]); - assertEquals('width 1s ease-in 0s,height 0.5s linear 1s', - element.style.WebkitTransition); - assertEquals('width 1s ease-in 0s,height 0.5s linear 1s', - element.style.MozTransition); - assertEquals('width 1s ease-in 0s,height 0.5s linear 1s', - element.style.OTransition); -} - - -function testRemoveAllForWebkit() { - element.style.WebkitTransition = 'opacity 1s ease-in'; - goog.style.transition.removeAll(element); - assertEquals('', element.style.WebkitTransition); -} - - -function testRemoveAllForGecko() { - element.style.MozTransition = 'opacity 1s ease-in'; - goog.style.transition.removeAll(element); - assertEquals('', element.style.MozTransition); -} - - -function testRemoveAllForOpera() { - element.style.OTransition = 'opacity 1s ease-in'; - goog.style.transition.removeAll(element); - assertEquals('', element.style.OTransition); -} - - -function testSanityDetectionOfCss3Transition() { - var support = goog.style.transition.isSupported(); - - // No current IE browser supports CSS3 transition. - if (goog.userAgent.IE) { - assertFalse(support); - } - - // FF supports start at FF4 (Gecko 2.0) - if (goog.userAgent.GECKO) { - assertEquals(goog.userAgent.isVersion('2.0'), support); - } - - // Webkit support has existed for a long time, we assume support on - // most webkit version in used today. - if (goog.userAgent.WEBKIT) { - assertTrue(support); - } -} - -</script> - -</body> -</html> diff --git a/contexts/data/lib/closure-library/closure/goog/style/bidi.js b/contexts/data/lib/closure-library/closure/goog/style/bidi.js new file mode 100644 index 0000000..63093bc --- /dev/null +++ b/contexts/data/lib/closure-library/closure/goog/style/bidi.js @@ -0,0 +1,175 @@ +// Copyright 2012 The Closure Library Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS-IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/** + * @fileoverview Bidi utility functions. + * + */ + +goog.provide('goog.style.bidi'); + +goog.require('goog.dom'); +goog.require('goog.style'); +goog.require('goog.userAgent'); + + +/** + * Returns the normalized scrollLeft position for a scrolled element. + * @param {Element} element The scrolled element. + * @return {number} The number of pixels the element is scrolled. 0 indicates + * that the element is not scrolled at all (which, in general, is the + * left-most position in ltr and the right-most position in rtl). + */ +goog.style.bidi.getScrollLeft = function(element) { + var isRtl = goog.style.isRightToLeft(element); + if (isRtl && goog.userAgent.GECKO) { + // ScrollLeft starts at 0 and then goes negative as the element is scrolled + // towards the left. + return -element.scrollLeft; + } else if (isRtl && !(goog.userAgent.IE && goog.userAgent.isVersion('8'))) { + // ScrollLeft starts at the maximum positive value and decreases towards + // 0 as the element is scrolled towards the left. + return element.scrollWidth - element.clientWidth - element.scrollLeft; + } + // ScrollLeft behavior is identical in rtl and ltr, it starts at 0 and + // increases as the element is scrolled away from the start. + return element.scrollLeft; +}; + + +/** + * Returns the "offsetStart" of an element, analagous to offsetLeft but + * normalized for right-to-left environments and various browser + * inconsistencies. This value returned can always be passed to setScrollOffset + * to scroll to an element's left edge in a left-to-right offsetParent or + * right edge in a right-to-left offsetParent. + * + * For example, here offsetStart is 10px in an LTR environment and 5px in RTL: + * + * <pre> + * | xxxxxxxxxx | + * ^^^^^^^^^^ ^^^^ ^^^^^ + * 10px elem 5px + * </pre> + * + * If an element is positioned before the start of its offsetParent, the + * startOffset may be negative. This can be used with setScrollOffset to + * reliably scroll to an element: + * + * <pre> + * var scrollOffset = goog.style.bidi.getOffsetStart(element); + * goog.style.bidi.setScrollOffset(element.offsetParent, scrollOffset); + * </pre> + * + * @see setScrollOffset + * + * @param {Element} element The element for which we need to determine the + * offsetStart position. + * @return {number} The offsetStart for that element. + */ +goog.style.bidi.getOffsetStart = function(element) { + var offsetLeftForReal = element.offsetLeft; + + // The element might not have an offsetParent. + // For example, the node might not be attached to the DOM tree, + // and position:fixed children do not have an offset parent. + // Just try to do the best we can with what we have. + var bestParent = element.offsetParent; + + if (!bestParent && goog.style.getComputedPosition(element) == 'fixed') { + bestParent = goog.dom.getOwnerDocument(element).documentElement; + } + + // Just give up in this case. + if (!bestParent) { + return offsetLeftForReal; + } + + if (goog.userAgent.GECKO) { + // When calculating an element's offsetLeft, Firefox erroneously subtracts + // the border width from the actual distance. So we need to add it back. + var borderWidths = goog.style.getBorderBox(bestParent); + offsetLeftForReal += borderWidths.left; + } else if (goog.userAgent.isDocumentMode(8)) { + // When calculating an element's offsetLeft, IE8-Standards Mode erroneously + // adds the border width to the actual distance. So we need to subtract it. + var borderWidths = goog.style.getBorderBox(bestParent); + offsetLeftForReal -= borderWidths.left; + } + + if (goog.style.isRightToLeft(bestParent)) { + // Right edge of the element relative to the left edge of its parent. + var elementRightOffset = offsetLeftForReal + element.offsetWidth; + + // Distance from the parent's right edge to the element's right edge. + return bestParent.clientWidth - elementRightOffset; + } + + return offsetLeftForReal; +}; + + +/** + * Sets the element's scrollLeft attribute so it is correctly scrolled by + * offsetStart pixels. This takes into account whether the element is RTL and + * the nuances of different browsers. To scroll to the "beginning" of an + * element use getOffsetStart to obtain the element's offsetStart value and then + * pass the value to setScrollOffset. + * @see getOffsetStart + * @param {Element} element The element to set scrollLeft on. + * @param {number} offsetStart The number of pixels to scroll the element. + * If this value is < 0, 0 is used. + */ +goog.style.bidi.setScrollOffset = function(element, offsetStart) { + offsetStart = Math.max(offsetStart, 0); + // In LTR and in "mirrored" browser RTL (such as IE), we set scrollLeft to + // the number of pixels to scroll. + // Otherwise, in RTL, we need to account for different browser behavior. + if (!goog.style.isRightToLeft(element)) { + element.scrollLeft = offsetStart; + } else if (goog.userAgent.GECKO) { + // Negative scroll-left positions in RTL. + element.scrollLeft = -offsetStart; + } else if (!(goog.userAgent.IE && goog.userAgent.isVersion('8'))) { + // Take the current scrollLeft value and move to the right by the + // offsetStart to get to the left edge of the element, and then by + // the clientWidth of the element to get to the right edge. + element.scrollLeft = + element.scrollWidth - offsetStart - element.clientWidth; + } else { + element.scrollLeft = offsetStart; + } +}; + + +/** + * Sets the element's left style attribute in LTR or right style attribute in + * RTL. Also clears the left attribute in RTL and the right attribute in LTR. + * @param {Element} elem The element to position. + * @param {number} left The left position in LTR; will be set as right in RTL. + * @param {?number} top The top position. If null only the left/right is set. + * @param {boolean} isRtl Whether we are in RTL mode. + */ +goog.style.bidi.setPosition = function(elem, left, top, isRtl) { + if (!goog.isNull(top)) { + elem.style.top = top + 'px'; + } + if (isRtl) { + elem.style.right = left + 'px'; + elem.style.left = ''; + } else { + elem.style.left = left + 'px'; + elem.style.right = ''; + } +}; diff --git a/contexts/data/lib/closure-library/closure/goog/style/bidi_test.html b/contexts/data/lib/closure-library/closure/goog/style/bidi_test.html new file mode 100644 index 0000000..0bcb465 --- /dev/null +++ b/contexts/data/lib/closure-library/closure/goog/style/bidi_test.html @@ -0,0 +1,192 @@ +<!DOCTYPE html> +<html> +<!-- +Copyright 2012 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 Unit Tests - goog.style.bidi</title> + <script src="../base.js"></script> + <script> + goog.require('goog.testing.jsunit'); + + goog.require('goog.style'); + goog.require('goog.style.bidi'); + </script> + <style> + /* Using borders, padding, and margins of various prime values. */ + .scrollDiv { + left:50px; width:250px; height: 100px; + position:absolute; overflow:auto; border-left: 3px solid green; + border-right: 17px solid green; margin: 7px; padding: 13px; + } + </style> +</head> +<body> + +<span id="bodyChild" style="position:fixed;left:60px">bodyChild</span> + +<div> + <span>LTR</span> + <div dir="ltr" onscroll="updateInfo()" + id="scrollDivLtr" class="scrollDiv"> + <div style="width: 1000px; height: 2000px;background-color: blue"></div> + <div id="scrolledElementLtr" style="background:yellow; top: 25px; left:85px; + width: 100px; position:absolute">elm</div> + </div> + <div style="left:400px; position:absolute;"> + <div> elm.offsetParent.scrollLeft: <span id="elementScrollLeftLtr"></span> + </div> + <div> bidi.getScrollLeft(...): <span id="bidiScrollLeftLtr"></span></div> + <div> bidi.getOffsetStart(...): <span id="bidiOffsetStartLtr"></span></div> + <form name="formLtr" action="bidi_test.html#"> + goog.style.bidi.setScrollOffset: <input name="pixelsLtr" type="text"/> + <a href="bidi_test.html#" onClick="goog.style.bidi.setScrollOffset( + document.getElementById('scrollDivLtr'), + parseInt(formLtr.elements['pixelsLtr'].value));">set</a> + </form> + </div> + <br/><br/><br/><br/><br/><br/><br/><br/> +</div> + +<hr/> + +<div> + <span>RTL</span> + <div dir="rtl" + onscroll="updateInfo();" + id="scrollDivRtl" class="scrollDiv"> + <div style="width:1000px; height:70px;background-color:blue"></div> + <div id="scrolledElementRtl" + style="background:yellow; top: 25px; right:85px; + width: 100px; position:absolute">elm</div> + </div> + <div style="left:400px; position:absolute;"> + <div> elm.offsetParent.scrollLeft: <span id="elementScrollLeftRtl"></span> + </div> + <div> bidi.getScrollLeft(...): <span id="bidiScrollLeftRtl"></span></div> + <div> bidi.getOffsetStart(...): <span id="bidiOffsetStartRtl"></span></div> + <form name="formRtl" action="bidi_test.html#"> + goog.style.setScrollOffset: <input name="pixelsRtl" type="text"/> + <a href="bidi_test.html#" onClick="goog.style.bidi.setScrollOffset( + document.getElementById('scrollDivRtl'), + parseInt(formRtl.elements['pixelsRtl'].value));">set</a> + </form> + </div> + <br/><br/><br/><br/><br/><br/><br/><br/> +</div> + +<hr/> + +<br/><br/> +<script type="text/javascript"> + +// Updates the calculated metrics. +function updateInfo() { + var element = document.getElementById('scrolledElementRtl'); + document.getElementById('elementScrollLeftRtl').innerHTML = + element.offsetParent.scrollLeft; + document.getElementById('bidiOffsetStartRtl').innerHTML = + goog.style.bidi.getOffsetStart(element); + document.getElementById('bidiScrollLeftRtl').innerHTML = + goog.style.bidi.getScrollLeft(element.offsetParent); + + element = document.getElementById('scrolledElementLtr'); + document.getElementById('elementScrollLeftLtr').innerHTML = + element.offsetParent.scrollLeft; + document.getElementById('bidiOffsetStartLtr').innerHTML = + goog.style.bidi.getOffsetStart(element); + document.getElementById('bidiScrollLeftLtr').innerHTML = + goog.style.bidi.getScrollLeft(element.offsetParent); +} + +function setUpPage() { + updateInfo(); +} + +function tearDown() { + document.documentElement.dir = 'ltr'; + document.body.dir = 'ltr'; +} + +function testGetOffsetStart() { + var elm = document.getElementById('scrolledElementRtl'); + assertEquals(elm.style['right'], goog.style.bidi.getOffsetStart(elm) + 'px'); + elm = document.getElementById('scrolledElementLtr'); + assertEquals(elm.style['left'], goog.style.bidi.getOffsetStart(elm) + 'px'); +} + +function testSetScrollOffsetRtl() { + var scrollElm = document.getElementById('scrollDivRtl'); + var scrolledElm = document.getElementById('scrolledElementRtl'); + var originalDistance = + goog.style.getRelativePosition(scrolledElm, document.body).x; + var scrollAndAssert = function(pixels) { + goog.style.bidi.setScrollOffset(scrollElm, pixels); + assertEquals(originalDistance + pixels, + goog.style.getRelativePosition(scrolledElm, document.body).x); + } + scrollAndAssert(0); + scrollAndAssert(50); + scrollAndAssert(100); + scrollAndAssert(150); + scrollAndAssert(155); + scrollAndAssert(0); +} + +function testSetScrollOffsetLtr() { + var scrollElm = document.getElementById('scrollDivLtr'); + var scrolledElm = document.getElementById('scrolledElementLtr'); + var originalDistance = + goog.style.getRelativePosition(scrolledElm, document.body).x; + var scrollAndAssert = function(pixels) { + goog.style.bidi.setScrollOffset(scrollElm, pixels); + assertEquals(originalDistance - pixels, + goog.style.getRelativePosition(scrolledElm, document.body).x); + } + scrollAndAssert(0); + scrollAndAssert(50); + scrollAndAssert(100); + scrollAndAssert(150); + scrollAndAssert(155); + scrollAndAssert(0); +} + +function testFixedBodyChildLtr() { + var bodyChild = document.getElementById('bodyChild'); + assertEquals(goog.userAgent.GECKO ? document.body : null, + bodyChild.offsetParent); + assertEquals(60, goog.style.bidi.getOffsetStart(bodyChild)); +} + +function testFixedBodyChildRtl() { + document.documentElement.dir = 'rtl'; + document.body.dir = 'rtl'; + + var bodyChild = document.getElementById('bodyChild'); + assertEquals(goog.userAgent.GECKO ? document.body : null, + bodyChild.offsetParent); + + var expectedOffsetStart = + goog.dom.getViewportSize().width - 60 - bodyChild.offsetWidth; + + // Gecko seems to also add in the marginbox for the body. + // It's not really clear to me if this is true in the general case, + // or just under certain conditions. + if (goog.userAgent.GECKO) { + var marginBox = goog.style.getMarginBox(document.body); + expectedOffsetStart -= (marginBox.left + marginBox.right); + } + + assertEquals(expectedOffsetStart, + goog.style.bidi.getOffsetStart(bodyChild)); +} + +</script> +</body> +</html> diff --git a/contexts/data/lib/closure-library/closure/goog/style/style.js b/contexts/data/lib/closure-library/closure/goog/style/style.js index 8b10643..fac22c4 100644 --- a/contexts/data/lib/closure-library/closure/goog/style/style.js +++ b/contexts/data/lib/closure-library/closure/goog/style/style.js @@ -108,7 +108,7 @@ goog.style.getComputedStyle = function(element, property) { if (styles) { // element.style[..] is undefined for browser specific styles // as 'filter'. - return styles[property] || styles.getPropertyValue(property); + return styles[property] || styles.getPropertyValue(property) || ''; } } @@ -233,7 +233,9 @@ goog.style.getComputedCursor = function(element) { /** * Sets the top/left values of an element. If no unit is specified in the - * argument then it will add px. + * argument then it will add px. The second argument is required if the first + * argument is a string or number and is ignored if the first argument + * is a coordinate. * @param {Element} el Element to move. * @param {string|number|goog.math.Coordinate} arg1 Left position or coordinate. * @param {string|number=} opt_arg2 Top position. @@ -280,11 +282,7 @@ goog.style.getPosition = function(element) { goog.style.getClientViewportElement = function(opt_node) { var doc; if (opt_node) { - if (opt_node.nodeType == goog.dom.NodeType.DOCUMENT) { - doc = opt_node; - } else { - doc = goog.dom.getOwnerDocument(opt_node); - } + doc = goog.dom.getOwnerDocument(opt_node); } else { doc = goog.dom.getDocument(); } @@ -299,19 +297,35 @@ goog.style.getClientViewportElement = function(opt_node) { /** + * Calculates the viewport coordinates relative to the page/document + * containing the node. The viewport may be the browser viewport for + * non-iframe document, or the iframe container for iframe'd document. + * @param {!Document} doc The document to use as the reference point. + * @return {!goog.math.Coordinate} The page offset of the viewport. + */ +goog.style.getViewportPageOffset = function(doc) { + var body = doc.body; + var documentElement = doc.documentElement; + var scrollLeft = body.scrollLeft || documentElement.scrollLeft; + var scrollTop = body.scrollTop || documentElement.scrollTop; + return new goog.math.Coordinate(scrollLeft, scrollTop); +}; + + +/** * Gets the client rectangle of the DOM element. * * getBoundingClientRect is part of a new CSS object model draft (with a * long-time presence in IE), replacing the error-prone parent offset * computation and the now-deprecated Gecko getBoxObjectFor. * - * This utility patches common browser bugs in getClientBoundingRect. It - * will fail if getClientBoundingRect is unsupported. + * This utility patches common browser bugs in getBoundingClientRect. It + * will fail if getBoundingClientRect is unsupported. * * If the element is not in the DOM, the result is undefined, and an error may * be thrown depending on user agent. * - * @param {Element} el The element whose bounding rectangle is being queried. + * @param {!Element} el The element whose bounding rectangle is being queried. * @return {Object} A native bounding rectangle with numerical left, top, * right, and bottom. Reported by Firefox to be of object type ClientRect. * @private @@ -331,7 +345,7 @@ goog.style.getBoundingClientRect_ = function(el) { // In quirks mode, the offset can be determined by querying the body's // clientLeft/clientTop, but in standards mode, it is found by querying // the document element's clientLeft/clientTop. Since we already called - // getClientBoundingRect we have already forced a reflow, so it is not + // getBoundingClientRect we have already forced a reflow, so it is not // too expensive just to query them all. // See: http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx @@ -434,7 +448,7 @@ goog.style.getVisibleRectForElement = function(element) { /** - * Changes the scroll position of {@code container} with the minimum amount so + * Calculate the scroll position of {@code container} with the minimum amount so * that the content and the borders of the given {@code element} become visible. * If the element is bigger than the container, its top left corner will be * aligned as close to the container's top left corner as possible. @@ -443,8 +457,11 @@ goog.style.getVisibleRectForElement = function(element) { * @param {Element} container The container to scroll. * @param {boolean=} opt_center Whether to center the element in the container. * Defaults to false. + * @return {!goog.math.Coordinate} The new scroll position of the container, + * in form of goog.math.Coordinate(scrollLeft, scrollTop). */ -goog.style.scrollIntoContainerView = function(element, container, opt_center) { +goog.style.getContainerOffsetToScrollInto = + function(element, container, opt_center) { // Absolute position of the element's border's top left corner. var elementPos = goog.style.getPageOffset(element); // Absolute position of the container's border's top left corner. @@ -459,10 +476,12 @@ goog.style.scrollIntoContainerView = function(element, container, opt_center) { var spaceX = container.clientWidth - element.offsetWidth; var spaceY = container.clientHeight - element.offsetHeight; + var scrollLeft = container.scrollLeft; + var scrollTop = container.scrollTop; if (opt_center) { // All browsers round non-integer scroll positions down. - container.scrollLeft += relX - spaceX / 2; - container.scrollTop += relY - spaceY / 2; + scrollLeft += relX - spaceX / 2; + scrollTop += relY - spaceY / 2; } else { // This formula was designed to give the correct scroll values in the // following cases: @@ -471,9 +490,29 @@ goog.style.scrollIntoContainerView = function(element, container, opt_center) { // - it is above container (relY < 0) => scroll up by abs(relY) // - it is below container (relY > spaceY) => scroll down by relY - spaceY // - it is in the container => don't scroll - container.scrollLeft += Math.min(relX, Math.max(relX - spaceX, 0)); - container.scrollTop += Math.min(relY, Math.max(relY - spaceY, 0)); + scrollLeft += Math.min(relX, Math.max(relX - spaceX, 0)); + scrollTop += Math.min(relY, Math.max(relY - spaceY, 0)); } + return new goog.math.Coordinate(scrollLeft, scrollTop); +}; + + +/** + * Changes the scroll position of {@code container} with the minimum amount so + * that the content and the borders of the given {@code element} become visible. + * If the element is bigger than the container, its top left corner will be + * aligned as close to the container's top left corner as possible. + * + * @param {Element} element The element to make visible. + * @param {Element} container The container to scroll. + * @param {boolean=} opt_center Whether to center the element in the container. + * Defaults to false. + */ +goog.style.scrollIntoContainerView = function(element, container, opt_center) { + var offset = + goog.style.getContainerOffsetToScrollInto(element, container, opt_center); + container.scrollLeft = offset.x; + container.scrollTop = offset.y; }; @@ -515,6 +554,8 @@ goog.style.getClientLeftTop = function(el) { goog.style.getPageOffset = function(el) { var box, doc = goog.dom.getOwnerDocument(el); var positionStyle = goog.style.getStyle_(el, 'position'); + // TODO(gboyer): Update the jsdoc in a way that doesn't break the universe. + goog.asserts.assertObject(el, 'Parameter is required'); // NOTE(eae): Gecko pre 1.9 normally use getBoxObjectFor to calculate the // position. When invoked for an element with position absolute and a negative @@ -539,7 +580,7 @@ goog.style.getPageOffset = function(el) { return pos; } - // IE and Gecko 1.9+. + // IE, Gecko 1.9+, and most modern WebKit. if (el.getBoundingClientRect) { box = goog.style.getBoundingClientRect_(el); // Must add the scroll coordinates in to get the absolute page offset @@ -720,17 +761,21 @@ goog.style.getRelativePosition = function(a, b) { goog.style.getClientPosition = function(el) { var pos = new goog.math.Coordinate; if (el.nodeType == goog.dom.NodeType.ELEMENT) { - if (el.getBoundingClientRect) { // IE and Gecko 1.9+ - var box = goog.style.getBoundingClientRect_(/** @type {Element} */ (el)); + el = /** @type {!Element} */ (el); + if (el.getBoundingClientRect) { + // IE, Gecko 1.9+, and most modern WebKit + var box = goog.style.getBoundingClientRect_(el); pos.x = box.left; pos.y = box.top; } else { - var scrollCoord = goog.dom.getDomHelper(/** @type {Element} */ (el)) - .getDocumentScroll(); - var pageCoord = goog.style.getPageOffset(/** @type {Element} */ (el)); + var scrollCoord = goog.dom.getDomHelper(el).getDocumentScroll(); + var pageCoord = goog.style.getPageOffset(el); pos.x = pageCoord.x - scrollCoord.x; pos.y = pageCoord.y - scrollCoord.y; } + if (goog.userAgent.GECKO && !goog.userAgent.isVersion(12)) { + pos = goog.math.Coordinate.sum(pos, goog.style.getCssTranslation(el)); + } } else { var isAbstractedEvent = goog.isFunction(el.getBrowserEvent); var targetEvent = el; @@ -841,7 +886,7 @@ goog.style.setHeight = function(element, height) { /** * Set the width of an element. Sets the element's style property. - * @param {Element} element Element to set the height of. + * @param {Element} element Element to set the width of. * @param {string|number} width The width value to set. If a number, 'px' * will be appended, otherwise the value will be applied directly. */ @@ -909,7 +954,7 @@ goog.style.getSizeWithDisplay_ = function(element) { /** * Returns a bounding rectangle for a given element in page space. - * @param {Element} element Element to get bounds of. + * @param {Element} element Element to get bounds of. Must not be display none. * @return {!goog.math.Rect} Bounding rectangle for the element. */ goog.style.getBounds = function(element) { @@ -1143,8 +1188,7 @@ goog.style.setStyles = function(element, stylesString) { // the style node works fine and ignores CSS that IE doesn't understand element.cssText = stylesString; } else { - var propToSet = goog.userAgent.WEBKIT ? 'innerText' : 'innerHTML'; - element[propToSet] = stylesString; + element.innerHTML = stylesString; } }; @@ -1799,7 +1843,7 @@ goog.style.getScrollbarWidth = function(opt_className) { if (opt_className) { outerDiv.className = opt_className; } - outerDiv.style.cssText = 'visiblity:hidden;overflow:auto;' + + outerDiv.style.cssText = 'overflow:auto;' + 'position:absolute;top:0;width:100px;height:100px'; var innerDiv = goog.dom.createElement('div'); goog.style.setSize(innerDiv, '200px', '200px'); @@ -1809,3 +1853,54 @@ goog.style.getScrollbarWidth = function(opt_className) { goog.dom.removeNode(outerDiv); return width; }; + + +/** + * Regular expression to extract x and y translation components from a CSS + * transform Matrix representation. + * + * @type {!RegExp} + * @const + * @private + */ +goog.style.MATRIX_TRANSLATION_REGEX_ = + new RegExp('matrix\\([0-9\\.\\-]+, [0-9\\.\\-]+, ' + + '[0-9\\.\\-]+, [0-9\\.\\-]+, ' + + '([0-9\\.\\-]+)p?x?, ([0-9\\.\\-]+)p?x?\\)'); + + +/** + * Returns the x,y translation component of any CSS transforms applied to the + * element, in pixels. + * + * @param {!Element} element The element to get the translation of. + * @return {!goog.math.Coordinate} The CSS translation of the element in px. + */ +goog.style.getCssTranslation = function(element) { + var property; + if (goog.userAgent.IE) { + property = '-ms-transform'; + } else if (goog.userAgent.WEBKIT) { + property = '-webkit-transform'; + } else if (goog.userAgent.OPERA) { + property = '-o-transform'; + } else if (goog.userAgent.GECKO) { + property = '-moz-transform'; + } + var transform; + if (property) { + transform = goog.style.getStyle_(element, property); + } + if (!transform) { + transform = goog.style.getStyle_(element, 'transform'); + } + if (!transform) { + return new goog.math.Coordinate(0, 0); + } + var matches = transform.match(goog.style.MATRIX_TRANSLATION_REGEX_); + if (!matches) { + return new goog.math.Coordinate(0, 0); + } + return new goog.math.Coordinate(parseFloat(matches[1]), + parseFloat(matches[2])); +}; diff --git a/contexts/data/lib/closure-library/closure/goog/style/style_quirks_test.html b/contexts/data/lib/closure-library/closure/goog/style/style_quirks_test.html index f39cff0..d58810a 100644 --- a/contexts/data/lib/closure-library/closure/goog/style/style_quirks_test.html +++ b/contexts/data/lib/closure-library/closure/goog/style/style_quirks_test.html @@ -14,6 +14,8 @@ See the COPYING file for details. --> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> +<meta name="viewport" content="width=device-width, initial-scale=1.0, + maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <title>Closure Unit Tests - goog.dom.style</title> <script src="../base.js"></script> <script> @@ -220,6 +222,21 @@ i { height: 20px; } +#translation { + position: absolute; + z-index: 10; + left: 10px; + top: 10px; + width: 10px; + height: 10px; + background-color: blue; + -webkit-transform: translate(20px, 30px); + -ms-transform: translate(20px, 30px); + -o-transform: translate(20px, 30px); + -moz-transform: translate(20px, 30px); + transform: translate(20px, 30px); +} + </style> </head> <body> @@ -470,6 +487,9 @@ Test-visible </a> </div> +<div id="test-viewport"></div> +<div id="translation"></div> + <script> var EPSILON = 2; @@ -1108,8 +1128,16 @@ function testInstallStyles() { var result = goog.style.installStyles( '#installTest0 { background-color: rgb(255, 192, 203); }'); - assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el)); + // For some odd reason, the change in computed style does not register on + // Chrome 19 unless the style property is touched. The behavior goes + // away again in Chrome 20. + // TODO(nnaze): Remove special caseing once we switch the testing image + // to Chrome 20 or higher. + if (isChrome19()) { + el.style.display = '' + } + assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el)); goog.style.uninstallStyles(result); assertEquals(originalBackground, goog.style.getBackgroundColor(el)); } @@ -1120,6 +1148,16 @@ function testSetStyles() { // Change to pink var ss = goog.style.installStyles( '#installTest1 { background-color: rgb(255, 192, 203); }'); + + // For some odd reason, the change in computed style does not register on + // Chrome 19 unless the style property is touched. The behavior goes + // away again in Chrome 20. + // TODO(nnaze): Remove special caseing once we switch the testing image + // to Chrome 20 or higher. + if (isChrome19()) { + el.style.display = '' + } + assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el)); // Now change to orange @@ -1134,6 +1172,11 @@ function assertColorRgbEquals(expected, actual) { goog.color.hexToRgbStyle(goog.color.parse(actual).hex)); } +function isChrome19() { + return goog.userAgent.product.CHROME && + goog.string.startsWith(goog.userAgent.product.VERSION, '19.'); +} + function testIsRightToLeft() { assertFalse(goog.style.isRightToLeft(goog.dom.getElement('rtl1'))); assertTrue(goog.style.isRightToLeft(goog.dom.getElement('rtl2'))); @@ -2223,6 +2266,44 @@ function testOverflowOffsetParent() { assertEquals(parent, goog.style.getOffsetParent(child)); } +function testGetViewportPageOffset() { + var testViewport = goog.dom.getElement('test-viewport'); + testViewport.style.height = '5000px'; + testViewport.style.width = '5000px'; + var offset = goog.style.getViewportPageOffset(document); + assertEquals(0, offset.x); + assertEquals(0, offset.y); + + window.scrollTo(0, 100); + offset = goog.style.getViewportPageOffset(document); + assertEquals(0, offset.x); + assertEquals(100, offset.y); + + window.scrollTo(100, 0); + offset = goog.style.getViewportPageOffset(document); + assertEquals(100, offset.x); + assertEquals(0, offset.y); +} + +function testGetsTranslation() { + var element = document.getElementById('translation'); + + expectedFailures.expectFailureFor( + goog.userAgent.IE && !goog.userAgent.product.isVersion(9), + 'CSS transforms were only introduced in IE9'); + + // First check the element is actually translated, and we haven't missed + // one of the vendor-specific transform properties + var position = goog.style.getClientPosition(element); + var translation = goog.style.getCssTranslation(element); + var expectedTranslation = new goog.math.Coordinate(20, 30); + + expectedFailures.run(function() { + assertObjectEquals(new goog.math.Coordinate(30, 40), position); + assertObjectEquals(expectedTranslation, translation); + }); +} + function hasVerticalScroll(el) { return el.clientWidth != 0 && el.offsetWidth - el.clientWidth > 0; } diff --git a/contexts/data/lib/closure-library/closure/goog/style/style_test.html b/contexts/data/lib/closure-library/closure/goog/style/style_test.html index 015b260..3fd87b4 100644 --- a/contexts/data/lib/closure-library/closure/goog/style/style_test.html +++ b/contexts/data/lib/closure-library/closure/goog/style/style_test.html @@ -13,6 +13,8 @@ See the COPYING file for details. --> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> +<meta name="viewport" content="width=device-width, initial-scale=1.0, + maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <title>Closure Unit Tests - goog.dom.style</title> <script src="../base.js"></script> <script> @@ -24,8 +26,11 @@ goog.require('goog.math.Coordinate'); goog.require('goog.math.Size'); goog.require('goog.style'); goog.require('goog.style_test'); +goog.require('goog.testing.ExpectedFailures'); goog.require('goog.testing.jsunit'); goog.require('goog.userAgent'); +goog.require('goog.userAgent.product'); +goog.require('goog.userAgent.product.isVersion'); </script> <script> @@ -228,6 +233,21 @@ i { height: 20px; } +#translation { + position: absolute; + z-index: 10; + left: 10px; + top: 10px; + width: 10px; + height: 10px; + background-color: blue; + -webkit-transform: translate(20px, 30px); + -ms-transform: translate(20px, 30px); + -o-transform: translate(20px, 30px); + -moz-transform: translate(20px, 30px); + transform: translate(20px, 30px); +} + </style> </head> <body> @@ -504,9 +524,13 @@ Test-visible </a> </div> +<div id="test-viewport"></div> +<div id="translation"></div> + <script> var EPSILON = 2; +var expectedFailures = new goog.testing.ExpectedFailures(); var $ = goog.dom.getElement; function setUpPage() { @@ -528,9 +552,13 @@ function setUp() { } function tearDown() { + expectedFailures.handleTearDown(); var testVisibleDiv2 = goog.dom.getElement('test-visible2'); testVisibleDiv2.setAttribute('style', ''); testVisibleDiv2.innerHTML = ''; + var testViewport = goog.dom.getElement('test-viewport'); + testViewport.setAttribute('style', ''); + testViewport.innerHTML = ''; } function testSetStyle() { @@ -2340,6 +2368,44 @@ function testOverflowOffsetParent() { assertEquals(parent, goog.style.getOffsetParent(child)); } +function testGetViewportPageOffset() { + var testViewport = goog.dom.getElement('test-viewport'); + testViewport.style.height = '5000px'; + testViewport.style.width = '5000px'; + var offset = goog.style.getViewportPageOffset(document); + assertEquals(0, offset.x); + assertEquals(0, offset.y); + + window.scrollTo(0, 100); + offset = goog.style.getViewportPageOffset(document); + assertEquals(0, offset.x); + assertEquals(100, offset.y); + + window.scrollTo(100, 0); + offset = goog.style.getViewportPageOffset(document); + assertEquals(100, offset.x); + assertEquals(0, offset.y); +} + +function testGetsTranslation() { + var element = document.getElementById('translation'); + + expectedFailures.expectFailureFor( + goog.userAgent.IE && !goog.userAgent.product.isVersion(9), + 'CSS transforms were only introduced in IE9'); + + // First check the element is actually translated, and we haven't missed + // one of the vendor-specific transform properties + var position = goog.style.getClientPosition(element); + var translation = goog.style.getCssTranslation(element); + var expectedTranslation = new goog.math.Coordinate(20, 30); + + expectedFailures.run(function() { + assertObjectEquals(new goog.math.Coordinate(30, 40), position); + assertObjectEquals(expectedTranslation, translation); + }); +} + function hasVerticalScroll(el) { return el.clientWidth != 0 && el.offsetWidth - el.clientWidth > 0; } diff --git a/contexts/data/lib/closure-library/closure/goog/style/transition.js b/contexts/data/lib/closure-library/closure/goog/style/transition.js index 5a4c5da..a0e13d0 100644 --- a/contexts/data/lib/closure-library/closure/goog/style/transition.js +++ b/contexts/data/lib/closure-library/closure/goog/style/transition.js @@ -22,6 +22,7 @@ goog.provide('goog.style.transition.Css3Property'); goog.require('goog.array'); goog.require('goog.asserts'); +goog.require('goog.userAgent'); /** @@ -85,18 +86,27 @@ goog.style.transition.removeAll = function(element) { */ goog.style.transition.isSupported = function() { if (!goog.isDef(goog.style.transition.css3TransitionSupported_)) { - // We create a test element with style=-webkit-transition, etc. - // We then detect whether those style properties are recognized and - // available from js. - var el = document.createElement('div'); - el.innerHTML = '<div style="-webkit-transition:opacity 1s linear;' + - '-moz-transition:opacity 1s linear;-o-transition:opacity 1s linear">'; - - var testElement = el.firstChild; - goog.style.transition.css3TransitionSupported_ = - goog.isDef(testElement.style.WebkitTransition) || - goog.isDef(testElement.style.MozTransition) || - goog.isDef(testElement.style.OTransition); + // Since IE would allow any attribute, we need to explicitly check the + // browser version here instead. + if (goog.userAgent.IE) { + goog.style.transition.css3TransitionSupported_ = + goog.userAgent.isVersion('10.0'); + } else { + // We create a test element with style=-webkit-transition, etc. + // We then detect whether those style properties are recognized and + // available from js. + var el = document.createElement('div'); + el.innerHTML = '<div style="-webkit-transition:opacity 1s linear;' + + '-moz-transition:opacity 1s linear;-o-transition:opacity 1s linear;' + + 'transition:opacity 1s linear">'; + + var testElement = el.firstChild; + goog.style.transition.css3TransitionSupported_ = + goog.isDef(testElement.style.transition) || + goog.isDef(testElement.style.WebkitTransition) || + goog.isDef(testElement.style.MozTransition) || + goog.isDef(testElement.style.OTransition); + } } return goog.style.transition.css3TransitionSupported_; @@ -120,5 +130,7 @@ goog.style.transition.css3TransitionSupported_; goog.style.transition.setPropertyValue_ = function(element, transitionValue) { element.style.WebkitTransition = transitionValue; element.style.MozTransition = transitionValue; + element.style.MSTransition = transitionValue; element.style.OTransition = transitionValue; + element.style.transition = transitionValue; }; diff --git a/contexts/data/lib/closure-library/closure/goog/style/transition_test.html b/contexts/data/lib/closure-library/closure/goog/style/transition_test.html index c9235cb..34d5f14 100644 --- a/contexts/data/lib/closure-library/closure/goog/style/transition_test.html +++ b/contexts/data/lib/closure-library/closure/goog/style/transition_test.html @@ -99,6 +99,13 @@ function testRemoveAllForGecko() { } +function testRemoveAllForIE() { + element.style.MSTransition = 'opacity 1s ease-in'; + goog.style.transition.removeAll(element); + assertEquals('', element.style.MSTransition); +} + + function testRemoveAllForOpera() { element.style.OTransition = 'opacity 1s ease-in'; goog.style.transition.removeAll(element); @@ -106,15 +113,22 @@ function testRemoveAllForOpera() { } +function testRemoveAllForUnprefixed() { + element.style.transition = 'opacity 1s ease-in'; + goog.style.transition.removeAll(element); + assertEquals('', element.style.transition); +} + + function testSanityDetectionOfCss3Transition() { var support = goog.style.transition.isSupported(); - // No current IE browser supports CSS3 transition. + // IE support starts at IE10. if (goog.userAgent.IE) { - assertFalse(support); + assertEquals(goog.userAgent.isVersion('10.0'), support); } - // FF supports start at FF4 (Gecko 2.0) + // FF support start at FF4 (Gecko 2.0) if (goog.userAgent.GECKO) { assertEquals(goog.userAgent.isVersion('2.0'), support); } |