diff --git a/css/css-rhythm/computedstyle/block-level-replaced-elements-affected-by-block-step-size.html b/css/css-rhythm/computedstyle/block-level-replaced-elements-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..fdbd0da120833e
--- /dev/null
+++ b/css/css-rhythm/computedstyle/block-level-replaced-elements-affected-by-block-step-size.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<meta name="assert" content="Checks getComputedStyle for block level replaced margins affected by block-step-size and height of their containers">
+<style>
+.container {
+  display: inline flow-root;
+  width: 100px;
+}
+.block-step {
+  display: block;
+  block-step-size: 100px;
+  visibility: hidden;
+}
+
+iframe {
+  border: 0;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.test')">
+
+<div class="container test" data-expected-height="100">
+  <img class="block-step test" src="../../support/60x60-green.png" data-expected-margin-top="20" data-expected-margin-bottom="20"></img>
+</div>
+
+<div class="container test" data-expected-height="100">
+  <canvas width="20" height="20" class="block-step test" data-expected-margin-top="40" data-expected-margin-bottom="40"></canvas>
+</div>
+
+<div class="container test" data-expected-height="100">
+  <svg class="block-step test" viewBox="0 0 100 50" data-expected-margin-top="25" data-expected-margin-bottom="25"></svg>
+</div>
+
+<div class="container test" data-expected-height="100">
+  <embed type="text/xml" width="20" height="20" class="block-step test" data-expected-margin-top="40" data-expected-margin-bottom="40"></embed>
+</div>
+<div class="container test" data-expected-height="100">
+  <iframe src="" width="20" height="20" class="block-step test" data-expected-margin-top="40" data-expected-margin-bottom="40"></iframe>
+</div>
+
+<div class="container test" data-expected-height="100">
+  <object width="20" height="20" class="block-step test" data-expected-margin-top="40" data-expected-margin-bottom="40"></object>
+</div>
+
+<div class="container test" data-expected-height="100">
+  <video width="20" height="20" class="block-step test" data-expected-margin-top="40" data-expected-margin-bottom="40"></video>
+</div>
+
+</body>
+</html>
diff --git a/css/css-rhythm/computedstyle/inline-level-replaced-elements-not-affected-by-block-step-size.html b/css/css-rhythm/computedstyle/inline-level-replaced-elements-not-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..0531c7edbdcb7b
--- /dev/null
+++ b/css/css-rhythm/computedstyle/inline-level-replaced-elements-not-affected-by-block-step-size.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<meta name="assert" content="Check inline level replaced elements are not affected by block-step-size via getComputedStyle">
+<style>
+.container {
+  display: inline flow-root;
+  width: 100px;
+  font-size: 0px;
+}
+.block-step {
+  block-step-size: 100px;
+  visibility: hidden;
+}
+
+iframe {
+  border: 0;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.test')">
+
+<div class="container test" data-expected-height="60">
+  <img class="block-step test" src="../../support/60x60-green.png" data-expected-margin-top="0" data-expected-margin-bottom="0"></img>
+</div>
+
+<div class="container test" data-expected-height="20">
+  <canvas width="20" height="20" class="block-step test" data-expected-margin-top="0" data-expected-margin-bottom="0"></canvas>
+</div>
+
+<div class="container test" data-expected-height="20">
+  <svg class="block-step test" viewBox="0 0 100 20" data-expected-margin-top="0" data-expected-margin-bottom="0"></svg>
+</div>
+
+<div class="container test" data-expected-height="20">
+  <embed type="text/xml" width="20" height="20" class="block-step test" data-expected-margin-top="0" data-expected-margin-bottom="0"></embed>
+</div>
+<div class="container test" data-expected-height="20">
+  <iframe src="" width="20" height="20" class="block-step test" data-expected-margin-top="0" data-expected-margin-bottom="0"></iframe>
+</div>
+
+<div class="container test" data-expected-height="20">
+  <object width="20" height="20" class="block-step test" data-expected-margin-top="0" data-expected-margin-bottom="0"></object>
+</div>
+
+<div class="container test" data-expected-height="20">
+  <video width="20" height="20" class="block-step test" data-expected-margin-top="0" data-expected-margin-bottom="0"></video>
+</div>
+
+</body>
+</html>
diff --git a/css/css-rhythm/replaced-elements/block-level-canvas-margins-affected-by-block-step-size.html b/css/css-rhythm/replaced-elements/block-level-canvas-margins-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..e51a01353532f7
--- /dev/null
+++ b/css/css-rhythm/replaced-elements/block-level-canvas-margins-affected-by-block-step-size.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Block level canvas is affected by block-step-size">
+<style>
+.container {
+  display: flow-root;
+  width: 100px;
+  background-color: green;
+}
+.block-step {
+  display: block;
+  block-step-size: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="container">
+  <canvas width="20" height="20" class="block-step"></canvas>
+</div>
+</body>
+</html>
diff --git a/css/css-rhythm/replaced-elements/block-level-embed-margins-affected-by-block-step-size.html b/css/css-rhythm/replaced-elements/block-level-embed-margins-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..d82f466d08620f
--- /dev/null
+++ b/css/css-rhythm/replaced-elements/block-level-embed-margins-affected-by-block-step-size.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Block level embed is affected by block-step-size">
+<style>
+.container {
+  display: flow-root;
+  width: 100px;
+  background-color: green;
+}
+.block-step {
+  display: block;
+  block-step-size: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="container">
+  <embed type="text/xml" width="20" height="20" class="block-step"></embed>
+</div>
+</body>
+</html>
diff --git a/css/css-rhythm/replaced-elements/block-level-iframe-margins-affected-by-block-step-size.html b/css/css-rhythm/replaced-elements/block-level-iframe-margins-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..b591b896ab2dfb
--- /dev/null
+++ b/css/css-rhythm/replaced-elements/block-level-iframe-margins-affected-by-block-step-size.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Block level iframe is affected by block-step-size">
+<style>
+.container {
+  display: flow-root;
+  width: 100px;
+  background-color: green;
+}
+.block-step {
+  display: block;
+  block-step-size: 100px;
+  visibility: hidden;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="container">
+  <iframe src="" width="20" height="20" class="block-step"></iframe>
+</div>
+</body>
+</html>
diff --git a/css/css-rhythm/replaced-elements/block-level-img-margins-affected-by-block-step-size.html b/css/css-rhythm/replaced-elements/block-level-img-margins-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..d6177987cc97a4
--- /dev/null
+++ b/css/css-rhythm/replaced-elements/block-level-img-margins-affected-by-block-step-size.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Block level img is affected by block-step-size">
+<style>
+.container {
+  display: flow-root;
+  width: 100px;
+  background-color: green;
+}
+.block-step {
+  block-step-size: 100px;
+  display: block;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="container">
+  <img class="block-step" src="../../support/60x60-green.png"></img>
+</div>
+</body>
+</html>
diff --git a/css/css-rhythm/replaced-elements/block-level-object-margins-affected-by-block-step-size.html b/css/css-rhythm/replaced-elements/block-level-object-margins-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..b9a0f0ef4a33df
--- /dev/null
+++ b/css/css-rhythm/replaced-elements/block-level-object-margins-affected-by-block-step-size.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Block level object is affected by block-step-size">
+<style>
+.container {
+  display: flow-root;
+  width: 100px;
+  background-color: green;
+}
+.block-step {
+  display: block;
+  block-step-size: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="container">
+  <object width="20" height="20" class="block-step"></object>
+</div>
+</body>
+</html>
diff --git a/css/css-rhythm/replaced-elements/block-level-svg-margins-affected-by-block-step-size.html b/css/css-rhythm/replaced-elements/block-level-svg-margins-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..cbdabeaff54337
--- /dev/null
+++ b/css/css-rhythm/replaced-elements/block-level-svg-margins-affected-by-block-step-size.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Block level SVG is affected by block-step-size">
+<style>
+.container {
+  display: flow-root;
+  background-color: green;
+  width: 100px;
+}
+.block-step {
+  display: block;
+  block-step-size: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="container">
+  <svg class="block-step" viewBox="0 0 100 50"></svg>
+</div>
+</body>
+</html>
diff --git a/css/css-rhythm/replaced-elements/block-level-video-margins-affected-by-block-step-size.html b/css/css-rhythm/replaced-elements/block-level-video-margins-affected-by-block-step-size.html
new file mode 100644
index 00000000000000..8d822cfcd5ccac
--- /dev/null
+++ b/css/css-rhythm/replaced-elements/block-level-video-margins-affected-by-block-step-size.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Block level video is affected by block-step-size">
+<style>
+.container {
+  display: flow-root;
+  width: 100px;
+  background-color: green;
+}
+.block-step {
+  display: block;
+  block-step-size: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="container">
+  <video width="20" height="20" class="block-step"></video>
+</div>
+</body>
+</html>
