ParentNode-querySelector-escapes.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /dom/nodes/ParentNode-querySelector-escapes.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>querySelector() with CSS escapes</title>

<link rel="help" href="https://dom.spec.whatwg.org/#dom-parentnode-queryselector">

<link rel="help" href="https://drafts.csswg.org/css-syntax/#consume-escaped-code-point">

<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">

<link rel="author" title="bellbind" href="mailto:bellbind@gmail.com">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

"use strict";

function testMatched(id, selector) {

  test(() => {

    const container = document.createElement("div");

    const child = document.createElement("span");

    child.id = id;

    container.appendChild(child);

    assert_equals(container.querySelector(selector), child);

  }, `${JSON.stringify(id)} should match with ${JSON.stringify(selector)}`);

function testNeverMatched(id, selector) {

  test(() => {

    const container = document.createElement("div");

    const child = document.createElement("span");

    child.id = id;

    container.appendChild(child);

    assert_equals(container.querySelector(selector), null);

  }, `${JSON.stringify(id)} should never match with ${JSON.stringify(selector)}`);

// 4.3.7 from https://drafts.csswg.org/css-syntax/#consume-escaped-code-point

testMatched("nonescaped", "#nonescaped");

// - escape hex digit

testMatched("0nextIsWhiteSpace", "#\\30 nextIsWhiteSpace");

testMatched("0nextIsNotHexLetters", "#\\30nextIsNotHexLetters");

testMatched("0connectHexMoreThan6Hex", "#\\000030connectHexMoreThan6Hex");

testMatched("0spaceMoreThan6Hex", "#\\000030 spaceMoreThan6Hex");

// - hex digit special replacement

// 1. zero points

testMatched("zero\u{fffd}", "#zero\\0");

testNeverMatched("zero\u{0}", "#zero\\0");

testMatched("zero\u{fffd}", "#zero\\000000");

testNeverMatched("zero\u{0}", "#zero\\000000");

// 2. surrogate points

testMatched("\u{fffd}surrogateFirst", "#\\d83d surrogateFirst");

testNeverMatched("\ud83dsurrogateFirst", "#\\d83d surrogateFirst");

testMatched("surrogateSecond\u{fffd}", "#surrogateSecond\\dd11");

testNeverMatched("surrogateSecond\udd11", "#surrogateSecond\\dd11");

testMatched("surrogatePair\u{fffd}\u{fffd}", "#surrogatePair\\d83d\\dd11");

testNeverMatched("surrogatePair\u{1f511}", "#surrogatePair\\d83d\\dd11");

// 3. out of range points

testMatched("outOfRange\u{fffd}", "#outOfRange\\110000");

testMatched("outOfRange\u{fffd}", "#outOfRange\\110030");

testNeverMatched("outOfRange\u{30}", "#outOfRange\\110030");

testMatched("outOfRange\u{fffd}", "#outOfRange\\555555");

testMatched("outOfRange\u{fffd}", "#outOfRange\\ffffff");

// - escape EOF

testNeverMatched("eof\\", "#eof\\");

// - escape anythong else

testMatched(".comma", "#\\.comma");

testMatched("-minus", "#\\-minus");

testMatched("g", "#\\g");

// non edge cases

testMatched("aBMPRegular", "#\\61 BMPRegular");

testMatched("\u{1f511}nonBMP", "#\\1f511 nonBMP");

testMatched("00continueEscapes", "#\\30\\30 continueEscapes");

testMatched("00continueEscapes", "#\\30 \\30 continueEscapes");

testMatched("continueEscapes00", "#continueEscapes\\30 \\30 ");

testMatched("continueEscapes00", "#continueEscapes\\30 \\30");

testMatched("continueEscapes00", "#continueEscapes\\30\\30 ");

testMatched("continueEscapes00", "#continueEscapes\\30\\30");

// ident tests case from CSS tests of chromium source: https://goo.gl/3Cxdov

testMatched("hello", "#hel\\6Co");

testMatched("&B", "#\\26 B");

testMatched("hello", "#hel\\6C o");

testMatched("spaces", "#spac\\65\r\ns");

testMatched("spaces", "#sp\\61\tc\\65\fs");

testMatched("test\u{D799}", "#test\\D799");

testMatched("\u{E000}", "#\\E000");

testMatched("test", "#te\\s\\t");

testMatched("spaces in\tident", "#spaces\\ in\\\tident");

testMatched(".,:!", "#\\.\\,\\:\\!");

testMatched("null\u{fffd}", "#null\\0");

testMatched("null\u{fffd}", "#null\\0000");

testMatched("large\u{fffd}", "#large\\110000");

testMatched("large\u{fffd}", "#large\\23456a");

testMatched("surrogate\u{fffd}", "#surrogate\\D800");

testMatched("surrogate\u{fffd}", "#surrogate\\0DBAC");

testMatched("\u{fffd}surrogate", "#\\00DFFFsurrogate");

testMatched("\u{10ffff}", "#\\10fFfF");

testMatched("\u{10ffff}0", "#\\10fFfF0");

testMatched("\u{100000}00", "#\\10000000");

testMatched("eof\u{fffd}", "#eof\\");

testMatched("simple-ident", "#simple-ident");

testMatched("testing123", "#testing123");

testMatched("_underscore", "#_underscore");

testMatched("-text", "#-text");

testMatched("-m", "#-\\6d");

testMatched("--abc", "#--abc");

testMatched("--", "#--");

testMatched("--11", "#--11");

testMatched("---", "#---");

testMatched("\u{2003}", "#\u{2003}");

testMatched("\u{A0}", "#\u{A0}");

testMatched("\u{1234}", "#\u{1234}");

testMatched("\u{12345}", "#\u{12345}");

testMatched("\u{fffd}", "#\u{0}");

testMatched("ab\u{fffd}c", "#ab\u{0}c");

</script>