PageRenderTime 1164ms CodeModel.GetById 29ms RepoModel.GetById 0ms app.codeStats 0ms

/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-width-003.html

https://github.com/chromium/chromium
HTML | 154 lines | 127 code | 27 blank | 0 comment | 0 complexity | 18628af88e1d8fc1971fa6592d621153 MD5 | raw file
Possible License(s): MPL-2.0-no-copyleft-exception, Apache-2.0, BSD-3-Clause 
    

  1. <!doctype html>
    2. 

  2. <meta charset="utf-8">
    3. 

  3. <title>CSS Scrollbars: scrollbar-width with horizontal text, and vertical and horizontal scrollbars</title>
    4. 

  4. <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
    5. 

  5. <link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
    6. 

  6. <script src="/resources/testharness.js"></script>
    7. 

  7. <script src="/resources/testharnessreport.js"></script>
    8. 

  8. <script src="/css/support/parsing-testcommon.js"></script>
    9. 

  9. <style>
    10. 

  10.   /* Use scrollbar-gutter to reserve space for the scrollbar. */
    11. 

  11.   .container {
    12. 

  12.     scrollbar-gutter: stable;
    13. 

  13.     writing-mode: horizontal-tb;
    14. 

  14.     overflow: auto;
    15. 

  15.     height: 200px;
    16. 

  16.     width: 200px;
    17. 

  17.     margin: 1px;
    18. 

  18.     padding: 0px;
    19. 

  19.     border: none;
    20. 

  20.     background: deepskyblue;
    21. 

  21.   }
    22. 

  22. 

  23.   .content {
    24. 

  24.     height: 300px;
    25. 

  25.     width: 300px;
    26. 

  26.     background: lightsalmon;
    27. 

  27.   }
    28. 

  28. 

  29.   /* writing directions */
    30. 

  30.   .ltr {
    31. 

  31.     direction: ltr;
    32. 

  32.   }
    33. 

  33. 

  34.   .rtl {
    35. 

  35.     direction: rtl;
    36. 

  36.   }
    37. 

  37. 

  38.   .container.auto {
    39. 

  39.     scrollbar-width: auto;
    40. 

  40.   }
    41. 

  41. 

  42.   .container.thin {
    43. 

  43.     scrollbar-width: thin;
    44. 

  44.   }
    45. 

  45. 

  46.   .container.none {
    47. 

  47.     scrollbar-width: none;
    48. 

  48.   }
    49. 

  49. </style>
    50. 

  50. <script type="text/javascript">
    51. 

  51. 

  52.   function performTest() {
    53. 

  53.     setup({ explicit_done: true });
    54. 

  54. 

  55.     // ltr
    56. 

  56. 

  57.     test(function () {
    58. 

  58.       let container = document.getElementById('container_ltr_auto');
    59. 

  59.       let content = document.getElementById('content_ltr_auto');
    60. 

  60.       assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
    61. 

  61.       assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
    62. 

  62.       assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
    63. 

  63.       assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
    64. 

  64.       assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
    65. 

  65.     }, "horizontal-tb, ltr, scrollbar-width auto");
    66. 

  66. 

  67.     test(function () {
    68. 

  68.       let container = document.getElementById('container_ltr_thin');
    69. 

  69.       let content = document.getElementById('content_ltr_thin');
    70. 

  70.       assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
    71. 

  71.       assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
    72. 

  72.       assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
    73. 

  73.       assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
    74. 

  74.       assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
    75. 

  75.     }, "horizontal-tb, ltr, scrollbar-width thin");
    76. 

  76. 

  77.     test(function () {
    78. 

  78.       let container = document.getElementById('container_ltr_none');
    79. 

  79.       let content = document.getElementById('content_ltr_none');
    80. 

  80.       assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
    81. 

  81.       assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
    82. 

  82.       assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
    83. 

  83.       assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
    84. 

  84.       assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
    85. 

  85.     }, "horizontal-tb, ltr, scrollbar-width none");
    86. 

  86. 

  87.     // rtl
    88. 

  88. 

  89.     test(function () {
    90. 

  90.       let container = document.getElementById('container_rtl_auto');
    91. 

  91.       let content = document.getElementById('content_rtl_auto');
    92. 

  92.       assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
    93. 

  93.       assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
    94. 

  94.       assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
    95. 

  95.       assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
    96. 

  96.       assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
    97. 

  97.     }, "horizontal-tb, rtl, scrollbar-width auto");
    98. 

  98. 

  99.     test(function () {
    100. 

  100.       let container = document.getElementById('container_rtl_thin');
    101. 

  101.       let content = document.getElementById('content_rtl_thin');
    102. 

  102.       assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
    103. 

  103.       assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
    104. 

  104.       assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
    105. 

  105.       assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
    106. 

  106.       assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
    107. 

  107.     }, "horizontal-tb, rtl, scrollbar-width thin");
    108. 

  108. 

  109.     test(function () {
    110. 

  110.       let container = document.getElementById('container_rtl_none');
    111. 

  111.       let content = document.getElementById('content_rtl_none');
    112. 

  112.       assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
    113. 

  113.       assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
    114. 

  114.       assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
    115. 

  115.       assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
    116. 

  116.       assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
    117. 

  117.     }, "horizontal-tb, rtl, scrollbar-width none");
    118. 

  118. 

  119.     done();
    120. 

  120.   }
    121. 

  121. 

  122. </script>
    123. 

  123. 

  124. <body onload="performTest()">
    125. 

  125. 

  126.   Test scrollbar-width: both scrollbars, horizontal ltr
    127. 

  127. 

  128.   <div class="container ltr auto" id="container_ltr_auto">
    129. 

  129.     <div class="content" id="content_ltr_auto">auto</div>
    130. 

  130.   </div>
    131. 

  131. 

  132.   <div class="container ltr thin" id="container_ltr_thin">
    133. 

  133.     <div class="content" id="content_ltr_thin">thin</div>
    134. 

  134.   </div>
    135. 

  135. 

  136.   <div class="container ltr none" id="container_ltr_none">
    137. 

  137.     <div class="content" id="content_ltr_none">none</div>
    138. 

  138.   </div>
    139. 

  139. 

  140.   Test scrollbar-width: both scrollbars, horizontal rtl
    141. 

  141. 

  142.   <div class="container rtl auto" id="container_rtl_auto">
    143. 

  143.     <div class="content" id="content_rtl_auto">auto</div>
    144. 

  144.   </div>
    145. 

  145. 

  146.   <div class="container rtl thin" id="container_rtl_thin">
    147. 

  147.     <div class="content" id="content_rtl_thin">thin</div>
    148. 

  148.   </div>
    149. 

  149. 

  150.   <div class="container rtl none" id="container_rtl_none">
    151. 

  151.     <div class="content" id="content_rtl_none">none</div>
    152. 

  152.   </div>
    153. 

  153. 

  154. </body>
    155. 

  155.