mirror of
https://github.com/servo/servo.git
synced 2025-07-22 23:03:42 +01:00
scroll, SetScrollTop, SetScrollLeft in dom-element-scroll
with test
This commit is contained in:
parent
41a5a8c75f
commit
9965f7e2cc
4 changed files with 157 additions and 5 deletions
|
@ -363,6 +363,19 @@ impl Element {
|
|||
!self.overflow_y_is_visible()
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/cssom-view/#scrolling-box
|
||||
fn has_scrolling_box(&self) -> bool {
|
||||
// TODO: scrolling mechanism, such as scrollbar (We don't have scrollbar yet)
|
||||
// self.has_scrolling_mechanism()
|
||||
self.overflow_x_is_hidden() ||
|
||||
self.overflow_y_is_hidden()
|
||||
}
|
||||
|
||||
fn has_overflow(&self) -> bool {
|
||||
self.ScrollHeight() > self.ClientHeight() ||
|
||||
self.ScrollWidth() > self.ClientWidth()
|
||||
}
|
||||
|
||||
// used value of overflow-x is "visible"
|
||||
fn overflow_x_is_visible(&self) -> bool {
|
||||
let window = window_from_node(self);
|
||||
|
@ -376,6 +389,20 @@ impl Element {
|
|||
let overflow_pair = window.overflow_query(self.upcast::<Node>().to_trusted_node_address());
|
||||
overflow_pair.y == overflow_y::computed_value::T::visible
|
||||
}
|
||||
|
||||
// used value of overflow-x is "hidden"
|
||||
fn overflow_x_is_hidden(&self) -> bool {
|
||||
let window = window_from_node(self);
|
||||
let overflow_pair = window.overflow_query(self.upcast::<Node>().to_trusted_node_address());
|
||||
overflow_pair.x == overflow_x::computed_value::T::hidden
|
||||
}
|
||||
|
||||
// used value of overflow-y is "hidden"
|
||||
fn overflow_y_is_hidden(&self) -> bool {
|
||||
let window = window_from_node(self);
|
||||
let overflow_pair = window.overflow_query(self.upcast::<Node>().to_trusted_node_address());
|
||||
overflow_pair.y == overflow_y::computed_value::T::hidden
|
||||
}
|
||||
}
|
||||
|
||||
#[allow(unsafe_code)]
|
||||
|
@ -1471,7 +1498,13 @@ impl Element {
|
|||
return;
|
||||
}
|
||||
|
||||
// Step 10 (TODO)
|
||||
// Step 10
|
||||
if !self.has_css_layout_box() ||
|
||||
!self.has_scrolling_box() ||
|
||||
!self.has_overflow()
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 11
|
||||
win.scroll_node(node, x, y, behavior);
|
||||
|
@ -1927,7 +1960,13 @@ impl ElementMethods for Element {
|
|||
return;
|
||||
}
|
||||
|
||||
// Step 10 (TODO)
|
||||
// Step 10
|
||||
if !self.has_css_layout_box() ||
|
||||
!self.has_scrolling_box() ||
|
||||
!self.has_overflow()
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 11
|
||||
win.scroll_node(node, self.ScrollLeft(), y, behavior);
|
||||
|
@ -2020,7 +2059,13 @@ impl ElementMethods for Element {
|
|||
return;
|
||||
}
|
||||
|
||||
// Step 10 (TODO)
|
||||
// Step 10
|
||||
if !self.has_css_layout_box() ||
|
||||
!self.has_scrolling_box() ||
|
||||
!self.has_overflow()
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 11
|
||||
win.scroll_node(node, x, self.ScrollTop(), behavior);
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
[text-overflow-021.html]
|
||||
expected: FAIL
|
|
@ -32592,6 +32592,12 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/cssom-view/dom-element-scroll.html": [
|
||||
[
|
||||
"/_mozilla/css/cssom-view/dom-element-scroll.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/empty-keyframes.html": [
|
||||
[
|
||||
"/_mozilla/css/empty-keyframes.html",
|
||||
|
@ -61985,6 +61991,10 @@
|
|||
"16a4dd68da41156fbdd139b4a56547f94ad4dbe7",
|
||||
"support"
|
||||
],
|
||||
"css/cssom-view/dom-element-scroll.html": [
|
||||
"247b85d5988878a7b27bc9f0f7b817085725c038",
|
||||
"testharness"
|
||||
],
|
||||
"css/data_img_a.html": [
|
||||
"323bf50369f98ed02acccdd3a5824e38d3f353bf",
|
||||
"reftest"
|
||||
|
|
|
@ -0,0 +1,99 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>dom-element-scroll tests</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#section1 {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
border: inset gray 3px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#scrollable {
|
||||
width: 400px;
|
||||
height: 700px;
|
||||
background: linear-gradient(135deg, red, blue);
|
||||
}
|
||||
|
||||
#section2 {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
border: inset gray 3px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#unscrollable {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, red, blue);
|
||||
}
|
||||
</style>
|
||||
<section id="section1">
|
||||
<div id="scrollable"></div>
|
||||
</section>
|
||||
<section id="section2">
|
||||
<div id="unscrollable"></div>
|
||||
</section>
|
||||
<script>
|
||||
var section1 = document.getElementById("section1");
|
||||
var section2 = document.getElementById("section2");
|
||||
|
||||
test(function () {
|
||||
// let it be "hidden" to have scrolling box
|
||||
section1.style.overflow = "hidden";
|
||||
|
||||
section1.scroll(50, 60);
|
||||
assert_equals(section1.scrollLeft, 50, "changed scrollLeft should be 50");
|
||||
assert_equals(section1.scrollTop, 60, "changed scrollTop should be 60");
|
||||
|
||||
section1.scroll(0, 0); // back to the origin
|
||||
}, "Element test for having scrolling box");
|
||||
|
||||
test(function () {
|
||||
section1.scroll(10, 20);
|
||||
assert_equals(section1.scrollLeft, 10, "changed scrollLeft should be 10");
|
||||
assert_equals(section1.scrollTop, 20, "changed scrollTop should be 20");
|
||||
|
||||
section1.scroll(0, 0); // back to the origin
|
||||
}, "Element test for having overflow");
|
||||
|
||||
test(function () {
|
||||
// make it not "hidden" to not have scrolling box
|
||||
section1.style.overflow = "visible";
|
||||
|
||||
section1.scroll(50, 0);
|
||||
assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0");
|
||||
assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0");
|
||||
|
||||
section1.scroll(0, 60);
|
||||
assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0");
|
||||
assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0");
|
||||
|
||||
section1.scroll(50, 60);
|
||||
assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0");
|
||||
assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0");
|
||||
|
||||
section1.scroll(0, 0); // back to the origin
|
||||
}, "Element test for not having scrolling box");
|
||||
|
||||
test(function () {
|
||||
section2.scroll(0, 20);
|
||||
assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0");
|
||||
assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0");
|
||||
|
||||
section2.scroll(10, 0);
|
||||
assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0");
|
||||
assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0");
|
||||
|
||||
section2.scroll(10, 20);
|
||||
assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0");
|
||||
assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0");
|
||||
}, "Element test for not having overflow");
|
||||
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue