inheritance.html (3499B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Inheritance of CSS Logical Properties and Values properties</title> 6 <link rel="help" href="https://www.w3.org/TR/css-logical-1/#property-index"> 7 <meta name="assert" content="Properties do not inherit."> 8 <meta name="assert" content="Properties have initial values according to the spec."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/inheritance-testcommon.js"></script> 12 </head> 13 <body> 14 <div id="reference-container"> 15 <div id="reference"></div> 16 </div> 17 <div id="container"> 18 <div id="target"></div> 19 </div> 20 <style> 21 #reference-container { 22 width: 300px; 23 } 24 #reference-container, #reference { 25 border-style: solid; /* Avoid border-top-width computed style 0 */ 26 border-top-width: medium; 27 } 28 29 #container, #target { 30 border-block-end-style: solid; /* Avoid border-block-end-width computed style 0 */ 31 border-block-start-style: solid; 32 border-inline-end-style: solid; 33 border-inline-start-style: solid; 34 } 35 36 #container { 37 color: blue; 38 width: 300px; 39 } 40 </style> 41 <script> 42 'use strict'; 43 const blue = "rgb(0, 0, 255)"; 44 const green = "rgb(0, 128, 0)"; 45 const mediumWidth = getComputedStyle(reference).borderTopWidth; // e.g. 3px 46 const referenceWidth = getComputedStyle(reference).width; // e.g. 294px 47 48 assert_not_inherited('block-size', '0px', '10px'); 49 50 assert_not_inherited('border-block-end-color', blue, green); 51 assert_not_inherited('border-block-end-style', 'none', 'dotted'); 52 assert_not_inherited('border-block-end-width', mediumWidth, '10px'); 53 54 assert_not_inherited('border-block-start-color', blue, green); 55 assert_not_inherited('border-block-start-style', 'none', 'dotted'); 56 assert_not_inherited('border-block-start-width', mediumWidth, '10px'); 57 58 assert_not_inherited('border-end-end-radius', '0px', '10px 20px'); 59 assert_not_inherited('border-end-start-radius', '0px', '10px 20px'); 60 61 assert_not_inherited('border-inline-end-color', blue, green); 62 assert_not_inherited('border-inline-end-style', 'none', 'dotted'); 63 assert_not_inherited('border-inline-end-width', mediumWidth, '10px'); 64 65 assert_not_inherited('border-inline-start-color', blue, green); 66 assert_not_inherited('border-inline-start-style', 'none', 'dotted'); 67 assert_not_inherited('border-inline-start-width', mediumWidth, '10px'); 68 69 assert_not_inherited('border-start-end-radius', '0px', '10px 20px'); 70 assert_not_inherited('border-start-start-radius', '0px', '10px 20px'); 71 72 assert_not_inherited('inline-size', referenceWidth, '10px'); 73 74 assert_not_inherited('inset-block-end', 'auto', '10px'); 75 assert_not_inherited('inset-block-start', 'auto', '10px'); 76 assert_not_inherited('inset-inline-end', 'auto', '10px'); 77 assert_not_inherited('inset-inline-start', 'auto', '10px'); 78 79 assert_not_inherited('margin-block-end', '0px', '10px'); 80 assert_not_inherited('margin-block-start', '0px', '10px'); 81 assert_not_inherited('margin-inline-end', '0px', '10px'); 82 assert_not_inherited('margin-inline-start', '0px', '10px'); 83 84 assert_not_inherited('max-block-size', 'none', '10px'); 85 assert_not_inherited('max-inline-size', 'none', '10px'); 86 assert_not_inherited('min-block-size', '0px', '10px'); 87 assert_not_inherited('min-inline-size', '0px', '10px'); 88 89 assert_not_inherited('padding-block-end', '0px', '10px'); 90 assert_not_inherited('padding-block-start', '0px', '10px'); 91 assert_not_inherited('padding-inline-end', '0px', '10px'); 92 assert_not_inherited('padding-inline-start', '0px', '10px'); 93 </script> 94 </body> 95 </html>