Bug 1438276 [wpt PR 9519] - Test box-shadow serialization, a=testonly
authorChris Nardi <christopherncarmel@hotmail.com>
Thu, 19 Apr 2018 13:35:46 +0000
changeset 468398 897ebf44f505010b0be8d4773368bc926c32315e
parent 468397 bbf635ed186ce4222ca7ec09e2e6475543985cc8
child 468399 f228c1a6aa0b505404e2867907bf8a0618bd0c5e
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1438276
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1438276 [wpt PR 9519] - Test box-shadow serialization, a=testonly Automatic update from web-platform-testsTest box-shadow serialization (#9519) Following https://github.com/w3c/csswg-drafts/issues/2305, the canonical serialization for box-shadow was changed from inset? && <length>{2,4} && <color>? to <color>? && <length>{2,4} && inset?. Convert an existing box-shadow text into a testharness.js test in order to test serialization as well. -- wpt-commits: 5a93530d4db27df7a3154d9a5b75a0f36d592c6a wpt-pr: 9519 wpt-commits: 5a93530d4db27df7a3154d9a5b75a0f36d592c6a wpt-pr: 9519
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-backgrounds/box-shadow-syntax-001.html
testing/web-platform/tests/css/css-backgrounds/box-shadow-syntax-001.xht
testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-syntax-001.xht
testing/web-platform/tests/css/css-backgrounds/resources/parsing-testcommon.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -104050,28 +104050,16 @@
       [
        "/css/css-backgrounds/reference/box-shadow-outset-without-border-radius.html",
        "=="
       ]
      ],
      {}
     ]
    ],
-   "css/css-backgrounds/box-shadow-syntax-001.xht": [
-    [
-     "/css/css-backgrounds/box-shadow-syntax-001.xht",
-     [
-      [
-       "/css/css-backgrounds/reference/box-shadow-syntax-001.xht",
-       "=="
-      ]
-     ],
-     {}
-    ]
-   ],
    "css/css-backgrounds/css-border-radius-001.html": [
     [
      "/css/css-backgrounds/css-border-radius-001.html",
      [
       [
        "/css/css-backgrounds/reference/css-border-radius-ref-001.html",
        "=="
       ]
@@ -237842,21 +237830,16 @@
      {}
     ]
    ],
    "css/css-backgrounds/reference/box-shadow-outset-without-border-radius.html": [
     [
      {}
     ]
    ],
-   "css/css-backgrounds/reference/box-shadow-syntax-001.xht": [
-    [
-     {}
-    ]
-   ],
    "css/css-backgrounds/reference/css-border-radius-ref-001.html": [
     [
      {}
     ]
    ],
    "css/css-backgrounds/reference/css-border-radius-ref-002.html": [
     [
      {}
@@ -237957,16 +237940,21 @@
      {}
     ]
    ],
    "css/css-backgrounds/reference/ttwf-reftest-borderRadius-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-backgrounds/resources/parsing-testcommon.js": [
+    [
+     {}
+    ]
+   ],
    "css/css-backgrounds/support/100x100-blue-and-orange.png": [
     [
      {}
     ]
    ],
    "css/css-backgrounds/support/1x1-green.png": [
     [
      {}
@@ -313209,16 +313197,22 @@
     ]
    ],
    "css/css-backgrounds/border-image-repeat_repeatnegx_none_50px.html": [
     [
      "/css/css-backgrounds/border-image-repeat_repeatnegx_none_50px.html",
      {}
     ]
    ],
+   "css/css-backgrounds/box-shadow-syntax-001.html": [
+    [
+     "/css/css-backgrounds/box-shadow-syntax-001.html",
+     {}
+    ]
+   ],
    "css/css-cascade/inherit-initial.html": [
     [
      "/css/css-cascade/inherit-initial.html",
      {}
     ]
    ],
    "css/css-color/color-function-parsing.html": [
     [
@@ -487930,19 +487924,19 @@
   "css/css-backgrounds/box-shadow-outset-spread-without-border-radius.html": [
    "2a8826741073669a06a3469c3ac999d12435c22d",
    "reftest"
   ],
   "css/css-backgrounds/box-shadow-outset-without-border-radius.html": [
    "1e710427338cc278a36ee18861c1e5dd0bf1eaea",
    "reftest"
   ],
-  "css/css-backgrounds/box-shadow-syntax-001.xht": [
-   "e5d83b2b030e91a11ff61a817edcf3cd18411851",
-   "reftest"
+  "css/css-backgrounds/box-shadow-syntax-001.html": [
+   "90c15e29e3675b2dada46ea9d9d940fcb37c5b79",
+   "testharness"
   ],
   "css/css-backgrounds/box-shadow/box-shadow-blur-definition-001.xht": [
    "dd9faf27381c80ab0b5a8f5a706e4ede4a1352e8",
    "visual"
   ],
   "css/css-backgrounds/box-shadow/support/box-shadow-blur-definition-001-dark-bound.png": [
    "a38521e4fc38489f69d305000cbdfbed5a229d13",
    "support"
@@ -488182,20 +488176,16 @@
   "css/css-backgrounds/reference/box-shadow-outset-spread-without-border-radius.html": [
    "9f73c09c8ceb20012bd3ab0eb5b8986fd6d81fdd",
    "support"
   ],
   "css/css-backgrounds/reference/box-shadow-outset-without-border-radius.html": [
    "c372b6c821f526e614c72f8ac2d172f6a238a5f0",
    "support"
   ],
-  "css/css-backgrounds/reference/box-shadow-syntax-001.xht": [
-   "9e7f09a041ab438ced1d4f3b1b656cce19eaf2e4",
-   "support"
-  ],
   "css/css-backgrounds/reference/css-border-radius-ref-001.html": [
    "e2d07f229d4ad8f1734a09305950ca03582729a0",
    "support"
   ],
   "css/css-backgrounds/reference/css-border-radius-ref-002.html": [
    "cfcdb4961be21931be2a328cf2ede70617aa9fd4",
    "support"
   ],
@@ -488274,16 +488264,20 @@
   "css/css-backgrounds/reference/reference.html": [
    "c7c96f00fd4de938d786be2a0a37426f2e2ee982",
    "support"
   ],
   "css/css-backgrounds/reference/ttwf-reftest-borderRadius-ref.html": [
    "121d1dcc21d4fb64b984bf54456bbe40d10f5dd9",
    "support"
   ],
+  "css/css-backgrounds/resources/parsing-testcommon.js": [
+   "b5cc6f7c0c7729328bbbc45ec2a8147dae8d8668",
+   "support"
+  ],
   "css/css-backgrounds/scroll-positioned-multiple-background-images.html": [
    "2fafa8d282711ae7b4a996ca5fe0fd9079c350c6",
    "reftest"
   ],
   "css/css-backgrounds/support/100x100-blue-and-orange.png": [
    "335636269e8b6d681d99df6575ff4b9833cc9566",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/box-shadow-syntax-001.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<title>CSS Test: Box Shadow Syntax: Reordering Components</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"/>
+<meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/parsing-testcommon.js"></script>
+<script>
+  // color only
+  test_valid_value("box-shadow", "4px 4px green", "green 4px 4px");
+  test_valid_value("box-shadow", "green -4px 4px", "green -4px 4px");
+  test_valid_value("box-shadow", "-4px 4px 0 green", "green -4px 4px 0px");
+  test_valid_value("box-shadow", "green -4px 4px 0", "green -4px 4px 0px");
+  test_valid_value("box-shadow", "-4px 4px 0 0 green", "green -4px 4px 0px 0px");
+  test_valid_value("box-shadow", "green -4px 4px 0 0", "green -4px 4px 0px 0px");
+
+  // inset only
+  test_valid_value("box-shadow", "4px -4px inset", "4px -4px inset");
+  test_valid_value("box-shadow", "inset 4px -4px", "4px -4px inset");
+  test_valid_value("box-shadow", "4px -4px 0 inset", "4px -4px 0px inset");
+  test_valid_value("box-shadow", "inset 4px -4px 0", "4px -4px 0px inset");
+  test_valid_value("box-shadow", "4px -4px 0 0 inset", "4px -4px 0px 0px inset");
+  test_valid_value("box-shadow", "inset 4px -4px 0 0", "4px -4px 0px 0px inset");
+
+  // color and inset
+  test_valid_value("box-shadow", "4px -4px green inset", "green 4px -4px inset");
+  test_valid_value("box-shadow", "4px -4px inset green", "green 4px -4px inset");
+  test_valid_value("box-shadow", "inset green 4px -4px", "green 4px -4px inset");
+  test_valid_value("box-shadow", "green inset 4px -4px", "green 4px -4px inset");
+  test_valid_value("box-shadow", "green 4px -4px inset", "green 4px -4px inset");
+  test_valid_value("box-shadow", "inset 4px -4px green", "green 4px -4px inset");
+  test_valid_value("box-shadow", "inset green 4px -4px 0", "green 4px -4px 0px inset");
+  test_valid_value("box-shadow", "green inset 4px -4px 0", "green 4px -4px 0px inset");
+  test_valid_value("box-shadow", "4px -4px 0 green inset", "green 4px -4px 0px inset");
+  test_valid_value("box-shadow", "4px -4px 0 inset green", "green 4px -4px 0px inset");
+  test_valid_value("box-shadow", "green 4px -4px 0 inset", "green 4px -4px 0px inset");
+  test_valid_value("box-shadow", "inset 4px -4px 0 green", "green 4px -4px 0px inset");
+  test_valid_value("box-shadow", "inset green 4px -4px 0 0", "green 4px -4px 0px 0px inset");
+  test_valid_value("box-shadow", "green inset 4px -4px 0 0", "green 4px -4px 0px 0px inset");
+  test_valid_value("box-shadow", "4px -4px 0 0 green inset", "green 4px -4px 0px 0px inset");
+  test_valid_value("box-shadow", "4px -4px 0 0 inset green", "green 4px -4px 0px 0px inset");
+  test_valid_value("box-shadow", "green 4px -4px 0 0 inset", "green 4px -4px 0px 0px inset");
+  test_valid_value("box-shadow", "inset 4px -4px 0 0 green", "green 4px -4px 0px 0px inset");
+
+  test_invalid_value("box-shadow", "red");
+  test_invalid_value("box-shadow", "4px red");
+  test_invalid_value("box-shadow", "red 4px");
+  test_invalid_value("box-shadow", "-4px red 4px");
+  test_invalid_value("box-shadow", "red -4px 4px red");
+  test_invalid_value("box-shadow", "-4px 4px red 0");
+  test_invalid_value("box-shadow", "-4px 4px 0 red 0");
+  test_invalid_value("box-shadow", "inset");
+  test_invalid_value("box-shadow", "inset 4px");
+  test_invalid_value("box-shadow", "4px inset");
+  test_invalid_value("box-shadow", "4px inset -4px");
+  test_invalid_value("box-shadow", "inset 4px -4px inset");
+  test_invalid_value("box-shadow", "4px -4px inset 0");
+  test_invalid_value("box-shadow", "4px -4px 0 inset 0");
+  test_invalid_value("box-shadow", "red inset");
+  test_invalid_value("box-shadow", "inset red");
+  test_invalid_value("box-shadow", "4px red inset");
+  test_invalid_value("box-shadow", "red inset 4px");
+  test_invalid_value("box-shadow", "4px inset red");
+  test_invalid_value("box-shadow", "inset red 4px");
+  test_invalid_value("box-shadow", "4px red inset -4px");
+  test_invalid_value("box-shadow", "4px inset red -4px");
+  test_invalid_value("box-shadow", "inset 4px red -4px");
+  test_invalid_value("box-shadow", "4px red 4px inset");
+  test_invalid_value("box-shadow", "red 4px inset -4px");
+  test_invalid_value("box-shadow", "4px inset -4px red");
+  test_invalid_value("box-shadow", "4px -4px red inset 0");
+  test_invalid_value("box-shadow", "4px -4px inset red 0");
+  test_invalid_value("box-shadow", "inset 4px -4px red 0");
+  test_invalid_value("box-shadow", "4px -4px red 0 inset");
+  test_invalid_value("box-shadow", "red 4px -4px inset 0");
+  test_invalid_value("box-shadow", "4px -4px inset 0 red");
+</script>
+</html>
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-backgrounds/box-shadow-syntax-001.xht
+++ /dev/null
@@ -1,147 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
-  <title>CSS Test: Box Shadow Syntax: Reordering Components</title>
-  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
-  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"/>
-  <link rel="match" href="reference/box-shadow-syntax-001.xht"/>
-  <meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent." />
-  <style type="text/css">
-
-    .container {
-      margin: 4px;
-      border: solid red 4px;
-      padding-top: 1px;
-      border-style: none none solid solid;
-    }
-    .outset {
-      height: 12px;
-      margin: -5px -4px 0 0;
-
-    }
-    .inset {
-      color: green;
-      height: 12px;
-      margin: -1px 0 -4px -4px;
-    }
-
-    /* color */
-    #c1 > div { box-shadow: -4px 4px green;
-                box-shadow: red;
-                box-shadow: 4px red;
-                box-shadow: red 4px;
-                box-shadow: -4px red 4px;
-                box-shadow: red -4px 4px red;
-                box-shadow: -4px 4px red 0;
-                box-shadow: -4px 4px 0 red 0;
-    }
-    #c2 > div { box-shadow: green -4px 4px;       }
-    #c3 > div { box-shadow: -4px 4px 0 green;     }
-    #c4 > div { box-shadow: green -4px 4px 0;     }
-    #c5 > div { box-shadow: -4px 4px 0 0 green;   }
-    #c6 > div { box-shadow: green -4px 4px 0 0;   }
-
-    /* inset */
-    #i1 > div { box-shadow: 4px -4px inset;       }
-    #i2 > div { box-shadow: inset 4px -4px;       }
-    #i3 > div { box-shadow: 4px -4px 0 inset;     }
-    #i4 > div { box-shadow: inset 4px -4px 0;     }
-    #i5 > div { box-shadow: 4px -4px 0 0 inset;   }
-    #i6 > div { box-shadow: inset 4px -4px 0 0;   }
-    #i7       { border-color: green;              }
-    #i7 > div { box-shadow: 4px -4px green inset;
-                color: red;
-                box-shadow: inset;
-                box-shadow: inset 4px;
-                box-shadow: 4px inset;
-                box-shadow: 4px inset -4px;
-                box-shadow: inset 4px -4px inset;
-                box-shadow: 4px -4px inset 0;
-                box-shadow: 4px -4px 0 inset 0;
-  }
-
-
-    /* color and inset */
-    #ci1 > div { box-shadow: 4px -4px green inset;
-
-                 box-shadow: red inset;
-                 box-shadow: inset red;
-
-                 box-shadow: 4px red inset;
-                 box-shadow: red inset 4px;
-                 box-shadow: 4px inset red;
-                 box-shadow: inset red 4px;
-
-                 box-shadow: 4px red inset -4px;
-                 box-shadow: 4px inset red -4px;
-                 box-shadow: inset 4px red -4px;
-                 box-shadow: 4px red 4px inset;
-                 box-shadow: red 4px inset -4px;
-                 box-shadow: 4px inset -4px red;
-
-                 box-shadow: 4px -4px red inset 0;
-                 box-shadow: 4px -4px inset red 0;
-                 box-shadow: inset 4px -4px red 0;
-                 box-shadow: 4px -4px red 0 inset;
-                 box-shadow: red 4px -4px inset 0;
-                 box-shadow: 4px -4px inset 0 red;
-    }
-    #ci2 > div { box-shadow: 4px -4px inset green; }
-    #ci3 > div { box-shadow: inset green 4px -4px; }
-    #ci4 > div { box-shadow: green inset 4px -4px; }
-    #ci5 > div { box-shadow: green 4px -4px inset; }
-    #ci6 > div { box-shadow: inset 4px -4px green; }
-
-    #ci11 > div { box-shadow: inset green 4px -4px 0; }
-    #ci12 > div { box-shadow: green inset 4px -4px 0; }
-    #ci13 > div { box-shadow: 4px -4px 0 green inset; }
-    #ci14 > div { box-shadow: 4px -4px 0 inset green; }
-    #ci15 > div { box-shadow: green 4px -4px 0 inset; }
-    #ci16 > div { box-shadow: inset 4px -4px 0 green; }
-
-    #ci21 > div { box-shadow: inset green 4px -4px 0 0; }
-    #ci22 > div { box-shadow: green inset 4px -4px 0 0; }
-    #ci23 > div { box-shadow: 4px -4px 0 0 green inset; }
-    #ci24 > div { box-shadow: 4px -4px 0 0 inset green; }
-    #ci25 > div { box-shadow: green 4px -4px 0 0 inset; }
-    #ci26 > div { box-shadow: inset 4px -4px 0 0 green; }
-  </style>
- </head>
- <body>
-  <p>There must be 31 green L-shapes below and no red.</p>
-
-<div class="wrapper">
-  <div id="c1" class="container"><div class="outset"></div></div>
-  <div id="c2" class="container"><div class="outset"></div></div>
-  <div id="c3" class="container"><div class="outset"></div></div>
-  <div id="c4" class="container"><div class="outset"></div></div>
-  <div id="c5" class="container"><div class="outset"></div></div>
-  <div id="c6" class="container"><div class="outset"></div></div>
-  <div id="i1" class="container"><div class="inset"></div></div>
-  <div id="i2" class="container"><div class="inset"></div></div>
-  <div id="i3" class="container"><div class="inset"></div></div>
-  <div id="i4" class="container"><div class="inset"></div></div>
-  <div id="i5" class="container"><div class="inset"></div></div>
-  <div id="i6" class="container"><div class="inset"></div></div>
-  <div id="i7" class="container"><div class="inset"></div></div>
-  <div id="ci1" class="container"><div class="inset"></div></div>
-  <div id="ci2" class="container"><div class="inset"></div></div>
-  <div id="ci3" class="container"><div class="inset"></div></div>
-  <div id="ci4" class="container"><div class="inset"></div></div>
-  <div id="ci5" class="container"><div class="inset"></div></div>
-  <div id="ci6" class="container"><div class="inset"></div></div>
-  <div id="ci11" class="container"><div class="inset"></div></div>
-  <div id="ci12" class="container"><div class="inset"></div></div>
-  <div id="ci13" class="container"><div class="inset"></div></div>
-  <div id="ci14" class="container"><div class="inset"></div></div>
-  <div id="ci15" class="container"><div class="inset"></div></div>
-  <div id="ci16" class="container"><div class="inset"></div></div>
-  <div id="ci21" class="container"><div class="inset"></div></div>
-  <div id="ci22" class="container"><div class="inset"></div></div>
-  <div id="ci23" class="container"><div class="inset"></div></div>
-  <div id="ci24" class="container"><div class="inset"></div></div>
-  <div id="ci25" class="container"><div class="inset"></div></div>
-  <div id="ci26" class="container"><div class="inset"></div></div>
-</div>
- </body>
-</html>
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-syntax-001.xht
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
-  <title>CSS Reference</title>
-  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
-  <style type="text/css">
-
-    .container {
-      margin: 4px;
-      border: solid green 4px;
-      padding-top: 1px;
-      border-style: none none solid solid;
-      height: 7px;
-    }
-  </style>
- </head>
- <body>
-  <p>There must be 31 green L-shapes below and no red.</p>
-
-  <div id="c1" class="container"><div></div></div>
-  <div id="c2" class="container"><div></div></div>
-  <div id="c3" class="container"><div></div></div>
-  <div id="c4" class="container"><div></div></div>
-  <div id="c5" class="container"><div></div></div>
-  <div id="c6" class="container"><div></div></div>
-  <div id="i1" class="container"><div></div></div>
-  <div id="i2" class="container"><div></div></div>
-  <div id="i3" class="container"><div></div></div>
-  <div id="i4" class="container"><div></div></div>
-  <div id="i5" class="container"><div></div></div>
-  <div id="i6" class="container"><div></div></div>
-  <div id="i7" class="container"><div></div></div>
-  <div id="ci1" class="container"><div></div></div>
-  <div id="ci2" class="container"><div></div></div>
-  <div id="ci3" class="container"><div></div></div>
-  <div id="ci4" class="container"><div></div></div>
-  <div id="ci5" class="container"><div></div></div>
-  <div id="ci6" class="container"><div></div></div>
-  <div id="ci11" class="container"><div></div></div>
-  <div id="ci12" class="container"><div></div></div>
-  <div id="ci13" class="container"><div></div></div>
-  <div id="ci14" class="container"><div></div></div>
-  <div id="ci15" class="container"><div></div></div>
-  <div id="ci16" class="container"><div></div></div>
-  <div id="ci21" class="container"><div></div></div>
-  <div id="ci22" class="container"><div></div></div>
-  <div id="ci23" class="container"><div></div></div>
-  <div id="ci24" class="container"><div></div></div>
-  <div id="ci25" class="container"><div></div></div>
-  <div id="ci26" class="container"><div></div></div>
- </body>
-</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/resources/parsing-testcommon.js
@@ -0,0 +1,39 @@
+'use strict';
+
+// serializedValue can be the expected serialization of value,
+// or an array of permitted serializations,
+// or omitted if value should serialize as value.
+function test_valid_value(property, value, serializedValue) {
+    if (arguments.length < 3)
+        serializedValue = value;
+
+    var stringifiedValue = JSON.stringify(value);
+
+    test(function(){
+        var div = document.createElement('div');
+        div.style[property] = value;
+        assert_not_equals(div.style[property], "", "property should be set");
+
+        var div = document.createElement('div');
+        div.style[property] = value;
+        var readValue = div.style[property];
+        if (serializedValue instanceof Array)
+            assert_true(serializedValue.includes(readValue), "serialization should be sound");
+        else
+            assert_equals(readValue, serializedValue, "serialization should be canonical");
+
+        div.style[property] = readValue;
+        assert_equals(div.style[property], readValue, "serialization should round-trip");
+
+    }, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
+}
+
+function test_invalid_value(property, value) {
+    var stringifiedValue = JSON.stringify(value);
+
+    test(function(){
+        var div = document.createElement('div');
+        div.style[property] = value;
+        assert_equals(div.style[property], "");
+    }, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
+}