third_party/WebKit/LayoutTests/scrollingcoordinator/non-fast-scrollable-visibility-change.html

   1 <!DOCTYPE html>
   2 <style>
   3   body {
   4     margin: 0;
   5   }
   6   .container {
   7       height: 250px;
   8       width: 250px;
   9       margin-top: 50px;
  10       display: block;
  11   }
  12   .container > div {
  13     height: 200px;
  14     width: 200px;
  15     overflow: scroll;
  16   }
  17   .container > div > div {
  18     height: 1000px;
  19     width: 1000px;
  20     background: linear-gradient(to bottom, red, white);
  21   }
  22   .container > iframe {
  23     height: 222px;
  24     width: 222px;
  25     display: block;
  26     border: none;
  27   }
  28 </style>
  29
  30 <section id='div' style="display:none;">
  31   <div class="to-show container">
  32   </div>
  33   <div class="to-hide container">
  34     <div>
  35       <div>This should not be visible.</div>
  36     </div>
  37   </div>
  38 </section>
  39
  40 <section id="iframe" style="display:none;">
  41   <div class="to-show container">
  42   </div>
  43   <div class="to-hide container">
  44     <iframe src="data:text/html;charset=utf-8,<div style='height:1000px; width:1000px; background: linear-gradient(to bottom, red, white);'>">
  45       This should not be visible.
  46     </iframe>
  47   </div>
  48 </section>
  49
  50 <p>Two squares should be visible and fully covered by green overlays.</p>
  51
  52 <div id="console"></div>
  53
  54 <script src="../resources/js-test.js"></script>
  55 <script src="../resources/run-after-layout-and-paint.js"></script>
  56 <script src="resources/non-fast-scrollable-region-testing.js"></script>
  57 <script>
  58   window.jsTestIsAsync = true;
  59   description('This test ensures that changing visibility of a non-fast ' +
  60               'scrollable area correctly updates list of non-fast scrollable ' +
  61               'areas (See http://crbug.com/434982). Two types of non-fast ' +
  62               'scrollable regions are covered: div, and iframe.');
  63
  64   onload = next;
  65
  66   var testCases = [
  67     // type, bounding box of element to show, bounding box of element to hide
  68     ['div',    '[0, 50, 200, 200]', '[0, 350, 200, 200]'],
  69     ['iframe', '[0, 50, 222, 222]', '[0, 350, 222, 222]']];
  70
  71   var index = 0;
  72   function next(){
  73     if (index < testCases.length) {
  74       var type = testCases[index][0];
  75       debug('running tests for non-fast scrollable ' + type);
  76       runTest.apply(this, testCases[index]);
  77     } else {
  78       // Next 3 statements have no functional impact just visual
  79       showSectionIf(function(){return true;});
  80       runAfterLayoutAndPaint(function(){
  81         drawNonFastScrollableRegionOverlays();
  82
  83         finishJSTest();
  84       });
  85     }
  86
  87     index++;
  88   }
  89
  90   // Execute tests for given non-fast scrollable type.
  91   function runTest(type, elemToShowExpected, elemToHideExpected) {
  92     // Hide all sections that are not relevant to this test to ensure
  93     // |window.internals.nonFastScrollableRects| returns only the relevant non-
  94     // fast scrollable regions.
  95     showSectionIf(function(section){return section.id == type;});
  96
  97     runAfterLayoutAndPaint(function() {
  98       shouldBeEqualToString('document.getElementById("' + type + '").style.display', 'block');
  99
 100       var elemToShow = document.querySelector('section#' + type + '> .to-show'),
 101           elemToHide = document.querySelector('section#' + type + '> .to-hide');
 102
 103       nonFastScrollableRects = internals.nonFastScrollableRects(document);
 104       shouldBe('nonFastScrollableRects.length', '1');
 105       shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToHideExpected);
 106
 107       // Hide container before making it non-fast scrollable to ensure any
 108       // layout occurs while it is invisible.
 109       elemToShow.style.visibility = 'hidden';
 110       appendScrollable(elemToShow, type, function() {
 111         // Change visibility (hidden -> visible), which should not cause any layout,
 112         // and verify that non-fast scrollable areas are correctly updated.
 113         elemToShow.style.visibility = 'visible';
 114         shouldBe('window.internals.needsLayoutCount()', '0');
 115
 116         runAfterLayoutAndPaint(function() {
 117           nonFastScrollableRects = internals.nonFastScrollableRects(document);
 118           shouldBe('nonFastScrollableRects.length', '2');
 119           shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToShowExpected);
 120           shouldBeEqualToString('rectToString(nonFastScrollableRects[1])', elemToHideExpected);
 121
 122           // Change visibility (visible -> hidden)
 123           elemToHide.style.visibility = 'hidden';
 124           shouldBe('window.internals.needsLayoutCount()', '0');
 125
 126           runAfterLayoutAndPaint(function() {
 127             nonFastScrollableRects = internals.nonFastScrollableRects(document);
 128             shouldBe('nonFastScrollableRects.length', '1');
 129             shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToShowExpected);
 130             next();
 131           });
 132         });
 133       });
 134     });
 135   }
 136
 137   // Appends to container an scrollable element of the given type.
 138   // Note that because this layout test runs with --run-layout-test flag
 139   // the appended scrollable is always non-fast even on HDPI platforms.
 140   function appendScrollable(container, type, nextStep) {
 141     var inner;
 142     switch (type) {
 143     case 'div':
 144       inner = '<div><div>This should be covered by a green overlay.</div></div>';
 145       break;
 146     case 'iframe':
 147       window.nextStep = nextStep;
 148       inner = '<iframe id="iframe" onload="runAfterLayoutAndPaint(window.nextStep)" src="data:text/html;charset=utf-8,<div style=\'height:1000px; width:1000px; background: linear-gradient(to bottom, red, white);\'>This should be covered by a green overlay.</div>"></iframe>';
 149       break;
 150     }
 151     container.innerHTML = inner;
 152     if (type == 'div')
 153       runAfterLayoutAndPaint(nextStep);
 154   }
 155
 156   // Shows sections that pass condition but hides others
 157   function showSectionIf(condition) {
 158     var sections = document.querySelectorAll('section');
 159     for (var i = 0; i < sections.length; i++)
 160       sections[i].style.display = condition(sections[i]) ? 'block' : 'none';
 161   }
 162 </script>