search

HtmlUnit / htmlunit-cssparser

CSS parser used by HtmlUnit
Apache License 2.0
5 stars 9 forks source link

Can't parsing @keyframes, @-webkit-keyframes #16

Closed hil00137 closed 1 year ago

hil00137 commented 1 year ago 
/* before parsed*/

@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
    }
}

@keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
    }
}

Those two css blocks are parsed as CSSUnknownRuleImpl.

/* after parsed */
@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0ems -2.6ems 0ems 0ems #000000, 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.7), 1.8ems -1.8ems 0 0ems #000000, 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.5), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7), 2.5ems 0ems 0 0ems #000000, 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.7), 1.75ems 1.75ems 0 0ems #000000, 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.5), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.7), 0ems 2.5ems 0 0ems #000000, -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.5), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems 1.8ems 0 0ems #000000, -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.7), -2.6ems 0ems 0 0ems #000000, -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.5), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems -1.8ems 0 0ems #000000;
    }
}
@keyframes load5 {
    0%,
    100% {
        box-shadow: 0ems -2.6ems 0ems 0ems #000000, 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.7), 1.8ems -1.8ems 0 0ems #000000, 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.5), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7), 2.5ems 0ems 0 0ems #000000, 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.7), 1.75ems 1.75ems 0 0ems #000000, 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.5), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.7), 0ems 2.5ems 0 0ems #000000, -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.5), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems 1.8ems 0 0ems #000000, -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.7), -2.6ems 0ems 0 0ems #000000, -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.5), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems -1.8ems 0 0ems #000000;
    }
}

The real problem is that all 'em' are changed to 'ems' So when I called toString() method, the css is different from the original css.

Help me How Can I Solved them.

rbri commented 1 year ago

Ups - there as a stupid typo in the skip code of the parser - thins is fixed. Please try with the latest snapshot build

rbri commented 1 year ago

Thanks for noting this, this is also a problem in the original cssparser - have to fix it there also.

hil00137 commented 1 year ago

Thanks for noting this, this is also a problem in the original cssparser - have to fix it there also.

Thanks for the quick fix!