pseudo-replaced-elements.html (3025B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://issues.chromium.org/issues/365052666"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1911253"> 7 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#generated-content"> 8 <!-- 9 https://drafts.csswg.org/css-pseudo/#generated-content: 10 Also as with regular child elements, the ::before and ::after pseudo-elements 11 are suppressed when their parent, the originating element, is replaced. 12 --> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <title>Replaced elements don't generate before / after CSS pseudo-elements</title> 16 <style> 17 input::before, 18 video::before, 19 progress::before { 20 content: "X"; 21 display: block; 22 /* Not resolvable if box is not generated */ 23 width: 10%; 24 } 25 span { 26 display: block; 27 /* Not resolvable if box is not generated */ 28 width: 10%; 29 } 30 </style> 31 <input type=text> 32 <input type=date> 33 <input type=time> 34 <input type=datetime-local> 35 <input type=checkbox> 36 <input type=radio> 37 <input type=file> 38 <input type=range> 39 <input type=color> 40 <input type=hidden> 41 <input type=search> 42 <video controls></video> 43 <video></video> 44 <progress></progress> 45 <!-- These are special since they are no longer replaced with appearance: none --> 46 <input style="appearance: none" type=checkbox> 47 <input style="appearance: none" type=radio> 48 <!-- These are not special --> 49 <input style="appearance: none" type=text> 50 <input style="appearance: none" type=date> 51 <input style="appearance: none" type=time> 52 <input style="appearance: none" type=datetime-local> 53 <input style="appearance: none" type=file> 54 <input style="appearance: none" type=range> 55 <input style="appearance: none" type=color> 56 <input style="appearance: none" type=hidden> 57 <input style="appearance: none" type=search> 58 <progress></progress> 59 <script> 60 for (let element of document.querySelectorAll("input, video")) { 61 test(function() { 62 const child = element.appendChild(document.createElement("span")); 63 const childWidth = getComputedStyle(child).width; 64 const hasChildBox = childWidth.endsWith("px"); 65 66 const pseudoWidth = getComputedStyle(element, "::before").width; 67 const hasPseudoBox = pseudoWidth.endsWith("px"); 68 69 assert_equals(hasChildBox, hasPseudoBox, "Should only generate a box for pseudo-elements if it generates a box for child elements"); 70 if (hasChildBox || hasPseudoBox) { 71 assert_equals(childWidth, pseudoWidth, "Child and pseudo sizes should match"); 72 } 73 const expectedBox = element.style.appearance == "none" && (element.type == "checkbox" || element.type == "radio"); 74 assert_equals(hasPseudoBox, expectedBox, "Should only generate a box for appearance: none checkboxes/radio buttons"); 75 }, `${element.tagName} ${element.style.cssText} ${element.type || element.controls || ""}`); 76 } 77 </script>