When creating new stylesheet from a string it uses cached selector names/formatting

Confirmed Issue #14194158 • Assigned to Travis L.

Details

Author
Krzysztof K.
Created
Oct 12, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16257
Reports
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

This was quite interesting finding. In CKEditor we use a code which creates a new stylesheet from given CSS string (when processing content pasted from Word - https://github.com/ckeditor/ckeditor-dev/blob/6102c2b5220d8cedbc992229d15e787f547d7a9f/plugins/pastefromword/filter/default.js#L780).

In some particular cases we noticed that even though we pass the CSS string lowercased to this parse function the result contains selectors camelcased (it is described in detail here: https://github.com/ckeditor/ckeditor-dev/issues/1042). The parse function “translated” to pure JS without CKEditor deps looks like this:

function createIsolatedStylesheet( styles ) {
  var style = document.createElement( 'style' ),
      iframe = document.createElement( 'iframe' );

  iframe.style[ 'display' ] = 'none';
  document.body.appendChild( iframe );
  iframe.contentDocument.documentElement.appendChild( style );

  style.textContent = styles;
  iframe.remove();
  return style.sheet;
}

It seems that when document contains style tag with some CSS containing this exact selector, when same selector is used when creating new stylesheet its name/value uses same formatting (when it comes to upper/lowercasing).

I created two codepen samples:

I’m not sure, but you may need to clear browser cache between running those samples.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “travil”

      Changed Assigned To from “travil” to “Travis L.”

      Changed Status to “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in