Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-07-23 15:23:42 +01:00
Code Issues Projects Releases Packages Wiki Activity

scroll, SetScrollTop, SetScrollLeft in dom-element-scroll with test

Browse source
This commit is contained in:
tigercosmos 2017-11-06 00:32:11 +08:00
parent 41a5a8c75f
commit 9965f7e2cc
4 changed files with 157 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

51
components/script/dom/element.rs
View file

@ -363,6 +363,19 @@ impl Element {
!self.overflow_y_is_visible() !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" // used value of overflow-x is "visible"
fn overflow_x_is_visible(&self) -> bool { fn overflow_x_is_visible(&self) -> bool {
let window = window_from_node(self); 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()); let overflow_pair = window.overflow_query(self.upcast::<Node>().to_trusted_node_address());
overflow_pair.y == overflow_y::computed_value::T::visible 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)] #[allow(unsafe_code)]
@ -1471,7 +1498,13 @@ impl Element {
return; return;
} }
// Step 10 (TODO) // Step 10
if !self.has_css_layout_box() ||
!self.has_scrolling_box() ||
!self.has_overflow()
{
return;
}
// Step 11 // Step 11
win.scroll_node(node, x, y, behavior); win.scroll_node(node, x, y, behavior);
@ -1927,7 +1960,13 @@ impl ElementMethods for Element {
return; return;
} }
// Step 10 (TODO) // Step 10
if !self.has_css_layout_box() ||
!self.has_scrolling_box() ||
!self.has_overflow()
{
return;
}
// Step 11 // Step 11
win.scroll_node(node, self.ScrollLeft(), y, behavior); win.scroll_node(node, self.ScrollLeft(), y, behavior);
@ -2020,7 +2059,13 @@ impl ElementMethods for Element {
return; return;
} }
// Step 10 (TODO) // Step 10
if !self.has_css_layout_box() ||
!self.has_scrolling_box() ||
!self.has_overflow()
{
return;
}
// Step 11 // Step 11
win.scroll_node(node, x, self.ScrollTop(), behavior); win.scroll_node(node, x, self.ScrollTop(), behavior);

2
tests/wpt/metadata/css/css-ui/text-overflow-021.html.ini
View file

@ -1,2 +0,0 @@
[text-overflow-021.html]
expected: FAIL

10
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -32592,6 +32592,12 @@
{} {}
] ]
], ],
"css/cssom-view/dom-element-scroll.html": [
[
"/_mozilla/css/cssom-view/dom-element-scroll.html",
{}
]
],
"css/empty-keyframes.html": [ "css/empty-keyframes.html": [
[ [
"/_mozilla/css/empty-keyframes.html", "/_mozilla/css/empty-keyframes.html",
@ -61985,6 +61991,10 @@
"16a4dd68da41156fbdd139b4a56547f94ad4dbe7", "16a4dd68da41156fbdd139b4a56547f94ad4dbe7",
"support" "support"
], ],
"css/cssom-view/dom-element-scroll.html": [
"247b85d5988878a7b27bc9f0f7b817085725c038",
"testharness"
],
"css/data_img_a.html": [ "css/data_img_a.html": [
"323bf50369f98ed02acccdd3a5824e38d3f353bf", "323bf50369f98ed02acccdd3a5824e38d3f353bf",
"reftest" "reftest"

99
tests/wpt/mozilla/tests/css/cssom-view/dom-element-scroll.html Normal file
View file

@ -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>