Re: [css-syntax]The emperor isn't naked, but he's wearing his underpants on his head

Gérard Talbot composed on 2016-11-05 21:23 (UTC-0400):

> Gérard Talbot composed:

>> Felix Miata composed:
...
>>> AFAICT, inline styles are
>>> hopelessly immune to user overrides,

>> Hm... no. An author inline style can be (will be and should be)
>> overriden by an user !important class attribute. Untangling
>> specificity only comes after untangling importance. And I believe the
>> CSS 2.1 test suite has not tested this... can not find it in

>> http://test.csswg.org/suites/css2.1/nightly-unstable/html4/chapter-6.htm#s6.4

>> [
>> I think we need to test this... Something like:

>>  <body>
>>         <p id="cascade">PREREQUISITE: The <a
>> href="support/cascade.css">"cascade.css"</a> file is enabled as the
>> user agent's user style sheet.</p>
>>         <p>Test passes if "Text sample" is green.</p>
>>         <h1 class="cascadegreenimportant" style="color: red;">Text
>> sample</h1>
>>  </body>

>> where the user style sheet is:

>> http://test.csswg.org/suites/css2.1/nightly-unstable/html4/support/cascade.css

>> ]

> Felix,

> I just tested this with Stylish 2.0.7 for Firefox

> https://addons.mozilla.org/en-US/firefox/addon/stylish/

> and with

> userScriptCSS 1.4 for Chrome

> https://chrome.google.com/webstore/detail/userscriptcss/pdfbjinabdohnegjnbfgdgohlhegamnm

> on this test:

> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/cascade-013.xht

> and it works. Firefox 49.0.2 and Chrome 54.0.2840.90 pass this test.

That's too easy. Try overcoming all too common real world markup like the red 
H1 following:

   <body>
          <p id="cascade">PREREQUISITE: The <a
  href="support/cascade.css">"cascade.css"</a> file is enabled as the
  user agent's user style sheet.</p>
          <p>Test passes if "Text sample" is green.</p>
          <h1 style="color: red;">Text sample</h1>
   </body>

with
#user-stylesheet-indication
{
     /* Used by the harness to display and indication there is a 
user-stylesheet applied */
     display: block!important;
}
#cascade
{
     /* Used by the test to hide the prerequsite */
     display: none;
}
.cascadered
{
     color: red;
}
.cascadegreen
{
     color: green;
}
#cascade h1
{
     color: green!important;
}

H1 is red in Firefox 49.0.2 here.

Be sure also to try it the hard way, text editor on userContent.css instead 
of an extension.

Real world example similar to above can probably be found on 
http://www.imdb.com/ and/or http://www.tvguide.com/ .
-- 
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

  Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/

Received on Monday, 14 November 2016 06:09:56 UTC