Skip to content

GitLab

T
tangled
Commit 5d9f69a1 authored by Felipe Erias's avatar Felipe Erias Committed by Commit Bot
Browse files
Options

More tests for scrollbar-gutter 

Break up the scrollbar-gutter tests into separate files
for horizontal and vertical writing modes, and add
additional tests.

Move the tests to wpt_internal/css/css-overflow since
they require the non-standard feature ::-webkit-scrollbar

Bug: 710214
Change-Id: I988f2acd8cd17a6623765aedfb8938e71942a683
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2417471
Commit-Queue: Felipe Erias Morandeira <felipeerias@gmail.com>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#810451}
parent 9644fa56
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1836 additions and 114 deletions
third_party/blink/web_tests/FlagExpectations/disable-layout-ng
View file @ 5d9f69a1
...@@ -438,8 +438,10 @@ crbug.com/591099 external/wpt/css/css-overflow/webkit-line-clamp-014.html [ Fail ...@@ -438,8 +438,10 @@ crbug.com/591099 external/wpt/css/css-overflow/webkit-line-clamp-014.html [ Fail
crbug.com/591099 external/wpt/css/css-overflow/webkit-line-clamp-027.html [ Failure ] crbug.com/591099 external/wpt/css/css-overflow/webkit-line-clamp-027.html [ Failure ]
# More than one scrollbar gutter (i.e. the "both" value of scrollbar-gutter) # More than one scrollbar gutter (i.e. the "both" value of scrollbar-gutter)
crbug.com/710214 external/wpt/css/css-overflow/scrollbar-gutter-004.html [ Failure ] crbug.com/710214 wpt_internal/css/css-overflow/scrollbar-gutter-004.html [ Failure ]
crbug.com/710214 external/wpt/css/css-overflow/scrollbar-gutter-005.html [ Failure ] crbug.com/710214 wpt_internal/css/css-overflow/scrollbar-gutter-005.html [ Failure ]
crbug.com/710214 wpt_internal/css/css-overflow/scrollbar-gutter-009.html [ Failure ]
crbug.com/710214 wpt_internal/css/css-overflow/scrollbar-gutter-010.html [ Failure ]
# White space, absolute position and paint timing failures from June 5, 2020 # White space, absolute position and paint timing failures from June 5, 2020
crbug.com/591099 external/wpt/paint-timing/fcp-only/fcp-pseudo-element-visibility.html [ Failure ] crbug.com/591099 external/wpt/paint-timing/fcp-only/fcp-pseudo-element-visibility.html [ Failure ]
......
third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-006.html 0 → 100644
View file @ 5d9f69a1
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: auto (classic scrollbars, vertical text)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: auto with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: auto;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars with a known thickness */
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing mode */
.vertical {
writing-mode: vertical-rl;
direction: ltr;
overflow-y: auto;
}
/* overflow on the block direction */
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 200, "auto/auto scrollHeight");
assert_equals(container.clientHeight, 200, "auto/auto clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "auto/auto offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "auto/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "auto/auto offsetHeight");
}, "overflow auto, scrollbar-gutter auto, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 180, "scroll/auto scrollHeight");
assert_equals(container.clientHeight, 180, "scroll/auto clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "scroll/auto offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "scroll/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/auto offsetHeight");
}, "overflow scroll, scrollbar-gutter auto, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "visible/auto offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "overflow visible, scrollbar-gutter auto, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "hidden/auto scrollHeight");
assert_equals(container.clientHeight, 200, "hidden/auto clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "hidden/auto offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "hidden/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/auto offsetHeight");
}, "overflow hidden, scrollbar-gutter auto, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: auto, writing-mode: vertical-rl
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">ｏｖｅｒｆｌｏｗ：ａｕｔｏ</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">ｏｖｅｒｆｌｏｗ－ｘ：ｓｃｒｏｌｌ</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div>
</body>
third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-007.html 0 → 100644
View file @ 5d9f69a1
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: stable (classic scrollbars, vertical text)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: stable with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: stable;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.container.force {
scrollbar-gutter: stable force;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars with a known thickness */
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing mode */
.vertical {
writing-mode: vertical-rl;
direction: ltr;
overflow-y: auto;
}
/* overflow on the block direction */
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
// vertical
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 180, "auto/stable scrollHeight");
assert_equals(container.clientHeight, 180, "auto/stable clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "auto/stable offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "auto/stable clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/stable offsetHeight");
}, "overflow auto, scrollbar-gutter stable, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 180, "scroll/stable scrollHeight");
assert_equals(container.clientHeight, 180, "scroll/stable clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "scroll/stable offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "scroll/stable clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/stable offsetHeight");
}, "overflow scroll, scrollbar-gutter stable, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/stable scrollHeight");
assert_equals(container.clientHeight, 200, "visible/stable clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "visible/stable offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "visible/stable clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/stable offsetHeight");
}, "overflow visible, scrollbar-gutter stable, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "hidden/stable scrollHeight");
assert_equals(container.clientHeight, 200, "hidden/stable clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "hidden/stable offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "hidden/stable clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/stable offsetHeight");
}, "overflow hidden, scrollbar-gutter stable, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_force_v');
let content = document.getElementById('content_visible_force_v');
assert_equals(container.scrollHeight, 180, "visible/stable force scrollHeight");
assert_equals(container.clientHeight, 180, "visible/stable force clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "visible/stable force offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "visible/stable force clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/stable force offsetHeight");
}, "overflow visible, scrollbar-gutter stable force, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_force_v');
let content = document.getElementById('content_hidden_force_v');
assert_equals(container.scrollHeight, 180, "hidden/stable force scrollHeight");
assert_equals(container.clientHeight, 180, "hidden/stable force clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "hidden/stable force offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "hidden/stable force clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/stable force offsetHeight");
}, "overflow hidden, scrollbar-gutter stable force, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: stable, writing-mode: vertical-rl
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">ｏｖｅｒｆｌｏｗ：ａｕｔｏ</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">ｏｖｅｒｆｌｏｗ－ｘ：ｓｃｒｏｌｌ</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div>
scrollbar-gutter: stable force
<div class="container classic vertical visible force" id="container_visible_force_v">
<div class="content" id="content_visible_force_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div>
<div class="container classic vertical hidden force" id="container_hidden_force_v">
<div class="content" id="content_hidden_force_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div>
</body>
third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-008.html 0 → 100644
View file @ 5d9f69a1
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: always (classic scrollbars, vertical text)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: always with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: always;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.container.force {
scrollbar-gutter: always force;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars with a known thickness */
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing mode */
.vertical {
writing-mode: vertical-rl;
direction: ltr;
overflow-y: auto;
}
/* overflow on the block direction */
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
// vertical
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 180, "auto/always scrollHeight");
assert_equals(container.clientHeight, 180, "auto/always clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "auto/always offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "auto/always clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/always offsetHeight");
}, "overflow auto, scrollbar-gutter always, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 180, "scroll/always scrollHeight");
assert_equals(container.clientHeight, 180, "scroll/always clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "scroll/always offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "scroll/always clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/always offsetHeight");
}, "overflow scroll, scrollbar-gutter always, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/always scrollHeight");
assert_equals(container.clientHeight, 200, "visible/always clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "visible/always offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "visible/always clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/always offsetHeight");
}, "overflow visible, scrollbar-gutter always, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "hidden/always scrollHeight");
assert_equals(container.clientHeight, 200, "hidden/always clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "hidden/always offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "hidden/always clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/always offsetHeight");
}, "overflow hidden, scrollbar-gutter always, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_force_v');
let content = document.getElementById('content_visible_force_v');
assert_equals(container.scrollHeight, 180, "visible/always force scrollHeight");
assert_equals(container.clientHeight, 180, "visible/always force clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "visible/always force offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "visible/always force clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/always force offsetHeight");
}, "overflow visible, scrollbar-gutter always force, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_force_v');
let content = document.getElementById('content_hidden_force_v');
assert_equals(container.scrollHeight, 180, "hidden/always force scrollHeight");
assert_equals(container.clientHeight, 180, "hidden/always force clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "hidden/always force offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "hidden/always force clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/always force offsetHeight");
}, "overflow hidden, scrollbar-gutter always force, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: always, writing-mode: vertical-rl
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">ｏｖｅｒｆｌｏｗ：ａｕｔｏ</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">ｏｖｅｒｆｌｏｗ－ｘ：ｓｃｒｏｌｌ</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div>
scrollbar-gutter: always force
<div class="container classic vertical visible force" id="container_visible_force_v">
<div class="content" id="content_visible_force_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div>
<div class="container classic vertical hidden force" id="container_hidden_force_v">
<div class="content" id="content_hidden_force_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div>
</body>
third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-009.html 0 → 100644
View file @ 5d9f69a1
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: stable both (classic scrollbars, vertical text)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: stable with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: stable both;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.container.force {
scrollbar-gutter: stable both force;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars with a known thickness */
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing mode */
.vertical {
writing-mode: vertical-rl;
direction: ltr;
overflow-y: auto;
}
/* overflow on the block direction */
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
// vertical
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 160, "auto/stable both scrollHeight");
assert_equals(container.clientHeight, 160, "auto/stable both clientHeight");
assert_equals(container.offsetTop, content.offsetTop - 20, "auto/stable both offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "auto/stable both clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/stable both offsetHeight");
}, "overflow auto, scrollbar-gutter stable both, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 160, "scroll/stable both scrollHeight");
assert_equals(container.clientHeight, 160, "scroll/stable both clientHeight");
assert_equals(container.offsetTop, content.offsetTop - 20, "scroll/stable both offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "scroll/stable both clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/stable both offsetHeight");
}, "overflow scroll, scrollbar-gutter stable both, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/stable both scrollHeight");
assert_equals(container.clientHeight, 200, "visible/stable both clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "visible/stable both offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "visible/stable both clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/stable both offsetHeight");
}, "overflow visible, scrollbar-gutter stable both, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "hidden/stable both scrollHeight");
assert_equals(container.clientHeight, 200, "hidden/stable both clientHeight");
assert_equals(container.offsetTop, content.offsetTop, "hidden/stable both offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "hidden/stable both clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/stable both offsetHeight");
}, "overflow hidden, scrollbar-gutter stable both, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_force_v');
let content = document.getElementById('content_visible_force_v');
assert_equals(container.scrollHeight, 160, "visible/stable both scrollHeight");
assert_equals(container.clientHeight, 160, "visible/stable both clientHeight");
assert_equals(container.offsetTop, content.offsetTop - 20, "visible/stable both offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "visible/stable both clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/stable both offsetHeight");
}, "overflow visible, scrollbar-gutter stable both force, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_force_v');
let content = document.getElementById('content_hidden_force_v');
assert_equals(container.scrollHeight, 160, "hidden/stable both scrollHeight");
assert_equals(container.clientHeight, 160, "hidden/stable both clientHeight");
assert_equals(container.offsetTop, content.offsetTop - 20, "hidden/stable both offsetTop");
assert_equals(container.clientHeight, content.clientHeight, "hidden/stable both clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/stable both offsetHeight");
}, "overflow hidden, scrollbar-gutter stable both force, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: stable both, writing-mode: vertical-rl
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">ｏｖｅｒｆｌｏｗ：ａｕｔｏ</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">ｏｖｅｒｆｌｏｗ－ｘ：ｓｃｒｏｌｌ</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div>
scrollbar-gutter: stable both force
<div class="container classic vertical visible force" id="container_visible_force_v">
<div class="content" id="content_visible_force_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div>
<div class="container classic vertical hidden force" id="container_hidden_force_v">
<div class="content" id="content_hidden_force_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div>
</body>
third_party/blink/web_tests/external/wpt/css/css-overflow/scrollbar-gutter-005.html → third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-010.html
View file @ 5d9f69a1
<!doctype html> <!doctype html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: always both (classic scrollbars)</title> <title>CSS Overflow: test scrollbar-gutter: always both (classic scrollbars, vertical text)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/> <link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: always with custom classic scrollbars"> <meta name="assert" content="Test scrollbar-gutter: always with custom classic scrollbars">
...@@ -29,11 +29,7 @@ ...@@ -29,11 +29,7 @@
background: lightsalmon; background: lightsalmon;
} }
/* ensure that we are using classic scrollbars */ /* ensure that we are using classic scrollbars with a known thickness */
.classic {
scrollbar-width: 20px;
scrollbar-color: hsla(0, 0%, 20%, 0.6) hsla(0, 0%, 40%, 0.3);
}
.classic::-webkit-scrollbar { .classic::-webkit-scrollbar {
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -46,21 +42,14 @@ ...@@ -46,21 +42,14 @@
border-radius: 10px; border-radius: 10px;
} }
/* writing modes */ /* writing mode */
.horizontal {
writing-mode: horizontal-tb;
overflow-x: auto;
}
.vertical { .vertical {
writing-mode: vertical-rl; writing-mode: vertical-rl;
direction: ltr;
overflow-y: auto; overflow-y: auto;
} }
/* overflow on the block direction */ /* overflow on the block direction */
.horizontal.auto { overflow-y: auto; }
.horizontal.scroll { overflow-y: scroll; }
.horizontal.visible { overflow: visible; }
.horizontal.hidden { overflow-y: hidden; }
.vertical.auto { overflow-x: auto; } .vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; } .vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; } .vertical.visible { overflow: visible; }
...@@ -74,68 +63,6 @@ ...@@ -74,68 +63,6 @@
function performTest() { function performTest() {
setup({explicit_done: true}); setup({explicit_done: true});
// horizontal
test(function() {
let container = document.getElementById('container_auto_h');
let content = document.getElementById('content_auto_h');
assert_equals(container.scrollWidth, 160, "auto/always both scrollWidth");
assert_equals(container.clientWidth, 160, "auto/always both clientWidth");
assert_equals(container.offsetLeft, content.offsetLeft - 20, "auto/always both offsetLeft");
assert_equals(container.clientWidth, content.clientWidth, "auto/always both clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "auto/always both offsetWidth");
}, "Unexpected layout: overflow auto, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_scroll_h');
let content = document.getElementById('content_scroll_h');
assert_equals(container.scrollWidth, 160, "scroll/always both scrollWidth");
assert_equals(container.clientWidth, 160, "scroll/always both clientWidth");
assert_equals(container.offsetLeft, content.offsetLeft - 20, "scroll/always both offsetLeft");
assert_equals(container.clientWidth, content.clientWidth, "scroll/always both clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/always both offsetWidth");
}, "Unexpected layout: overflow scroll, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_visible_h');
let content = document.getElementById('content_visible_h');
assert_equals(container.scrollWidth, 200, "visible/always both scrollWidth");
assert_equals(container.clientWidth, 200, "visible/always both clientWidth");
assert_equals(container.offsetLeft, content.offsetLeft, "visible/always both offsetLeft");
assert_equals(container.clientWidth, content.clientWidth, "visible/always both clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "visible/always both offsetWidth");
}, "Unexpected layout: overflow visible, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_hidden_h');
let content = document.getElementById('content_hidden_h');
assert_equals(container.scrollWidth, 200, "hidden/always both scrollWidth");
assert_equals(container.clientWidth, 200, "hidden/always both clientWidth");
assert_equals(container.offsetLeft, content.offsetLeft, "hidden/always both offsetLeft");
assert_equals(container.clientWidth, content.clientWidth, "hidden/always both clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "hidden/always both offsetWidth");
}, "Unexpected layout: overflow hidden, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_visible_force_h');
let content = document.getElementById('content_visible_force_h');
assert_equals(container.scrollWidth, 160, "visible/always both force scrollWidth");
assert_equals(container.clientWidth, 160, "visible/always both force clientWidth");
assert_equals(container.offsetLeft, content.offsetLeft - 20, "visible/always both force offsetLeft");
assert_equals(container.clientWidth, content.clientWidth, "visible/always both force clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/always both force offsetWidth");
}, "Unexpected layout: overflow visible, scrollbar-gutter always both force, horizontal-tb");
test(function() {
let container = document.getElementById('container_hidden_force_h');
let content = document.getElementById('content_hidden_force_h');
assert_equals(container.scrollWidth, 160, "hidden/always both force scrollWidth");
assert_equals(container.clientWidth, 160, "hidden/always both force clientWidth");
assert_equals(container.offsetLeft, content.offsetLeft - 20, "hidden/always both force offsetLeft");
assert_equals(container.clientWidth, content.clientWidth, "hidden/always both force clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "hidden/always both force offsetWidth");
}, "Unexpected layout: overflow hidden, scrollbar-gutter always both force, horizontal-tb");
// vertical // vertical
test(function() { test(function() {
...@@ -204,60 +131,32 @@ ...@@ -204,60 +131,32 @@
</script> </script>
<body onload="performTest()"> <body onload="performTest()">
Test scrollbar-gutter: always both, writing-mode: horizontal-tb Test scrollbar-gutter: always both, writing-mode: vertical-rl;
<div class="container classic horizontal auto" id="container_auto_h">
<div class="content" id="content_auto_h">overflow-y: auto</div>
</div>
<div class="container classic horizontal scroll" id="container_scroll_h">
<div class="content" id="content_scroll_h">overflow-y: scroll</div>
</div>
<div class="container classic horizontal visible" id="container_visible_h">
<div class="content" id="content_visible_h">overflow: visible</div>
</div>
<div class="container classic horizontal hidden" id="container_hidden_h">
<div class="content" id="content_hidden_h">overflow-y: hidden</div>
</div>
scrollbar-gutter: always both force
<div class="container classic horizontal visible force" id="container_visible_force_h">
<div class="content" id="content_visible_force_h">overflow: visible (force)</div>
</div>
<div class="container classic horizontal hidden force" id="container_hidden_force_h">
<div class="content" id="content_hidden_force_h">overflow-y: hidden (force)</div>
</div>
writing-mode: vertical-rl;
<div class="container classic vertical auto" id="container_auto_v"> <div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">overflow-x: auto</div> <div class="content" id="content_auto_v">ｏｖｅｒｆｌｏｗ：ａｕｔｏ</div>
</div> </div>
<div class="container classic vertical scroll" id="container_scroll_v"> <div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">overflow-x: scroll</div> <div class="content" id="content_scroll_v">ｏｖｅｒｆｌｏｗ－ｘ：ｓｃｒｏｌｌ</div>
</div> </div>
<div class="container classic vertical visible" id="container_visible_v"> <div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">overflow: visible</div> <div class="content" id="content_visible_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div> </div>
<div class="container classic vertical hidden" id="container_hidden_v"> <div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">overflow-x: hidden</div> <div class="content" id="content_hidden_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div> </div>
scrollbar-gutter: always both force scrollbar-gutter: always both force
<div class="container classic vertical visible force" id="container_visible_force_v"> <div class="container classic vertical visible force" id="container_visible_force_v">
<div class="content" id="content_visible_force_v">overflow: visible</div> <div class="content" id="content_visible_force_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
</div> </div>
<div class="container classic vertical hidden force" id="container_hidden_force_v"> <div class="container classic vertical hidden force" id="container_hidden_force_v">
<div class="content" id="content_hidden_force_v">overflow-x: hidden</div> <div class="content" id="content_hidden_force_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
</div> </div>
</body> </body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment