--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -126932,16 +126932,112 @@
       [
        "/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-009.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.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-010.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.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-011.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.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-012.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.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-013.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.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-014.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.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-015.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.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-016.html": [
+    [
+     "/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.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",
        "=="
       ]
@@ -397153,19 +397249,17 @@
     [
      "/webdriver/tests/close_window/close.py",
      {}
     ]
    ],
    "webdriver/tests/close_window/user_prompts.py": [
     [
      "/webdriver/tests/close_window/user_prompts.py",
-     {
-      "timeout": "long"
-     }
+     {}
     ]
    ],
    "webdriver/tests/delete_cookie/delete.py": [
     [
      "/webdriver/tests/delete_cookie/delete.py",
      {}
     ]
    ],
@@ -397253,19 +397347,17 @@
     [
      "/webdriver/tests/execute_script/cyclic.py",
      {}
     ]
    ],
    "webdriver/tests/execute_script/json_serialize_windowproxy.py": [
     [
      "/webdriver/tests/execute_script/json_serialize_windowproxy.py",
-     {
-      "timeout": "long"
-     }
+     {}
     ]
    ],
    "webdriver/tests/execute_script/user_prompts.py": [
     [
      "/webdriver/tests/execute_script/user_prompts.py",
      {}
     ]
    ],
@@ -515599,16 +515691,48 @@
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html": [
    "c1093645f439fc86272e7e5f71e62daf37240a3f",
    "reftest"
   ],
   "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html": [
    "2f2b95904fad670919fae32cb94284118a45566c",
    "reftest"
   ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html": [
+   "2226228acb7badb0145118891235733b62bd5504",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html": [
+   "8bcee868c33ce352ff4435584b01b91a867e2699",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html": [
+   "a8f9bd56d4fe6f508c4251f97ff32b0555c3b8ac",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html": [
+   "f4e6edd54826da5374c63651af925bcb4dc2f7d3",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html": [
+   "764980f1beaedaf608096161525ee1f4326bee18",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html": [
+   "42305d67e0f88ed75bee44edc992c0e92a761597",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html": [
+   "b8294d4201dd68a5c91c6f4da7acb9a352ba0cbc",
+   "reftest"
+  ],
+  "css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html": [
+   "18d2fe95bf79efe975a07b332aad3e0fd0e0f298",
+   "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"
   ],
@@ -611504,17 +611628,17 @@
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",
    "support"
   ],
   "webdriver/tests/close_window/close.py": [
    "a98fdaa5d8afe6ddca892e8857c134ba24b0e43a",
    "wdspec"
   ],
   "webdriver/tests/close_window/user_prompts.py": [
-   "59647d3670644c730485cd918f764b9db016e6b7",
+   "7b1255736f8772f5790b9bf1e46cbf1c5b1c2dee",
    "wdspec"
   ],
   "webdriver/tests/conftest.py": [
    "c812269d034c9ca1b8c4f136dd5d0cea52f4d0f0",
    "support"
   ],
   "webdriver/tests/delete_cookie/__init__.py": [
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",
@@ -611544,45 +611668,45 @@
    "d5a0a37d410f5a748aee5ac5be75acb837e491f8",
    "wdspec"
   ],
   "webdriver/tests/element_click/__init__.py": [
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",
    "support"
   ],
   "webdriver/tests/element_click/bubbling.py": [
-   "46fb2d0359f5f90eec4cc1f06d2591b5fd2fdf78",
+   "492e283b686abe0743d72e31017be149726628f9",
    "wdspec"
   ],
   "webdriver/tests/element_click/select.py": [
    "bddc341a0feb0d06e75415b8f98b8e9e0c2a829d",
    "wdspec"
   ],
   "webdriver/tests/element_click/stale.py": [
-   "b9f503108f99d4a87784590b69bb2ad6a23c4ac8",
+   "490b6c17365c5eab24fd4a7ac07be6614a86a934",
    "wdspec"
   ],
   "webdriver/tests/element_send_keys/__init__.py": [
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",
    "support"
   ],
   "webdriver/tests/element_send_keys/content_editable.py": [
    "9c071e60e1203cf31120f20874b5f38ba41dacc3",
    "wdspec"
   ],
   "webdriver/tests/element_send_keys/form_controls.py": [
    "ec6bdf64c7c4d2e3963e89c8410f69f738565f78",
    "wdspec"
   ],
   "webdriver/tests/element_send_keys/interactability.py": [
-   "485bd25ba5e1d8c8a646675d0738f278291c7c70",
+   "5374827c90845ded660d540d23bb7e07ac84e445",
    "wdspec"
   ],
   "webdriver/tests/element_send_keys/scroll_into_view.py": [
-   "b58404e8bb2c8b0cc75300ed1880cfeeb052a364",
+   "e4a50a53a13c1ab76c6c002bbda1c103f8c32ccf",
    "wdspec"
   ],
   "webdriver/tests/execute_async_script/__init__.py": [
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",
    "support"
   ],
   "webdriver/tests/execute_async_script/collections.py": [
    "d6c95dfdcbfc3b9cf91cf6f943a17b7cd0fee79d",
@@ -611600,17 +611724,17 @@
    "0ee4e340b38b6aa59043286755822460e76b2dbd",
    "wdspec"
   ],
   "webdriver/tests/execute_script/cyclic.py": [
    "21bae43b3a6e966b8698b7c439b29a68029adc58",
    "wdspec"
   ],
   "webdriver/tests/execute_script/json_serialize_windowproxy.py": [
-   "00e735d58b77e9fac207c5ea29e0e70ff43ffd14",
+   "20db10d82ed2b28a22674fcdc37cac0323d33c95",
    "wdspec"
   ],
   "webdriver/tests/execute_script/user_prompts.py": [
    "0e94c156954b90eca2005f6ad9fa5a4601169fd9",
    "wdspec"
   ],
   "webdriver/tests/find_element/__init__.py": [
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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 and text-orientation: sideways."/>
+    <style type="text/css">
+    .container {
+      writing-mode: vertical-rl;
+      text-orientation: sideways;
+      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-010.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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 and text-orientation: sideways."/>
+    <style type="text/css">
+    .container {
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+      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-011.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin"/>
+    <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 with shape-margin 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 25%, transparent 25%);
+      shape-margin: 25%;
+    }
+    #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 5%, transparent 5%);
+      shape-margin: 45%
+    }
+    </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-012.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin"/>
+    <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 with shape-margin 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 25%, transparent 25%);
+      shape-margin: 25%;
+    }
+    #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 5%, transparent 5%);
+      shape-margin: 45%
+    }
+    </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-013.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin"/>
+    <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 with shape-margin 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 25%, transparent 25%);
+      shape-margin: 25%;
+    }
+    #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 5%, transparent 5%);
+      shape-margin: 45%
+    }
+    </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-014.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin"/>
+    <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 with shape-margin 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 25%, transparent 25%);
+      shape-margin: 25%;
+    }
+    #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 5%, transparent 5%);
+      shape-margin: 45%
+    }
+    </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-015.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin"/>
+    <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 with shape-margin under vertical-rl and text-orientation: sideways."/>
+    <style type="text/css">
+    .container {
+      writing-mode: vertical-rl;
+      text-orientation: sideways;
+      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 25%, transparent 25%);
+      shape-margin: 25%;
+    }
+    #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 5%, transparent 5%);
+      shape-margin: 45%
+    }
+    </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-016.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin"/>
+    <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 with shape-margin under vertical-lr and text-orientation: sideways."/>
+    <style type="text/css">
+    .container {
+      writing-mode: vertical-lr;
+      text-orientation: sideways;
+      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 25%, transparent 25%);
+      shape-margin: 25%;
+    }
+    #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 5%, transparent 5%);
+      shape-margin: 45%
+    }
+    </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>