GeezerVison is showing github.com — wpt/css/css-pseudo/pseudo-replaced-elements.html at master · web-platform-tests/wpt

Expand file tree

pseudo-replaced-elements.html

Copy path

More file actions

Latest commit

History

77 lines (75 loc) · 2.95 KB

pseudo-replaced-elements.html

Copy path

File metadata and controls

77 lines (75 loc) · 2.95 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

<!doctype html>

<!--

https://drafts.csswg.org/css-pseudo/#generated-content:

Also as with regular child elements, the ::before and ::after pseudo-elements

are suppressed when their parent, the originating element, is replaced.

-->

<title>Replaced elements don't generate before / after CSS pseudo-elements</title>

<style>

input::before,

video::before,

progress::before {

content: "X";

display: block;

/* Not resolvable if box is not generated */

width: 10%;

}

span {

display: block;

/* Not resolvable if box is not generated */

width: 10%;

}

</style>

for (let element of document.querySelectorAll("input, video")) {

test(function() {

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

const childWidth = getComputedStyle(child).width;

const hasChildBox = childWidth.endsWith("px");

const pseudoWidth = getComputedStyle(element, "::before").width;

const hasPseudoBox = pseudoWidth.endsWith("px");

assert_equals(hasChildBox, hasPseudoBox, "Should only generate a box for pseudo-elements if it generates a box for child elements");

if (hasChildBox || hasPseudoBox) {

assert_equals(childWidth, pseudoWidth, "Child and pseudo sizes should match");

}

const expectedBox = element.style.appearance == "none" && (element.type == "checkbox" || element.type == "radio");

assert_equals(hasPseudoBox, expectedBox, "Should only generate a box for appearance: none checkboxes/radio buttons");

}, `${element.tagName} ${element.style.cssText} ${element.type || element.controls || ""}`);

}

</script>