PageRenderTime 3588ms CodeModel.GetById 1ms 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. <meta charset="utf-8">
  3. <title>CSS Scrollbars: scrollbar-width with horizontal text, and vertical and horizontal scrollbars</title>
  4. <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
  5. <link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
  6. <script src="/resources/testharness.js"></script>
  7. <script src="/resources/testharnessreport.js"></script>
  8. <script src="/css/support/parsing-testcommon.js"></script>
  9. <style>
  10. /* Use scrollbar-gutter to reserve space for the scrollbar. */
  11. .container {
  12. scrollbar-gutter: stable;
  13. writing-mode: horizontal-tb;
  14. overflow: auto;
  15. height: 200px;
  16. width: 200px;
  17. margin: 1px;
  18. padding: 0px;
  19. border: none;
  20. background: deepskyblue;
  21. }
  22. .content {
  23. height: 300px;
  24. width: 300px;
  25. background: lightsalmon;
  26. }
  27. /* writing directions */
  28. .ltr {
  29. direction: ltr;
  30. }
  31. .rtl {
  32. direction: rtl;
  33. }
  34. .container.auto {
  35. scrollbar-width: auto;
  36. }
  37. .container.thin {
  38. scrollbar-width: thin;
  39. }
  40. .container.none {
  41. scrollbar-width: none;
  42. }
  43. </style>
  44. <script type="text/javascript">
  45. function performTest() {
  46. setup({ explicit_done: true });
  47. // ltr
  48. test(function () {
  49. let container = document.getElementById('container_ltr_auto');
  50. let content = document.getElementById('content_ltr_auto');
  51. assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
  52. assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
  53. assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
  54. assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
  55. assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
  56. }, "horizontal-tb, ltr, scrollbar-width auto");
  57. test(function () {
  58. let container = document.getElementById('container_ltr_thin');
  59. let content = document.getElementById('content_ltr_thin');
  60. assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
  61. assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
  62. assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
  63. assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
  64. assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
  65. }, "horizontal-tb, ltr, scrollbar-width thin");
  66. test(function () {
  67. let container = document.getElementById('container_ltr_none');
  68. let content = document.getElementById('content_ltr_none');
  69. assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
  70. assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
  71. assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
  72. assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
  73. assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
  74. }, "horizontal-tb, ltr, scrollbar-width none");
  75. // rtl
  76. test(function () {
  77. let container = document.getElementById('container_rtl_auto');
  78. let content = document.getElementById('content_rtl_auto');
  79. assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
  80. assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
  81. assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
  82. assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
  83. assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
  84. }, "horizontal-tb, rtl, scrollbar-width auto");
  85. test(function () {
  86. let container = document.getElementById('container_rtl_thin');
  87. let content = document.getElementById('content_rtl_thin');
  88. assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
  89. assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
  90. assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
  91. assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
  92. assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
  93. }, "horizontal-tb, rtl, scrollbar-width thin");
  94. test(function () {
  95. let container = document.getElementById('container_rtl_none');
  96. let content = document.getElementById('content_rtl_none');
  97. assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
  98. assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
  99. assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
  100. assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
  101. assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
  102. }, "horizontal-tb, rtl, scrollbar-width none");
  103. done();
  104. }
  105. </script>
  106. <body onload="performTest()">
  107. Test scrollbar-width: both scrollbars, horizontal ltr
  108. <div class="container ltr auto" id="container_ltr_auto">
  109. <div class="content" id="content_ltr_auto">auto</div>
  110. </div>
  111. <div class="container ltr thin" id="container_ltr_thin">
  112. <div class="content" id="content_ltr_thin">thin</div>
  113. </div>
  114. <div class="container ltr none" id="container_ltr_none">
  115. <div class="content" id="content_ltr_none">none</div>
  116. </div>
  117. Test scrollbar-width: both scrollbars, horizontal rtl
  118. <div class="container rtl auto" id="container_rtl_auto">
  119. <div class="content" id="content_rtl_auto">auto</div>
  120. </div>
  121. <div class="container rtl thin" id="container_rtl_thin">
  122. <div class="content" id="content_rtl_thin">thin</div>
  123. </div>
  124. <div class="container rtl none" id="container_rtl_none">
  125. <div class="content" id="content_rtl_none">none</div>
  126. </div>
  127. </body>