recursal/MDN huggingface dataset:
XSLTProcessor: getParameter() method
====================================

The `getParameter()` method of the `XSLTProcessor` interface returns the value of a parameter (`<xsl:param>`) from the stylesheet imported in the processor.

Syntax
------


```js
getParameter(namespaceURI, localName)
```

### Parameters

`namespaceURI`

The namespace associated with the parameter name. A "null" value is treated the same as the empty string (`""`).

`localName`

The name of the parameter in the associated namespace.

### Return value

An object that is the value associated with the parameter. It can be of any type.

**Note:** Firefox supports any kind of parameter. Chrome, Edge and Safari only support string parameters.

Examples
--------

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-getparameter |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XSLTProcessor.setParameter()`
* `XSLTProcessor.removeParameter()`
* `XSLTProcessor.clearParameters()`
* `XSLTProcessor.reset()`
XSLT Basic Example
==================

 This first example demonstrates the basics of setting up an XSLT transformation in a browser.
 The example takes an XML document that contains information about an article (title, list of authors and body text) and presents it in a human-readable form.

The XML document (**example.xml**) is shown below.


```xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="example.xsl"?>
<Article>
  <Title>My Article</Title>
  <Authors>
    <Author>Mr. Foo</Author>
    <Author>Mr. Bar</Author>
  </Authors>
  <Body>This is my article text.</Body>
</Article>
```


The `?xml-stylesheet` processing instruction in the XML file specifies the XSLT stylesheet to apply in its `href` attribute.

This XSL stylesheet file (**example.xsl**) is shown below:


```xml
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="text"/>

  <xsl:template match="/">
    Article - <xsl:value-of select="/Article/Title"/>
    Authors: <xsl:apply-templates select="/Article/Authors/Author"/>
  </xsl:template>

  <xsl:template match="Author">
    - <xsl:value-of select="." />
  </xsl:template>

</xsl:stylesheet>
```


 An XSLT stylesheet starts with the `xsl:stylesheet` element, which contains all the *templates* used to create the final output.
 The example above has two templates - one that matches the root node and one that matches `Author` nodes.
 The template that matches the root node outputs the article's title and then says to process all templates (via `apply-templates`) that match `Author` nodes which are children of the `Authors` node.

To try out the example:

1. Create a directory in your file system and inside it create the files `example.xml` and `example.xsl` listed above
2. Start a local server in the directory containing the files.
 This allows you to browse the files in the directory as though they were hosted on the internet.


**Warning:** Opening the XML file directly from the file system will not work, because loading the stylesheet from the file system is a cross-origin request, and will be disallowed by default.
 Hosting the XML and stylesheet on the same local server ensures that they have the same origin.
3. Open **example.xml** from the browser.
4. The browser output is then as shown below:
```

Browser Output :

    Article - My Article
    Authors:
    - Mr. Foo
    - Mr. Bar
```
XSLTProcessor: transformToFragment() method
===========================================

The `transformToFragment()` method of the `XSLTProcessor` interface transforms a provided `Node` source to a `DocumentFragment` using the XSLT stylesheet associated with the `XSLTProcessor`.

Syntax
------


```js
transformToFragment(source, document)
```

### Parameters

`source`

The `Node` source to apply the XSLT stylesheet to.

`document`

The `Document` the document fragment will be associated with. (Any document fragment is associated with a document it can be added to).

### Return value

A `DocumentFragment`.

Examples
--------

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-transformtofragment |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XSLTProcessor.transformToDocument()`
XSLTProcessor: XSLTProcessor() constructor
==========================================

The **`XSLTProcessor()`** constructor creates a new `XSLTProcessor` object instance.

Syntax
------


```js
new XSLTProcessor()
```

### Parameters

None.

### Return value

A new `XSLTProcessor` object instance.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-xsltprocessor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XSLTProcessor: importStylesheet() method
========================================

The `importStylesheet()` method of the `XSLTProcessor` interface imports an XSLT stylesheet for the processor.

Syntax
------


```js
importStylesheet(style)
```

### Parameters

`style`

The `Node` to import. It can be an XML document (that is a `Document` with `doctype``.``name` of `"xml"`) containing an XSLT stylesheet or a literal result element transform, or an `Element` representing an `<xsl:stylesheet>` or `<xsl:transform>`.

### Return value

None (`undefined`).

Examples
--------

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-importstylesheet |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XSLTProcessor: transformToDocument() method
===========================================

The `transformToDocument()` method of the `XSLTProcessor` interface transforms the provided `Node` source to a `Document` using the XSLT stylesheet associated with `XSLTProcessor`.

Syntax
------


```js
transformToDocument(source)
```

### Parameters

`source`

The `Node` source to apply the XSLT stylesheet to.

### Return value

A `Document`. The actual interface depends on the output method of the stylesheet:

| Output method | Result interface |
| --- | --- |
| `html` | `HTMLDocument` |
| `xml` | `XMLDocument` |
| `text` | `XMLDocument` with a single root element `<transformiix:result>` with the text as a child |

Examples
--------

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-transformtodocument |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XSLTProcessor.transformToDocument()`
XSLTProcessor: removeParameter() method
=======================================

The `removeParameter()` method of the `XSLTProcessor` interface removes the parameter (`<xsl:param>`) and its value from the stylesheet imported in the processor.

Syntax
------


```js
removeParameter(namespaceURI, localName)
```

### Parameters

`namespaceURI`

The namespace associated with the parameter name. A "null" value is treated the same as the empty string (`""`).

`localName`

The name of the parameter in the associated namespace.

### Return value

None (`undefined`).

Examples
--------

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-removeparameter |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XSLTProcessor.getParameter()`
* `XSLTProcessor.setParameter()`
* `XSLTProcessor.clearParameters()`
* `XSLTProcessor.reset()`
Introduction
============

One noticeable trend in W3C standards has been the effort to separate content from style. This would allow the same style to be reused for multiple content, as well as simplify maintenance and allow a quick (only modify one file) way to change the look of content.

CSS (Cascade Style Sheets) was one of the first ways proposed by the W3C. CSS is a simple way to apply style rules to a web document. These style rules define how the document (the content) should be laid out. However, it has several limitations, such as lack of programming structures and ability to create complex layout models. CSS also has limited support for changing the position of an element.

XSL (Extensible Stylesheet Language) Transformations are composed of two parts: XSL elements, which allow the transformation of an XML tree into another markup tree and XPath, a selection language for trees. XSLT takes an XML document (the content) and creates a brand new document based on the rules in the XSL stylesheet. This allows XSLT to add, remove and reorganize elements from the original XML document and thus allows more fine-grain control of the resulting document's structure.

Transformations in XSLT are based on rules that consist of templates. Each template matches (using XPath) a certain fragment of the input XML document and then applies the substitution part on that fragment to create the new resulting document.
XSLTProcessor: setParameter() method
====================================

The `setParameter()` method of the `XSLTProcessor` interface sets the value of a parameter (`<xsl:param>`) in the stylesheet imported in the processor.

Syntax
------


```js
setParameter(namespaceURI, localName, value)
```

### Parameters

`namespaceURI`

The namespace associated with the parameter name. A "null" value is treated the same as the empty string (`""`).

`localName`

The name of the parameter in the associated namespace.

`value`

The value of the parameter.

**Note:** Firefox supports any kind of parameter. Chrome, Edge and Safari only support string parameters.

### Return value

None (`undefined`).

Examples
--------

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-setparameter |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XSLTProcessor.getParameter()`
* `XSLTProcessor.removeParameter()`
* `XSLTProcessor.clearParameters()`
* `XSLTProcessor.reset()`
XSLTProcessor: clearParameters() method
=======================================

The `clearParameters()` method of the `XSLTProcessor` interface removes all parameters (`<xsl:param>`) and their values from the stylesheet imported in the processor. The `XSLTProcessor` will then use the default values specified in the XSLT stylesheet.

Syntax
------


```js
clearParameters()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-xsltprocessor-clearparameters |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XSLTProcessor.getParameter()`
* `XSLTProcessor.setParameter()`
* `XSLTProcessor.removeParameter()`
* `XSLTProcessor.reset()`
XRSubImage: viewport property
=============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The read-only **`viewport`** property of the `XRSubImage` interface represents the `XRViewport` that is used when rendering the sub image.

Value
-----

An `XRViewport`.

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrsubimage-viewport |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRViewport`
GPUCommandEncoder: popDebugGroup() method
=========================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`popDebugGroup()`** method of the
 `GPUCommandEncoder` interface ends a debug group, which is begun with a `pushDebugGroup()` call.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
popDebugGroup()
```

### Parameters

None.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`popDebugGroup()`**, otherwise a `GPUValidationError` is generated and the `GPUCommandEncoder` becomes invalid:

* The command encoder's debug stack is not empty (i.e. at least one debug group was previously started with `pushDebugGroup()`).
Examples
--------


```js
// ...

commandEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

passEncoder.end();

commandEncoder.popDebugGroup(); // End labeled debug group

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-popdebuggroup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPUCommandEncoder: copyBufferToBuffer() method
==============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`copyBufferToBuffer()`** method of the
 `GPUCommandEncoder` interface encodes a command that copies data from one `GPUBuffer` to another.

Syntax
------


```js
copyBufferToBuffer(source, sourceOffset, destination, destinationOffset, size)
```

### Parameters

`source`

The `GPUBuffer` to copy from.

`sourceOffset`

The offset, in bytes, into the `source` to begin copying from.

`destination`

The `GPUBuffer` to copy to.

`destinationOffset`

The offset, in bytes, into the `destination` to begin copying to.

`size`

The number of bytes to copy.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`copyBufferToBuffer()`**, otherwise a `GPUValidationError` is generated and the `GPUCommandEncoder` becomes invalid:

* The `source`'s `GPUBuffer.usage` includes the `GPUBufferUsage.COPY_SRC` flag.
* The `destination`'s `GPUBuffer.usage` includes the `GPUBufferUsage.COPY_DST` flag.
* `size`, `sourceOffset`, and `destinationOffset` are all multiples of 4.
* The `source`'s `GPUBuffer.size` is greater than or equal to `sourceOffset` + `size`.
* The `destination`'s `GPUBuffer.size` is greater than or equal to `destinationOffset` + `size`.
* `source` and `destination` are different `GPUBuffer`s (you can't copy from and to the same buffer).
Examples
--------

In our basic compute demo, we use `copyBufferToBuffer()` to copy the contents of our `output` buffer to the `stagingBuffer`.


```js
// ...

// Create an output buffer to read GPU calculations to, and a staging buffer to be mapped for JavaScript access

const output = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY\_SRC,
});

const stagingBuffer = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.MAP\_READ | GPUBufferUsage.COPY\_DST,
});

// ...

// Create GPUCommandEncoder to encode commands to issue to the GPU
const commandEncoder = device.createCommandEncoder();

// ...

// Copy output buffer to staging buffer
commandEncoder.copyBufferToBuffer(
  output,
  0, // Source offset
  stagingBuffer,
  0, // Destination offset
  BUFFER\_SIZE,
);

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpucommandencoder-copybuffertobuffer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPUCommandEncoder: finish() method
==================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`finish()`** method of the
 `GPUCommandEncoder` interface completes recording of the command sequence encoded on this `GPUCommandEncoder`, returning a corresponding `GPUCommandBuffer`.

Syntax
------


```js
finish()
finish(descriptor)
```

### Parameters

`descriptor` Optional

An object that can contain the following properties:

`label` Optional

A string providing a label for the returned `GPUCommandBuffer` that can be used to identify it, for example in `GPUError` messages or console warnings.


### Return value

A `GPUCommandBuffer` object instance.

### Validation

The following criteria must be met when calling **`finish()`**, otherwise a `GPUValidationError` is generated and the `GPUCommandEncoder` becomes invalid:

* There are no active debug groups (i.e. started via `pushDebugGroup()`).
* The `GPUCommandEncoder` is in an open state — this means that:
    + There are no child `GPUComputePassEncoder` or `GPURenderPassEncoder`s active that have not been `end()`ed.
    + The `GPUCommandEncoder` has not already had `finish()` called on it (in which case it cannot be used to encode any more commands).
Examples
--------


```js
// ...

const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpucommandencoder-finish |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPUCommandEncoder: pushDebugGroup() method
==========================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`pushDebugGroup()`** method of the
 `GPUCommandEncoder` interface begins a debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
pushDebugGroup(groupLabel)
```

### Parameters

`groupLabel`

A string representing the label for the debug group.

### Return value

None (`Undefined`).

Examples
--------


```js
// ...

commandEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

passEncoder.end();

commandEncoder.popDebugGroup(); // End labeled debug group

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-pushdebuggroup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPUCommandEncoder: insertDebugMarker() method
=============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`insertDebugMarker()`** method of the
 `GPUCommandEncoder` interface marks a specific point in a series of encoded commands with a label.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
insertDebugMarker(markerLabel)
```

### Parameters

`markerLabel`

A string representing the label to insert.

### Return value

None (`Undefined`).

Examples
--------


```js
// ...

commandEncoder.insertDebugMarker("mymarker");

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-insertdebugmarker |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPUCommandEncoder: writeTimestamp() method
==========================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`writeTimestamp()`** method of the
 `GPUCommandEncoder` interface encodes a command that writes a timestamp into a `GPUQuerySet` once the previous commands recorded into the same queued `GPUCommandBuffer` have been executed by the GPU.

**Note:** To use timestamp queries, the `timestamp-query` feature must be enabled in the `GPUDevice`.

Syntax
------


```js
writeTimestamp(querySet, queryIndex)
```

### Parameters

`querySet`

A `GPUQuerySet` object representing the query set that will store the timestamp values.

`queryIndex`

A number representing the index of the query in the query set.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`writeTimestamp()`**, otherwise a `GPUValidationError` is generated and the `GPUCommandEncoder` becomes invalid:

* The `timestamp-query` feature is enabled in the `GPUDevice`.
* The `querySet` `GPUQuerySet.type` is `"timestamp"`
* The `queryIndex` value is less than the `GPUQuerySet.count`.
Examples
--------


```js
// ...

const querySet = device.createQuerySet({
  type: "timestamp",
  count: 32,
});

// ...

commandEncoder.writeTimestamp(querySet, 0);

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpucommandencoder-writetimestamp |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPUCommandEncoder: label property
=================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`label`** read-only property of the
 `GPUCommandEncoder` interface is a string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createCommandEncoder()` call, or you can get and set it directly on the `GPUCommandEncoder` object.

Value
-----

A string. If no label value has previously been set, getting the label returns an empty string.

Examples
--------

Setting and getting a label via `GPUCommandEncoder.label`:


```js
const commandEncoder = device.createCommandEncoder();
commandEncoder.label = "mycommandencoder";
console.log(commandEncoder.label); // "mycommandencoder";
```


Setting a label via the originating `GPUDevice.createCommandEncoder()` call, and then getting it via `GPUCommandEncoder.label`:


```js
const commandEncoder = device.createCommandEncoder({
  label: "mycommandencoder",
});

console.log(commandEncoder.label); // "mycommandencoder";
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API