Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-44936

CSS chunking is not reliable and can break styles on IE

    XMLWordPrintable

Details

    • MOODLE_25_STABLE, MOODLE_26_STABLE, MOODLE_27_STABLE
    • MOODLE_25_STABLE, MOODLE_26_STABLE
    • MDL-44936-master
    • Hide
      • Use IE < 10
      • Set designer mode off
      • Use theme_clean

      Test 1

      1. Load your Moodle and have a brief look around making sure that styles seem to work.
      2. Check the source of the page and notice the link tag to the CSS file for the theme
      3. Open that file in a new tab:
        • Make sure it start with @import statements
        • Make sure the first styles are not broken (starting with a comma, halfway through another style, etc...) - You should probably check the CSS/LESS source to check this
        • Open the @import files, and make sure they start and end with proper rules, and not halfway through another - again, check the original files
        • If you're motivated you can also check that those files do not include more than 4095 selectors...

      Bonus points

      1. Save each of the CSS files as normal files, and use them in a test.html file.
      2. Open IE, and make sure the last rules of the files are visible in the CSS inspector

      Test designer mode enabled

      Requires MDL-44933 for master

      1. Set designer mode to On
      2. Repeat test 1, but this time you will notice more files.
      3. Make sure there are no more than 31 CSS files altogether (count the @import as files).

      Regression testing

      • Repeat test 1 with another theme, perhaps one from moodle.org that has quite some styles.
      • Repeat test 1 with another browser than IE
      Show
      Use IE < 10 Set designer mode off Use theme_clean Test 1 Load your Moodle and have a brief look around making sure that styles seem to work. Check the source of the page and notice the link tag to the CSS file for the theme Open that file in a new tab: Make sure it start with @import statements Make sure the first styles are not broken (starting with a comma, halfway through another style, etc...) - You should probably check the CSS/LESS source to check this Open the @import files, and make sure they start and end with proper rules, and not halfway through another - again, check the original files If you're motivated you can also check that those files do not include more than 4095 selectors... Bonus points Save each of the CSS files as normal files, and use them in a test.html file. Open IE, and make sure the last rules of the files are visible in the CSS inspector Test designer mode enabled Requires MDL-44933 for master Set designer mode to On Repeat test 1, but this time you will notice more files. Make sure there are no more than 31 CSS files altogether (count the @import as files). Regression testing Repeat test 1 with another theme, perhaps one from moodle.org that has quite some styles. Repeat test 1 with another browser than IE

    Description

      The CSS function to chunk the CSS into multiple files is not reliable. And now that we are using Bootstrap it can be a real issue.

      • Chunking can happen in the middle of a media query;
      • Chunking does not support commas within rules.

      Here is a bit of a testcase that demonstrates the problem:

      diff --git a/lib/tests/csslib_test.php b/lib/tests/csslib_test.php
      		 
      index a798e20..0def91a 100644
      		 
      --- a/lib/tests/csslib_test.php
      		 
      +++ b/lib/tests/csslib_test.php
      		 
      @@ -1180,6 +1180,20 @@ CSS;
      		 
               $chunks = css_chunk_by_selector_count($css, 'styles.php?type=test', 2, 0);
      		 
               $this->assertInternalType('array', $chunks);
      		 
               // I don't care what the outcome is, I just want to make sure it doesn't die.
      		 
      +
      		 
      +        // Test media queries.
      		 
      +        $css = '@media (min-width: 980px) { .a,.b{} .c,.d{} }';
      		 
      +        $chunks = css_chunk_by_selector_count($css, 'styles.php?type=test', 2, 0);
      		 
      +        $this->assertCount(2, $chunks);
      		 
      +        $this->assertSame('@media (min-width: 980px) { .a,.b{}}', $chunks[0]);
      		 
      +        $this->assertSame('@media (min-width: 980px) { .c,.d{}}', $chunks[1]);
      		 
      +
      		 
      +        // Test special rules.
      		 
      +        $css = 'a,b{ background-image: linear-gradient(to bottom, #ffffff, #cccccc);}d,e{}';
      		 
      +        $chunks = css_chunk_by_selector_count($css, 'styles.php?type=test', 2, 0);
      		 
      +        $this->assertCount(2, $chunks);
      		 
      +        $this->assertSame('a,b{ background-image: linear-gradient(to bottom, #ffffff, #cccccc);}', $chunks[0]);
      		 
      +        $this->assertSame('d,e{}', $chunks[1]);
      		 
           }
      		 
       
           /**

      It is possible to replicate this bug using IE in designer mode (with MDL-44933 integrated). In non-designer mode I did not experience the issue, but I guess that's just a matter of luck.

      This obviously only affects IE < 10

      Attachments

        Issue Links

          caused a regression

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-45535 CSS chunking breaks media rules if CSS invalid (IE)

          • Minor - Minor loss of function where workaround is possible
          • Closed
          Discovered while testing

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-45084 Chunking ignored for IE9 with theme designer mode disabled

          • Minor - Minor loss of function where workaround is possible
          • Closed
          duplicates

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-44856 IE8&9 CSS "chunking" doesn't seem to work correctly.

          • Major - Major loss of function, incorrect output
          • Closed
          has been marked as being related by

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-45049 Make debugging() useful in background scripts such as styles(_debug).php

          • Minor - Minor loss of function where workaround is possible
          • Closed
          Testing discovered

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-44933 Styles are missing with designer mode enabled in IE < 10

          • Minor - Minor loss of function where workaround is possible
          • Closed

          Activity

            People

              fred Frédéric Massart
              fred Frédéric Massart
              Petr Skoda Petr Skoda
              Damyon Wiese Damyon Wiese
              Dan Poltawski Dan Poltawski
              Amy Groshek, David Scotson, David Woloszyn, Huong Nguyen, Jake Dallimore, Meirza, Michael Hawkins, Raquel Ortega, Safat Shahin, Stevani Andolo, Huong Nguyen, Bas Brands, Mathew May
              Votes:
              1 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                12/May/14