cascading-001.html (1710B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Logical Properties: "A computed value that has logical and physical properties is determined by applying the CSS cascade to declarations of both."</title> 6 <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-box-props"> 8 <link rel="match" href="cascading-001-ref.html"> 9 <meta name="assert" content="Physical property declarations with higher specificity should override logical ones and vice versa."> 10 <style> 11 div { 12 writing-mode: horizontal-tb; 13 direction: ltr; 14 background-color: blue; 15 } 16 .horizontal-logical { 17 inline-size: 100px; 18 block-size: 10px; 19 } 20 #horizontal-logical { 21 inline-size: 100px; 22 block-size: 10px; 23 } 24 .horizontal-physical { 25 width: 100px; 26 height: 10px; 27 } 28 #horizontal-physical { 29 width: 100px; 30 height: 10px; 31 } 32 .vertical-logical { 33 inline-size: 10px; 34 block-size: 100px; 35 } 36 #vertical-logical { 37 inline-size: 10px; 38 block-size: 100px; 39 } 40 .vertical-physical { 41 width: 10px; 42 height: 100px; 43 } 44 #vertical-physical { 45 width: 10px; 46 height: 100px; 47 } 48 </style> 49 </head> 50 <body> 51 <p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p> 52 <div class="horizontal-logical" id="vertical-physical"></div><br> 53 <div class="horizontal-physical" id="vertical-logical"></div><br> 54 <div class="vertical-logical" id="horizontal-physical"></div><br> 55 <div class="vertical-physical" id="horizontal-logical"></div><br> 56 </body> 57 </html>