threepointone/glamor

Tests for glamor-reset broken (v3)

Closed this issue · 3 comments

otbe commented

Tests for glamor-reset are broken caused by subtle browser differences. You can reproduce this by change PhantomJS to Chrome in https://github.com/threepointone/glamor/blob/v3/karma.conf.js#L68 and run tests for glamor-reset.

Any ideas how to fix this? :)

cc @ChristopherBiscardi

I dug a bit and while there are a couple differences in the inserted input going on, I don't know that any of them are bugs. tldr; Perhaps the solution is that all we need to test here is that the number of rules inserted matches the number of rules we expect? In any case, we aren't maintaining normalize.css here (which doesn't have these kind of tests), just the ability for glamor to insert the rules. While we're at it, perhaps we should rename glamor-reset to glamor-normalize.css to more accurately reflect the purpose of the module.

The following examples are formatted inside expandable regions as

glamor insertRule
Chrome output
Expected Output
html
insertRule(`html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}`)
html {
  font-family: sans-serif;
  line-height: 1.15;
  text-size-adjust: 100%; // extra line
}
html {
  font-family: sans-serif;
  line-height: 1.15;
}
abbr[title]
insertRule(`abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}`)
abbr[title] {
  border-bottom: none; // no -style
  text-decoration: underline;
}
abbr[title] {
  border-bottom-style: none;
  text-decoration: underline;
}
webkit-file-upload-button
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

insertRule(`::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}`)
::-webkit-file-upload-button { // no *, attributes are differently ordered
  -webkit-appearance: button;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}		
*::-webkit-file-upload-button {
  -webkit-appearance: button;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  line-height: inherit;
}
otbe commented

I like the idea to count the inserted rules as a basic (not very expressive) test. Do you want to add a PR for this?

yup, I'll PR it.