test_bug1198135.html (2385B)
1 <!doctype html> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=1198135 4 --> 5 <html><head> 6 <title>Test for Bug 1198135</title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 9 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1198135">Mozilla Bug 1198135</a> 10 <style> 11 .example { 12 perspective: 100px; 13 height: 300px; 14 width: 300px; 15 overflow-x: hidden; 16 overflow-y: auto; 17 border: 1px solid blue; 18 } 19 20 .example__group { 21 position: relative; 22 transform-style: preserve-3d; 23 height: 300px; 24 top: 0; 25 } 26 .example__layer { 27 position: absolute; 28 top:0; 29 left: 0; 30 right: 0; 31 bottom: 0; 32 } 33 .layer--a { 34 box-shadow: inset 0 0 0 1px red; 35 } 36 .layer--b { 37 box-shadow: inset 0 0 0 1px blue; 38 transform: translateZ(50px) scale(.45); 39 } 40 .layer--c { 41 box-shadow: inset 0 0 0 1px green; 42 } 43 .layer--d { 44 box-shadow: inset 00px 0 0px 1px orange; 45 transform: translateZ(50px) scale(.45); 46 } 47 .layer--e { 48 box-shadow: inset 00px 0 0px 1px orange; 49 transform: translateZ(50px) scale(.45) translateY(300px); 50 } 51 </style> 52 </head> 53 54 <body> 55 56 <div class="example" id="first"> 57 <div class="example__group"> 58 <div class="example__layer layer--a"></div> 59 <div class="example__layer layer--b"></div> 60 </div> 61 <div class="example__group"> 62 <div class="example__layer layer--c"></div> 63 <div class="example__layer layer--d"></div> 64 </div> 65 </div> 66 67 <div class="example" id="second"> 68 <div class="example__group"> 69 <div class="example__layer layer--a"></div> 70 <div class="example__layer layer--b"></div> 71 </div> 72 <div class="example__group"> 73 <div class="example__layer layer--c"></div> 74 <div class="example__layer layer--e"></div> 75 </div> 76 </div> 77 78 <script> 79 is(document.getElementById("first").scrollHeight, 600, "Scroll height should be computed correctly"); 80 document.getElementById("first").scrollTop = 150; 81 is(document.getElementById("first").scrollHeight, 600, "Scroll height should be a constant when scrolling"); 82 83 // The true height is 727.5 and we don't always snap the same direction. 84 isfuzzy(document.getElementById("second").scrollHeight, 728, 1, "Scroll height should be computed correctly"); 85 document.getElementById("second").scrollTop = 150; 86 isfuzzy(document.getElementById("second").scrollHeight, 728, 1, "Scroll height should be a constant when scrolling"); 87 </script> 88 89 </body></html>