important-vs-inline-002.html (1288B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Cascade: inline style loses to !important</title> 6 <link rel="help" href="https://www.w3.org/TR/css-cascade-4/#cascade-sort"> 7 <link rel="author" href="mailto:sesse@chromium.org"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 .outer { 12 font-size: 18px !important; 13 line-height: 2em; 14 border: 1px solid black; 15 } 16 </style> 17 </head> 18 <body> 19 <p class="outer" id="el">Test passes if the line-height is twice the font size.</p> 20 </body> 21 <script> 22 test(() => { 23 el.offsetTop; 24 assert_equals(getComputedStyle(el).lineHeight, "36px", "style is set correctly"); 25 }); 26 test(() => { 27 el.offsetTop; 28 el.style.fontSize = "24px"; 29 assert_equals(getComputedStyle(el).lineHeight, "36px", "!important has higher priority than adding inline style"); 30 }); 31 test(() => { 32 el.offsetTop; 33 el.style.fontSize = "36px"; 34 assert_equals(getComputedStyle(el).lineHeight, "36px", "!important has higher priority than modifying inline style"); 35 }); 36 test(() => { 37 el.offsetTop; 38 el.style.fontSize = null; 39 assert_equals(getComputedStyle(el).lineHeight, "36px", "!important has higher priority than removing inline style"); 40 }); 41 </script> 42 </html>