whitespace.html (2183B)
1 <!doctype html> 2 <title>CSS Whitespace</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <meta name="author" title="Tab Atkins-Bittner"> 7 <link rel=help href="https://drafts.csswg.org/css-syntax/#whitespace"> 8 9 <div class=a><b></b></div> 10 <div id=foo></div> 11 12 <!-- 13 CSS's definition of "whitespace" matches HTML, 14 and includes only the five ASCII characters 15 U+0009, U+000A, U+000C, U+000D, and U+0020. 16 The rest of Unicode's whitespace characters, 17 many of which are recognized as whitespace by JS, 18 are not valid whitespace in CSS. 19 --> 20 21 <script> 22 23 function isWhitespace(codepoint) { 24 const char = String.fromCodePoint(codepoint); 25 const codepointName = "U+" + codepoint.toString(16).padStart(4, "0"); 26 test(()=>{ 27 const withSpace = document.querySelector(".a b"); 28 const withChar = document.querySelector(`.a${char}b`); 29 assert_equals(withSpace, withChar); 30 }, `${codepointName} is CSS whitespace`); 31 } 32 function isNotWhitespace(codepoint) { 33 const char = String.fromCodePoint(codepoint); 34 const codepointName = "U+" + codepoint.toString(16).padStart(4, "0"); 35 test(()=>{ 36 const withSpace = document.querySelector(".a b"); 37 document.querySelector("#foo").setAttribute("class", `.a${char}b`); 38 try { 39 var withChar = document.querySelector(`.a${char}b`); 40 } catch(e) { 41 assert_true(true, `${codepointName} isn't valid in a selector at all`); 42 return; 43 } 44 assert_not_equals(withSpace, withChar); 45 }, `${codepointName} is *not* CSS whitespace`); 46 } 47 48 // CSS Whitespace characters 49 var whitespace = [0x9, 0xa, 0xc, 0xd, 0x20]; 50 51 // Unicode Whitespace characters not recognized by CSS 52 // https://en.wikipedia.org/wiki/Whitespace_character#Unicode 53 var notWhitespace = [0xb, 0x85, 0xa0, 0x1680, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, 0x2007, 0x2008, 0x2009, 0x200a, 0x2928, 0x2029, 0x202f, 0x205f, 0x3000, 0x180e, 0x200b, 0x200c, 0x200d, 0x2060, 0xfeff]; 54 55 for(var codepoint of whitespace) { 56 isWhitespace(codepoint); 57 } 58 for(var codepoint of notWhitespace) { 59 isNotWhitespace(codepoint); 60 } 61 62 </script>