Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,184 @@
|
||||
// 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.isVersionOrHigher('8'))) {
|
||||
// ScrollLeft starts at the maximum positive value and decreases towards
|
||||
// 0 as the element is scrolled towards the left. However, for overflow
|
||||
// visible, there is no scrollLeft and the value always stays correctly at 0
|
||||
var overflowX = goog.style.getComputedOverflowX(element);
|
||||
if (overflowX == 'visible') {
|
||||
return element.scrollLeft;
|
||||
} else {
|
||||
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.isDocumentModeOrHigher(8) &&
|
||||
!goog.userAgent.isDocumentModeOrHigher(9)) {
|
||||
// When calculating an element's offsetLeft, IE8/9-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.isVersionOrHigher('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 = '';
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,139 @@
|
||||
<!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.style.bidiTest');
|
||||
</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>
|
||||
<div dir="rtl" id="scrollLeftRtl" style="position: relative; width: 100px; height: 100px;
|
||||
background-color: blue">
|
||||
<div style="position:absolute; width: 200px; height: 20px; background-color:
|
||||
green">
|
||||
INNER
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<br />
|
||||
<br />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
// 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.
|
||||
|
||||
goog.provide('goog.style.bidiTest');
|
||||
goog.setTestOnly('goog.style.bidiTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.style.bidi');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.userAgent');
|
||||
|
||||
// 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));
|
||||
}
|
||||
|
||||
function testGetScrollLeftRTL() {
|
||||
var scrollLeftDiv = document.getElementById('scrollLeftRtl');
|
||||
scrollLeftDiv.style.overflow = 'visible';
|
||||
assertEquals(0, goog.style.bidi.getScrollLeft(scrollLeftDiv));
|
||||
scrollLeftDiv.style.overflow = 'hidden';
|
||||
assertEquals(0, goog.style.bidi.getScrollLeft(scrollLeftDiv));
|
||||
scrollLeftDiv.style.overflow = 'scroll';
|
||||
assertEquals(0, goog.style.bidi.getScrollLeft(scrollLeftDiv));
|
||||
scrollLeftDiv.style.overflow = 'auto';
|
||||
assertEquals(0, goog.style.bidi.getScrollLeft(scrollLeftDiv));
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
// 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).
|
||||
*
|
||||
* @author dgajda@google.com (Damian Gajda) Ported to closure.
|
||||
*/
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<!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.style.cursorTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
// Copyright 2009 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.
|
||||
|
||||
goog.provide('goog.style.cursorTest');
|
||||
goog.setTestOnly('goog.style.cursorTest');
|
||||
|
||||
goog.require('goog.style.cursor');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.userAgent');
|
||||
|
||||
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));
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2014 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</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.style.style_document_scroll_test');
|
||||
</script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
#testEl1 {
|
||||
background: lightblue;
|
||||
height: 110%;
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
#testEl2 {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
margin-left: 300px;
|
||||
width: 5000px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="testEl1">
|
||||
Test Element2
|
||||
</div>
|
||||
<div id="testEl2">Test Element4</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
// Copyright 2014 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.
|
||||
|
||||
goog.provide('goog.style.style_document_scroll_test');
|
||||
goog.setTestOnly('goog.style.style_document_scroll_test');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
|
||||
|
||||
var EPSILON = 2;
|
||||
var body;
|
||||
var html;
|
||||
|
||||
function setUp() {
|
||||
body = document.body;
|
||||
setUpElement(body);
|
||||
html = document.documentElement;
|
||||
setUpElement(html);
|
||||
}
|
||||
|
||||
|
||||
function setUpElement(element) {
|
||||
element.scrollTop = 100;
|
||||
element.scrollLeft = 100;
|
||||
}
|
||||
|
||||
|
||||
function tearDown() {
|
||||
tearDownElement(body);
|
||||
tearDownElement(html);
|
||||
}
|
||||
|
||||
|
||||
function tearDownElement(element) {
|
||||
element.style.border = '';
|
||||
element.style.padding = '';
|
||||
element.style.margin = '';
|
||||
element.scrollTop = 0;
|
||||
element.scrollLeft = 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function testDocumentScrollWithZeroedBodyProperties() {
|
||||
assertRoughlyEquals(200,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), body).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(300,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), body).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testHtmlScrollWithZeroedBodyProperties() {
|
||||
assertRoughlyEquals(200,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), html).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(300,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), html).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testDocumentScrollWithMargin() {
|
||||
body.style.margin = '20px 0 0 30px';
|
||||
assertRoughlyEquals(220,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), body).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(330,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), body).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testHtmlScrollWithMargin() {
|
||||
html.style.margin = '20px 0 0 30px';
|
||||
assertRoughlyEquals(220,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), html).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(330,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), html).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function testDocumentScrollWithPadding() {
|
||||
body.style.padding = '20px 0 0 30px';
|
||||
assertRoughlyEquals(220,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), body).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(330,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), body).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testHtmlScrollWithPadding() {
|
||||
html.style.padding = '20px 0 0 30px';
|
||||
assertRoughlyEquals(220,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), html).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(330,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), html).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testDocumentScrollWithBorder() {
|
||||
body.style.border = '20px solid green';
|
||||
assertRoughlyEquals(220,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), body).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(320,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), body).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testHtmlScrollWithBorder() {
|
||||
html.style.border = '20px solid green';
|
||||
assertRoughlyEquals(220,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), html).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(320,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), html).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testDocumentScrollWithAllProperties() {
|
||||
body.style.margin = '20px 0 0 30px';
|
||||
body.style.padding = '40px 0 0 50px';
|
||||
body.style.border = '10px solid green';
|
||||
assertRoughlyEquals(270,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), body).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(390,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), body).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
|
||||
function testHtmlScrollWithAllProperties() {
|
||||
html.style.margin = '20px 0 0 30px';
|
||||
html.style.padding = '40px 0 0 50px';
|
||||
html.style.border = '10px solid green';
|
||||
assertRoughlyEquals(270,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl1'), html).y,
|
||||
EPSILON);
|
||||
assertRoughlyEquals(390,
|
||||
goog.style.getContainerOffsetToScrollInto(
|
||||
goog.dom.getElement('testEl2'), html).x,
|
||||
EPSILON);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,538 @@
|
||||
<!-- 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 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>goog.require('goog.userAgent');</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-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;
|
||||
/* The overflow is different from style_test so that we have consistent
|
||||
scroll positions in all browsers. */
|
||||
overflow: hidden;
|
||||
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>
|
||||
<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="box-sizing-unset"></div>
|
||||
<div id="box-sizing-border-box" style="box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></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>
|
||||
|
||||
<div id="test-viewport"></div>
|
||||
<div id="translation"></div>
|
||||
|
||||
<div id="rotated"></div>
|
||||
<div id="scaled"></div>
|
||||
|
||||
<script>
|
||||
if (!goog.userAgent.IE || goog.userAgent.isDocumentModeOrHigher(9)) {
|
||||
document.write(
|
||||
'<iframe id="svg-frame" src="style_test_rect.svg"></' + 'iframe>');
|
||||
}
|
||||
goog.require('goog.style_test');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,526 @@
|
||||
<!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">
|
||||
<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>goog.require('goog.userAgent');</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;
|
||||
}
|
||||
|
||||
#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>
|
||||
<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="box-sizing-unset"></div>
|
||||
<div id="box-sizing-border-box" style="box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></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>
|
||||
|
||||
<div id="test-viewport"></div>
|
||||
<div id="translation"></div>
|
||||
|
||||
<div id="rotated"></div>
|
||||
<div id="scaled"></div>
|
||||
|
||||
<script>
|
||||
if (!goog.userAgent.IE || goog.userAgent.isDocumentModeOrHigher(9)) {
|
||||
document.write(
|
||||
'<iframe id="svg-frame" src="style_test_rect.svg"></' + 'iframe>');
|
||||
}
|
||||
goog.require('goog.style_test');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
<!--
|
||||
|
||||
-->
|
||||
<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>
|
||||
<style>
|
||||
#test-visible {
|
||||
position: absolute;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test-visible">Test</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!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>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<!--
|
||||
-->
|
||||
<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.
|
||||
-->
|
||||
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!--
|
||||
Copyright 2013 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.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"
|
||||
width="100px" height="100px" viewBox="0 0 100 100">
|
||||
<rect id="rect" width="50" height="50" fill="blue"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 411 B |
@@ -0,0 +1,11 @@
|
||||
<!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.
|
||||
-->
|
||||
@@ -0,0 +1,42 @@
|
||||
<!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.webkitScrollbarsTest');
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
// 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.
|
||||
|
||||
goog.provide('goog.style.webkitScrollbarsTest');
|
||||
goog.setTestOnly('goog.style.webkitScrollbarsTest');
|
||||
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.style');
|
||||
/** @suppress {extraRequire} */
|
||||
goog.require('goog.styleScrollbarTester');
|
||||
goog.require('goog.testing.ExpectedFailures');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.userAgent');
|
||||
|
||||
var expectedFailures;
|
||||
|
||||
function setUpPage() {
|
||||
expectedFailures = new goog.testing.ExpectedFailures();
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
expectedFailures.handleTearDown();
|
||||
|
||||
// Assert that the test loaded.
|
||||
goog.asserts.assert(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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
// 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.styleScrollbarTester');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.asserts');
|
||||
goog.setTestOnly('goog.styleScrollbarTester');
|
||||
|
||||
|
||||
/**
|
||||
* Tests the scrollbar width calculation. Assumes that there is an element with
|
||||
* id 'test-scrollbarwidth' in the page.
|
||||
*/
|
||||
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 hasVerticalScroll(el) {
|
||||
return el.clientWidth != 0 && el.offsetWidth - el.clientWidth > 0;
|
||||
}
|
||||
|
||||
|
||||
function hasHorizontalScroll(el) {
|
||||
return el.clientHeight != 0 && el.offsetHeight - el.clientHeight > 0;
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
// Copyright 2014 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 transforms programmatically.
|
||||
*/
|
||||
|
||||
goog.provide('goog.style.transform');
|
||||
|
||||
goog.require('goog.functions');
|
||||
goog.require('goog.math.Coordinate');
|
||||
goog.require('goog.math.Coordinate3');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.userAgent');
|
||||
goog.require('goog.userAgent.product.isVersion');
|
||||
|
||||
|
||||
/**
|
||||
* Whether CSS3 transform translate() is supported. IE 9 supports 2D transforms
|
||||
* and IE 10 supports 3D transforms. IE 8 supports neither.
|
||||
* @return {boolean} Whether the current environment supports CSS3 transforms.
|
||||
*/
|
||||
goog.style.transform.isSupported = goog.functions.cacheReturnValue(function() {
|
||||
return !goog.userAgent.IE || goog.userAgent.product.isVersion(9);
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Whether CSS3 transform translate3d() is supported. If the current browser
|
||||
* supports this transform strategy.
|
||||
* @return {boolean} Whether the current environment supports CSS3 transforms.
|
||||
*/
|
||||
goog.style.transform.is3dSupported =
|
||||
goog.functions.cacheReturnValue(function() {
|
||||
return goog.userAgent.WEBKIT ||
|
||||
(goog.userAgent.GECKO && goog.userAgent.product.isVersion(10)) ||
|
||||
(goog.userAgent.IE && goog.userAgent.product.isVersion(10));
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 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.transform.getTranslation = function(element) {
|
||||
var transform = goog.style.getComputedTransform(element);
|
||||
var matrixConstructor = goog.style.transform.matrixConstructor_();
|
||||
if (transform && matrixConstructor) {
|
||||
var matrix = new matrixConstructor(transform);
|
||||
if (matrix) {
|
||||
return new goog.math.Coordinate(matrix.m41, matrix.m42);
|
||||
}
|
||||
}
|
||||
return new goog.math.Coordinate(0, 0);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Translates an element's position using the CSS3 transform property.
|
||||
* NOTE: This replaces all other transforms already defined on the element.
|
||||
* @param {Element} element The element to translate.
|
||||
* @param {number} x The horizontal translation.
|
||||
* @param {number} y The vertical translation.
|
||||
* @return {boolean} Whether the CSS translation was set.
|
||||
*/
|
||||
goog.style.transform.setTranslation = function(element, x, y) {
|
||||
if (!goog.style.transform.isSupported()) {
|
||||
return false;
|
||||
}
|
||||
// TODO(user): After http://crbug.com/324107 is fixed, it will be faster to
|
||||
// use something like: translation = new CSSMatrix().translate(x, y, 0);
|
||||
var translation = goog.style.transform.is3dSupported() ?
|
||||
'translate3d(' + x + 'px,' + y + 'px,' + '0px)' :
|
||||
'translate(' + x + 'px,' + y + 'px)';
|
||||
goog.style.setStyle(element,
|
||||
goog.style.transform.getTransformProperty_(), translation);
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns the scale of the x, y and z dimensions of CSS transforms applied to
|
||||
* the element.
|
||||
*
|
||||
* @param {!Element} element The element to get the scale of.
|
||||
* @return {!goog.math.Coordinate3} The scale of the element.
|
||||
*/
|
||||
goog.style.transform.getScale = function(element) {
|
||||
var transform = goog.style.getComputedTransform(element);
|
||||
var matrixConstructor = goog.style.transform.matrixConstructor_();
|
||||
if (transform && matrixConstructor) {
|
||||
var matrix = new matrixConstructor(transform);
|
||||
if (matrix) {
|
||||
return new goog.math.Coordinate3(matrix.m11, matrix.m22, matrix.m33);
|
||||
}
|
||||
}
|
||||
return new goog.math.Coordinate3(0, 0, 0);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Scales an element using the CSS3 transform property.
|
||||
* NOTE: This replaces all other transforms already defined on the element.
|
||||
* @param {!Element} element The element to scale.
|
||||
* @param {number} x The horizontal scale.
|
||||
* @param {number} y The vertical scale.
|
||||
* @param {number} z The depth scale.
|
||||
* @return {boolean} Whether the CSS scale was set.
|
||||
*/
|
||||
goog.style.transform.setScale = function(element, x, y, z) {
|
||||
if (!goog.style.transform.isSupported()) {
|
||||
return false;
|
||||
}
|
||||
var scale = goog.style.transform.is3dSupported() ?
|
||||
'scale3d(' + x + ',' + y + ',' + z + ')' :
|
||||
'scale(' + x + ',' + y + ')';
|
||||
goog.style.setStyle(element,
|
||||
goog.style.transform.getTransformProperty_(), scale);
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* A cached value of the transform property depending on whether the useragent
|
||||
* is IE9.
|
||||
* @return {string} The transform property depending on whether the useragent
|
||||
* is IE9.
|
||||
* @private
|
||||
*/
|
||||
goog.style.transform.getTransformProperty_ =
|
||||
goog.functions.cacheReturnValue(function() {
|
||||
return goog.userAgent.IE && goog.userAgent.DOCUMENT_MODE == 9 ?
|
||||
'-ms-transform' : 'transform';
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Gets the constructor for a CSSMatrix object.
|
||||
* @return {function(new:CSSMatrix, string)?} A constructor for a CSSMatrix
|
||||
* object (or null).
|
||||
* @private
|
||||
*/
|
||||
goog.style.transform.matrixConstructor_ =
|
||||
goog.functions.cacheReturnValue(function() {
|
||||
if (goog.isDef(goog.global['WebKitCSSMatrix'])) {
|
||||
return goog.global['WebKitCSSMatrix'];
|
||||
}
|
||||
if (goog.isDef(goog.global['MSCSSMatrix'])) {
|
||||
return goog.global['MSCSSMatrix'];
|
||||
}
|
||||
if (goog.isDef(goog.global['CSSMatrix'])) {
|
||||
return goog.global['CSSMatrix'];
|
||||
}
|
||||
return null;
|
||||
});
|
||||
@@ -0,0 +1,136 @@
|
||||
// Copyright 2014 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.
|
||||
|
||||
goog.provide('goog.style.transformTest');
|
||||
goog.setTestOnly('goog.style.transformTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style.transform');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.userAgent');
|
||||
goog.require('goog.userAgent.product.isVersion');
|
||||
|
||||
|
||||
/**
|
||||
* Element being transformed.
|
||||
* @type {Element}
|
||||
*/
|
||||
var element;
|
||||
|
||||
|
||||
/**
|
||||
* Sets a transform translation and asserts the translation was applied.
|
||||
* @param {number} x The horizontal translation
|
||||
* @param {number} y The vertical translation
|
||||
*/
|
||||
var setAndAssertTranslation = function(x, y) {
|
||||
if (goog.userAgent.GECKO ||
|
||||
goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(10)) {
|
||||
// Mozilla and <IE10 do not support CSSMatrix.
|
||||
return;
|
||||
}
|
||||
var success = goog.style.transform.setTranslation(element, x, y);
|
||||
if (!goog.style.transform.isSupported()) {
|
||||
assertFalse(success);
|
||||
} else {
|
||||
assertTrue(success);
|
||||
var translation = goog.style.transform.getTranslation(element);
|
||||
assertEquals(x, translation.x);
|
||||
assertEquals(y, translation.y);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Sets a transform translation and asserts the translation was applied.
|
||||
* @param {number} x The horizontal scale
|
||||
* @param {number} y The vertical scale
|
||||
* @param {number} z The depth scale
|
||||
*/
|
||||
var setAndAssertScale = function(x, y, z) {
|
||||
if (goog.userAgent.GECKO ||
|
||||
goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(10)) {
|
||||
// Mozilla and <IE10 do not support CSSMatrix.
|
||||
return;
|
||||
}
|
||||
var success = goog.style.transform.setScale(element, x, y, z);
|
||||
if (!goog.style.transform.isSupported()) {
|
||||
assertFalse(success);
|
||||
} else {
|
||||
assertTrue(success);
|
||||
var scale = goog.style.transform.getScale(element);
|
||||
assertEquals(x, scale.x);
|
||||
assertEquals(y, scale.y);
|
||||
if (goog.style.transform.is3dSupported()) {
|
||||
assertEquals(z, scale.z);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function setUp() {
|
||||
element = goog.dom.createElement('div');
|
||||
goog.dom.appendChild(goog.dom.getDocument().body, element);
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
goog.dom.removeNode(element);
|
||||
}
|
||||
|
||||
|
||||
function testIsSupported() {
|
||||
if (goog.userAgent.IE && !goog.userAgent.product.isVersion(9)) {
|
||||
assertFalse(goog.style.transform.isSupported());
|
||||
} else {
|
||||
assertTrue(goog.style.transform.isSupported());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function testIs3dSupported() {
|
||||
if (goog.userAgent.GECKO && !goog.userAgent.product.isVersion(10) ||
|
||||
(goog.userAgent.IE && !goog.userAgent.product.isVersion(10))) {
|
||||
assertFalse(goog.style.transform.is3dSupported());
|
||||
} else {
|
||||
assertTrue(goog.style.transform.is3dSupported());
|
||||
}
|
||||
}
|
||||
|
||||
function testTranslateX() {
|
||||
setAndAssertTranslation(10, 0);
|
||||
}
|
||||
|
||||
function testTranslateY() {
|
||||
setAndAssertTranslation(0, 10);
|
||||
}
|
||||
|
||||
function testTranslateXY() {
|
||||
setAndAssertTranslation(10, 20);
|
||||
}
|
||||
|
||||
function testScaleX() {
|
||||
setAndAssertScale(5, 1, 1);
|
||||
}
|
||||
|
||||
function testScaleY() {
|
||||
setAndAssertScale(1, 3, 1);
|
||||
}
|
||||
|
||||
function testScaleZ() {
|
||||
setAndAssertScale(1, 1, 8);
|
||||
}
|
||||
|
||||
function testScale() {
|
||||
setAndAssertScale(2, 2, 2);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
// 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.
|
||||
* @author chrishenry@google.com (Chris Henry)
|
||||
*/
|
||||
|
||||
goog.provide('goog.style.transition');
|
||||
goog.provide('goog.style.transition.Css3Property');
|
||||
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.dom.safe');
|
||||
goog.require('goog.dom.vendor');
|
||||
goog.require('goog.functions');
|
||||
goog.require('goog.html.SafeHtml');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.userAgent');
|
||||
|
||||
|
||||
/**
|
||||
* 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.assertObject(p,
|
||||
'Expected css3 property to be an object.');
|
||||
var propString = p.property + ' ' + p.duration + 's ' + p.timing +
|
||||
' ' + p.delay + 's';
|
||||
goog.asserts.assert(p.property && goog.isNumber(p.duration) &&
|
||||
p.timing && goog.isNumber(p.delay),
|
||||
'Unexpected css3 property value: %s', propString);
|
||||
return propString;
|
||||
}
|
||||
});
|
||||
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 = goog.functions.cacheReturnValue(function() {
|
||||
// Since IE would allow any attribute, we need to explicitly check the
|
||||
// browser version here instead.
|
||||
if (goog.userAgent.IE) {
|
||||
return goog.userAgent.isVersionOrHigher('10.0');
|
||||
}
|
||||
|
||||
// We create a test element with style=-vendor-transition
|
||||
// We then detect whether those style properties are recognized and
|
||||
// available from js.
|
||||
var el = document.createElement('div');
|
||||
var transition = 'opacity 1s linear';
|
||||
var vendorPrefix = goog.dom.vendor.getVendorPrefix();
|
||||
var style = {'transition': transition};
|
||||
if (vendorPrefix) {
|
||||
style[vendorPrefix + '-transition'] = transition;
|
||||
}
|
||||
goog.dom.safe.setInnerHtml(el,
|
||||
goog.html.SafeHtml.create('div', {'style': style}));
|
||||
|
||||
var testElement = /** @type {Element} */ (el.firstChild);
|
||||
goog.asserts.assert(testElement.nodeType == Node.ELEMENT_NODE);
|
||||
|
||||
return goog.style.getStyle(testElement, 'transition') != '';
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
goog.style.setStyle(element, 'transition', transitionValue);
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
<!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.
|
||||
-->
|
||||
<!--
|
||||
Author: chrishenry@google.com (Chris Henry)
|
||||
-->
|
||||
<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.transitionTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
// 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.
|
||||
|
||||
goog.provide('goog.style.transitionTest');
|
||||
goog.setTestOnly('goog.style.transitionTest');
|
||||
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.style.transition');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.userAgent');
|
||||
|
||||
|
||||
/** Fake element. */
|
||||
var element;
|
||||
|
||||
|
||||
function setUp() {
|
||||
element = {'style': {}};
|
||||
}
|
||||
|
||||
function getTransitionStyle(element) {
|
||||
return element.style['transition'] ||
|
||||
goog.style.getStyle(element, 'transition');
|
||||
}
|
||||
|
||||
|
||||
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', getTransitionStyle(element));
|
||||
}
|
||||
|
||||
|
||||
function testSetWithSingleProperty() {
|
||||
goog.style.transition.set(element,
|
||||
{property: 'opacity', duration: 1, timing: 'ease-in', delay: 0.125});
|
||||
assertEquals('opacity 1s ease-in 0.125s', getTransitionStyle(element));
|
||||
}
|
||||
|
||||
|
||||
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',
|
||||
getTransitionStyle(element));
|
||||
}
|
||||
|
||||
|
||||
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',
|
||||
getTransitionStyle(element));
|
||||
}
|
||||
|
||||
|
||||
function testRemoveAll() {
|
||||
goog.style.setStyle(element, 'transition', 'opacity 1s ease-in');
|
||||
goog.style.transition.removeAll(element);
|
||||
assertEquals('', getTransitionStyle(element));
|
||||
}
|
||||
|
||||
|
||||
function testAddAndRemoveOnRealElement() {
|
||||
if (!goog.style.transition.isSupported()) {
|
||||
return;
|
||||
}
|
||||
|
||||
var div = document.getElementById('test');
|
||||
goog.style.transition.set(div, 'opacity 1s ease-in 125ms');
|
||||
assertEquals('opacity 1s ease-in 125ms', getTransitionStyle(div));
|
||||
goog.style.transition.removeAll(div);
|
||||
assertEquals('', getTransitionStyle(div));
|
||||
}
|
||||
|
||||
|
||||
function testSanityDetectionOfCss3Transition() {
|
||||
var support = goog.style.transition.isSupported();
|
||||
|
||||
// IE support starts at IE10.
|
||||
if (goog.userAgent.IE) {
|
||||
assertEquals(goog.userAgent.isVersionOrHigher('10.0'), support);
|
||||
}
|
||||
|
||||
// FF support start at FF4 (Gecko 2.0)
|
||||
if (goog.userAgent.GECKO) {
|
||||
assertEquals(goog.userAgent.isVersionOrHigher('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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user