Test: Vendor Prefix tests

[TheJaredWilcurt]

I think there should be a /tests/vendor-prefixes folder that enforces adding or removing prefixes based on last 1 versions (from Browserlist).

Potentials for automation:

• Might be possible to use the data from Autoprefixer to get a list of all vendor prefixes, and maybe even do a one-time auto-generation of a bunch of tests. And maybe even a JSON file that lists all the ones we've already got covered so we can re-run the script in the future to only add new ones.
  • Once the basic test is created, it could be manually edited/customized as needed.
• Might be possible to automate running Autoprefixer against the expected.css files to see if anything has changed regarding browser support since the test was made.

---

Removal test example:

# Removes border-radius vendor prefixes

The `border-radius` property no longer requires vendor prefixes in the latest
browsers and can be removed.

.a {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
       -o-border-radius: 10px;
          border-radius: 10px;
}
.b {
  border-radius: 10px;
}

.a,.b{border-radius:20px}

---

Example additive test:

# Add in vendor prefixes for text-size-adjust

The `text-size-adjust` property requires vendor prefixes to work in the latest
browsers.

.a {
  -webkit-text-size-adjust: 80%;
     -moz-text-size-adjust: 80%;
      -ms-text-size-adjust: 80%;
          text-size-adjust: 80%;
}
.b {
  text-size-adjust: 80%;
}

.a,.b{-webkit-text-size-adjust:80%;-moz-text-size-adjust:80%;-ms-text-size-adjust:80%;text-size-adjust:80%}

---

Some tests, can be more context focused, rather than just a single property/value, such as gradients:

# Remove background gradient-related vendor prefixes

The latest browsers support background gradients without the need for
vendor-specific code. They can be removed to reduce size.

.a {
  background-image: -moz-linear-gradient(top, #eee, #ddd);
  background-image: -ms-linear-gradient(top, #eee, #ddd);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#ddd));
  background-image: -webkit-linear-gradient(top, #eee, #ddd);
  background-image: -o-linear-gradient(top, #eee, #ddd);
  background-image: linear-gradient(top, #eee, #ddd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); 
}
.b {
  background-image: linear-gradient(top, #eee, #ddd);
}

.a,.b{background-image:linear-gradient(top,#eee,#ddd)}