presentational-hints-cascade.html (1024B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#preshint"> 3 <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .test { 8 height: 100px; 9 background-color: green; 10 } 11 12 #target1 { 13 width: 100px; 14 } 15 16 @layer { 17 #target3 { 18 width: 100px; 19 } 20 } 21 </style> 22 23 <img class=test id=target1 width=200> 24 <img class=test id=target2 width=200 style="width: 100px"> 25 <img class=test id=target3 width=200> 26 27 <script> 28 test(() => { 29 assert_equals(getComputedStyle(target1).width, '100px'); 30 }, 'Presentational hints have lower precedence than regular author style sheets'); 31 32 test(() => { 33 assert_equals(getComputedStyle(target2).width, '100px'); 34 }, 'Presentational hints have lower precedence than the style attribute'); 35 36 test(() => { 37 assert_equals(getComputedStyle(target3).width, '100px'); 38 }, 'Presentational hints have lower precedence than layered style'); 39 </script>