LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html

   1 <!DOCTYPE html>
   2
   3   <meta charset="UTF-8">
   4
   5   <title>CSS Test: 'contain: layout' on element that overflows and its parent has 'overflow: scroll'</title>
   6
   7   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   8   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   9   <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
  10   <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
  11   <link rel="match" href="reference/contain-layout-ink-overflow-019-ref.html">
  12
  13   <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: scroll'." name="assert">
  14
  15   <style>
  16   div
  17     {
  18       height: 100px;
  19       width: 100px;
  20     }
  21
  22     /* this means that each and all 4 div's use the same definite height and width */
  23
  24   div#parent-with-overflow-scroll
  25     {
  26       overflow: scroll;
  27     }
  28
  29   div#contain
  30     {
  31       contain: layout;
  32     }
  33
  34   div#pass
  35     {
  36       background-color: green;
  37     }
  38
  39   div#fail
  40     {
  41       background-color: red;
  42     }
  43   </style>
  44
  45   <!--
  46
  47     25px  : height of a very tall horizontal scrollbar
  48  +
  49    100px  : height of div#fail
  50   =======
  51    125px
  52
  53   -->
  54
  55   <body onload="document.getElementById('parent-with-overflow-scroll').scrollLeft = 100; document.getElementById('parent-with-overflow-scroll').scrollTop = 125;">
  56
  57   <p>Test passes if there is a filled green square <strong>with 2 scroll bars</strong> and if there is <strong>no red</strong>.
  58
  59   <div id="parent-with-overflow-scroll">
  60
  61     <div id="contain">
  62
  63       <div id="pass"></div>
  64
  65       <div id="fail"></div>
  66
  67     </div>
  68
  69   </div>