sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
212 lines (186 loc) • 7.25 kB
HTML
<html>
<!--
Copyright 2012 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<!--
-->
<head>
<title>Closure Unit Tests - goog.style.bidi</title>
<script src="../base.js"></script>
<script>
goog.require('goog.testing.jsunit');
goog.require('goog.style');
goog.require('goog.style.bidi');
</script>
<style>
/* Using borders, padding, and margins of various prime values. */
.scrollDiv {
left:50px; width:250px; height: 100px;
position:absolute; overflow:auto; border-left: 3px solid green;
border-right: 17px solid green; margin: 7px; padding: 13px;
}
</style>
</head>
<body>
<span id="bodyChild" style="position:fixed;left:60px">bodyChild</span>
<div>
<span>LTR</span>
<div dir="ltr" onscroll="updateInfo()"
id="scrollDivLtr" class="scrollDiv">
<div style="width: 1000px; height: 2000px;background-color: blue"></div>
<div id="scrolledElementLtr" style="background:yellow; top: 25px; left:85px;
width: 100px; position:absolute">elm</div>
</div>
<div style="left:400px; position:absolute;">
<div> elm.offsetParent.scrollLeft: <span id="elementScrollLeftLtr"></span>
</div>
<div> bidi.getScrollLeft(...): <span id="bidiScrollLeftLtr"></span></div>
<div> bidi.getOffsetStart(...): <span id="bidiOffsetStartLtr"></span></div>
<form name="formLtr" action="bidi_test.html#">
goog.style.bidi.setScrollOffset: <input name="pixelsLtr" type="text"/>
<a href="bidi_test.html#" onClick="goog.style.bidi.setScrollOffset(
document.getElementById('scrollDivLtr'),
parseInt(formLtr.elements['pixelsLtr'].value));">set</a>
</form>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<hr/>
<div>
<span>RTL</span>
<div dir="rtl"
onscroll="updateInfo();"
id="scrollDivRtl" class="scrollDiv">
<div style="width:1000px; height:70px;background-color:blue"></div>
<div id="scrolledElementRtl"
style="background:yellow; top: 25px; right:85px;
width: 100px; position:absolute">elm</div>
</div>
<div style="left:400px; position:absolute;">
<div> elm.offsetParent.scrollLeft: <span id="elementScrollLeftRtl"></span>
</div>
<div> bidi.getScrollLeft(...): <span id="bidiScrollLeftRtl"></span></div>
<div> bidi.getOffsetStart(...): <span id="bidiOffsetStartRtl"></span></div>
<form name="formRtl" action="bidi_test.html#">
goog.style.setScrollOffset: <input name="pixelsRtl" type="text"/>
<a href="bidi_test.html#" onClick="goog.style.bidi.setScrollOffset(
document.getElementById('scrollDivRtl'),
parseInt(formRtl.elements['pixelsRtl'].value));">set</a>
</form>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<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/>
<script type="text/javascript">
// Updates the calculated metrics.
function updateInfo() {
var element = document.getElementById('scrolledElementRtl');
document.getElementById('elementScrollLeftRtl').innerHTML =
element.offsetParent.scrollLeft;
document.getElementById('bidiOffsetStartRtl').innerHTML =
goog.style.bidi.getOffsetStart(element);
document.getElementById('bidiScrollLeftRtl').innerHTML =
goog.style.bidi.getScrollLeft(element.offsetParent);
element = document.getElementById('scrolledElementLtr');
document.getElementById('elementScrollLeftLtr').innerHTML =
element.offsetParent.scrollLeft;
document.getElementById('bidiOffsetStartLtr').innerHTML =
goog.style.bidi.getOffsetStart(element);
document.getElementById('bidiScrollLeftLtr').innerHTML =
goog.style.bidi.getScrollLeft(element.offsetParent);
}
function setUpPage() {
updateInfo();
}
function tearDown() {
document.documentElement.dir = 'ltr';
document.body.dir = 'ltr';
}
function testGetOffsetStart() {
var elm = document.getElementById('scrolledElementRtl');
assertEquals(elm.style['right'], goog.style.bidi.getOffsetStart(elm) + 'px');
elm = document.getElementById('scrolledElementLtr');
assertEquals(elm.style['left'], goog.style.bidi.getOffsetStart(elm) + 'px');
}
function testSetScrollOffsetRtl() {
var scrollElm = document.getElementById('scrollDivRtl');
var scrolledElm = document.getElementById('scrolledElementRtl');
var originalDistance =
goog.style.getRelativePosition(scrolledElm, document.body).x;
var scrollAndAssert = function(pixels) {
goog.style.bidi.setScrollOffset(scrollElm, pixels);
assertEquals(originalDistance + pixels,
goog.style.getRelativePosition(scrolledElm, document.body).x);
}
scrollAndAssert(0);
scrollAndAssert(50);
scrollAndAssert(100);
scrollAndAssert(150);
scrollAndAssert(155);
scrollAndAssert(0);
}
function testSetScrollOffsetLtr() {
var scrollElm = document.getElementById('scrollDivLtr');
var scrolledElm = document.getElementById('scrolledElementLtr');
var originalDistance =
goog.style.getRelativePosition(scrolledElm, document.body).x;
var scrollAndAssert = function(pixels) {
goog.style.bidi.setScrollOffset(scrollElm, pixels);
assertEquals(originalDistance - pixels,
goog.style.getRelativePosition(scrolledElm, document.body).x);
}
scrollAndAssert(0);
scrollAndAssert(50);
scrollAndAssert(100);
scrollAndAssert(150);
scrollAndAssert(155);
scrollAndAssert(0);
}
function testFixedBodyChildLtr() {
var bodyChild = document.getElementById('bodyChild');
assertEquals(goog.userAgent.GECKO ? document.body : null,
bodyChild.offsetParent);
assertEquals(60, goog.style.bidi.getOffsetStart(bodyChild));
}
function testFixedBodyChildRtl() {
document.documentElement.dir = 'rtl';
document.body.dir = 'rtl';
var bodyChild = document.getElementById('bodyChild');
assertEquals(goog.userAgent.GECKO ? document.body : null,
bodyChild.offsetParent);
var expectedOffsetStart =
goog.dom.getViewportSize().width - 60 - bodyChild.offsetWidth;
// Gecko seems to also add in the marginbox for the body.
// It's not really clear to me if this is true in the general case,
// or just under certain conditions.
if (goog.userAgent.GECKO) {
var marginBox = goog.style.getMarginBox(document.body);
expectedOffsetStart -= (marginBox.left + marginBox.right);
}
assertEquals(expectedOffsetStart,
goog.style.bidi.getOffsetStart(bodyChild));
}
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));
}
</script>
</body>
</html>