зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1717570 [wpt PR 29451] - Update scrollbar-gutter to new version of the spec, a=testonly
Automatic update from web-platform-tests Update scrollbar-gutter to new version of the spec Update the implementation of scrollbar-gutter to match the new spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property The syntax is is simplified to: auto | stable && mirror? The "stable" value also applies when overflow is "hidden". The "always" and "force" keywords have been removed. The "both" keyword has been renamed to "mirror". This CL updates all affected tests to match the new spec. Bug: 710214 Change-Id: I4a22a1abc821fa8982759cee3b69089f75dce229 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2970809 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Felipe Erias <felipeerias@igalia.com> Cr-Commit-Position: refs/heads/master@{#896301} -- wpt-commits: 88543e2b64be5702179549bd94983613634c187a wpt-pr: 29451
This commit is contained in:
Felipe Erias
moz-wptsync-bot
Родитель
98f06e7374
Коммит
1bee394ccc
|
|
@ -26,4 +26,12 @@
|
|||
test_invalid_value("scrollbar-gutter", "none");
|
||||
test_invalid_value("scrollbar-gutter", "red");
|
||||
|
||||
test_invalid_value("scrollbar-gutter", "stable both");
|
||||
test_invalid_value("scrollbar-gutter", "stable force");
|
||||
test_invalid_value("scrollbar-gutter", "stable both force");
|
||||
test_invalid_value("scrollbar-gutter", "always");
|
||||
test_invalid_value("scrollbar-gutter", "always both");
|
||||
test_invalid_value("scrollbar-gutter", "always force");
|
||||
test_invalid_value("scrollbar-gutter", "always both force");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,15 +12,8 @@
|
|||
|
||||
test_valid_value("scrollbar-gutter", "auto");
|
||||
test_valid_value("scrollbar-gutter", "stable");
|
||||
test_valid_value("scrollbar-gutter", "stable both");
|
||||
test_valid_value("scrollbar-gutter", "stable force");
|
||||
test_valid_value("scrollbar-gutter", "stable both force");
|
||||
test_valid_value("scrollbar-gutter", "always");
|
||||
test_valid_value("scrollbar-gutter", "always both");
|
||||
test_valid_value("scrollbar-gutter", "always force");
|
||||
test_valid_value("scrollbar-gutter", "always both force");
|
||||
test_valid_value("scrollbar-gutter", "stable mirror");
|
||||
|
||||
test_valid_value("scrollbar-gutter", "force both stable", "stable both force");
|
||||
test_valid_value("scrollbar-gutter", "force always both", "always both force");
|
||||
test_valid_value("scrollbar-gutter", "mirror stable", "stable mirror");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -33,28 +33,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable mirror;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -75,7 +64,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-y: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -103,90 +92,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -230,167 +175,85 @@
|
|||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable mirror
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable mirror");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#content {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#content {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#content {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -33,28 +33,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable mirror;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -75,7 +64,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-y: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -103,90 +92,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -230,167 +175,85 @@
|
|||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable mirror
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable mirror");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -31,28 +31,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable mirror;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -73,7 +62,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-x: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -101,90 +90,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -228,167 +173,85 @@
|
|||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable mirror
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable mirror");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -31,28 +31,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable mirror;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -73,7 +62,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-x: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -101,90 +90,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -229,167 +174,85 @@
|
|||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable mirror
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable mirror");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable mirror");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
/* Use scrollbar-gutter to reserve space for the scrollbar. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
writing-mode: horizontal-tb;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
/* Use scrollbar-gutter to reserve space for the scrollbar. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
/* Use scrollbar-gutter to reserve space for the scrollbar. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
writing-mode: horizontal-tb;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
/* Use scrollbar-gutter to reserve space for the scrollbar. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
writing-mode: horizontal-tb;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,8 @@
|
|||
/* CSS scrollbar properties applied to the root element
|
||||
will be propagated to the viewport. */
|
||||
scrollbar-width: auto;
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
scrollbar-gutter: always;
|
||||
/* Use scrollbar-gutter to reserve space for the scrollbar. */
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
:root,
|
||||
|
|
|
|||
|
|
@ -11,9 +11,8 @@
|
|||
/* CSS scrollbar properties applied to the root element
|
||||
will be propagated to the viewport. */
|
||||
scrollbar-width: thin;
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
scrollbar-gutter: always;
|
||||
/* Use scrollbar-gutter to reserve space for the scrollbar. */
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
:root,
|
||||
|
|
|
|||
|
|
@ -11,9 +11,8 @@
|
|||
/* CSS scrollbar properties applied to the root element
|
||||
will be propagated to the viewport. */
|
||||
scrollbar-width: none;
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
scrollbar-gutter: always;
|
||||
/* Use scrollbar-gutter to reserve space for the scrollbar. */
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
:root,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
flex: 0 0;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
overflow: auto;
|
||||
flex: 0 0;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
overflow: scroll;
|
||||
flex: 0 0;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
scrollbar-gutter: stable;
|
||||
overflow: scroll;
|
||||
flex: 0 0;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -15,16 +15,10 @@
|
|||
|
||||
runPropertyTests('scrollbar-gutter', [
|
||||
{ syntax: 'auto' },
|
||||
{ syntax: 'stable' },
|
||||
{ syntax: 'always' },
|
||||
{ syntax: 'stable' }
|
||||
]);
|
||||
runUnsupportedPropertyTests('scrollbar-gutter', [
|
||||
'stable both',
|
||||
'stable force',
|
||||
'stable both force',
|
||||
'always both',
|
||||
'always force',
|
||||
'always both force'
|
||||
'stable mirror'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче