diff options
| author | Artur Signell <artur@vaadin.com> | 2013-11-06 17:17:42 +0200 |
|---|---|---|
| committer | Vaadin Code Review <review@vaadin.com> | 2013-11-29 17:16:09 +0000 |
| commit | 12b6a8b42f3327e315e617e015304c4cc9dd4fa8 (patch) | |
| tree | b44d3c925d6539187e47162354ce363f65e5f244 /WebContent/statictestfiles | |
| parent | 74dcb6f2478f611ce828a9fee7c7be52812af964 (diff) | |
| download | vaadin-framework-12b6a8b42f3327e315e617e015304c4cc9dd4fa8.tar.gz vaadin-framework-12b6a8b42f3327e315e617e015304c4cc9dd4fa8.zip | |
Test for broken Webkit feature which causes extra scrollbars (#12736, #12727)
This is the original cause for the Vaadin issues
Live test at http://artur.virtuallypreinstalled.com/webkit-scrollbars.html
Change-Id: Iaf9a46b635fabcb7cd795547c782c596aa57ce12
Diffstat (limited to 'WebContent/statictestfiles')
| -rw-r--r-- | WebContent/statictestfiles/browserfeatures/WebkitPositionAbsoluteScrollbars.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/WebContent/statictestfiles/browserfeatures/WebkitPositionAbsoluteScrollbars.html b/WebContent/statictestfiles/browserfeatures/WebkitPositionAbsoluteScrollbars.html new file mode 100644 index 0000000000..7547816006 --- /dev/null +++ b/WebContent/statictestfiles/browserfeatures/WebkitPositionAbsoluteScrollbars.html @@ -0,0 +1,69 @@ +<!doctype> +<html><head> + <style> + #spacer { + width: 100px; + height: 100px; + background: blue; + } + #scrollable { + background: white; + border: 1px solid black; + overflow: auto; + position: relative; + width: 250px; + } + #container { + position:relative; + display:inline-block; + width:100%; + height:130px; + } + #margin { + position: absolute; + width: 200px; + top: 12px; + margin-right: 12px; + left: 12px; + height: 110px; + } + </style> + </head> + <body> + <div> + Starting point: No horizontal scrollbar<br/> + Expected: Get back to starting point after clicking through steps (do 1, do 2, cancel 1, cancel 2)<br/> + Actual: Scrollbars after doing the steps<br/><br/> + </div> +<button id="step1" onclick="step1();">Step 1 - Enlarge container</button> +<button id="step2" onclick="step2();">Step 2 - Move child</button> +<button id="step3" onclick="step3();">Step 3 - Reduce container</button> +<button id="step4" onclick="step4();">Step 4 - Return child</button> +<div id="scrollable"> +<div id="container"> +<div id="margin" style=""> +<div id="spacer" style="height: 100px; width: 100%;"> +</div> +</div> +</div> +</div> + +<script> +function step1() { + document.getElementById("container").style.width="110%"; +} +function step2() { + document.getElementById("margin").style.left="200px"; +} +function step3() { + document.getElementById("container").style.width="100%"; +} +function step4() { + document.getElementById("margin").style.left="12px"; +} + +</script> + + +</body> +</html> |