修复miniblink无法显示某个网站的某个图标的bug

这个bug断断续续调试了三天。顺便把css解析温习了一遍。

起因是有大量用户反馈，他们的某个网站用了WEX5的日历控件，控件的切换年月日的图标显示不出来了：

这WEX5 还挺复杂。把网页代码精简了出来，发现单纯精态网页可以显示，动态就不行。

通过阅读wex5的代码，知道这个图标是通过

.prev-year, {

background:url(xxxx)

}

来设置背景图标的。

于是在blink里下断点：

ElementRuleCollector::collectMatchingRules

这里有句if (element.isStyledElement() && element.hasClass())比较关键。

这个函数会在收集元素会命中哪些css 选择器的时候执行。

而这句意思是如果一个元素有class，就走进去，把外部收集到的css样式，如link标签、style标签里的去和这个class对应匹配下。

堆栈如下：

同时在这个SelectorChecker::matchForRelation里会有这句

意思是不光本元素要匹配，父元素等也要。

这时我发现和正常流程比，这个图标父元素居然匹配中了一个样式（x-datePicker-touch）。于是我在SpaceSplitString里加了条件断点，一旦有元素设置了.x-datePicker-touch 这个样式，就中断。此时发现原来是js动态设置的。翻了下wex5的代码，居然是

这句设置的。此时终于明白了。原来miniblink默认开启了触屏的api···导致网站设置了一个pc版本不应该设置的样式。

bug的原因很简单，但调试这堆css的解析逻辑搞了我很久，特此记录一下。