--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -124228,16 +124228,64 @@
       [
        "/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html",
+     [
+      [
+       "/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html",
+     [
+      [
+       "/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html",
+     [
+      [
+       "/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html",
+     [
+      [
+       "/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-shapes/shape-outside/shape-image/shape-image-000.html": [
     [
      "/css/css-shapes/shape-outside/shape-image/shape-image-000.html",
      [
       [
        "/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html",
        "=="
       ]
@@ -501197,30 +501245,46 @@
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html": [
    "7338abdd6edb1027dc2e12b001773ce5ad114286",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html": [
    "1e5377c120916557dc1525b38c9cf7eb86ae0151",
    "reftest"
   ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html": [
+   "dfbf4ad61f18ad05e243e58a2458b5b776ecf3fb",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html": [
+   "da35426f9ffc53101a053a61512c6928d140adff",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html": [
+   "03752707f61fbf16290b9733c280b79e00440b96",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html": [
+   "2ce6445aed0987c0ab7b83f614e9ceb8186fff7b",
+   "reftest"
+  ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html": [
    "b13df2df3be12ac74a7933794d91558c416b412c",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html": [
    "dbe8bd280e7f65fc5a1b43f4a211ca8e08a20d5e",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html": [
    "80fd9390054506c5e7bd8a6e60c1e6156dd604ec",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html": [
-   "67c3b8ea983da6b7d9b6b7e252b6415ebc7d1f9d",
+   "fc47f277737dce4f7c6b08d0181355a810107c7b",
    "testharness"
   ],
   "css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html": [
    "535d72bd77ac04e8e1accaa36edc6077baed17f3",
    "support"
   ],
   "css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html": [
    "5f5ed24372bdb45721dcb3befac0e5a0d3bb4091",
@@ -501282,33 +501346,33 @@
    "a58a3cc2988c71698edf5b36172b93fcae12b1ef",
    "support"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-000.html": [
    "a650a83a5c0510138a0a26cd721c89e2fb2e5619",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-001.html": [
-   "d97482f9149c68fff971e383ffb72f1371e898ef",
+   "f69cd2483ed81b496fb5d1c0024b6a16df7375b1",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-002.html": [
-   "1f3ace2827629f37439108e43f6528d8d728e5a2",
+   "299635765004bd1cf9cff8a0888678a2331d7b19",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-003.html": [
    "f4ca43f0badb8cefa375cfcfdaa7a0098b2c0a2e",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-004.html": [
    "ed7ccc693f4f69921cc3b9b780adb55e1a10748c",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-005.html": [
-   "274932a778268e3fda90b289e7f5ca22ee0f9adc",
+   "38883b770a73cc4eac3170a356b272edb6a5c483",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-006.html": [
    "9185f8f5f09c24246aabc9f15aa24be96cdfcedd",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/shape-image-007.html": [
    "c34f191a3c72a570e24f3fb95f679af70dc2ec69",

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title>
+    <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+    <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+    <meta name="flags" content="ahem"/>
+    <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-rl."/>
+    <style type="text/css">
+    .container {
+      writing-mode: vertical-rl;
+      inline-size: 100px;
+      block-size: 200px;
+      background-color: red;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+    }
+    #test {
+      color: green;
+    }
+    #float-left {
+      /* Note: In .container's writing-mode, "float: left" actually floats
+         us towards the top. */
+      float: left;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to bottom, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+    }
+    #float-right {
+      /* Note: In .container's writing-mode, "float: right" actually floats
+         us towards the bottom. */
+      float: right;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to top, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+    }
+    </style>
+  </head>
+  <body>
+    <p>
+      The test passes if you see a green square. There should be no red.
+    </p>
+    <div id="test" class="container">
+      <div id="float-left"></div>
+      x x x x
+    </div>
+    <div id="test" class="container" style="direction: rtl;">
+      <div id="float-right"></div>
+      x x x x
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title>
+    <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+    <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+    <meta name="flags" content="ahem"/>
+    <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-lr."/>
+    <style type="text/css">
+    .container {
+      writing-mode: vertical-lr;
+      inline-size: 100px;
+      block-size: 200px;
+      background-color: red;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+    }
+    #test {
+      color: green;
+    }
+    #float-left {
+      /* Note: In .container's writing-mode, "float: left" actually floats
+         us towards the top. */
+      float: left;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to bottom, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+    }
+    #float-right {
+      /* Note: In .container's writing-mode, "float: right" actually floats
+         us towards the bottom. */
+      float: right;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to top, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+    }
+    </style>
+  </head>
+  <body>
+    <p>
+      The test passes if you see a green square. There should be no red.
+    </p>
+    <div id="test" class="container">
+      <div id="float-left"></div>
+      x x x x
+    </div>
+    <div id="test" class="container" style="direction: rtl;">
+      <div id="float-right"></div>
+      x x x x
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title>
+    <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+    <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+    <meta name="flags" content="ahem"/>
+    <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-rl."/>
+    <style type="text/css">
+    .container {
+      writing-mode: sideways-rl;
+      inline-size: 100px;
+      block-size: 200px;
+      background-color: red;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+    }
+    #test {
+      color: green;
+    }
+    #float-left {
+      /* Note: In .container's writing-mode, "float: left" actually floats
+         us towards the top. */
+      float: left;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to bottom, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+    }
+    #float-right {
+      /* Note: In .container's writing-mode, "float: right" actually floats
+         us towards the bottom. */
+      float: right;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to top, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+    }
+    </style>
+  </head>
+  <body>
+    <p>
+      The test passes if you see a green square. There should be no red.
+    </p>
+    <div id="test" class="container">
+      <div id="float-left"></div>
+      x x x x
+    </div>
+    <div id="test" class="container" style="direction: rtl;">
+      <div id="float-right"></div>
+      x x x x
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title>
+    <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
+    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
+    <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
+    <meta name="flags" content="ahem"/>
+    <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-lr."/>
+    <style type="text/css">
+    .container {
+      writing-mode: sideways-lr;
+      inline-size: 100px;
+      block-size: 200px;
+      background-color: red;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+    }
+    #test {
+      color: green;
+    }
+    #float-left {
+      /* Note: In .container's writing-mode, "float: left" actually floats
+         us towards the bottom. */
+      float: left;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to top, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to top, green 50%, transparent 50%);
+    }
+    #float-right {
+      /* Note: In .container's writing-mode, "float: right" actually floats
+         us towards the top. */
+      float: right;
+      inline-size: 100px;
+      block-size: 200px;
+      background: linear-gradient(to bottom, green 50%, transparent 50%);
+      shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
+    }
+    </style>
+  </head>
+  <body>
+    <p>
+      The test passes if you see a green square. There should be no red.
+    </p>
+    <div id="test" class="container">
+      <div id="float-left"></div>
+      x x x x
+    </div>
+    <div id="test" class="container" style="direction: rtl;">
+      <div id="float-right"></div>
+      x x x x
+    </div>
+  </body>
+</html>