mq-case-insensitive-001.html (1443B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <html> 4 <head> 5 <title>Test: ASCII-case-insensitivity of media queries</title> 6 <link rel="author" title="Gerald Squelart" href="mailto:gerald@mozilla.com"> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#characters"> 8 <link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#mq-syntax"> 9 <link rel="help" href="https://drafts.csswg.org/css-syntax/#rule-defs"> 10 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 11 <style type="text/css"> 12 13 div { 14 width: 100px; 15 height: 100px; 16 } 17 18 @media all and (height) and (min-width:0) and (orientation:landscape) { 19 div { background-color: red; } 20 } 21 @media all and (height) and (min-width:0) and (orientation:portrait) { 22 div { background-color: red; } 23 } 24 25 @MeDIa aLL and (Height) and (mIN-Width:0cM) and (orienTAtion:LandScape) { 26 div { background-color: green; } 27 } 28 @MeDIa All and (heiGHt) and (Min-widtH:0MM) and (Orientation:porTrait) { 29 div { background-color: green; } 30 } 31 32 /* In some languages Non-ASCII 'İ' (Latin capital I with dot above) may be 33 lowercased to ASCII 'i'; This would make "heİght" compare the same as 34 "height", which would be incorrect. */ 35 @media all and (heİght) { 36 div { background-color: red; } 37 } 38 39 </style> 40 </head> 41 <body> 42 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 43 <div></div> 44 </body> 45 </html>