Auto merge of #19127 - tigercosmos:overflow10, r=emilio

scroll, SetScrollTop, SetScrollLeft in `element.rs`

<!-- Please describe your changes on the following line: -->
Currently dom-element-scroll have not finished yet. (Step 10)
This PR finish the step 10 of `scroll`, `SetScrollTop`, `SetScrollLeft`

[Step 10 description](https://drafts.csswg.org/cssom-view/#dom-element-scrolltop):
> If the element does not have any associated CSS layout box, the element has no associated scrolling box, or the element has no overflow, terminate these steps.
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #19114 (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19127)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2017-11-12 17:24:33 -06:00 committed by GitHub
commit 37760054e2
4 changed files with 157 additions and 5 deletions

View file

@ -362,6 +362,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);
@ -375,6 +388,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)]
@ -1470,7 +1497,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);
@ -1926,7 +1959,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);
@ -2019,7 +2058,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);

View file

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

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": [
[
"/_mozilla/css/empty-keyframes.html",
@ -62015,6 +62021,10 @@
"16a4dd68da41156fbdd139b4a56547f94ad4dbe7",
"support"
],
"css/cssom-view/dom-element-scroll.html": [
"247b85d5988878a7b27bc9f0f7b817085725c038",
"testharness"
],
"css/data_img_a.html": [
"323bf50369f98ed02acccdd3a5824e38d3f353bf",
"reftest"

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>