mirror of
https://gitflic.ru/project/openide/openide.git
synced 2026-03-22 15:19:59 +07:00
[xml] WEB-72460 Modernize XmlDocumentationTest and HtmlDocumentationTest to use expected files and allow for apply changes in diff.
(cherry picked from commit 2e6c0f2c0bc91c5c39c64020c82cbdbc6b2a1a26) IJ-CR-162639 GitOrigin-RevId: 10ca68562859cdcb11432355424a9ef2ce114d17
This commit is contained in:
committed by
intellij-monorepo-bot
parent
737e963124
commit
d2018c19eb
@@ -35,6 +35,7 @@
|
||||
<orderEntry type="library" scope="TEST" name="jackson" level="project" />
|
||||
<orderEntry type="module" module-name="intellij.tools.ide.metrics.benchmark" scope="TEST" />
|
||||
<orderEntry type="module" module-name="intellij.platform.images.backend.svg" scope="TEST" />
|
||||
<orderEntry type="module" module-name="intellij.platform.webSymbols.testFramework" scope="TEST" />
|
||||
</component>
|
||||
<component name="copyright">
|
||||
<Base>
|
||||
|
||||
@@ -4,18 +4,14 @@ package com.intellij.codeInsight;
|
||||
import com.intellij.codeInsight.documentation.DocumentationManager;
|
||||
import com.intellij.lang.documentation.DocumentationProvider;
|
||||
import com.intellij.openapi.util.text.StringUtil;
|
||||
import com.intellij.openapi.vfs.LocalFileSystem;
|
||||
import com.intellij.openapi.vfs.VfsUtilCore;
|
||||
import com.intellij.openapi.vfs.VirtualFile;
|
||||
import com.intellij.psi.PsiElement;
|
||||
import com.intellij.psi.PsiFile;
|
||||
import com.intellij.testFramework.PlatformTestUtil;
|
||||
import com.intellij.testFramework.fixtures.BasePlatformTestCase;
|
||||
import com.intellij.webSymbols.testFramework.WebTestUtil;
|
||||
import org.jetbrains.annotations.NotNull;
|
||||
import org.jetbrains.annotations.Nullable;
|
||||
|
||||
import java.io.File;
|
||||
import java.io.IOException;
|
||||
import java.util.Arrays;
|
||||
|
||||
import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
|
||||
@@ -116,33 +112,21 @@ public class XmlDocumentationTest extends BasePlatformTestCase {
|
||||
|
||||
private void doQuickDocGenerationTestWithCheckExpectedResult(Object completionVariant, final String... baseFileNames) {
|
||||
final DocumentationTestContext context = new DocumentationTestContext(baseFileNames);
|
||||
String pathname = getTestDataPath() + baseFileNames[0] + ".expected.html";
|
||||
VirtualFile vfile = LocalFileSystem.getInstance().findFileByIoFile(new File(pathname));
|
||||
assertNotNull(pathname + " not found", vfile);
|
||||
try {
|
||||
String expectedText = StringUtil.convertLineSeparators(VfsUtilCore.loadText(vfile));
|
||||
String text = context.generateDoc();
|
||||
assertThat(text).isNotNull();
|
||||
assertEquals(stripFirstLine(expectedText).replaceAll("\\s+", ""),
|
||||
stripFirstLine(StringUtil.convertLineSeparators(text)).replaceAll("\\s+", ""));
|
||||
|
||||
if (completionVariant != null) {
|
||||
vfile =
|
||||
LocalFileSystem.getInstance().findFileByIoFile(new File(getTestDataPath() + baseFileNames[0] + ".expected.completion.html"));
|
||||
expectedText = StringUtil.convertLineSeparators(VfsUtilCore.loadText(vfile), "\n");
|
||||
assertEquals(stripFirstLine(expectedText).replaceAll("\\s+", ""),
|
||||
stripFirstLine(StringUtil.convertLineSeparators(context.generateDocForCompletion(completionVariant), "\n"))
|
||||
.replaceAll("\\s+", ""));
|
||||
}
|
||||
} catch (IOException e) {
|
||||
throw new RuntimeException(e);
|
||||
String text = context.generateDoc();
|
||||
assertThat(text).isNotNull();
|
||||
WebTestUtil.checkTextByFile(myFixture, cleanupHtmlDoc(text), baseFileNames[0] + ".expected.html");
|
||||
|
||||
if (completionVariant != null) {
|
||||
String completionText = context.generateDocForCompletion(completionVariant);
|
||||
assertThat(completionText).isNotNull();
|
||||
WebTestUtil.checkTextByFile(myFixture, cleanupHtmlDoc(completionText),
|
||||
baseFileNames[0] + ".expected.completion.html");
|
||||
}
|
||||
}
|
||||
|
||||
// the first line may contain attributes in unpredictable order (after Transform work)
|
||||
private static String stripFirstLine(String text) {
|
||||
if (!text.startsWith("<html ")) return text;
|
||||
return text.substring(text.indexOf('\n'));
|
||||
private static String cleanupHtmlDoc(String doc) {
|
||||
return StringUtil.convertLineSeparators(doc.replaceAll(" +\n", "\n"));
|
||||
}
|
||||
|
||||
public void testDtdDoc() {
|
||||
|
||||
@@ -17,12 +17,12 @@ package com.intellij.html;
|
||||
|
||||
import com.intellij.codeInsight.documentation.DocumentationManager;
|
||||
import com.intellij.lang.documentation.DocumentationProvider;
|
||||
import com.intellij.openapi.util.text.StringUtil;
|
||||
import com.intellij.psi.PsiElement;
|
||||
import com.intellij.testFramework.PlatformTestUtil;
|
||||
import com.intellij.testFramework.fixtures.BasePlatformTestCase;
|
||||
import junit.framework.ComparisonFailure;
|
||||
|
||||
import java.util.Collections;
|
||||
import java.util.List;
|
||||
import com.intellij.webSymbols.testFramework.WebTestUtil;
|
||||
import org.jetbrains.annotations.NotNull;
|
||||
|
||||
public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
public void testQuickDocumentationHtml5Tag() {
|
||||
@@ -31,11 +31,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
<html>
|
||||
<bo<caret>dy onload="">
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>body</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><body></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/HTML\">HTML</a> " +
|
||||
"element represents the content of",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/html/reference/elements/body"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml5TagDialog() {
|
||||
@@ -45,11 +42,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
<body onload="">
|
||||
<dia<caret>log></dialog
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>dialog</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><dialog></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/HTML\">HTML</a> " +
|
||||
"element represents a modal",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/html/reference/elements/dialog"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml5Attr() {
|
||||
@@ -58,9 +52,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
<html>
|
||||
<body on<caret>load="">
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>onload</pre></div>\n<div class='content'>Function to call when the document has finished loading.",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/html/element/body#onload"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml5Svg() {
|
||||
@@ -71,10 +64,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
<sv<caret>g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>svg</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><svg></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/SVG\">SVG</a> element is a container that defines a new coordinate system and",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/svg/reference/element/svg"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml5SvgImage() {
|
||||
@@ -87,10 +78,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
</image>
|
||||
</svg>
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>image</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><image></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/SVG\">SVG</a> element includes images inside SVG documents.",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/svg/reference/element/image"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml5Math() {
|
||||
@@ -101,11 +90,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
<ma<caret>th>
|
||||
</math>
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>math</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><math></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/MathML\">MathML</a> " +
|
||||
"element is the top-level MathML element",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/mathml/reference/element/math"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml5MathMrow() {
|
||||
@@ -118,11 +104,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
</mrow>
|
||||
</math>
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>mrow</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><mrow></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/MathML\">MathML</a> " +
|
||||
"element is used to group sub-expressions",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/mathml/reference/element/mrow"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml4Tag() {
|
||||
@@ -132,11 +115,8 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
<html>
|
||||
<bo<caret>dy onload="">
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>body</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><body></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/HTML\">HTML</a> " +
|
||||
"element represents the content of an HTML document.",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/html/reference/elements/body"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml4Attr() {
|
||||
@@ -146,25 +126,19 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
<html>
|
||||
<body on<caret>load="">
|
||||
</body>
|
||||
</html>""",
|
||||
"<div class='definition'><pre>onload</pre></div>\n<div class='content'>Function to call when the document has finished loading.",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/html/element/body#onload"));
|
||||
</html>"""
|
||||
);
|
||||
}
|
||||
|
||||
public void testQuickDocumentationHtml5Script() {
|
||||
doTest("<scr<caret>ipt></script>",
|
||||
"<div class='definition'><pre>script</pre></div>\n<div class='content'>" +
|
||||
"The <strong><code><script></code></strong> <a href=\"https://developer.mozilla.org/en-us/docs/Web/HTML\">HTML</a> " +
|
||||
"element is used to embed executable",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/html/reference/elements/script"));
|
||||
doTest("<scr<caret>ipt></script>"
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
public void testQuickDocumentationHtml5MediaEvents() {
|
||||
doTest("<video on<caret>stalled=''>",
|
||||
"<div class='definition'><pre>onstalled</pre></div>\n<div class='content'>" +
|
||||
"The <code>stalled</code> event is fired when the user agent is trying to fetch media data",
|
||||
Collections.singletonList("https://developer.mozilla.org/en-us/docs/web/api/htmlmediaelement/stalled_event"));
|
||||
doTest("<video on<caret>stalled=''>"
|
||||
);
|
||||
}
|
||||
|
||||
public void testLookupDocWordCompletions() {
|
||||
@@ -175,22 +149,23 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
|
||||
assertNull(element);
|
||||
}
|
||||
|
||||
private void doTest(String text, String doc, List<String> url) {
|
||||
private void doTest(String text) {
|
||||
myFixture.configureByText("test.html", text);
|
||||
PsiElement originalElement = myFixture.getFile().findElementAt(myFixture.getEditor().getCaretModel().getOffset());
|
||||
PsiElement element = DocumentationManager.getInstance(getProject()).findTargetElement(myFixture.getEditor(), myFixture.getFile());
|
||||
DocumentationProvider documentationProvider = DocumentationManager.getProviderFromElement(originalElement);
|
||||
|
||||
String generatedDoc = documentationProvider.generateDoc(element, originalElement);
|
||||
if (generatedDoc != null) {
|
||||
generatedDoc = generatedDoc.replaceAll("(?s)<details>.+</details>\n", "");
|
||||
}
|
||||
if (generatedDoc == null) {
|
||||
//noinspection ConstantConditions
|
||||
assertEquals(doc, generatedDoc);
|
||||
} else if (doc == null || !generatedDoc.startsWith(doc)) {
|
||||
throw new ComparisonFailure("Generated doc doesn't start with correct prefix", doc, generatedDoc);
|
||||
generatedDoc = "<no documentation>";
|
||||
}
|
||||
assertEquals(url, documentationProvider.getUrlFor(element, originalElement));
|
||||
generatedDoc = StringUtil.convertLineSeparators(generatedDoc.strip());
|
||||
generatedDoc += "\n---\n" + documentationProvider.getUrlFor(element, originalElement);
|
||||
WebTestUtil.checkTextByFile(myFixture, generatedDoc, getTestName(false) + ".expected.html");
|
||||
}
|
||||
|
||||
@Override
|
||||
protected @NotNull String getTestDataPath() {
|
||||
return PlatformTestUtil.getCommunityPath() + "/xml/tests/testData/documentation/";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class='definition'><pre>onload</pre></div>
|
||||
<div class='content'>Function to call when the document has finished loading.</div>
|
||||
<table class='sections'>
|
||||
<tr><td valign='top' class='section'><p>Obsolete</td></table>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/element/body#onload/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/html/element/body#onload]
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class='definition'><pre>body</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1, Firefox Android 4, Opera 15, Safari 1, Safari iOS 1. <i>Baseline since 2018</i></details>
|
||||
The <strong><code><body></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/HTML">HTML</a> element represents the content of an HTML document. There can be only one <code><body></code> element in a document.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/reference/elements/body/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/html/reference/elements/body]
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class='definition'><pre>onload</pre></div>
|
||||
<div class='content'>Function to call when the document has finished loading.</div>
|
||||
<table class='sections'>
|
||||
<tr><td valign='top' class='section'><p>Obsolete</td></table>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/element/body#onload/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/html/element/body#onload]
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class='definition'><pre>math</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineLow'></icon>
|
||||
<td style='padding: 0; width:100%'>Newly available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 109, Chrome Android 109, Edge 109, Firefox 4, Firefox Android 4, Opera 95, Safari 5.1, Safari iOS 5. <i>Baseline since 2023</i></details>
|
||||
The <strong><code><math></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/MathML">MathML</a> element is the top-level MathML element, used to write a single mathematical formula. It can be placed in HTML content where <a href="https://developer.mozilla.org/en-us/docs/Web/HTML/Guides/Content_categories#flow_content">flow content</a> is permitted.
|
||||
<div class="notecard note">
|
||||
<p><strong>Note:</strong>
|
||||
See the <a href="https://developer.mozilla.org/en-us/docs/Web/MathML/Guides/Authoring#using_mathml">Authoring MathML page</a> for tips to properly integrate MathML formulas in your web pages and the <a href="https://developer.mozilla.org/en-us/docs/Web/MathML/Guides">Guides</a> page for more demos.
|
||||
</div></div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/mathml/reference/element/math/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/mathml/reference/element/math]
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class='definition'><pre>mrow</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineLow'></icon>
|
||||
<td style='padding: 0; width:100%'>Newly available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 109, Chrome Android 109, Edge 109, Firefox 1, Firefox Android 4, Opera 95, Safari 6, Safari iOS 6. <i>Baseline since 2023</i></details>
|
||||
The <strong><code><mrow></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/MathML">MathML</a> element is used to group sub-expressions, which usually contain one or more <a href="https://developer.mozilla.org/en-us/docs/Web/MathML/Reference/Element/mo">operators</a> with their respective operands (such as <a href="https://developer.mozilla.org/en-us/docs/Web/MathML/Reference/Element/mi" ><code><mi></code></a> and <a href="https://developer.mozilla.org/en-us/docs/Web/MathML/Reference/Element/mn" ><code><mn></code></a>). This element renders as a horizontal row containing its arguments.
|
||||
<p>When writing a MathML expression, you should group elements within an <code><mrow></code> in the same way as they are grouped in the mathematical interpretation of the expression. Proper grouping helps the rendering of the expression in several ways:
|
||||
<ul>
|
||||
<li>It can improve the display by possibly affecting spacing and preventing line breaks.</li>
|
||||
<li>It simplifies the interpretation of the expression by automated systems such as computer algebra systems and audio renderers.</li>
|
||||
</ul></div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/mathml/reference/element/mrow/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/mathml/reference/element/mrow]
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class='definition'><pre>onstalled</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 3, Chrome Android 18, Edge 12, Firefox 3.5, Firefox Android 4, Opera 10.5, Safari 3.1, Safari iOS 3. <i>Baseline since 2018</i></details>
|
||||
The <code>stalled</code> event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
|
||||
This event is not cancelable and does not bubble.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/api/htmlmediaelement/stalled_event/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/api/htmlmediaelement/stalled_event]
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class='definition'><pre>script</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1, Firefox Android 4, Opera 12.1, Safari 3, Safari iOS 2. <i>Baseline since 2018</i></details>
|
||||
The <strong><code><script></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/HTML">HTML</a> element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <code><script></code> element can also be used with other languages, such as <a href="https://developer.mozilla.org/en-us/docs/Web/API/WebGL_API">WebGL</a>'s GLSL shader programming language and <a href="https://developer.mozilla.org/en-us/docs/Glossary/JSON">JSON</a>.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/reference/elements/script/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/html/reference/elements/script]
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class='definition'><pre>svg</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1.5, Firefox Android 4, Opera 8, Safari 3, Safari iOS 2. <i>Baseline since 2018</i></details>
|
||||
The <strong><code><svg></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/SVG">SVG</a> element is a container that defines a new coordinate system and <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Attribute/viewBox">viewport</a>. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
|
||||
<div class="notecard note">
|
||||
<p><strong>Note:</strong>
|
||||
The <code>xmlns</code> attribute is only required on the outermost <code>svg</code> element of <em>SVG documents</em>, or inside HTML documents with XML serialization. It is unnecessary for inner <code>svg</code> elements or inside HTML documents with HTML serialization.
|
||||
</div></div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/svg/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/svg/reference/element/svg]
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class='definition'><pre>image</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1.5, Firefox Android 4, Opera 8, Safari 3, Safari iOS 2. <i>Baseline since 2018</i></details>
|
||||
The <strong><code><image></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/SVG">SVG</a> element includes images inside SVG documents. It can display <a href="https://developer.mozilla.org/en-us/docs/Glossary/Raster_image">raster image</a> files or other SVG files.
|
||||
<p>The only image formats SVG software must support are <a href="https://developer.mozilla.org/en-us/docs/Glossary/JPEG">JPEG</a>, <a href="https://developer.mozilla.org/en-us/docs/Glossary/PNG">PNG</a>, and other SVG files. Animated <a href="https://developer.mozilla.org/en-us/docs/Glossary/GIF">GIF</a> behavior is undefined.
|
||||
<p>SVG files displayed with <code><image></code> are <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Guides/SVG_as_an_image">treated as an image</a>: external resources aren't loaded, <a href="https://developer.mozilla.org/en-us/docs/Web/CSS/:visited"><code>:visited</code></a> styles <a href="https://developer.mozilla.org/en-us/docs/Web/CSS/CSS_selectors/Privacy_and_the_visited_selector">aren't applied</a>, and they cannot be interactive. To include dynamic SVG elements, try <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/use"><code><use></code></a> with an external URL. To include SVG files and run scripts inside them, try <a href="https://developer.mozilla.org/en-us/docs/Web/HTML/Reference/Elements/object"><code><object></code></a> inside of <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/foreignObject"><code><foreignObject></code></a>.
|
||||
<div class="notecard note">
|
||||
<p><strong>Note:</strong>
|
||||
The HTML spec defines <code><image></code> as a synonym for <a href="https://developer.mozilla.org/en-us/docs/Web/HTML/Reference/Elements/img"><code><img></code></a> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVGs.
|
||||
</div></div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/image/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/svg/reference/element/image]
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class='definition'><pre>body</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1, Firefox Android 4, Opera 15, Safari 1, Safari iOS 1. <i>Baseline since 2018</i></details>
|
||||
The <strong><code><body></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/HTML">HTML</a> element represents the content of an HTML document. There can be only one <code><body></code> element in a document.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/reference/elements/body/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/html/reference/elements/body]
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class='definition'><pre>dialog</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 37, Chrome Android 37, Edge 79, Firefox 98, Firefox Android 98, Opera 24, Safari 15.4, Safari iOS 15.4. <i>Baseline since 2024</i></details>
|
||||
The <strong><code><dialog></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/HTML">HTML</a> element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
|
||||
<p>The HTML <code><dialog></code> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.
|
||||
<p>JavaScript should be used to display the <code><dialog></code> element. Use the <a href="https://developer.mozilla.org/en-us/docs/Web/API/HTMLDialogElement/showModal" ><code>.showModal()</code></a> method to display a modal dialog and the <a href="https://developer.mozilla.org/en-us/docs/Web/API/HTMLDialogElement/show" ><code>.show()</code></a> method to display a non-modal dialog. The dialog box can be closed using the <a href="https://developer.mozilla.org/en-us/docs/Web/API/HTMLDialogElement/close" ><code>.close()</code></a> method or using the <a href="https://developer.mozilla.org/en-us/docs/Web/HTML/Reference/Elements/form#method"><code>dialog</code></a> method when submitting a <code><form></code> that is nested within the <code><dialog></code> element. Modal dialogs can also be closed by pressing the <kbd>Esc</kbd> key.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/reference/elements/dialog/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
---
|
||||
[https://developer.mozilla.org/en-us/docs/web/html/reference/elements/dialog]
|
||||
@@ -1 +1,6 @@
|
||||
<divclass='definition'><pre>rect</pre></div><divclass='content'><details><summary><tablestyle='margin:0px;padding:0px'><tr><tdwidth=2valign=topstyle='margin:0px;padding:0px4px0px0px'><iconsrc='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon><tdstyle='margin:0px;padding:0px'>Widelyavailableacrossmajorbrowsers<i>(Baseline since 2018)</i></td></tr></table></summary><pclass='grayed'>Chrome1,ChromeAndroid18,Edge12,Firefox1.5,FirefoxAndroid4,Opera8,Safari3.1,SafariiOS2</details>The<strong><code><rect></code></strong><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG">SVG</a>elementisa<ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes">basicSVGshape</a>thatdrawsrectangles,definedbytheirposition,width,andheight.Therectanglesmayhavetheircornersrounded.</div><divclass='content'>By<ahref='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/rect/contributors.txt'>MozillaContributors</a>,<ahref='https://creativecommons.org/licenses/by-sa/2.5/'>CCBY-SA2.5</a></div>
|
||||
<div class='definition'><pre>rect</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1.5, Firefox Android 4, Opera 8, Safari 3.1, Safari iOS 2. <i>Baseline since 2018</i></details>
|
||||
The <strong><code><rect></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/SVG">SVG</a> element is a <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes">basic SVG shape</a> that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/rect/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
|
||||
@@ -1 +1,6 @@
|
||||
<divclass='definition'><pre>rect</pre></div><divclass='content'><details><summary><tablestyle='margin:0px;padding:0px'><tr><tdwidth=2valign=topstyle='margin:0px;padding:0px4px0px0px'><iconsrc='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon><tdstyle='margin:0px;padding:0px'>Widelyavailableacrossmajorbrowsers<i>(Baseline since 2018)</i></td></tr></table></summary><pclass='grayed'>Chrome1,ChromeAndroid18,Edge12,Firefox1.5,FirefoxAndroid4,Opera8,Safari3.1,SafariiOS2</details>The<strong><code><rect></code></strong><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG">SVG</a>elementisa<ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes">basicSVGshape</a>thatdrawsrectangles,definedbytheirposition,width,andheight.Therectanglesmayhavetheircornersrounded.</div><divclass='content'>By<ahref='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/rect/contributors.txt'>MozillaContributors</a>,<ahref='https://creativecommons.org/licenses/by-sa/2.5/'>CCBY-SA2.5</a></div>
|
||||
<div class='definition'><pre>rect</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1.5, Firefox Android 4, Opera 8, Safari 3.1, Safari iOS 2. <i>Baseline since 2018</i></details>
|
||||
The <strong><code><rect></code></strong> <a href="https://developer.mozilla.org/en-us/docs/Web/SVG">SVG</a> element is a <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes">basic SVG shape</a> that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/rect/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
|
||||
@@ -1 +1,23 @@
|
||||
<divclass='definition'><pre>stroke-width</pre></div><divclass='content'><details><summary><tablestyle='margin:0px;padding:0px'><tr><tdwidth=2valign=topstyle='margin:0px;padding:0px4px0px0px'><iconsrc='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon><tdstyle='margin:0px;padding:0px'>Widelyavailableacrossmajorbrowsers<i>(Baseline since 2022)</i></td></tr></table></summary><pclass='grayed'>Chrome80,ChromeAndroid80,Edge80,Firefox1,FirefoxAndroid4,Opera67,Safari13.1,SafariiOS13.4</details>The<strong><code>stroke-width</code></strong>attributeisapresentationattributedefiningthewidthofthestroketobeappliedtotheshape.ItappliestoanySVGshapeortext-contentelement,butasaninheritedproperty,itmaybeappliedtoelementssuchas<ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/g"><code><g></code></a>andstillhavetheintendedeffectondescendantelements'strokes.<divclass="notecardnote"><p><strong>Note:</strong>Asapresentationattribute,<code>stroke-width</code>alsohasaCSSpropertycounterpart:<ahref="https://developer.mozilla.org/en-us/docs/Web/CSS/stroke-width"><code>stroke-width</code></a>.Whenbotharespecified,theCSSpropertytakespriority.</div><p>YoucanusethisattributewiththefollowingSVGelements:<ul><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/circle"><code><circle></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/ellipse"><code><ellipse></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/line"><code><line></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/path"><code><path></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polygon"><code><polygon></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polyline"><code><polyline></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/rect"><code><rect></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/text"><code><text></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/textPath"><code><textPath></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/tspan"><code><tspan></code></a></li></ul></div><divclass='content'>By<ahref='https://developer.mozilla.org/en-us/docs/web/svg/reference/attribute/stroke-width/contributors.txt'>MozillaContributors</a>,<ahref='https://creativecommons.org/licenses/by-sa/2.5/'>CCBY-SA2.5</a></div>
|
||||
<div class='definition'><pre>stroke-width</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 80, Chrome Android 80, Edge 80, Firefox 1, Firefox Android 4, Opera 67, Safari 13.1, Safari iOS 13.4. <i>Baseline since 2022</i></details>
|
||||
The <strong><code>stroke-width</code></strong> attribute is a presentation attribute defining the width of the stroke to be applied to the shape. It applies to any SVG shape or text-content element, but as an inherited property, it may be applied to elements such as <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/g"><code><g></code></a> and still have the intended effect on descendant elements' strokes.
|
||||
<div class="notecard note">
|
||||
<p><strong>Note:</strong>
|
||||
As a presentation attribute, <code>stroke-width</code> also has a CSS property counterpart: <a href="https://developer.mozilla.org/en-us/docs/Web/CSS/stroke-width"><code>stroke-width</code></a>. When both are specified, the CSS property takes priority.
|
||||
</div>
|
||||
<p>You can use this attribute with the following SVG elements:
|
||||
<ul>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/circle"><code><circle></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/ellipse"><code><ellipse></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/line"><code><line></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/path"><code><path></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polygon"><code><polygon></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polyline"><code><polyline></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/rect"><code><rect></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/text"><code><text></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/textPath"><code><textPath></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/tspan"><code><tspan></code></a></li>
|
||||
</ul></div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/svg/reference/attribute/stroke-width/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
|
||||
@@ -1 +1,23 @@
|
||||
<divclass='definition'><pre>stroke-width</pre></div><divclass='content'><details><summary><tablestyle='margin:0px;padding:0px'><tr><tdwidth=2valign=topstyle='margin:0px;padding:0px4px0px0px'><iconsrc='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon><tdstyle='margin:0px;padding:0px'>Widelyavailableacrossmajorbrowsers<i>(Baseline since 2022)</i></td></tr></table></summary><pclass='grayed'>Chrome80,ChromeAndroid80,Edge80,Firefox1,FirefoxAndroid4,Opera67,Safari13.1,SafariiOS13.4</details>The<strong><code>stroke-width</code></strong>attributeisapresentationattributedefiningthewidthofthestroketobeappliedtotheshape.ItappliestoanySVGshapeortext-contentelement,butasaninheritedproperty,itmaybeappliedtoelementssuchas<ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/g"><code><g></code></a>andstillhavetheintendedeffectondescendantelements'strokes.<divclass="notecardnote"><p><strong>Note:</strong>Asapresentationattribute,<code>stroke-width</code>alsohasaCSSpropertycounterpart:<ahref="https://developer.mozilla.org/en-us/docs/Web/CSS/stroke-width"><code>stroke-width</code></a>.Whenbotharespecified,theCSSpropertytakespriority.</div><p>YoucanusethisattributewiththefollowingSVGelements:<ul><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/circle"><code><circle></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/ellipse"><code><ellipse></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/line"><code><line></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/path"><code><path></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polygon"><code><polygon></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polyline"><code><polyline></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/rect"><code><rect></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/text"><code><text></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/textPath"><code><textPath></code></a></li><li><ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/tspan"><code><tspan></code></a></li></ul></div><divclass='content'>By<ahref='https://developer.mozilla.org/en-us/docs/web/svg/reference/attribute/stroke-width/contributors.txt'>MozillaContributors</a>,<ahref='https://creativecommons.org/licenses/by-sa/2.5/'>CCBY-SA2.5</a></div>
|
||||
<div class='definition'><pre>stroke-width</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 80, Chrome Android 80, Edge 80, Firefox 1, Firefox Android 4, Opera 67, Safari 13.1, Safari iOS 13.4. <i>Baseline since 2022</i></details>
|
||||
The <strong><code>stroke-width</code></strong> attribute is a presentation attribute defining the width of the stroke to be applied to the shape. It applies to any SVG shape or text-content element, but as an inherited property, it may be applied to elements such as <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/g"><code><g></code></a> and still have the intended effect on descendant elements' strokes.
|
||||
<div class="notecard note">
|
||||
<p><strong>Note:</strong>
|
||||
As a presentation attribute, <code>stroke-width</code> also has a CSS property counterpart: <a href="https://developer.mozilla.org/en-us/docs/Web/CSS/stroke-width"><code>stroke-width</code></a>. When both are specified, the CSS property takes priority.
|
||||
</div>
|
||||
<p>You can use this attribute with the following SVG elements:
|
||||
<ul>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/circle"><code><circle></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/ellipse"><code><ellipse></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/line"><code><line></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/path"><code><path></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polygon"><code><polygon></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/polyline"><code><polyline></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/rect"><code><rect></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/text"><code><text></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/textPath"><code><textPath></code></a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Element/tspan"><code><tspan></code></a></li>
|
||||
</ul></div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/svg/reference/attribute/stroke-width/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
<divclass='definition'><pre>viewBox</pre></div><divclass='content'><details><summary><tablestyle='margin:0px;padding:0px'><tr><tdwidth=2valign=topstyle='margin:0px;padding:0px4px0px0px'><iconsrc='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon><tdstyle='margin:0px;padding:0px'>Widelyavailableacrossmajorbrowsers<i>(Baseline since 2018)</i></td></tr></table></summary><pclass='grayed'>Chrome1,ChromeAndroid18,Edge12,Firefox1.5,FirefoxAndroid4,Opera8,Safari3,SafariiOS3</details>The<strong><code>viewBox</code></strong>attributedefinesthepositionanddimension,inuserspace,ofanSVGviewport.<p>Thevalueofthe<code>viewBox</code>attributeisalistoffournumbersseparatedbywhitespaceand/oracomma:<code>min-x</code>,<code>min-y</code>,<code>width</code>,and<code>height</code>.<code>min-x</code>and<code>min-y</code>representthesmallestXandYcoordinatesthatthe<code>viewBox</code>mayhave(theorigincoordinatesofthe<code>viewBox</code>)andthe<code>width</code>and<code>height</code>specifythe<code>viewBox</code>size.Theresulting<code>viewBox</code>isarectangleinuserspacemappedtotheboundsoftheviewportofanSVGelement(notthe<ahref="https://developer.mozilla.org/en-us/docs/Glossary/Viewport">browserviewport</a>).WhenanSVGcontainsa<code>viewBox</code>attribute(oftenincombinationwitha<ahref="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Attribute/preserveAspectRatio"><code>preserveAspectRatio</code></a>attribute),atransformstretchesorresizestheSVGviewporttofitaparticularcontainerelement.</div><divclass='content'>By<ahref='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/svg#viewbox/contributors.txt'>MozillaContributors</a>,<ahref='https://creativecommons.org/licenses/by-sa/2.5/'>CCBY-SA2.5</a></div>
|
||||
<div class='definition'><pre>viewBox</pre></div>
|
||||
<div class='content'><details style='margin-bottom: 4px'><summary><table style='border-spacing: 0; border-width: 0'><tr><td width=2 valign=top style='padding: 0 4px 0 0'><icon src='com.intellij.xml.frontback.impl.icons.XmlFrontbackImplIcons.BaselineHigh'></icon>
|
||||
<td style='padding: 0; width:100%'>Widely available across major browsers
|
||||
</td></tr></table></summary><p class='grayed' style='margin: 0; padding: 0 0 4px 0; line-height: 100%'>Chrome 1, Chrome Android 18, Edge 12, Firefox 1.5, Firefox Android 4, Opera 8, Safari 3, Safari iOS 3. <i>Baseline since 2018</i></details>
|
||||
The <strong><code>viewBox</code></strong> attribute defines the position and dimension, in user space, of an SVG viewport.
|
||||
<p>The value of the <code>viewBox</code> attribute is a list of four numbers separated by whitespace and/or a comma: <code>min-x</code>, <code>min-y</code>, <code>width</code>, and <code>height</code>. <code>min-x</code> and <code>min-y</code> represent the smallest X and Y coordinates that the <code>viewBox</code> may have (the origin coordinates of the <code>viewBox</code>) and the <code>width</code> and <code>height</code> specify the <code>viewBox</code> size. The resulting <code>viewBox</code> is a rectangle in user space mapped to the bounds of the viewport of an SVG element (not the <a href="https://developer.mozilla.org/en-us/docs/Glossary/Viewport">browser viewport</a>).
|
||||
When an SVG contains a <code>viewBox</code> attribute (often in combination with a <a href="https://developer.mozilla.org/en-us/docs/Web/SVG/Reference/Attribute/preserveAspectRatio"><code>preserveAspectRatio</code></a> attribute), a transform stretches or resizes the SVG viewport to fit a particular container element.</div>
|
||||
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/svg/reference/element/svg#viewbox/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<html x:found="true" x:href="http://www.w3.org/TR/xslt#element-apply-imports" xmlns:x="urn:xslt-documentation" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<head>
|
||||
|
||||
<style type="text/css" id="w3c">
|
||||
<style type="text/css" id="w3c">
|
||||
a.external {
|
||||
text-decoration: none;
|
||||
border-bottom-color: blue;
|
||||
@@ -157,56 +157,60 @@
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>
|
||||
<a name="apply-imports"></a>Overriding Template Rules</h3>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p class="element-syntax">
|
||||
<a name="element-apply-imports"></a><code><!--
|
||||
Category: instruction --><br>
|
||||
<xsl:apply-imports /></code>
|
||||
</p>
|
||||
<h3>
|
||||
<a name="apply-imports"></a>Overriding Template Rules
|
||||
</h3>
|
||||
|
||||
|
||||
<p>A template rule that is being used to override a template rule in an
|
||||
<p class="element-syntax">
|
||||
<a name="element-apply-imports"></a><code><!--
|
||||
Category: instruction -->
|
||||
<br>
|
||||
<xsl:apply-imports /></code>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A template rule that is being used to override a template rule in an
|
||||
imported stylesheet (see <a class="external" href="http://www.w3.org/TR/xslt#conflict">[<b>5.5 Conflict Resolution for
|
||||
Template Rules</b>]</a>) can use the <code>xsl:apply-imports</code> element
|
||||
to invoke the overridden template rule.</p>
|
||||
to invoke the overridden template rule.
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
<a name="dt-current-template-rule"></a>At any point in the processing of a
|
||||
<p>
|
||||
<a name="dt-current-template-rule"></a>At any point in the processing of a
|
||||
stylesheet, there is a <b>current template rule</b>. Whenever a template
|
||||
rule is chosen by matching a pattern, the template rule becomes the current
|
||||
template rule for the instantiation of the rule's template. When an
|
||||
<code>xsl:for-each</code> element is instantiated, the current template rule
|
||||
becomes null for the instantiation of the content of the
|
||||
<code>xsl:for-each</code> element.</p>
|
||||
<code>xsl:for-each</code> element.
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
<code>xsl:apply-imports</code> processes the current node using only
|
||||
<p>
|
||||
<code>xsl:apply-imports</code> processes the current node using only
|
||||
template rules that were imported into the stylesheet element containing the
|
||||
current template rule; the node is processed in the current template rule's
|
||||
mode. It is an error if <code>xsl:apply-imports</code> is instantiated when
|
||||
the current template rule is null.</p>
|
||||
the current template rule is null.
|
||||
</p>
|
||||
|
||||
|
||||
<p>For example, suppose the stylesheet <code>doc.xsl</code> contains a
|
||||
template rule for <code>example</code> elements:</p>
|
||||
|
||||
<pre><xsl:template match="example">
|
||||
<p>
|
||||
For example, suppose the stylesheet <code>doc.xsl</code> contains a
|
||||
template rule for <code>example</code> elements:
|
||||
</p>
|
||||
|
||||
<pre><xsl:template match="example">
|
||||
<pre><xsl:apply-templates/></pre>
|
||||
</xsl:template></pre>
|
||||
|
||||
|
||||
<p>Another stylesheet could import <code>doc.xsl</code> and modify the
|
||||
treatment of <code>example</code> elements as follows:</p>
|
||||
|
||||
<pre><xsl:import href="doc.xsl"/>
|
||||
<p>
|
||||
Another stylesheet could import <code>doc.xsl</code> and modify the
|
||||
treatment of <code>example</code> elements as follows:
|
||||
</p>
|
||||
|
||||
<pre><xsl:import href="doc.xsl"/>
|
||||
|
||||
<xsl:template match="example">
|
||||
<div style="border: solid red">
|
||||
@@ -214,17 +218,19 @@
|
||||
</div>
|
||||
</xsl:template></pre>
|
||||
|
||||
|
||||
<p>The combined effect would be to transform an <code>example</code> into an
|
||||
element of the form:</p>
|
||||
|
||||
<pre><div style="border: solid red"><pre>...</pre></div></pre>
|
||||
|
||||
<p id="w3c-footer" class="copyright">
|
||||
<a href="http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright">Copyright</a>
|
||||
<p>
|
||||
The combined effect would be to transform an <code>example</code> into an
|
||||
element of the form:
|
||||
</p>
|
||||
|
||||
<pre><div style="border: solid red"><pre>...</pre></div></pre>
|
||||
|
||||
<p id="w3c-footer" class="copyright">
|
||||
<a href="http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright">Copyright</a>
|
||||
© 1999 <a href="http://www.w3.org">W3C</a><sup>®</sup>
|
||||
(<a href="http://www.lcs.mit.edu">MIT</a>, <a href="http://www.inria.fr/">INRIA</a>,
|
||||
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved.
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<html x:found="true" x:href="http://www.w3.org/TR/xslt#element-attribute" xmlns:x="urn:xslt-documentation" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<head>
|
||||
|
||||
<style type="text/css" id="w3c">
|
||||
<style type="text/css" id="w3c">
|
||||
a.external {
|
||||
text-decoration: none;
|
||||
border-bottom-color: blue;
|
||||
@@ -157,37 +157,42 @@
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>
|
||||
<a name="creating-attributes"></a>Creating Attributes with
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>
|
||||
<a name="creating-attributes"></a>Creating Attributes with
|
||||
<code>xsl:attribute</code>
|
||||
</h3>
|
||||
</h3>
|
||||
|
||||
|
||||
<p class="element-syntax">
|
||||
<a name="element-attribute"></a><code><!--
|
||||
Category: instruction --><br>
|
||||
<xsl:attribute<br>
|
||||
<b>name</b> = { <var>qname</var> }<br>
|
||||
namespace = { <var>uri-reference</var> }><br>
|
||||
<!-- Content: <var>template</var> --><br>
|
||||
</xsl:attribute></code>
|
||||
</p>
|
||||
<p class="element-syntax">
|
||||
<a name="element-attribute"></a><code><!--
|
||||
Category: instruction -->
|
||||
<br>
|
||||
<xsl:attribute
|
||||
<br>
|
||||
<b>name</b> = { <var>qname</var> }
|
||||
<br>
|
||||
namespace = { <var>uri-reference</var> }>
|
||||
<br>
|
||||
<!-- Content: <var>template</var> -->
|
||||
<br>
|
||||
</xsl:attribute></code>
|
||||
</p>
|
||||
|
||||
|
||||
<p>The <code>xsl:attribute</code> element can be used to add attributes to
|
||||
<p>
|
||||
The <code>xsl:attribute</code> element can be used to add attributes to
|
||||
result elements whether created by literal result elements in the stylesheet
|
||||
or by instructions such as <code>xsl:element</code>. The <a class="external" href="http://www.w3.org/TR/xpath#dt-expanded-name">expanded-name</a> of the
|
||||
attribute to be created is specified by a required <code>name</code>
|
||||
attribute and an optional <code>namespace</code> attribute. Instantiating an
|
||||
<code>xsl:attribute</code> element adds an attribute node to the containing
|
||||
result element node. The content of the <code>xsl:attribute</code> element is
|
||||
a template for the value of the created attribute.</p>
|
||||
a template for the value of the created attribute.
|
||||
</p>
|
||||
|
||||
|
||||
<p>The <code>name</code> attribute is interpreted as an <a class="external" href="http://www.w3.org/TR/xslt#dt-attribute-value-template">attribute value template</a>. It is an
|
||||
<p>
|
||||
The <code>name</code> attribute is interpreted as an <a class="external" href="http://www.w3.org/TR/xslt#dt-attribute-value-template">attribute value template</a>. It is an
|
||||
error if the string that results from instantiating the attribute value
|
||||
template is not a <a class="external" href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> or is the string
|
||||
<code>xmlns</code>. An XSLT processor may signal the error; if it does not
|
||||
@@ -195,10 +200,11 @@
|
||||
tree. If the <code>namespace</code> attribute is not present, then the <a class="external" href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> is expanded into
|
||||
an expanded-name using the namespace declarations in effect for the
|
||||
<code>xsl:attribute</code> element, <i>not</i> including any default
|
||||
namespace declaration.</p>
|
||||
namespace declaration.
|
||||
</p>
|
||||
|
||||
|
||||
<p>If the <code>namespace</code> attribute is present, then it also is
|
||||
<p>
|
||||
If the <code>namespace</code> attribute is present, then it also is
|
||||
interpreted as an <a class="external" href="http://www.w3.org/TR/xslt#dt-attribute-value-template">attribute value
|
||||
template</a>. The string that results from instantiating it should be a URI
|
||||
reference. It is not an error if the string is not a syntactically legal URI
|
||||
@@ -206,78 +212,82 @@
|
||||
has a null namespace URI. Otherwise, the string is used as the namespace URI
|
||||
of the expanded-name of the attribute to be created. The local part of the <a class="external" href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> specified by the
|
||||
<code>name</code> attribute is used as the local part of the expanded-name of
|
||||
the attribute to be created.</p>
|
||||
the attribute to be created.
|
||||
</p>
|
||||
|
||||
|
||||
<p>XSLT processors may make use of the prefix of the <a class="external" href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> specified in the
|
||||
<p>
|
||||
XSLT processors may make use of the prefix of the <a class="external" href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> specified in the
|
||||
<code>name</code> attribute when selecting the prefix used for outputting the
|
||||
created attribute as XML; however, they are not required to do so and, if the
|
||||
prefix is <code>xmlns</code>, they must not do so. Thus, although it is not
|
||||
an error to do:</p>
|
||||
|
||||
<pre><xsl:attribute name="xmlns:xsl" namespace="whatever">http://www.w3.org/1999/XSL/Transform</xsl:attribute></pre>
|
||||
an error to do:
|
||||
</p>
|
||||
|
||||
|
||||
<p>it will not result in a namespace declaration being output.</p>
|
||||
<pre><xsl:attribute name="xmlns:xsl" namespace="whatever">http://www.w3.org/1999/XSL/Transform</xsl:attribute></pre>
|
||||
|
||||
|
||||
<p>Adding an attribute to an element replaces any existing attribute of that
|
||||
<p>it will not result in a namespace declaration being output.</p>
|
||||
|
||||
<p>Adding an attribute to an element replaces any existing attribute of that
|
||||
element with the same expanded-name.</p>
|
||||
|
||||
|
||||
<p>The following are all errors:</p>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<p>Adding an attribute to an element after children have been added to
|
||||
<p>The following are all errors:</p>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<p>Adding an attribute to an element after children have been added to
|
||||
it; implementations may either signal the error or ignore the
|
||||
attribute.</p>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>Adding an attribute to a node that is not an element;
|
||||
implementations may either signal the error or ignore the attribute.</p>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>Creating nodes other than text nodes during the instantiation of the
|
||||
content of the <code>xsl:attribute</code> element; implementations may
|
||||
either signal the error or ignore the offending nodes.</p>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<blockquote>
|
||||
|
||||
<b>NOTE:</b>When an <code>xsl:attribute</code> contains a text node with a
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>Adding an attribute to a node that is not an element;
|
||||
implementations may either signal the error or ignore the attribute.</p>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>
|
||||
Creating nodes other than text nodes during the instantiation of the
|
||||
content of the <code>xsl:attribute</code> element; implementations may
|
||||
either signal the error or ignore the offending nodes.
|
||||
</p>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<blockquote>
|
||||
<b>NOTE:</b>When an <code>xsl:attribute</code> contains a text node with a
|
||||
newline, then the XML output must contain a character reference. For
|
||||
example,
|
||||
<pre><xsl:attribute name="a">x
|
||||
|
||||
<pre><xsl:attribute name="a">x
|
||||
y</xsl:attribute></pre>
|
||||
will result in the output
|
||||
<pre>a="x&#xA;y"</pre>
|
||||
(or with any equivalent character reference). The XML output cannot be
|
||||
<pre>a="x
|
||||
will result in the output
|
||||
|
||||
<pre>a="x&#xA;y"</pre>
|
||||
(or with any equivalent character reference). The XML output cannot be
|
||||
|
||||
<pre>a="x
|
||||
y"</pre>
|
||||
This is because XML 1.0 requires newline characters in attribute values to
|
||||
This is because XML 1.0 requires newline characters in attribute values to
|
||||
be normalized into spaces but requires character references to newline
|
||||
characters not to be normalized. The attribute values in the data model
|
||||
represent the attribute value after normalization. If a newline occurring
|
||||
in an attribute value in the tree were output as a newline character rather
|
||||
than as character reference, then the attribute value in the tree created
|
||||
by reparsing the XML would contain a space not a newline, which would mean
|
||||
that the tree had not been output correctly.</blockquote>
|
||||
|
||||
<p id="w3c-footer" class="copyright">
|
||||
<a href="http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright">Copyright</a>
|
||||
that the tree had not been output correctly.
|
||||
</blockquote>
|
||||
|
||||
<p id="w3c-footer" class="copyright">
|
||||
<a href="http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright">Copyright</a>
|
||||
© 1999 <a href="http://www.w3.org">W3C</a><sup>®</sup>
|
||||
(<a href="http://www.lcs.mit.edu">MIT</a>, <a href="http://www.inria.fr/">INRIA</a>,
|
||||
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved.
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user