]> source.dussan.org Git - vaadin-framework.git/commitdiff
Add test for detecting scrollbar quirks in different browsers
authorLeif Åstrand <leif@vaadin.com>
Thu, 19 Apr 2012 13:39:09 +0000 (16:39 +0300)
committerLeif Åstrand <leif@vaadin.com>
Thu, 19 Apr 2012 13:39:09 +0000 (16:39 +0300)
WebContent/statictestfiles/browserfeatures/fullHeightScrollbar.html [new file with mode: 0644]
tests/testbench/com/vaadin/tests/browserfeatures/FullHeightScrollbar.html [new file with mode: 0644]

diff --git a/WebContent/statictestfiles/browserfeatures/fullHeightScrollbar.html b/WebContent/statictestfiles/browserfeatures/fullHeightScrollbar.html
new file mode 100644 (file)
index 0000000..2e280da
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<style type="text/css">
+.wrapper {
+       height: 150px;
+       width: 150px;
+       border: 1px solid black;
+       overflow: auto;
+       position: relative;
+}
+
+.content {
+       height: 100%;
+       width: 250px;
+       background: grey;
+}
+
+</style>
+<script type="text/javascript">
+function disableScrolling() {
+       var result = document.getElementsByClassName("content");
+       for(var i = 0; i < result.length; i++) {
+               var e = result[i];
+               e.style.width = "100%";
+       }
+}
+
+function triggerReflow() {
+       var style = "top";
+       var styleValue = "1px";
+       var result = document.getElementsByClassName("wrapper");
+       for(var i = 0; i < result.length; i++) {
+               var e = result[i];
+               var originalValue = e.style[style];
+               e.style[style] = styleValue;
+               e.offsetWidth;
+               e.style[style] = originalValue;
+       }
+}
+</script>
+</head>
+<body scroll="auto">
+<p>This test is used to verify how browsers take horizontal scrollbars into account when calculating 100% height and what happens when scrolling is no longer needed. This test tells which browsers need which workarounds for related features.</p>
+
+<p>Basic situation.
+<div class="wrapper"><div class="content"></div></div>
+</p>
+
+<p>
+Situation with position: absolute on the inner element.
+<div class="wrapper"><div class="content" style="position: absolute"></div></div>
+</p>
+
+<button id="disableScrolling" onclick="disableScrolling()">Disable scrolling</button>
+<button id="triggerReflow" onclick="triggerReflow()">Trigger reflow</button>
+</body>
+</html>
diff --git a/tests/testbench/com/vaadin/tests/browserfeatures/FullHeightScrollbar.html b/tests/testbench/com/vaadin/tests/browserfeatures/FullHeightScrollbar.html
new file mode 100644 (file)
index 0000000..37fee35
--- /dev/null
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://selenium-ide.openqa.org/profiles/test-case">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="selenium.base" href="http://192.168.2.41:8888/" />
+<title>New Test</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">New Test</td></tr>
+</thead><tbody>
+<tr>
+       <td>open</td>
+       <td>/statictestfiles/browserfeatures/fullHeightScrollbar.html</td>
+       <td></td>
+</tr>
+<tr>
+       <td>screenCapture</td>
+       <td></td>
+       <td>1-withScrolling</td>
+</tr>
+<tr>
+       <td>mouseClick</td>
+       <td>disableScrolling</td>
+       <td>34,7</td>
+</tr>
+<tr>
+       <td>screenCapture</td>
+       <td></td>
+       <td>2-withoutScrolling</td>
+</tr>
+<tr>
+       <td>mouseClick</td>
+       <td>triggerReflow</td>
+       <td>34,7</td>
+</tr>
+<tr>
+       <td>screenCapture</td>
+       <td></td>
+       <td>3-afterReflow</td>
+</tr>
+
+</tbody></table>
+</body>
+</html>