corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1699964 - [css-content] Implement 'content: none' for elements. r=emilio

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D114130
This commit is contained in:
Mats Palmgren
2021-06-23 02:52:42 +00:00
parent fe7d54a1b4
commit 91fc19e865
40 changed files with 1761 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
layout/base/nsCSSFrameConstructor.cpp
View File

@@ -5120,38 +5120,35 @@ bool nsCSSFrameConstructor::ShouldCreateItemsForChild(
return true;
}
void nsCSSFrameConstructor::DoAddFrameConstructionItems(
nsFrameConstructorState& aState, nsIContent* aContent,
ComputedStyle* aComputedStyle, bool aSuppressWhiteSpaceOptimizations,
nsContainerFrame* aParentFrame, FrameConstructionItemList& aItems,
ItemFlags aFlags) {
auto flags = aFlags + ItemFlag::AllowPageBreak;
if (aParentFrame) {
if (SVGUtils::IsInSVGTextSubtree(aParentFrame)) {
flags += ItemFlag::IsWithinSVGText;
}
if (aParentFrame->IsBlockFrame() && aParentFrame->GetParent() &&
aParentFrame->GetParent()->IsSVGTextFrame()) {
flags += ItemFlag::AllowTextPathChild;
}
}
AddFrameConstructionItemsInternal(aState, aContent, aParentFrame,
aSuppressWhiteSpaceOptimizations,
aComputedStyle, flags, aItems);
}
void nsCSSFrameConstructor::AddFrameConstructionItems(
nsFrameConstructorState& aState, nsIContent* aContent,
bool aSuppressWhiteSpaceOptimizations, const InsertionPoint& aInsertion,
bool aSuppressWhiteSpaceOptimizations,
const ComputedStyle& aParentStyle,
const InsertionPoint& aInsertion,
FrameConstructionItemList& aItems, ItemFlags aFlags) {
nsContainerFrame* parentFrame = aInsertion.mParentFrame;
if (!ShouldCreateItemsForChild(aState, aContent, parentFrame)) {
return;
}
if (MOZ_UNLIKELY(aParentStyle.StyleContent()->mContent.IsNone()) &&
StaticPrefs::layout_css_element_content_none_enabled()) {
return;
}
RefPtr<ComputedStyle> computedStyle = ResolveComputedStyle(aContent);
DoAddFrameConstructionItems(aState, aContent, computedStyle,
aSuppressWhiteSpaceOptimizations, parentFrame,
aItems, aFlags);
auto flags = aFlags + ItemFlag::AllowPageBreak;
if (parentFrame) {
if (SVGUtils::IsInSVGTextSubtree(parentFrame)) {
flags += ItemFlag::IsWithinSVGText;
}
if (parentFrame->IsBlockFrame() && parentFrame->GetParent() &&
parentFrame->GetParent()->IsSVGTextFrame()) {
flags += ItemFlag::AllowTextPathChild;
}
}
AddFrameConstructionItemsInternal(aState, aContent, parentFrame,
aSuppressWhiteSpaceOptimizations,
computedStyle, flags, aItems);
}
// Whether we should suppress frames for a child under a <select> frame.
@@ -5361,7 +5358,7 @@ void nsCSSFrameConstructor::AddFrameConstructionItemsInternal(
for (nsIContent* child = iter.GetNextChild(); child;
child = iter.GetNextChild()) {
AddFrameConstructionItems(aState, child, aSuppressWhiteSpaceOptimizations,
insertion, aItems, aFlags);
*aComputedStyle, insertion, aItems, aFlags);
}
aItems.SetParentHasNoShadowDOM(!iter.ShadowDOMInvolved());
@@ -6295,7 +6292,9 @@ static bool IsSpecialFramesetChild(nsIContent* aContent) {
static void InvalidateCanvasIfNeeded(PresShell* aPresShell, nsIContent* aNode);
void nsCSSFrameConstructor::AddTextItemIfNeeded(
nsFrameConstructorState& aState, const InsertionPoint& aInsertion,
nsFrameConstructorState& aState,
const ComputedStyle& aParentStyle,
const InsertionPoint& aInsertion,
nsIContent* aPossibleTextContent, FrameConstructionItemList& aItems) {
MOZ_ASSERT(aPossibleTextContent, "Must have node");
if (!aPossibleTextContent->IsText() ||
@@ -6308,8 +6307,8 @@ void nsCSSFrameConstructor::AddTextItemIfNeeded(
}
MOZ_ASSERT(!aPossibleTextContent->GetPrimaryFrame(),
"Text node has a frame and NS_CREATE_FRAME_IF_NON_WHITESPACE");
AddFrameConstructionItems(aState, aPossibleTextContent, false, aInsertion,
aItems);
AddFrameConstructionItems(aState, aPossibleTextContent, false,
aParentStyle, aInsertion, aItems);
}
void nsCSSFrameConstructor::ReframeTextIfNeeded(nsIContent* aContent) {
@@ -6701,6 +6700,8 @@ void nsCSSFrameConstructor::ContentAppended(nsIContent* aFirstNewContent,
LayoutFrameType frameType = parentFrame->Type();
RefPtr<ComputedStyle> parentStyle =
ResolveComputedStyle(insertion.mContainer);
FlattenedChildIterator iter(insertion.mContainer);
const bool haveNoShadowDOM =
!iter.ShadowDOMInvolved() || !iter.GetNextChild();
@@ -6718,12 +6719,13 @@ void nsCSSFrameConstructor::ContentAppended(nsIContent* aFirstNewContent,
// after the appended content; there can only be generated content
// (and bare text nodes are not generated). Native anonymous content
// generated by frames never participates in inline layout.
AddTextItemIfNeeded(state, insertion,
AddTextItemIfNeeded(state, *parentStyle, insertion,
aFirstNewContent->GetPreviousSibling(), items);
}
for (nsIContent* child = aFirstNewContent; child;
child = child->GetNextSibling()) {
AddFrameConstructionItems(state, child, false, insertion, items);
AddFrameConstructionItems(state, child, false, *parentStyle, insertion,
items);
}
nsIFrame* prevSibling = ::FindAppendPrevSibling(parentFrame, nextSibling);
@@ -7158,6 +7160,8 @@ void nsCSSFrameConstructor::ContentRangeInserted(nsIContent* aStartChild,
}
AutoFrameConstructionItemList items(this);
RefPtr<ComputedStyle> parentStyle =
ResolveComputedStyle(insertion.mContainer);
ParentType parentType = GetParentType(frameType);
FlattenedChildIterator iter(insertion.mContainer);
const bool haveNoShadowDOM =
@@ -7169,18 +7173,19 @@ void nsCSSFrameConstructor::ContentRangeInserted(nsIContent* aStartChild,
// it, because it might need a frame now. No need to do this if our
// parent type is not block, though, since WipeContainingBlock
// already handles that situation.
AddTextItemIfNeeded(state, insertion, aStartChild->GetPreviousSibling(),
items);
AddTextItemIfNeeded(state, *parentStyle, insertion,
aStartChild->GetPreviousSibling(), items);
}
if (isSingleInsert) {
AddFrameConstructionItems(state, aStartChild,
aStartChild->IsRootOfNativeAnonymousSubtree(),
insertion, items);
*parentStyle, insertion, items);
} else {
for (nsIContent* child = aStartChild; child != aEndChild;
child = child->GetNextSibling()) {
AddFrameConstructionItems(state, child, false, insertion, items);
AddFrameConstructionItems(state, child, false, *parentStyle, insertion,
items);
}
}
@@ -7190,7 +7195,7 @@ void nsCSSFrameConstructor::ContentRangeInserted(nsIContent* aStartChild,
// it, because it might need a frame now. No need to do this if our
// parent type is not block, though, since WipeContainingBlock
// already handles that situation.
AddTextItemIfNeeded(state, insertion, aEndChild, items);
AddTextItemIfNeeded(state, *parentStyle, insertion, aEndChild, items);
}
// Perform special check for diddling around with the frames in
@@ -7251,8 +7256,7 @@ void nsCSSFrameConstructor::ContentRangeInserted(nsIContent* aStartChild,
// aIsRangeInsertSafe is ignored on purpose because it is irrelevant here.
bool ignored;
InsertionPoint captionInsertion(insertion.mParentFrame,
insertion.mContainer);
InsertionPoint captionInsertion = insertion;
if (isSingleInsert) {
captionPrevSibling = GetInsertionPrevSibling(
&captionInsertion, aStartChild, &captionIsAppend, &ignored);
@@ -9417,6 +9421,16 @@ inline void nsCSSFrameConstructor::ConstructFramesFromItemList(
nsFrameConstructorState& aState, FrameConstructionItemList& aItems,
nsContainerFrame* aParentFrame, bool aParentIsWrapperAnonBox,
nsFrameList& aFrameList) {
#ifdef DEBUG
if (aParentFrame->StyleContent()->mContent.IsNone() &&
StaticPrefs::layout_css_element_content_none_enabled()) {
for (FCItemIterator iter(aItems); !iter.IsDone(); iter.Next()) {
MOZ_ASSERT(iter.item().mContent->IsInNativeAnonymousSubtree() ||
iter.item().mComputedStyle->IsPseudoOrAnonBox());
}
}
#endif
// Ensure aParentIsWrapperAnonBox is correct. We _could_ compute it directly,
// but it would be a bit slow, which is why we pass it from callers, who have
// that information offhand in many cases.
@@ -9590,12 +9604,11 @@ void nsCSSFrameConstructor::ProcessChildren(
// Note that we don't use this style for looking up things like special
// block styles because in some cases involving table pseudo-frames it has
// nothing to do with the parent frame's desired behavior.
ComputedStyle* computedStyle;
auto* styleParentFrame =
nsIFrame::CorrectStyleParentFrame(aFrame, PseudoStyleType::NotPseudo);
ComputedStyle* computedStyle = styleParentFrame->Style();
if (aCanHaveGeneratedContent) {
auto* styleParentFrame =
nsIFrame::CorrectStyleParentFrame(aFrame, PseudoStyleType::NotPseudo);
computedStyle = styleParentFrame->Style();
if (computedStyle->StyleDisplay()->IsListItem() &&
(listItem = do_QueryFrame(aFrame)) &&
!styleParentFrame->IsFieldSetFrame()) {
@@ -9624,7 +9637,7 @@ void nsCSSFrameConstructor::ProcessChildren(
"GetInsertionPoint should agree with us");
if (addChildItems) {
AddFrameConstructionItems(aState, child, iter.ShadowDOMInvolved(),
insertion, itemsToConstruct);
*computedStyle, insertion, itemsToConstruct);
} else {
ClearLazyBits(child, child->GetNextSibling());
}
@@ -9915,9 +9928,9 @@ static bool IsFirstLetterContent(Text* aText) {
*/
nsFirstLetterFrame* nsCSSFrameConstructor::CreateFloatingLetterFrame(
nsFrameConstructorState& aState, Text* aTextContent, nsIFrame* aTextFrame,
nsContainerFrame* aParentFrame, ComputedStyle* aParentComputedStyle,
nsContainerFrame* aParentFrame, ComputedStyle* aParentStyle,
ComputedStyle* aComputedStyle, nsFrameList& aResult) {
MOZ_ASSERT(aParentComputedStyle);
MOZ_ASSERT(aParentStyle);
nsFirstLetterFrame* letterFrame =
NS_NewFirstLetterFrame(mPresShell, aComputedStyle);
@@ -9950,7 +9963,7 @@ nsFirstLetterFrame* nsCSSFrameConstructor::CreateFloatingLetterFrame(
// Create continuation
nextTextFrame = CreateContinuingFrame(aTextFrame, aParentFrame);
RefPtr<ComputedStyle> newSC =
styleSet->ResolveStyleForText(aTextContent, aParentComputedStyle);
styleSet->ResolveStyleForText(aTextContent, aParentStyle);
nextTextFrame->SetComputedStyle(newSC);
}
@@ -11091,7 +11104,8 @@ void nsCSSFrameConstructor::BuildInlineChildItems(
for (nsIContent* content = iter.GetNextChild(); content;
content = iter.GetNextChild()) {
AddFrameConstructionItems(aState, content, iter.ShadowDOMInvolved(),
InsertionPoint(), aParentItem.mChildItems, flags);
*parentComputedStyle, InsertionPoint(),
aParentItem.mChildItems, flags);
}
if (!aItemIsWithinSVGText) {

14
layout/base/nsCSSFrameConstructor.h
View File

@@ -392,6 +392,7 @@ class nsCSSFrameConstructor final : public nsFrameManager {
void AddFrameConstructionItems(nsFrameConstructorState& aState,
nsIContent* aContent,
bool aSuppressWhiteSpaceOptimizations,
const ComputedStyle& aParentStyle,
const InsertionPoint& aInsertion,
FrameConstructionItemList& aItems,
ItemFlags = {});
@@ -403,16 +404,6 @@ class nsCSSFrameConstructor final : public nsFrameManager {
nsIContent* aContent,
nsContainerFrame* aParentFrame);
// Helper method for AddFrameConstructionItems etc.
// Make sure ShouldCreateItemsForChild() returned true before calling this.
void DoAddFrameConstructionItems(nsFrameConstructorState& aState,
nsIContent* aContent,
ComputedStyle* aComputedStyle,
bool aSuppressWhiteSpaceOptimizations,
nsContainerFrame* aParentFrame,
FrameConstructionItemList& aItems,
ItemFlags = {});
// Construct the frames for the document element. This can return null if the
// document element is display:none, or if it's an SVG element that's not
// <svg>, etc.
@@ -1364,6 +1355,7 @@ class nsCSSFrameConstructor final : public nsFrameManager {
// If aPossibleTextContent is a text node and doesn't have a frame, append a
// frame construction item for it to aItems.
void AddTextItemIfNeeded(nsFrameConstructorState& aState,
const ComputedStyle& aParentStyle,
const InsertionPoint& aInsertion,
nsIContent* aPossibleTextContent,
FrameConstructionItemList& aItems);
@@ -1894,7 +1886,7 @@ class nsCSSFrameConstructor final : public nsFrameManager {
nsFirstLetterFrame* CreateFloatingLetterFrame(
nsFrameConstructorState& aState, mozilla::dom::Text* aTextContent,
nsIFrame* aTextFrame, nsContainerFrame* aParentFrame,
ComputedStyle* aParentComputedStyle, ComputedStyle* aComputedStyle,
ComputedStyle* aParentStyle, ComputedStyle* aComputedStyle,
nsFrameList& aResult);
void CreateLetterFrame(nsContainerFrame* aBlockFrame,

2
layout/forms/nsComboboxControlFrame.cpp
View File

@@ -950,7 +950,7 @@ nsresult nsComboboxControlFrame::RedisplayText() {
// Get the text to display
if (!previewValue.IsEmpty()) {
mDisplayedOptionTextOrPreview = previewValue;
} else if (mDisplayedIndex != -1) {
} else if (mDisplayedIndex != -1 && !StyleContent()->mContent.IsNone()) {
mListControlFrame->GetOptionText(mDisplayedIndex,
mDisplayedOptionTextOrPreview);
} else {

12
layout/style/res/forms.css
View File

@@ -21,8 +21,9 @@
padding: inherit;
box-decoration-break: inherit;
block-size: 100%; /* Need this so percentage block-sizes of kids work right */
/* Please keep the Multicol/Flex/Grid/Align sections below in sync with
::-moz-scrolled-content in ua.css and ::-moz-button-content below. */
/* Please keep the declarations below in sync with ::-moz-scrolled-content in
ua.css and ::-moz-button-content below. */
content: inherit;
/* Multicol container */
column-count: inherit;
column-width: inherit;
@@ -306,6 +307,7 @@ select > button[orientation="right"]:active {
}
*|*::-moz-display-comboboxcontrol-frame {
content: inherit;
overflow: clip;
padding-inline: 4px;
color: unset;
@@ -394,6 +396,7 @@ select optgroup {
%endif
*|*::-moz-dropdown-list {
content: inherit;
z-index: 2147483647;
background-color: inherit;
user-select: none;
@@ -581,8 +584,9 @@ button,
*|*::-moz-button-content {
display: block;
/* Please keep the Multicol/Flex/Grid/Align sections below in sync with
::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
/* Please keep the declarations below in sync with ::-moz-scrolled-content in
ua.css and ::-moz-fieldset-content above. */
content: inherit;
/* Multicol container */
column-count: inherit;
column-width: inherit;

5
layout/style/res/ua.css
View File

@@ -211,8 +211,9 @@
blocks with overflow: scroll; */
unicode-bidi: inherit;
text-overflow: inherit;
/* Please keep the Multicol/Flex/Grid/Align sections below in sync with
::-moz-fieldset-content/::-moz-button-content in forms.css */
/* Please keep the declarations below in sync with ::-moz-fieldset-content /
::-moz-button-content in forms.css */
content: inherit;
/* Multicol container */
column-count: inherit;
column-width: inherit;

3
layout/style/test/property_database.js
View File

@@ -5256,8 +5256,9 @@ var gCSSProperties = {
type: CSS_TYPE_LONGHAND,
applies_to_marker: true,
// XXX This really depends on pseudo-element-ness.
initial_values: ["normal", "none"],
initial_values: ["normal"],
other_values: [
"none",
'""',
"''",
'"hello"',

7
modules/libpref/init/StaticPrefList.yaml
View File

@@ -7480,6 +7480,13 @@
mirror: always
rust: true
# Is 'content:none' supported on (non-pseudo) elements?
- name: layout.css.element-content-none.enabled
type: RelaxedAtomicBool
value: true
mirror: always
rust: true
# Whether frame visibility tracking is enabled globally.
- name: layout.framevisibility.enabled
type: bool

21
servo/components/style/values/resolved/counters.rs
View File

@@ -23,20 +23,19 @@ impl ToResolvedValue for computed::Content {
#[inline]
fn to_resolved_value(self, context: &Context) -> Self {
let is_before_or_after = context
.style
.pseudo()
.map_or(false, |p| p.is_before_or_after());
let is_marker = context
.style
.pseudo()
.map_or(false, |p| p.is_marker());
let (is_pseudo, is_before_or_after, is_marker) =
match context.style.pseudo() {
Some(ref pseudo) => (true, pseudo.is_before_or_after(), pseudo.is_marker()),
None => (false, false, false)
};
match self {
Self::Normal if is_before_or_after => Self::None,
// For now, make `content: none` compute to `normal` for elements
// For now, make `content: none` compute to `normal` for pseudos
// other than ::before, ::after and ::marker, as we don't respect it.
Self::None if !is_before_or_after && !is_marker => Self::Normal,
// https://github.com/w3c/csswg-drafts/issues/6124
// Ditto for non-pseudo elements if the pref is disabled.
Self::None if (is_pseudo && !is_before_or_after && !is_marker) ||
(!is_pseudo && !static_prefs::pref!("layout.css.element-content-none.enabled")) => Self::Normal,
other => other,
}
}

3
testing/web-platform/meta/css/css-content/content-none-fieldset.html.ini Normal file
View File

@@ -0,0 +1,3 @@
[content-none-fieldset.html]
fuzzy: # anti-aliasing color differences inside scrollbars
maxDifference=0-4;totalPixels=0-200

72
testing/web-platform/tests/css/css-content/content-none-details-ref.html Normal file
View File

@@ -0,0 +1,72 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on DETAILS</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
summary { display:none; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"details",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.setAttribute("open", "true");
let summary = document.createElement("summary"); // we need a summary child to avoid details creating an anonymous child
elem.append(summary);
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

78
testing/web-platform/tests/css/css-content/content-none-details.html Normal file
View File

@@ -0,0 +1,78 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on DETAILS</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <details> children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-details-ref.html">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"details",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.setAttribute("open", "true");
let summary = document.createElement("summary");
summary.append(document.createTextNode("FAIL"));
elem.append(summary);
elem.append(document.createTextNode("FAIL"));
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

68
testing/web-platform/tests/css/css-content/content-none-fieldset-ref.html Normal file
View File

@@ -0,0 +1,68 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on FIELDSET</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll",
];
const position = [
"", "position:absolute",
];
const tags = [
"fieldset"
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';';
elem.className = c;
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

77
testing/web-platform/tests/css/css-content/content-none-fieldset.html Normal file
View File

@@ -0,0 +1,77 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on FIELDSET</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <fieldset> children, including rendered legends, from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-fieldset-ref.html">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll",
];
const position = [
"", "position:absolute",
];
const tags = [
"fieldset"
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';';
elem.className = c;
elem.append(document.createTextNode("FAIL"));
let legend = document.createElement("legend");
legend.append(document.createTextNode("FAIL"));
elem.append(legend);
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

68
testing/web-platform/tests/css/css-content/content-none-input-ref.html Normal file
View File

@@ -0,0 +1,68 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on INPUT</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body, input {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
padding:0; margin:0; border:none;
}
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
""
];
const position = [
"", "position:absolute",
];
const tags = [
"input"
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.value = "PASS";
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

73
testing/web-platform/tests/css/css-content/content-none-input.html Normal file
View File

@@ -0,0 +1,73 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on INPUT</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none has no effect on <input> as it has no children">
<link rel="match" href="content-none-input-ref.html">
<style>
html,body, input {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
}
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
""
];
const position = [
"", "position:absolute",
];
const tags = [
"input"
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.value = "PASS";
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

68
testing/web-platform/tests/css/css-content/content-none-math-ref.html Normal file
View File

@@ -0,0 +1,68 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on MATH</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"math",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

76
testing/web-platform/tests/css/css-content/content-none-math.html Normal file
View File

@@ -0,0 +1,76 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on MATH</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <math> children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-math-ref.html">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"math",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
let ms = document.createElementNS("http://www.w3.org/1998/Math/MathML", "ms");
ms.append(document.createTextNode("FAIL"));
elem.append(ms);
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

75
testing/web-platform/tests/css/css-content/content-none-option-ref.html Normal file
View File

@@ -0,0 +1,75 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on OPTION</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body {
color:black; background-color:white; xfont:5px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
option {
padding:0; margin:0; border:none;
font:5px/1 Ahem;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"option",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let select = document.createElement("select");
select.setAttribute("size", "2");
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
select.append(elem);
let option = document.createElement("option");
option.append(document.createTextNode("pass"));
select.append(option);
body.append(select);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

83
testing/web-platform/tests/css/css-content/content-none-option.html Normal file
View File

@@ -0,0 +1,83 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on OPTION</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <option> children from having boxes.">
<link rel="match" href="content-none-option-ref.html">
<style>
html,body {
color:black; background-color:white; xfont:5px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
option:nth-child(1) {
content:none;
}
option {
padding:0; margin:0; border:none;
font:5px/1 Ahem;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"option",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let select = document.createElement("select");
select.setAttribute("size", "2");
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.append(document.createTextNode("FAIL"));
select.append(elem);
let option = document.createElement("option");
option.append(document.createTextNode("pass"));
select.append(option);
body.append(select);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

17
testing/web-platform/tests/css/css-content/content-none-root-block-ref.html Normal file
View File

@@ -0,0 +1,17 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on a :root block</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<style>
html,body {
padding:0; margin:0;
}
</style>
</head>
<body><span>B</span><span>A</span></body>
</html>

25
testing/web-platform/tests/css/css-content/content-none-root-block.html Normal file
View File

@@ -0,0 +1,25 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on a :root block</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<meta name="assert" content="content:none should inhibit the :root's children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-root-block-ref.html">
<style>
:root {
content: none;
display: block;
}
*::after { content: 'A'; }
*::before { content: 'B'; }
</style>
</head>
FAIL
</html>

22
testing/web-platform/tests/css/css-content/content-none-root-columns-ref.html Normal file
View File

@@ -0,0 +1,22 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on a :root columns layout</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<style>
html,body {
padding:0; margin:0;
}
body {
column-width: 1px;
column-gap: 100px;
}
</style>
</head>
<body><span>B</span> <span>A</span></body>
</html>

26
testing/web-platform/tests/css/css-content/content-none-root-columns.html Normal file
View File

@@ -0,0 +1,26 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on a :root columns layout</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<meta name="assert" content="content:none should inhibit the :root's children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-root-columns-ref.html">
<style>
:root {
content: none;
column-width: 1px;
column-gap: 100px;
}
*::after { content: 'A'; }
*::before { content: 'B '; }
</style>
</head>
FAIL
</html>

22
testing/web-platform/tests/css/css-content/content-none-root-flex-ref.html Normal file
View File

@@ -0,0 +1,22 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on a :root flex</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<style>
html,body {
padding:0; margin:0;
}
body {
display: flex;
border: 1px solid;
gap: 10px;
}
</style>
</head>
<body><x>B</x><x>A</x></body>
</html>

27
testing/web-platform/tests/css/css-content/content-none-root-flex.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on a :root flex</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<meta name="assert" content="content:none should inhibit the :root's children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-root-flex-ref.html">
<style>
:root {
content: none;
display: flex;
border: 1px solid;
gap: 10px;
}
*::after { content: 'A'; }
*::before { content: 'B'; }
</style>
</head>
FAIL
</html>

23
testing/web-platform/tests/css/css-content/content-none-root-grid-ref.html Normal file
View File

@@ -0,0 +1,23 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on a :root grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<style>
html,body {
padding:0; margin:0;
}
body {
display: grid;
border: 1px solid;
grid-template-columns: 50px 50px;
gap: 10px;
}
</style>
</head>
<body><x>B</x><x>A</x></body>
</html>

28
testing/web-platform/tests/css/css-content/content-none-root-grid.html Normal file
View File

@@ -0,0 +1,28 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on a :root grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<meta name="assert" content="content:none should inhibit the :root's children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-root-grid-ref.html">
<style>
:root {
content: none;
display: grid;
border: 1px solid;
grid-template-columns: 50px 50px;
gap: 10px;
}
*::after { content: 'A'; }
*::before { content: 'B'; }
</style>
</head>
FAIL
</html>

21
testing/web-platform/tests/css/css-content/content-none-root-ruby-ref.html Normal file
View File

@@ -0,0 +1,21 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on a :root ruby (blockified) box</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<style>
html,body {
padding:0; margin:0;
}
body {
border: 1px solid;
margin: 50px;
}
</style>
</head>
<body><x>B</x><x>A</x></body>
</html>

34
testing/web-platform/tests/css/css-content/content-none-root-ruby.html Normal file
View File

@@ -0,0 +1,34 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on a :root ruby (blockified) box</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<meta name="assert" content="content:none should inhibit the :root's children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-root-ruby-ref.html">
<style>
:root {
content: none;
display: ruby;
border: 1px solid;
margin: 50px;
}
*::after { content: 'A'; }
*::before { content: 'B'; }
</style>
</head>
べ
<rtc>
<rt>る</rt>
</rtc>
<rbc>
<rb>FAIL</rb>
<rb>FAIL</rb>
</rbc>
</html>

22
testing/web-platform/tests/css/css-content/content-none-root-table-ref.html Normal file
View File

@@ -0,0 +1,22 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on a :root table</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<style>
html,body {
padding:0; margin:0;
}
body {
display: table;
border: 1px solid;
border-spacing: 10px;
}
</style>
</head>
<body><x>B</x><x>A</x></body>
</html>

28
testing/web-platform/tests/css/css-content/content-none-root-table.html Normal file
View File

@@ -0,0 +1,28 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on a :root table</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<meta name="assert" content="content:none should inhibit the :root's children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-root-table-ref.html">
<style>
:root {
content: none;
display: table;
border: 1px solid;
border-spacing: 10px;
}
*::after { content: 'A'; }
*::before { content: 'B'; }
</style>
</head>
<x style="display:table-cell">FAIL</x>
</html>

72
testing/web-platform/tests/css/css-content/content-none-select-1-ref.html Normal file
View File

@@ -0,0 +1,72 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on SELECT size=1</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="timeout" content="long">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
padding:0; margin:0; border:none;
font:5px/1 Ahem;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"select",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
let option = document.createElement("option"); // need an empty option to get same line-height
elem.append(option);
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

81
testing/web-platform/tests/css/css-content/content-none-select-1.html Normal file
View File

@@ -0,0 +1,81 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on SELECT size=1</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <select> children from having boxes.">
<meta name="timeout" content="long">
<link rel="match" href="content-none-select-1-ref.html">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
font:5px/1 Ahem;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"select",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
let option = document.createElement("option");
option.append(document.createTextNode("FAIL"));
elem.append(option);
option = document.createElement("option");
option.append(document.createTextNode("FAIL"));
elem.append(option);
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

70
testing/web-platform/tests/css/css-content/content-none-select-2-ref.html Normal file
View File

@@ -0,0 +1,70 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on SELECT size=2</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
padding:0; margin:0; border:none;
font:5px/1 Ahem;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"select",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.setAttribute("size", "2");
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

81
testing/web-platform/tests/css/css-content/content-none-select-2.html Normal file
View File

@@ -0,0 +1,81 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on SELECT size=2</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <select> children from having boxes.">
<link rel="match" href="content-none-select-2-ref.html">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
font:5px/1 Ahem;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute",
];
const tags = [
"select",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.setAttribute("size", "2");
let option = document.createElement("option");
option.append(document.createTextNode("FAIL"));
elem.append(option);
option = document.createElement("option");
option.append(document.createTextNode("FAIL"));
elem.append(option);
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

81
testing/web-platform/tests/css/css-content/content-none-span-dynamic.html Normal file
View File

@@ -0,0 +1,81 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on SPAN with dynamically inserted children</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <span> children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-span-ref.html">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute", "position:relative",
];
const tags = [
"span",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c + " test";
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
document.body.offsetHeight;
for (let elem of Array.from(document.querySelectorAll(".test"))) {
elem.append(document.createTextNode("FAIL"))
elem.append(document.createElement("div"));
}
document.body.offsetHeight;
</script>
</body>
</html>

68
testing/web-platform/tests/css/css-content/content-none-span-ref.html Normal file
View File

@@ -0,0 +1,68 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on SPAN</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute", "position:relative",
];
const tags = [
"span",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

75
testing/web-platform/tests/css/css-content/content-none-span.html Normal file
View File

@@ -0,0 +1,75 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on SPAN</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit the <span> children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-span-ref.html">
<style>
html,body {
color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body > * {
content:none;
padding:0; margin:0; border:none;
}
::marker { content: 'M'; }
.after::after { content: 'A'; }
.before::before { content: 'B'; }
</style>
</head>
<body>
<script>
document.body.style.display = 'none';
const display = [
"display:block", "display:inline", "display:ruby", "display:none", "display:grid",
"display:flex", "display:table", "display:list-item", "display:contents",
"columns:2",
];
const overflow = [
"", "overflow:scroll", "overflow:clip",
];
const position = [
"", "position:absolute", "position:relative",
];
const tags = [
"span",
];
const classes = [
"", "after", "before",
];
const body = document.body;
for (var d of display) {
for (var o of overflow) {
for (var p of position) {
for (var c of classes) {
for (var t of tags) {
let elem = document.createElement(t);
elem.style = d + ';' + o + ';' + p + ';'
elem.className = c;
elem.append(document.createTextNode("FAIL"))
elem.append(document.createElement("div"));
body.append(elem);
}
}
}
}
}
document.body.style.display = '';
</script>
</body>
</html>

49
testing/web-platform/tests/css/css-content/content-none-table-ref.html Normal file
View File

@@ -0,0 +1,49 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: content:none on various table boxes</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<style>
html,body {
color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body * {
border:3px solid;
}
.after::after { content: 'A'; }
.before::before { content: 'B'; }
x-table { display:table }
x-thead { display:table-row-group }
x-tr { display:table-row }
x-td { display:table-cell }
</style>
</head>
<body>
<table><thead><tr><td class="c"></td></tr></thead></table>
<table><thead><tr class="c"></tr></thead></table>
<table><thead class="c"></thead></table>
<table class="c"></thead></table>
<table><thead><tr><td class="c"></td><td>PASS</td></tr></thead></table>
<table><thead><tr class="c"></tr><tr><td>PASS</td></tr></thead></table>
<table><thead class="c"></thead><thead><tr><td>PASS</td></tr></thead></table>
<x-table><x-thead><x-tr><x-td class="c"></x-td></x-tr></x-thead></x-table>
<x-table><x-thead><x-tr class="c"></x-tr></x-thead></x-table>
<x-table><x-thead class="c"></x-thead></x-table>
<x-table class="c"></x-table>
<x-table><x-thead><x-tr><x-td class="c"></x-td><x-td>PASS</x-td></x-tr></x-thead></x-table>
<x-table><x-thead><x-tr class="c"></x-tr><x-tr><x-td>PASS</x-td></x-tr></x-thead></x-table>
<x-table><x-thead class="c"></x-thead><x-thead><x-tr><x-td>PASS</x-td></x-tr></x-thead></x-table>
</body>
</html>

54
testing/web-platform/tests/css/css-content/content-none-table.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Content: content:none on various table boxes</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<meta name="flags" content="ahem">
<meta name="assert" content="content:none should inhibit table children from having boxes. Its pseudos should not be affected though.">
<link rel="match" href="content-none-table-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
}
body { margin-left: 3ch; }
body * {
border:3px solid;
}
.after::after { content: 'A'; }
.before::before { content: 'B'; }
.c { content:none; }
x-table { display:table }
x-thead { display:table-row-group }
x-tr { display:table-row }
x-td { display:table-cell }
</style>
</head>
<body>
<table><thead><tr><td class="c">FAIL<x>FAIL</x></td></tr></thead></table>
<table><thead><tr class="c"><td>FAIL<x>FAIL</x></td></tr></thead></table>
<table><thead class="c"><tr><td>FAIL<x>FAIL</x></td></tr></thead></table>
<table class="c"><thead><tr><td>FAIL<x>FAIL</x></td></tr></thead></table>
<table><thead><tr><td class="c">FAIL<x>FAIL</x></td><td>PASS</td></tr></thead></table>
<table><thead><tr class="c"><td>FAIL<x>FAIL</x></td></tr><tr><td>PASS</td></tr></thead></table>
<table><thead class="c"><tr><td>FAIL<x>FAIL</x></td></tr></thead><thead><tr><td>PASS</td></tr></thead></table>
<x-table><x-thead><x-tr><x-td class="c">FAIL<x>FAIL</x></x-td></x-tr></x-thead></x-table>
<x-table><x-thead><x-tr class="c"><x-td>FAIL<x>FAIL</x></x-td></x-tr></x-thead></x-table>
<x-table><x-thead class="c"><x-tr><x-td>FAIL<x>FAIL</x></x-td></x-tr></x-thead></x-table>
<x-table class="c"><x-thead><x-tr><x-td>FAIL<x>FAIL</x></x-td></x-tr></x-thead></x-table>
<x-table><x-thead><x-tr><x-td class="c">FAIL<x>FAIL</x></x-td><x-td>PASS</x-td></x-tr></x-thead></x-table>
<x-table><x-thead><x-tr class="c"><x-td>FAIL<x>FAIL</x></x-td></x-tr><x-tr><x-td>PASS</x-td></x-tr></x-thead></x-table>
<x-table><x-thead class="c"><x-tr><x-td>FAIL<x>FAIL</x></x-td></x-tr></x-thead><x-thead><x-tr><x-td>PASS</x-td></x-tr></x-thead></x-table>
</body>
</html>