diff --git a/components/layout/block.rs b/components/layout/block.rs
index 7fb63c0045d8..355c76aa473e 100644
--- a/components/layout/block.rs
+++ b/components/layout/block.rs
@@ -732,11 +732,15 @@ impl BlockFlow {
 
     /// Return true if this has a replaced fragment.
     ///
-    /// The only two types of replaced fragments currently are text fragments
-    /// and image fragments.
+    /// Text, Images, Inline Block and
+    //  Canvas (https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)
+    //  fragments are considered as replaced fragments
     fn is_replaced_content(&self) -> bool {
         match self.fragment.specific {
-            SpecificFragmentInfo::ScannedText(_) | SpecificFragmentInfo::Image(_) | SpecificFragmentInfo::InlineBlock(_) => true,
+            SpecificFragmentInfo::ScannedText(_) |
+            SpecificFragmentInfo::Image(_) |
+            SpecificFragmentInfo::Canvas(_) |
+            SpecificFragmentInfo::InlineBlock(_) => true,
             _ => false,
         }
     }
diff --git a/tests/ref/basic.list b/tests/ref/basic.list
index e568e5e23118..6c554d2922fd 100644
--- a/tests/ref/basic.list
+++ b/tests/ref/basic.list
@@ -64,6 +64,7 @@ flaky_cpu == append_style_a.html append_style_b.html
 == box_sizing_border_box_a.html box_sizing_border_box_ref.html
 == box_sizing_sanity_check_a.html box_sizing_sanity_check_ref.html
 == br.html br-ref.html
+== canvas_as_block_element_a.html canvas_as_block_element_ref.html
 == canvas_lineto_a.html canvas_lineto_ref.html
 == canvas_transform_a.html canvas_transform_ref.html
 == case-insensitive-font-family.html case-insensitive-font-family-ref.html
diff --git a/tests/ref/canvas_as_block_element_a.html b/tests/ref/canvas_as_block_element_a.html
new file mode 100644
index 000000000000..a52a82e5787e
--- /dev/null
+++ b/tests/ref/canvas_as_block_element_a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+
+    canvas {
+      display: block;
+    }
+  </style>
+</head>
+<body>
+<title>Canvas is displayed as a block-level element</title>
+<canvas id="c"></canvas>
+<script>
+
+var canvas = document.getElementById('c');
+canvas.width = 100;
+canvas.height = 100;
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = '#ff0000';
+ctx.fillRect(0, 0, 100, 100);
+
+</script>
+</body>
+</html>
+
diff --git a/tests/ref/canvas_as_block_element_ref.html b/tests/ref/canvas_as_block_element_ref.html
new file mode 100644
index 000000000000..7d9edf454915
--- /dev/null
+++ b/tests/ref/canvas_as_block_element_ref.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    background: #ff0000;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
