/**
 * @license
 * Copyright The Closure Library Authors.
 * SPDX-License-Identifier: Apache-2.0
 */

/** @fileoverview testcases for CSS Sanitizer. */

goog.module('goog.html.CssSanitizerTest');
goog.setTestOnly();

const CssSanitizer = goog.require('goog.html.sanitizer.CssSanitizer');
const SafeStyle = goog.require('goog.html.SafeStyle');
const SafeStyleSheet = goog.require('goog.html.SafeStyleSheet');
const SafeUrl = goog.require('goog.html.SafeUrl');
const dom = goog.require('goog.testing.dom');
const googString = goog.require('goog.string');
const isVersion = goog.require('goog.userAgent.product.isVersion');
const product = goog.require('goog.userAgent.product');
const testSuite = goog.require('goog.testing.testSuite');
const testing = goog.require('goog.html.testing');
const userAgent = goog.require('goog.userAgent');

const isSafari9OrOlder = product.SAFARI && !isVersion(10);

/**
 * @param {string} cssText CSS text usually associated with an inline style.
 * @return {!CSSStyleDeclaration} A styleSheet object.
 */
function getStyleFromCssText(cssText) {
  const styleDecleration = document.createElement('div').style;
  styleDecleration.cssText = cssText || '';
  return styleDecleration;
}

/**
 * Asserts that the expected CSS text is equal to the actual CSS text.
 * @param {string} expectedCssText Expected CSS text.
 * @param {string} actualCssText Actual CSS text.
 */
function assertCSSTextEquals(expectedCssText, actualCssText) {
  assertEquals(
      getStyleFromCssText(expectedCssText).cssText,
      getStyleFromCssText(actualCssText).cssText);
}

/**
 * Gets sanitized inline style.
 * @param {string} sourceCss CSS to be sanitized.
 * @param {function (string, string):?SafeUrl=} urlRewrite URL rewriter that
 *     only returns a SafeUrl.
 * @return {string} Sanitized inline style.
 */
function getSanitizedInlineStyle(sourceCss, urlRewrite = undefined) {
  try {
    return SafeStyle.unwrap(CssSanitizer.sanitizeInlineStyle(
               getStyleFromCssText(sourceCss), urlRewrite)) ||
        '';
  } catch (err) {
    // IE8 doesn't like setting invalid properties. It throws an "Invalid
    // Argument" exception.
    throw err;
  }
}

/**
 * Asserts that the input CSS text is equal to the expected CSS text after
 * sanitization using {@link CssSanitizer.sanitizeStyleSheetString}.
 * @param {string} expectedCssText
 * @param {string} inputCssText
 * @param {?string=} containerId
 * @param {function(string, string):?SafeUrl=} uriRewriter
 */
function assertSanitizedCssEquals(
    expectedCssText, inputCssText, containerId = undefined,
    uriRewriter = undefined) {
  assertBrowserSanitizedCssEquals(
      {chrome: expectedCssText}, inputCssText, containerId, uriRewriter);
}

/**
 * Asserts that on each browser the input CSS text is equal to the expected CSS
 * text after sanitization using {@link CssSanitizer.sanitizeStyleSheetString}.
 * Automatically verifies that on older browsers the sanitizer returns an empty
 * string.
 * @param {{
 *     chrome: string,
 *     firefox: (string|undefined),
 *     safari: (string|undefined),
 *     newIE: (string|undefined)}} expectedCssTextByBrowser An object that maps
 * each browser to a different expected value. All browsers but chrome are
 * optional. If a browser is missing, the chrome expected value is used instead.
 * @param {string} inputCssText
 * @param {?string=} containerId
 * @param {function(string, string):?SafeUrl=} uriRewriter
 */
function assertBrowserSanitizedCssEquals(
    expectedCssTextByBrowser, inputCssText, containerId = undefined,
    uriRewriter = undefined) {
  let expectedCssText = undefined;
  if (product.CHROME) {
    expectedCssText = expectedCssTextByBrowser.chrome;
  } else if (product.FIREFOX) {
    expectedCssText = expectedCssTextByBrowser.firefox;
  } else if (product.SAFARI) {
    expectedCssText = expectedCssTextByBrowser.safari;
  } else if (product.IE || product.EDGE) {
    expectedCssText = expectedCssTextByBrowser.newIE;
  } else {
    throw new Error('Unrecognized browser, this function needs to be updated.');
  }
  if (expectedCssText == undefined) {
    expectedCssText = expectedCssTextByBrowser.chrome;
  }
  assertEquals(
      expectedCssText,
      SafeStyleSheet.unwrap(CssSanitizer.sanitizeStyleSheetString(
          inputCssText, containerId === undefined ? 'foo' : containerId,
          uriRewriter)));
}

/**
 * Converts rules in STYLE tags into style attributes on the tags they apply to,
 * and returns a new string.
 * @param {string} html
 * @return {string}
 */
function inlineStyleRulesString(html) {
  const tree =
      CssSanitizer.safeParseHtmlAndGetInertElement(`<span>${html}</span>`);
  if (tree == null) {
    return '';
  }
  CssSanitizer.inlineStyleRules(tree);
  return tree.innerHTML;
}

/**
 * Inlines the rules in STYLE tags in the original HTML and asserts that it is
 * the same as the expected HTML.
 * @param {string} expectedHtml
 * @param {string} originalHtml
 */
function assertInlinedStyles(expectedHtml, originalHtml) {
  const inlinedHtml = inlineStyleRulesString(originalHtml);
  dom.assertHtmlMatches(
      expectedHtml, inlinedHtml, true /* opt_strictAttributes */);
}

/**
 * @param {string} expectedCssText
 * @param {string} inputCssText
 * @param {function(string, string):?SafeUrl=} uriRewriter A URI rewriter that
 *     returns a SafeUrl.
 */
function assertInlineStyleStringEquals(
    expectedCssText, inputCssText, uriRewriter = undefined) {
  if (userAgent.IE && document.documentMode < 10) {
    expectedCssText = '';
  }

  const safeStyle =
      CssSanitizer.sanitizeInlineStyleString(inputCssText, uriRewriter);
  const output = SafeStyle.unwrap(safeStyle);
  assertCSSTextEquals(expectedCssText, output);
}

testSuite({
  testValidCss() {
    let actualCSS = 'font-family: inherit';
    let expectedCSS = 'font-family: inherit';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    // .1 -> 0.1; 1.0 -> 1
    actualCSS = 'padding: 1pt .1pt 1pt 1.0em';
    expectedCSS = 'padding: 1pt 0.1pt 1pt 1em';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    // Negative margins are allowed.
    actualCSS = 'margin:    -7px -.5px -23px -1.25px';
    expectedCSS = 'margin: -7px -0.5px -23px -1.25px';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    actualCSS = 'quotes: "{" "}" "<" ">"';
    expectedCSS = 'quotes: "{" "}" "<" ">";';
    if (isSafari9OrOlder) {
      // We never figured out why Safari didn't work here, but it's obsolete
      // now.
      expectedCSS = 'quotes: \'{\';';
    }
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));
  },

  testInvalidCssRemoved() {
    let actualCSS;

    // Tests all have null results.
    const expectedCSS = '';

    actualCSS = 'font: Arial Black,monospace,Helvetica,#88ff88';
    // Hash values are not allowed so are dropped.
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    // Negative numbers for border not allowed.
    actualCSS = 'border : -7px -0.5px -23px -1.25px';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    // Negative numbers converted to empty.
    actualCSS = 'padding: -0 -.0 -0. -0.0 ';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    // Invalid values not allowed.
    actualCSS = 'padding : #123 - 5 "5"';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    // Font-family does not allow quantities at all.
    actualCSS = 'font-family: 7 .5 23 1.25 -7 -.5 -23 -1.25 +7 +.5 +23 +1.25 ' +
        '7cm .5em 23.mm 1.25px -7cm -.5em -23.mm -1.25px ' +
        '+7cm +.5em +23.mm +1.25px 0 .0 -0+00.0 /';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));

    actualCSS = 'background: bogus url("foo.png") transparent';
    assertCSSTextEquals(
        expectedCSS, getSanitizedInlineStyle(actualCSS, SafeUrl.sanitize));

    // expression(...) is not allowed for font so is rejected wholesale -- the
    // internal string "pwned" is not passed through.
    actualCSS =
        'font-family: Arial Black,monospace,expression(return "pwned"),' +
        'Helvetica,#88ff88';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));
  },

  testCssBackground() {
    let actualCSS;
    let expectedCSS;

    function proxyUrl(url) {
      return testing.newSafeUrlForTest(`https://goo.gl/proxy?url=${url}`);
    }

    // Don't require the URL sanitizer to protect string boundaries.
    actualCSS = 'background-image: url("javascript:evil(1337)")';
    expectedCSS = '';
    assertCSSTextEquals(
        expectedCSS, getSanitizedInlineStyle(actualCSS, SafeUrl.sanitize));

    actualCSS = 'background-image: url("http://goo.gl/foo.png")';
    expectedCSS =
        'background-image: url(https://goo.gl/proxy?url=http://goo.gl/foo.png)';
    assertCSSTextEquals(
        expectedCSS, getSanitizedInlineStyle(actualCSS, proxyUrl));

    // Without any URL sanitizer.
    actualCSS = 'background: transparent url("Bar.png")';
    const sanitizedCss = getSanitizedInlineStyle(actualCSS);
    assertFalse(googString.contains(sanitizedCss, 'background-image'));
    assertFalse(googString.contains(sanitizedCss, 'Bar.png'));
  },

  testVendorPrefixed() {
    const actualCSS = '-webkit-text-stroke: 1px red';
    const expectedCSS = '';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));
  },

  testDisallowedFunction() {
    const actualCSS = 'border-width: calc(10px + 20px)';
    const expectedCSS = '';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));
  },

  testColor() {
    const colors = [
      'red',
      'Red',
      'RED',
      'Gray',
      'grey',
      '#abc',
      '#123',
      '#ABC123',
      'rgb( 127, 64 , 255 )',
    ];
    const notcolors = [
      // Finding words that are not X11 colors is harder than you think.
      'killitwithfire', 'invisible', 'expression(red=blue)', '#aa-1bb',
      '#expression', '#doevil'
      // 'rgb(0, 0, 100%)' // Invalid in all browsers
      // 'rgba(128,255,128,50%)', // Invalid in all browsers
    ];

    for (let i = 0; i < colors.length; ++i) {
      const validColorValue = 'color: ' + colors[i];
      assertCSSTextEquals(
          validColorValue, getSanitizedInlineStyle(validColorValue));
    }

    for (let i = 0; i < notcolors.length; ++i) {
      const invalidColorValue = 'color: ' + notcolors[i];
      assertCSSTextEquals('', getSanitizedInlineStyle(invalidColorValue));
    }
  },

  testCustomVariablesSanitized() {
    const actualCSS = '\\2d-leak: leakTest; background: var(--leak);';
    assertCSSTextEquals('', getSanitizedInlineStyle(actualCSS));
  },

  testExpressionsPreserved() {

    let actualCSS;
    let expectedCSS;

    actualCSS = 'background-image: linear-gradient(to bottom right, red, blue)';
    expectedCSS =
        'background-image: linear-gradient(to right bottom, red, blue)';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));
  },

  testMultipleInlineStyles() {
    const actualCSS = 'margin: 1px ; padding: 0';
    const expectedCSS = 'margin: 1px; padding: 0px;';
    assertCSSTextEquals(expectedCSS, getSanitizedInlineStyle(actualCSS));
  },

  testSanitizeInlineStyleString_basic() {
    assertInlineStyleStringEquals('', '');
    assertInlineStyleStringEquals('color: red;', 'color: red');
    assertInlineStyleStringEquals(
        'color: green; padding: 10px;', 'color: green; padding: 10px');
  },

  testSanitizeInlineStyleString_malicious() {
    assertInlineStyleStringEquals('', 'color: expression("pwned")');
  },

  testSanitizeInlineStyleString_url() {
    assertInlineStyleStringEquals(
        '', 'background-image: url("http://example.com")');

    assertInlineStyleStringEquals(
        '', 'background-image: url("http://example.com")', (uri) => null);
    assertInlineStyleStringEquals(
        'background-image: url("http://example.com");',
        'background-image: url("http://example.com")', SafeUrl.sanitize);
  },

  testSanitizeInlineStyleString_unbalancedParenthesesInUnquotedUrl() {
    assertEquals(
        '',
        SafeStyle.unwrap(CssSanitizer.sanitizeInlineStyleString(
            'background-image: url(http://example.com/aaa(a)',
            SafeUrl.sanitize)));
    assertEquals(
        '',
        SafeStyle.unwrap(CssSanitizer.sanitizeInlineStyleString(
            'background-image: url(http://example.com/aaa)a)',
            SafeUrl.sanitize)));
  },

  testSanitizeInlineStyleString_preservesCase() {
    assertInlineStyleStringEquals(
        'font-family: Roboto, sans-serif', 'font-family: Roboto, sans-serif');
  },

  testSanitizeInlineStyleString_simpleFunctions() {
    let expectedCss = 'color: rgb(1,2,3);';
    assertInlineStyleStringEquals(expectedCss, expectedCss);
    expectedCss = 'background-image: linear-gradient(red, blue);';
    assertInlineStyleStringEquals(expectedCss, expectedCss);
  },

  testSanitizeInlineStyleString_nestedFunction() {
    const expectedCss =
        'background-image: linear-gradient(217deg, rgba(255,0,0,.8), blue);';
    assertInlineStyleStringEquals(expectedCss, expectedCss);
  },

  testSanitizeInlineStyleString_repeatingLinearGradient() {
    const expectedCss = 'background-image: repeating-linear-gradient(' +
        '-45deg, rgb(66, 133, 244), rgb(66, 133, 244) 4px, ' +
        'rgb(255, 255, 255) 4px, rgb(255, 255, 255) 5px, ' +
        'rgb(66, 133, 244) 5px, rgb(66, 133, 244) 8px);';
    assertInlineStyleStringEquals(expectedCss, expectedCss);
  },

  testSanitizeInlineStyleString_noUrlPropertyValueFanOut() {
    if (userAgent.IE && document.documentMode < 10) {
      return;
    }
    // Property fanout is ok, but value fanout isn't, because it would lead to
    // CssPropertySanitizer dropping the value. Check that no browser does
    // value fanout.
    const safeStyle = CssSanitizer.sanitizeInlineStyleString(
        'background: url("http://foo.com/a")', SafeUrl.sanitize);
    const output = SafeStyle.unwrap(safeStyle);
    // We can't use assertInlineStyleStringEquals, the browser is inconsistent
    // about fanout of properties. We'll use plain substring matching instead.
    assertContains('url("http://foo.com/a")', output);
  },

  testSanitizeStyleSheetString_basic() {
    let input = '';
    assertSanitizedCssEquals(input, input);

    input = 'a {color: red}';
    let expected = '#foo a{color: red;}';
    assertSanitizedCssEquals(expected, input);

    input = 'a {color: red} b {color:red; not-allowed: 1; ' +
        'background-image: url(\'http://not.allowed\');}';
    expected = '#foo a{color: red;}#foo b{color: red;}';
    assertSanitizedCssEquals(expected, input);
  },

  testSanitizeInlineStyleString_noSelector() {
    const input = 'a{color: red;}';
    assertSanitizedCssEquals(input, input, null /* opt_containerId */);
  },

  testSanitizeStyleSheetString_comma() {
    const input = 'a, b, c > d {color: red}';
    const expected = '#foo a,#foo b,#foo c > d{color: red;}';
    assertSanitizedCssEquals(expected, input);
  },

  testSanitizeStyleSheetString_atRule() {
    const input = '@media screen { a { color: red; } }';
    const expected = '';
    assertSanitizedCssEquals(expected, input);
  },

  testSanitizeStyleSheetString_borderSpacing() {
    const input = 'table { border-spacing: 0px; }';
    const expected = '#foo table{border-spacing: 0px;}';
    assertSanitizedCssEquals(expected, input);
  },

  testSanitizeStyleSheetString_urlRewrite() {
    const urlRewriter = (url) => {
      if (input.indexOf('bar') > -1) {
        return SafeUrl.sanitize(url);
      } else {
        return null;
      }
    };

    let input = 'a {background-image: url("http://bar.com")}';
    const quoted = '#foo a{background-image: url("http://bar.com");}';
    assertBrowserSanitizedCssEquals(
        {safari: quoted, chrome: quoted}, input,
        undefined /* opt_containerId */, urlRewriter);

    input = 'a {background-image: url("http://nope.com")}';
    let expected = '#foo a{}';
    assertSanitizedCssEquals(
        expected, input, undefined /* opt_containerId */, urlRewriter);

    input = 'a{background-image: url("javascript:alert(\"bar\")")}';
    expected = '#foo a{}';
    assertSanitizedCssEquals(
        expected, input, undefined /* opt_containerId */, urlRewriter);
  },

  testSanitizeStyleSheetString_unrecognized() {
    const input = 'a {mso-font-size: 2px; color: black}';
    const expected = 'a{color: black;}';
    assertSanitizedCssEquals(expected, input, null /* opt_containerId */);
  },

  testSanitizeStyleSheetString_malformed() {
    let input = '<script>alert(1)</script>';
    let expected = '';
    assertSanitizedCssEquals(expected, input);

    input = 'a { } </style><script>alert(1)</script><style>';
    expected = '#foo a{}';
    assertSanitizedCssEquals(expected, input);

    input = 'a < b { } a { font-size: 10px }';
    expected = '#foo a{font-size: 10px;}';
    assertSanitizedCssEquals(expected, input);

    input =
        'a {;;;} a { font-size: 10px } ;;; a { background-image: url(() }};;';
    expected = '#foo a{}#foo a{font-size: 10px;}';
    assertSanitizedCssEquals(expected, input);

    input = 'a[a=\"ccc] { color: red;}';
    expected = '';
    assertSanitizedCssEquals(expected, input);
  },

  testSanitizeStyleSheetString_stringWithNoEscapedQuotesInSelector() {
    let input = 'a[data-foo="foo,bar"], b { color: red }';
    // IE converts the string to single quotes.
    let doubleQuoted = '#foo a[data-foo="foo,bar"],#foo b{color: red;}';
    let singleQuoted = '#foo a[data-foo=\'foo,bar\'],#foo b{color: red;}';
    assertBrowserSanitizedCssEquals(
        {chrome: doubleQuoted, newIE: singleQuoted}, input);

    input = 'a[data-foo=\'foo,bar\'], b { color: red }';
    // Chrome converts the string to double quotes.
    doubleQuoted = '#foo a[data-foo="foo,bar"],#foo b{color: red;}';
    singleQuoted = '#foo a[data-foo=\'foo,bar\'],#foo b{color: red;}';
    assertBrowserSanitizedCssEquals(
        {chrome: doubleQuoted, newIE: singleQuoted}, input);

    input = 'a[foo="foo,bar"][bar="baz"], b { color: blue }';
    doubleQuoted = '#foo a[foo="foo,bar"][bar="baz"],#foo b{color: blue;}';
    singleQuoted = '#foo a[foo=\'foo,bar\'][bar=\'baz\'],#foo b{color: blue;}';
    assertBrowserSanitizedCssEquals(
        {chrome: doubleQuoted, newIE: singleQuoted}, input);

    input = 'a[foo="foo,bar"], b, c[foo="f,b"][bar="f,b"] { color: red }';
    doubleQuoted = '#foo a[foo="foo,bar"],#foo b,#foo c[foo="f,b"][bar="f,b"]' +
        '{color: red;}';
    singleQuoted =
        '#foo a[foo=\'foo,bar\'],#foo b,#foo c[bar=\'f,b\'][foo=\'f,b\']' +
        '{color: red;}';
    assertBrowserSanitizedCssEquals(
        {chrome: doubleQuoted, newIE: singleQuoted}, input);
  },

  testSanitizeStyleSheetString_stringWithEscapedQuotesInSelector() {
    // Contains an escaped string, but the selector is converted to a[a='a"b']
    // before the regex is executed.
    let input = 'a[a="a\\"b"] { color: black; }';
    let doubleQuoted = '#foo a[a="a\\"b"]{color: black;}';
    let singleQuoted = '#foo a[a=\'a"b\']{color: black;}';
    assertBrowserSanitizedCssEquals(
        {chrome: doubleQuoted, newIE: singleQuoted}, input);

    input = 'a[a="a\\\'b"] { color: grey; }';
    doubleQuoted = '#foo a[a="a\'b"]{color: grey;}';
    singleQuoted = '#foo a[a=\'a\\\'b\']{color: grey;}';
    assertBrowserSanitizedCssEquals(
        {
          chrome: doubleQuoted,
          firefox: doubleQuoted,
          newIE: singleQuoted,
        },
        input);

    input = 'a[a=\'\\\'b\'] {color: red; }';
    doubleQuoted = '#foo a[a="\'b"]{color: red;}';
    singleQuoted = '#foo a[a=\'\\\'b\']{color: red;}';
    assertBrowserSanitizedCssEquals(
        {
          chrome: doubleQuoted,
          firefox: doubleQuoted,
          newIE: singleQuoted,
        },
        input);

    input = 'a[foo=\'b\\\'a, ,\'] { color: blue; }';
    doubleQuoted = '#foo a[foo="b\'a, ,"]{color: blue;}';
    singleQuoted = '#foo a[foo=\'b\\\'a, ,\']{color: blue;}';
    assertBrowserSanitizedCssEquals(
        {
          chrome: doubleQuoted,
          firefox: doubleQuoted,
          newIE: singleQuoted,
        },
        input);

    input = 'a[a=\'a\\"b\'] { color: black; }';
    doubleQuoted = '#foo a[a="a\\"b"]{color: black;}';
    singleQuoted = '#foo a[a=\'a"b\']{color: black;}';
    assertBrowserSanitizedCssEquals(
        {chrome: doubleQuoted, newIE: singleQuoted}, input);
  },

  testSanitizeInlineStyleString_invalidSelector() {
    const input = 'a{}';
    assertThrows(() => {
      CssSanitizer.sanitizeStyleSheetString(input, '</style>');
    });
  },

  testInlineStyleRules_empty() {
    assertInlinedStyles('', '');
  },

  testInlineStyleRules_basic() {
    const input = '<style>a{color:red}</style><a>foo</a>';
    const expected = '<a style="color:red;">foo</a>';
    assertInlinedStyles(expected, input);
  },

  testInlineStyleRules_onlyStyle() {
    const input = '<style>a{color:red}</style>';
    assertInlinedStyles('', input);
  },

  testInlineStyleRules_noStyle() {
    const input = '<a>hi</a>';
    assertInlinedStyles(input, input);
  },

  testInlineStyleRules_onlyText() {
    const input = 'hello';
    assertInlinedStyles(input, input);
  },

  testInlineStyleRules_specificity() {
    // Assert that the #foo style is applied over the <a> style (ID selectors
    // have a higher specificity).
    const input = '<style>a{color: red; border: 1px}' +
        '#foo{color: white; border: 2px}</style>' +
        '<a id="foo" style="color: black">foo</a>';
    const expected = '<a id="foo" style="color: black; border: 2px">foo</a>';
    assertInlinedStyles(expected, input);
  },

  testInlineStyleRules_specificity_reverse() {
    // Assert that the style rule with greater specificity (#foo) wins
    // regardless of the order of appearance.
    const input = '<style>#foo{color: white; border: 2px}' +
        'a{color: red; border: 1px}</style>' +
        '<a id="foo" style="color: black">foo</a>';
    const expected = '<a id="foo" style="color: black; border: 2px">foo</a>';
    assertInlinedStyles(expected, input);
  },

  testInlineStyleRules_specificityTie_lastRuleWins() {
    // In case of a specificity tie, assert that the last style rule defined
    // wins.
    const input =
        '<style>.zoo{color: blue} .foo.bar{color: red} .bar.zoo{color: white}' +
        '</style><a class="foo bar zoo">foo</a>';
    const expected = '<a class="foo bar zoo" style="color: white">foo</a>';
    assertInlinedStyles(expected, input);
  },

  testInlineStyleRules_media() {
    const input =
        '<style>a{color: red;} @media screen { border: 1px; }</style>' +
        '<a id="foo">foo</a>';
    const expected = '<a id="foo" style="color: red;">foo</a>';
    assertInlinedStyles(expected, input);
  },

  testInlineStyleRules_background() {
    const input = '<style>a{background: none;}</style><a id="foo">foo</a>';
    const expected = product.SAFARI ?
        // Safari will expand multi-value properties such as background, border,
        // etc into multiple properties. The result is more verbose but it
        // should not affect the effective style.
        ('<a id="foo" style="background-image: none; ' +
         'background-position: initial initial; ' +
         'background-repeat: initial initial;">foo</a>') :
        '<a id="foo" style="background: none;">foo</a>';
    assertInlinedStyles(expected, input);
  },
});
