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

CSS chunking is not reliable and can break styles on IE

    XMLWordPrintable

    Details

    • Testing Instructions:
      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
    • Affected Branches:
      MOODLE_25_STABLE, MOODLE_26_STABLE, MOODLE_27_STABLE
    • Fixed Branches:
      MOODLE_25_STABLE, MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-44936-master

      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

            Activity

              People

              • Assignee:
                fred Frédéric Massart
                Reporter:
                fred Frédéric Massart
                Peer reviewer:
                Petr Skoda
                Integrator:
                Damyon Wiese
                Tester:
                Dan Poltawski
                Participants:
                Component watchers:
                Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón, Bas Brands, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón
              • Votes:
                1 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  12/May/14