diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index a56e16356bf..f443fb71da9 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -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);
diff --git a/tests/wpt/metadata/css/css-ui/text-overflow-021.html.ini b/tests/wpt/metadata/css/css-ui/text-overflow-021.html.ini
deleted file mode 100644
index bc6acd4a26f..00000000000
--- a/tests/wpt/metadata/css/css-ui/text-overflow-021.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[text-overflow-021.html]
-  expected: FAIL
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index b292757f89e..f55084bbeaf 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -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"
diff --git a/tests/wpt/mozilla/tests/css/cssom-view/dom-element-scroll.html b/tests/wpt/mozilla/tests/css/cssom-view/dom-element-scroll.html
new file mode 100644
index 00000000000..b02eeb6e4bf
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/cssom-view/dom-element-scroll.html
@@ -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>