Search completed in 1.28 seconds.
CanvasRenderingContext2D.clearRect() - Web APIs
the canvasrenderingcon
text2d.clearrect() method of the canvas 2d api erases the pixels in a rectangular area by setting them to transparent black.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.clearrect(0, 0, canvas.width, canvas.height); erasing part of a canvas this example draws a blue triangle on top of a yellowish background.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingco...
...n
text2d.clearrect' in that specification.
CanvasRenderingContext2D.createImageData() - Web APIs
the canvasrenderingcon
text2d.createimagedata() method of the canvas 2d api creates a new, blank imagedata object with the specified dimensions.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); const imagedata = ctx.createimagedata(100, 50); console.log(imagedata); // imagedata { width: 100, height: 50, data: uint8clampedarray[20000] } filling a blank imagedata object this example creates and fills a new imagedata object with purple pixels.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata() ...
... specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.createimagedata' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
the canvasrenderingcon
text2d.drawfocusifneeded() method of the canvas 2d api draws a focus ring around the current or given path, if the specified element is focused.
... html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2...
...'pink' : 'lightgray'; ctx.fillrect(x, y, width, height); // button
text ctx.font = '15px sans-serif'; ctx.
textalign = 'center'; ctx.
textbaseline = 'middle'; ctx.fillstyle = active ?
... 'blue' : 'black'; ctx.fill
text(el.
textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); } result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.drawfocusifneeded' in that specification.
CanvasRenderingContext2D.filter - Web APIs
the canvasrenderingcon
text2d.filter property of the canvas 2d api provides filter effects such as blurring and grayscaling.
... applying a blur this example blurs a piece of
text using the filter property.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.fill
text('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.filter' in that specification.
CanvasRenderingContext2D.getTransform() - Web APIs
the canvasrenderingcon
text2d.gettransform() method of the canvas 2d api retrieves the current transformation matrix being applied to the con
text.
...we apply a transform to the first one's con
text using canvasrenderingcon
text2d.settransform() and draw a square on it, then retrieve the matrix from it using gettransform().
... we then apply the retrieved matrix directly to the second canvas con
text by passing the dommatrix object directly to settransform(), and draw a circle on it.
... html <canvas width="240"></canvas> <canvas width="240"></canvas> css canvas { border: 1px solid black; } javascript const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].getcon
text('2d'); const ctx2 = canvases[1].getcon
text('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.gettransform' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcon
text2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.ar...
...c(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.globalalpha' in that specification.
CanvasRenderingContext2D.isPointInStroke() - Web APIs
the canvasrenderingcon
text2d.ispointinstroke() method of the canvas 2d api reports whether or not the specified point is inside the area contained by the stroking of a path.
... html <canvas id="canvas"></canvas> <p>in stroke: <code id="result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.inner
text = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); r...
...esult specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.ispointinstroke' in that specification.
CanvasRenderingContext2D.lineJoin - Web APIs
the canvasrenderingcon
text2d.linejoin property of the canvas 2d api determines the shape used to join two line segments where they meet.
... note: lines can be drawn with the stroke(), strokerect(), and stroke
text() methods.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(280, 20); ctx.lineto(280, 150); ctx.stroke(); result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options.
... <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.getelementbyid('canvas').getcon
text('2d'); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.linejoin' in that specification.
CanvasRenderingContext2D.lineWidth - Web APIs
the canvasrenderingcon
text2d.linewidth property of the canvas 2d api sets the thickness of lines.
... note: lines can be drawn with the stroke(), strokerect(), and stroke
text() methods.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
... specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.linewidth' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcon
text2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
... polyfill you can also use the settransform() method to reset the current transform to the identity matrix, like so: ctx.settransform(1, 0, 0, 1, 0, 0); specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.resettransform' in that specification.
CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcon
text2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the ...
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
... specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.rotate' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
the canvasrenderingcon
text2d.scrollpathintoview() method of the canvas 2d api scrolls the current or given path into view.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type=...
..."button" value="reset" /> </div> <
textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</
textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcon
text("2d"); var
textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code =
textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(
textarea.value); } reset.addeventlistener("click", function() {
textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() {
textarea.focus(); })
textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specificatio...
...n status comment html living standardthe definition of 'canvasrenderingcon
text2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
the canvasrenderingcon
text2d.stroke() method of the canvas 2d api strokes (outlines) the current or given path with the current stroke style.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // first sub-path ctx.linewidth = 26; ctx.strokestyle = 'orange'; ctx.moveto(20, 20); ctx.lineto(160, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.strokestyle = 'green'; ctx.moveto(20, 80); ctx.lineto(220, 80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result stroking and fi...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.stroke'...
CanvasRenderingContext2D.translate() - Web APIs
the canvasrenderingcon
text2d.translate() method of the canvas 2d api adds a translation transformation to the current matrix.
... html <canvas id="canvas"></canvas> javascript the translate() method translates the con
text by 110 horizontally and 30 vertically.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
... specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.translate' in that specification.
Clipboard.writeText() - Web APIs
the clipboard interface's write
text() property writes the specified
text string to the system clipboard.
...
text may be read back using either read() or read
text().
... syntax var promise = navigator.clipboard.write
text(newclip
text) parameters newclip
text the domstring to be written to the clipboard.
... navigator.clipboard.write
text("<empty clipboard>").then(function() { /* clipboard successfully set */ }, function() { /* clipboard write failed */ }); specifications specification status comment clipboard api and eventsthe definition of 'write
text()' in that specification.
WebGLRenderingContext.commit() - Web APIs
the webglrenderingcon
text.commit() method pushes frames back to the original htmlcanvaselement, if the con
text is not directly fixed to a specific canvas.
... syntax void webglrenderingcon
text.commit() examples var htmlcanvas = document.createelement('canvas'); var offscreen = htmlcanvas.transfercontroltooffscreen(); var gl = offscreen.getcon
text('webgl'); // ...
... some drawing using the gl con
text ...
... // push frames back to the original htmlcanvaselement gl.commit(); specifications specification status comment html living standardthe definition of 'the commit() method of the offscreencanvas object's rendering con
text' in that specification.
WebGLRenderingContext.getBufferParameter() - Web APIs
the webglrenderingcon
text.getbufferparameter() method of the webgl api returns information about the buffer.
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates,
texture coordinate data, or vertex color data.
... when using a webgl 2 con
text, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
... when using a webgl 2 con
text, the following values are available additionally: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
WebGLRenderingContext.pixelStorei() - Web APIs
the webglrenderingcon
text.pixelstorei() method of the webgl api specifies the pixel storage modes.
... glenum gl.browser_default_webgl gl.browser_default_webgl, gl.none webgl when using a webgl 2 con
text, the following values are available additionally: constant description type default value allowed values (for param) specified in gl.pack_row_length number of pixels in a row.
...0 gl.unpack_skip_rows number of rows of pixel locations skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_images number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 examples setting the pixel storage mode affects the webglrenderingcon
text.readpixels() operations, as well as unpacking of
textures with the webglrenderingcon
text.teximage2d() and webglrenderingcon
text.texsubimage2d() methods.
... var tex = gl.create
texture(); gl.bind
texture(gl.
texture_2d, tex); gl.pixelstorei(gl.pack_alignment, 4); to check the values for packing and unpacking of pixel data, you can query the same pixel storage parameters with webglrenderingcon
text.getparameter().
Window.isSecureContext - Web APIs
the window.issecurecon
text read-only property indicates whether a con
text is capable of using features that require secure con
texts.
... syntax var issecure = window.issecurecon
text examples feature detection you can use feature detection to check whether they are in a secure con
text or not by using the issecurecon
text boolean which is exposed on the global scope.
... if (window.issecurecon
text) { // page is a secure con
text so service workers are now available navigator.serviceworker.register("/offline-worker.js").then(function () { ...
... }); } specifications specification status comment secure con
texts candidate recommendation initial definition.
-webkit-text-fill-color - CSS: Cascading Style Sheets
the -webkit-
text-fill-color css property specifies the fill color of characters of
text.
... /* <color> values */ -webkit-
text-fill-color: red; -webkit-
text-fill-color: #000000; -webkit-
text-fill-color: rgb(100, 200, 0); /* global values */ -webkit-
text-fill-color: inherit; -webkit-
text-fill-color: initial; -webkit-
text-fill-color: unset; syntax values <color> the foreground fill color of the element's
text content.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples changing the fill color css p { margin: 0; font-size: 3em; -webkit-
text-fill-color: green; } html <p>this
text is green.</p> results specifications specification status comment compatibility standardthe definition of '-webkit-
text-fill-color' in that specification.
... living standard initial standardization safari css reference '-webkit-
text-fill-color' in that document.
-webkit-text-security - CSS: Cascading Style Sheets
-webkit-
text-security is a non-standard css property that obfuscates characters in a <form> field (such as <input> or <
textarea>) by replacing them with a shape.
... syntax -webkit-
text-security: circle; -webkit-
text-security: disc; -webkit-
text-security: square; -webkit-
text-security: none; formal definition value not found in db!
... examples obscuring a
text input try typing in the field below.
... html <label for="name">name:</label> <input type="
text" name="name" id="name" /> css input { -webkit-
text-security: square; } result specifications not part of any standard.
-webkit-text-stroke-width - CSS: Cascading Style Sheets
the -webkit-
text-stroke-width css property specifies the width of the stroke for
text.
... syntax /* keyword values */ -webkit-
text-stroke-width: thin; -webkit-
text-stroke-width: medium; -webkit-
text-stroke-width: thick; /* <length> values */ -webkit-
text-stroke-width: 2px; -webkit-
text-stroke-width: 0.1em; -webkit-
text-stroke-width: 1mm; -webkit-
text-stroke-width: 5pt; /* global values */ -webkit-
text-stroke-width: inherit; -webkit-
text-stroke-width: initial; -webkit-
text-stroke-width: unset; values <line-width> the width of the stroke.
... formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-
text-stroke-color: red; } #thin { -webkit-
text-stroke-width: thin; } #medium { -webkit-
text-stroke-width: 3px; } #thick { -webkit-
text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-
text-stroke-width' in that specification.
... living standard initial standardization safari css reference '-webkit-
text-stroke-width' in that document.
CSS Text Decoration - CSS: Cascading Style Sheets
css
text decoration is a module of css that defines features relating to
text decoration, such as underlines,
text shadows, and emphasis marks.
... reference properties letter-spacing
text-align
text-decoration
text-decoration-color
text-decoration-line
text-decoration-offset
text-decoration-skip-ink
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-rendering
text-shadow
text-transform white-space word-spacing guides none.
... examples .under {
text-decoration: underline red; } .over {
text-decoration: wavy overline lime; } .line {
text-decoration: line-through; } .plain {
text-decoration: none; } .underover {
text-decoration: dashed underline overline; } .thick {
text-decoration: solid underline purple 4px; } .blink {
text-decoration: blink; } <p class="under">this
text has a line underneath it.</p> <p class="over">this
text has a line over it.</p> <p class="line">this
text has a line going through it.</p> <p>this <a class="plain" href="#">link will not be underlined</a>, as links generally are by default.
... be careful when removing the
text decoration on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this
text has lines above <em>and</em> below it.</p> <p class="thick">this
text has a really thick purple underline in supporting browsers.</p> <p class="blink">this
text might blink for you, depending on the browser you use.</p> specifications specification status comment css
text decoration module level 4 working draft css
text decoration module level 3 candidate recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
text-emphasis-color - CSS: Cascading Style Sheets
the
text-emphasis-color css property sets the color of emphasis marks.
... this value can also be set using the
text-emphasis shorthand.
... /* initial value */
text-emphasis-color: currentcolor; /* <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent; /* global values */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: unset; syntax values <color> defines the color of the emphasis marks.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples emphasis with a color and custom character css em {
text-emphasis-color: green;
text-emphasis-style: "*"; } html <p>here's an example:</p> <em>this has emphasis marks!</em> result specifications specification status comment css
text decoration module level 3the definition of '
text-emphasis' in that specification.
text-orientation - CSS: Cascading Style Sheets
the
text-orientation css property sets the orientation of the
text characters in a line.
... it only affects
text in vertical mode (when writing-mode is not horizontal-tb).
... syntax /* keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation; /* global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset; the
text-orientation property is specified as a single keyword from the list below.
... formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-mode: vertical-rl;
text-orientation: upright; } result specifications specification status comment css writing modes module level 3the definition of '
text-orientation' in that specification.
HTML attribute: maxlength - HTML: Hypertext Markup Language
the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <input> or <
textarea>.
...if no maxlength is specified, or an invalid value is specified, the input or
textarea has no maximum length.
...the input will fail constraint validation if the length of the
text value of the field is greater than maxlength utf-16 code units long.
... constraint validation while the browser will generally prevent user from entering more
text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only toolong property of a validitystate object will be true.
HTML attribute: readonly - HTML: Hypertext Markup Language
the readonly attribute is supported by
text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <
textarea> form control elements.
... note: only
text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
... example html <div class="group"> <input type="
textbox" value="some value" readonly="readonly"/> <label>
textbox</label> </div> <div class="group"> <input type="date" value="2020-01-01" readonly="readonly"/> <label>date</label> </div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonly="readonly"/> <label>pas...
...sword</label> </div> <div class="group"> <
textarea readonly="readonly">some value</
textarea> <label>message</label> </div> result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="readonly" readonly> readonly </label></p> <p><label> <input type="radio" name="radio" value=...
HTML attribute: required - HTML: Hypertext Markup Language
the required attribute is supported by
text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <
textarea> form control elements.
... usability when including the required attribute, provide a visible indication near the control informing the user that the input, select or
textarea is required.
...ensure the messaging is multi-faceted, such as thru
text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.
... example html <form> <div class="group"> <input type="
text"> <label>normal</label> </div> <div class="group"> <input type="
text" required="required"> <label>required</label> </div> <input type="submit"> </form> result ...
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
the html <blockquote> element (or html block quotation element) indicates that the enclosed
text is an extended quotation.
...a url for the source of the quotation may be given using the cite attribute, while a
text representation of the source can be given using the <cite> element.
...this attribute is intended to point to information explaining the con
text or the reference for the quote.
... usage notes to change the indentation applied to the quoted
text, use the css margin-left and/or margin-right properties, or the margin shorthand property.
<input type="range"> - HTML: Hypertext Markup Language
this is typically represented using a slider or dial control rather than a
text entry box like the number input type.
... if the user's browser doesn't support type range, it will fall back and treat it as a
text input.
... in the meantime, we can make the range vertical by rotating it using using css transforms, or, by targeting each browser engine with their own method, which includes setting the appearance to slider-vertical, by using a non-standard orient attribute in firefox, or by changing the
text direction for internet explorer and edge.
... html use similar html as in the previous examples, we add the attribute with a value of vertical: <input type="range" min="0" max="11" value="7" step="1" orient="vertical"> writing-mode: bt-lr; the writing-mode property should generally not be used to alter
text direction for internationalization or localization purposes, but can be used for special effects.
BaseAudioContext.sampleRate - Web APIs
the samplerate property of the baseaudiocon
text interface returns a floating point number representing the sample rate, in samples per second, used by all nodes in this audio con
text.
... syntax baseaudiocon
text.samplerate; value a floating point number indicating the audio con
text's sample rate, in samples per second.
... var audiocon
text = window.audiocon
text || window.webkitaudiocon
text; var audioctx = new audiocon
text(); // older webkit/blink browsers require a prefix ...
CSSStyleDeclaration.cssText - Web APIs
the css
text property of the cssstyledeclaration interface returns or sets the
text of the element's inline style declaration only.
... not to be confused with stylesheet style-rule cssrule.css
text.
... example <span id="s1" style="color: red;"> some
text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.css
text); // "color: red;" </script> specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration: css
text' in that specification.
CSSValue.cssText - Web APIs
the css
text property of the cssvalue interface represents the current computed css property value.
... syntax css
text = cssvalue.css
text; value a domstring representing the current css property value.
... example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.css
text); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.css
text' in that specification.
CanvasRenderingContext2D.beginPath() - Web APIs
the canvasrenderingcon
text2d.beginpath() method of the canvas 2d api starts a new path by emptying the list of sub-paths.
... note: to create a new sub-path, i.e., one matching the current canvas state, you can use canvasrenderingcon
text2d.moveto().
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // first path ctx.beginpath(); ctx.strokestyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(200, 20); ctx.stroke(); // second path ctx.beginpath(); ctx.strokestyle = 'green'; ctx.moveto(20, 20); ctx.lineto(120, 120); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.beginpath' in that specification.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
the canvasrenderingcon
text2d.beziercurveto() method of the canvas 2d api adds a cubic bézier curve to the current sub-path.
... html <canvas id="canvas"></canvas> javascript // define canvas and con
text const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 150, y: 80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke()...
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.beziercurveto' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
the canvasrenderingcon
text2d.clip() method of the canvas 2d api turns the current or given path into the current clipping region.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to a path2d object, which is then made the curr...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
the canvasrenderingcon
text2d.closepath() method of the canvas 2d api attempts to add a straight line from the current point to the start of the current sub-path.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.beginpath(); ctx.moveto(20, 140); // move pen to bottom-left corner ctx.lineto(120, 10); // line to top corner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three disconnected sub-paths.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.closepath' in that specification.
CanvasRenderingContext2D.createLinearGradient() - Web APIs
the canvasrenderingcon
text2d.createlineargradient() method of the canvas 2d api creates a gradient along the line connecting two given coordinates.
...finally, the gradient is assigned to the canvas con
text, and is rendered to a filled rectangle.
... html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcon
text('2d'); // create a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.createlineargradient' in that specification.
CanvasRenderingContext2D.createRadialGradient() - Web APIs
the canvasrenderingcon
text2d.createradialgradient() method of the canvas 2d api creates a radial gradient using the size and coordinates of two circles.
...finally, the gradient is assigned to the canvas con
text, and is rendered to a filled rectangle.
... html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcon
text('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.createradialgradient' in that specification.
CanvasRenderingContext2D.ellipse() - Web APIs
the canvasrenderingcon
text2d.ellipse() method of the canvas 2d api adds an elliptical arc to the current sub-path.
... html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.ellipse' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
the canvasrenderingcon
text2d.fill() method of the canvas 2d api fills the current or given path with the current fillstyle.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.fill' in that specification.
CanvasRenderingContext2D.fillRect() - Web APIs
the canvasrenderingcon
text2d.fillrect() method of the canvas 2d api draws a rectangle that is filled according to the current fillstyle.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.fillstyle = 'green'; ctx.fillrect(20, 10, 150, 100); result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.fillrect(0, 0, canvas.width, canvas.height); specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.fillrect' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcon
text2d.fillstyle property of the canvas 2d api specifies the color, gradient, or pattern to use inside shapes.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text...
CanvasRenderingContext2D.font - Web APIs
the canvasrenderingcon
text2d.font property of the canvas 2d api specifies the current
text style to use when drawing
text.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.font = 'bold 48px serif'; ctx.stroke
text('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
... let f = new fontface('test', 'url(x)'); f.load().then(function() { // ready to use the font in a canvas con
text }); specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.font' in that specification.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the imagesmoothingenabled property of the canvasrenderingcon
text2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false).
... html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.font = '16px sans-serif'; ctx.
textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.fill
text('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.fill
text('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = t...
...rue; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.fill
text('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w * 3, h * 3); }; result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.imagesmoothingenabled' in that specification.
CanvasRenderingContext2D.lineDashOffset - Web APIs
the canvasrenderingcon
text2d.linedashoffset property of the canvas 2d api sets the line dash offset, or "phase." note: lines are drawn by calling the stroke() method.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in red.
... html <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.
CanvasRenderingContext2D.lineTo() - Web APIs
the canvasrenderingcon
text2d method lineto(), part of the canvas 2d api, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.beginpath(); // start a new path ctx.moveto(30, 50); // move the pen to (30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.lineto' in that specification.
CanvasRenderingContext2D.miterLimit - Web APIs
the canvasrenderingcon
text2d.miterlimit property of the canvas 2d api sets the miter limit ratio.
... playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <
textarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</
textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcon
text("2d"); var
textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code =
textarea.value; function d...
...rawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(
textarea.value); } reset.addeventlistener("click", function() {
textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() {
textarea.focus(); })
textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.miterlimit' in that specification.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
the canvasrenderingcon
text2d.quadraticcurveto() method of the canvas 2d api adds a quadratic bézier curve to the current sub-path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(230, 30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(230, 30, 5, 0, 2 * math.p...
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.restore() - Web APIs
the canvasrenderingcon
text2d.restore() method of the canvas 2d api restores the most recently saved canvas state by popping the top entry in the drawing state stack.
... fore more information about the drawing state, see canvasrenderingcon
text2d.save().
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.restore' in that specification.
CanvasRenderingContext2D.save() - Web APIs
the canvasrenderingcon
text2d.save() method of the canvas 2d api saves the entire state of the canvas by pushing the current state onto a stack.
... the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font,
textalign,
textbaseline, direction, imagesmoothingenabled.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.save' in that specification.
CanvasRenderingContext2D.setLineDash() - Web APIs
the setlinedash() method of the canvas 2d api's canvasrenderingcon
text2d interface sets the line dash pattern used when stroking lines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
... function drawdashedline(pattern) { ctx.beginpath(); ctx.setlinedash(pattern); ctx.moveto(0, y); ctx.lineto(300, y); ctx.stroke(); y += 20; } const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.setl...
CanvasRenderingContext2D.shadowColor - Web APIs
the canvasrenderingcon
text2d.shadowcolor property of the canvas 2d api specifies the color of shadows.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (even when shadowcolor specifies a completely opaque value...
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.shadow...
CanvasRenderingContext2D.strokeRect() - Web APIs
the canvasrenderingcon
text2d.strokerect() method of the canvas 2d api draws a rectangle that is stroked (outlined) according to the current strokestyle and other con
text settings.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 160, 100); result applying various con
text settings this example draws a rectangle with a drop shadow and thick, beveled outlines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.strokerect' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcon
text2d.strokestyle property of the canvas 2d api specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes.
... html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcon
text('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(10, 10, 100, 100); result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color.
...(the red channel has a fixed value.) <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.getelementbyid('canvas').getcon
text('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.strokestyle' in that ...
CanvasRenderingContext2D.transform() - Web APIs
the canvasrenderingcon
text2d.transform() method of the canvas 2d api multiplies the current transformation with the matrix described by the arguments of this method.
... this lets you scale, rotate, translate (move), and skew the con
text.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon
text2d.transform' in that specification.
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
the webglcon
textcreationerror event of the webgl api is fired if the user agent is unable to create a webglrenderingcon
text con
text.
... this event has a webglcon
textevent.statusmessage property, which can contain a platform dependent string with more information about the failure.
... bubbles yes cancelable yes interface webglcon
textevent event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('webglcon
textcreationerror', function(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcon
text('webgl'); // logs statusmessage or "unknown error" if unable to create webgl con
text specifications specification status comment webgl 1.0the definition of 'webglcon
textcreationerror' in that specification.
HTMLCanvasElement: webglcontextlost event - Web APIs
the webglcon
textlost event of the webgl api is fired if the user agent detects that the drawing buffer associated with a webglrenderingcon
text object has been lost.
... bubbles yes cancelable yes interface webglcon
textevent event handler property none example with the help of the webgl_lose_con
text extension, you can simulate the webglcon
textlost event: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcon
text('webgl'); canvas.addeventlistener('webglcon
textlost', (event) => { console.log(event); }); gl.ge
textension('webgl_lose_con
text').losecon
text(); // "webglcon
textlost" event is logged.
... specifications specification status comment webgl 1.0the definition of 'webglcon
textlost' in that specification.
HTMLElement.outerText - Web APIs
htmlelement.outer
text is a non-standard property.
... as a getter, it returns the same value as node.inner
text.
... as a setter, it removes the current node and replaces it with the given
text.
HTMLTextAreaElement.labels - Web APIs
the html
textareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <
textarea> element.
... syntax var labelelements =
textarea.labels; return value a nodelist containing the <label> elements associated with the <
textarea> element.
... example html <label id="label1" for="test">label 1</label> <
textarea id="test">some
text</
textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const
textarea = document.getelementbyid("test"); for(var i = 0; i <
textarea.labels.length; i++) { console.log(
textarea.labels[i].
textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
Localization - Archive of obsolete content
instead of hard-coding
text directly into an application, each piece of
text is only a reference into the string table.
...the codes < and > are examples of entities which can be used to place less than and greater than signs into the
text.
...you can use these so that the entity is replaced with its value, which can be a string of
text.
...And 16 more matches
menuitem - Archive of obsolete content
attributes accel
text, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3...
..."/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes accel
text type: string
text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
... crop type: one of the values below if the label of the element is too big to fit in its given space, the
text will be cropped on the side specified by the crop attribute.
...And 16 more matches
Basic native form controls - Learn web development
you've already met some form elements, including <form>, <fieldset>, <legend>, <
textarea>, <label>, <button>, and <input>.
... this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and
text.
...
text input fields
text <input> fields are the most basic form widgets.
...And 16 more matches
Your first form - Learn web development
the controls can be single or multi-line
text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.
... form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with
text labels that describe their purpose to both sighted and blind users.
... our form will contain three
text fields and one button.
...And 16 more matches
Useful string methods - Learn web development
previous overview: first steps next now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a
text string, joining and splitting strings, substituting one character in a string for another, and more.
... playable code <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <
textarea id="code" class="playable-code" style="height: 290px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', 'a happy christmas to all the family', 'you\'re all i want for christmas', 'get well soon']; for (let i = 0; i < greetings.l...
...ength; i++) { let input = greetings[i]; // your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.
textcontent = input; list.appendchild(listitem); } } </
textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0;
text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const
textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid(...
...And 16 more matches
Examine and edit HTML - Firefox Developer Tools
there are three types of searches that are performed automatically depending on what you enter, a full
text search, a css selector search, and an xpath search.
... full
text search the full
text search will always be executed, independently of what you enter.
... that allows you to find css selectors and xpath expressions occurring within the
text.
...And 16 more matches
HTMLInputElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlinputelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...And 16 more matches
Color picker tool - CSS: Cascading Style Sheets
picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px;
text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd;
text-align: center; float: right; -moz-user-select:
text; -webkit-user-select:
text; -ms-user-select:
text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'...
...lor-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px;
text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px;
text-align: right;
text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; }...
... .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0;
text-align: right;
text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px;
text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; box-shadow: 0 0 5px 0 #999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-selec...
...And 16 more matches
x - SVG: Scalable Vector Graphics
sfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <
text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...
text for <
text>, if it contain a single value, x defines the x coordinate on where the content
text position must be placed.
... the content
text position is usualy a point on the baseline of the first line of
text.
...And 16 more matches
y - SVG: Scalable Vector Graphics
sfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <
text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...
text for <
text>, if it contain a single value, y defines the y coordinate on where the content
text position must be placed.
... the content
text position is usualy a point on the baseline of the first line of
text.
...And 16 more matches
Appendix D: Loading Scripts - Archive of obsolete content
these tags are generally inserted into xul overlay files or other xul documents, after which they are automatically loaded into the con
text of the xul window in question and executed immediately and synchronously.
... // use the current content window as the execution con
text.
...let con
text = content; // create the sandbox let sandbox = components.utils.sandbox(con
text, { // make properties of the con
text object available via the // script's global scope sandboxprototype: con
text, // wrap objects retrieved from the sandbox in xpcnativewrappers.
...And 15 more matches
CSS3 - Archive of obsolete content
the control of the con
textual inter-glyph spacing via the css font-kerning property.
... support for the css
text-overflow property defining how
text overflows, if needed.
... the ability to define the hotspot of a cursor as well as the new none, con
text-menu, cell, vertical-
text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the cursor property.
...And 15 more matches
Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper
textual alternatives so they can be understood by assistive technologies and their users.
... multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple
text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes).
... simple images we already covered simple
text alternatives for html images in our html: a good basis for accessibility article — you can refer back to there for the full details.
...And 15 more matches
CSS basics - Learn web development
we'll answer questions like: how do i make
text red?
...for example, this css selects paragraph
text, setting the color to red: p { color: red; } let's try it out!
... using a
text editor, paste the three lines of css (above) into a new file.
...And 15 more matches
What is JavaScript? - Learn web development
let's take a simple
text label as an example.
... we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px;
text-transform: uppercase;
text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.
textcontent = 'player 1: ' + name; } try ...
...clicking on this last version of the
text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...And 15 more matches
Accessible Toolkit Checklist
tab order must wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or con
text menu key should work like right click on focused item, and con
text menu should show just under and to the right of the current focus.
... on mac os x, ctrl+space is used to bring up the con
text menu.
...the system should require these labels to be created/associated with each widget, not as a separate static
text with no tie to the widget.
...And 15 more matches
Encrypt Decrypt MAC Keys As Session Objects
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define p
text_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer ...
....\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11con
text *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11con
text *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, ...
..."compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11con
text *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11con
text *ctxmac, unsigned char *p
text, unsigned int p
textlen, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, p
text, p
textlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxle...
...And 15 more matches
Encrypt and decrypt MAC using token
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define p
text_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer ...
....\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11con
text *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11con
text *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, ...
..."compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11con
text *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11con
text *ctxmac, unsigned char *p
text, unsigned int p
textlen, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, p
text, p
textlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxle...
...And 15 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
sample code 3 /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define p
text_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer ...
....\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11con
text *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11con
text *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, ...
..."compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11con
text *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11con
text *ctxmac, unsigned char *p
text, unsigned int p
textlen, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, p
text, p
textlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxle...
...And 15 more matches
EncDecMAC using token object - sample 3
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define p
text_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----begin iv--...
...te(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11con
text *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11con
text *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } ...
.../* * finalize macing */ secstatus macfinal(pk11con
text *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11con
text *ctxmac, unsigned char *p
text, unsigned int p
textlen, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, p
text, p
textlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstat...
...And 15 more matches
nsIAccessibleEvent
event_con
texthelp_start 0x0020 0x001d a window has entered con
text-sensitive help mode.
... event_con
texthelp_end 0x0021 0x001e a window has exited con
text-sensitive help mode.
... event_property_changed 0x0030 0x002c event_selection_changed 0x0031 0x002d event_
text_attribute_changed 0x0032 0x002e a
text object's attributes changed.
...And 15 more matches
nsIHTMLEditor
tioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcon
text(in astring ainputstring, in astring acon
textstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype...
... this does not rely on the selection, and is not sensitive to con
text.
... decreasefontsize() decrease font size for
text in selection by 1 html unit all existing
text is scanned for existing <font size> attributes so they will be decreased instead of inserting new <font> tag.
...And 15 more matches
jspage - Archive of obsolete content
)?[b]:b):[];}var $time=date.now||function(){return +new date;};function $try(){for(var b=0,a=arguments.length;b<a; b++){try{return arguments[b]();}catch(c){}}return null;}function $type(a){if(a==undefined){return false;}if(a.$family){return(a.$family.name=="number"&&!isfinite(a))?false:a.$family.name; }if(a.nodename){switch(a.nodetype){case 1:return"element";case 3:return(/\s/).test(a.nodevalue)?"
textnode":"whitespace";}}else{if(typeof a.length=="number"){if(a.callee){return"arguments"; }else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merg...
... navigator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","
text/javascript"); a[(browser.engine.webkit&&browser.engine.version<420)?"inner
text":"
text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.uid=native.uid++);};var window=new native({name:"window",legacy:(browser.engine.trident)?null:window.window,...
...ter:function(a,b){if(!a){return this;}return new elements(array.filter(this,(typeof a=="string")?function(c){return c.match(a); }:a,b));}});document.implement({newelement:function(a,b){if(browser.engine.trident&&b){["name","type","checked"].each(function(c){if(!b[c]){return;}a+=" "+c+'="'+b[c]+'"'; if(c!="checked"){delete b[c];}});a="<"+a+">";}return document.id(this.createelement(a)).set(b);},new
textnode:function(a){return this.create
textnode(a); },getdocument:function(){return this;},getwindow:function(){return this.window;},id:(function(){var a={string:function(d,c,b){d=b.getelementbyid(d);return(d)?a.element(d,c):null; },element:function(b,e){$uid(b);if(!e&&!b.$family&&!(/^object|embed$/i).test(b.tagname)){var c=element.prototype;for(var d in c){b[d]=c[d];}}return b;},object:function(c,d,b...
...And 14 more matches
Reading from Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading
textual data, writing
textual data, list of file-related error codes.
...for instance, there are options to read a file as if it were
text or a binary file.
...var file = io.getfile("home", "sample.txt"); var stream = io.newinputstream(file, "
text"); this example first retrieves a file object using nsiscriptableio.getfile().
...And 14 more matches
listcell - Archive of obsolete content
by default it only contains
text but iconic and checkbox listcells are also available.
... attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the
text will be cropped on the side specified by the crop attribute.
... an ellipsis will be used in place of the cropped
text.
...And 14 more matches
menu - Archive of obsolete content
attributes accel
text, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample...
... <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> attributes accel
text type: string
text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
... crop type: one of the values below if the label of the element is too big to fit in its given space, the
text will be cropped on the side specified by the crop attribute.
...And 14 more matches
treecol - Archive of obsolete content
attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the
text will be cropped on the side specified by the crop attribute.
... an ellipsis will be used in place of the cropped
text.
... start the
text will be cropped on its left side in left-to-right
text locales, and the right side in right-to-left locales.
...And 14 more matches
HTML basics - Learn web development
previous overview: getting started with the web next html (hyper
text markup language) is the code that is used to structure a web page and its content.
... the content: this is the content of the element, which in this case, is just
text.
...essentially, it can now handle any
textual content you might put on it.
...And 14 more matches
Creating hyperlinks - Learn web development
html
text formatting, as covered in html
text fundamentals.
... note: a url can point to html files,
text files, images,
text documents, video and audio files, or anything else that lives on the web.
... anatomy of a link a basic link is created by wrapping the
text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hyper
text reference, or target, that contains the web address.
...And 14 more matches
Accessibility API cross-reference
all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item,
text, etc.
...all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item,
text, etc.
...cific kind of button that drops down a grid, msaa only buttondropdowngrid n/a n/a specific kind of button that drops down a menu, msaa only buttonmenu n/a n/a expressed with aria-haspopup on an element with a button role represents the system's caret caret n/a n/a n/a a brief portion of
text describing a table or figure.
...And 14 more matches
Eclipse CDT
to update the index manually, use the con
text menu in the project explorer tab on the left side of the window.
...when changing individual key bindings, note that bindings are con
text sensitive and that any changes you make may be ignored if they conflict with existing bindings, or if they are overridden by a binding for a more specific con
text.
...for that to work you also either need to find the existing bindings for that key combination (using the bindings column to sort by key combination helps with this) and remove them, or else you need to make your binding very specific by setting the "when" field to "c/c++ editor" instead of the more general "editing
text".
...And 13 more matches
Mozilla Web Developer FAQ
doctype sniffing only applies to documents served as
text/html.
...the consequence is that xhtml 1.0 transitional documents are rendered in the almost standards mode when served as
text/html under pre
text of the appendix c but in the standards mode when served as application/xhtml+xml.
... if the table cells that contain only an image are marked with <td class="imgcell">, the required css rule is: .imgcell img, .imgcell a { display: block; } longer explanation… why are there still gaps even between
text rows in tables when the layout engine is in the standards mode or in the almost standards mode?
...And 13 more matches
nsIWebBrowserPersist
; void savedocument(in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcon
text aprivacycon
text); void saveprivacyawareuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in boolean aisprivate); attributes attribute type description currentstate unsigned long current state of the persister object.
... encode_flags_formatted 2 for plain
text output.
... convert html to plain
text that looks like the html.
...And 13 more matches
AbstractRange - Web APIs
position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">abstractrange</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed.
... contents of elements when trying to access the contents of an element, keep in mind that the element itself is a node, but so is any
text inside it.
... in order to set a range endpoint within the
text of an element, be sure to find the
text node inside the element: let startelem = document.queryselector("p"); let endelem = startelem.queryselector("span"); let range = document.createrange(); range.setstart(startelem, 0); range.setend(endelem, endelem.childnodes[0].length/2); let contents = range.clonecontents(); document.body.appendchild(contents); this example creates a new range, rng, and sets its starting point to the third child node of the first element whose class is elementclass.
...And 13 more matches
HTMLTrackElement - Web APIs
this element can be used as a child of either <audio> or <video> to specify a
text track containing information such as closed captions or subtitles.
...splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...And 13 more matches
Node - Web APIs
these include attr, characterdata (which
text, comment, and cdatasection are all based on), processinginstruction, documenttype, notation, entity, and entityreference.
...lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
...And 13 more matches
OffscreenCanvas - Web APIs
it is available in both the window and worker con
texts.
... methods offscreencanvas.getcon
text() returns a rendering con
text for the offscreen canvas.
... examples synchronous display of frames produced by an offscreencanvas one way to use the offscreencanvas api, is to use a renderingcon
text that has been obtained from an offscreencanvas object to generate new frames.
...And 13 more matches
Using the Web Audio API - Web APIs
the web audio api handles audio operations inside an audio con
text, and has been designed to allow modular routing.
... several audio sources with different channel layouts are supported, even within a single con
text.
... audio con
text to be able to do anything with the web audio api, we need to create an instance of the audio con
text.
...And 13 more matches
Using the Web Speech API - Web APIs
the web speech api provides two distinct areas of functionality — speech recognition, and speech synthesis (also known as
text to speech, or tts) — which open up interesting new possibilities for accessibility, and control mechanisms.
... speech recognition speech recognition involves receiving speech through a device's microphone, which is then checked by a speech recognition service against a list of grammar (basically, the vocabulary you want to have recognised in a particular app.) when a word or phrase is successfully recognised, it is returned as a result (or list of results) as a
text string, and further actions can be initiated as a result.
...n is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the speechrecognition event handlers list.) the most common one you'll probably use is speechrecognition.onresult, which is fired once a successful result is received: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.
textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log('confidence: ' + event.results[0][0].confidence); } the second line here is a bit complex-looking, so let's explain it step by step.
...And 13 more matches
Accessibility documentation index - Accessibility
it is used to establish a relationship between widgets or groups and
text that described them.
...use it in cases where a
text label is not visible on the screen.
... if there is visible
text labeling the element, use aria-labelledby instead.
...And 13 more matches
Understandable - Accessibility
guideline 3.1 — readable: make
text content readable and understandable this guideline focuses on making
text content as understandable as possible.
...your site should provide a glossary that contains definitions of such words/terms that you can then link to when they appear, or at the very least provide definitions somewhere in the surrounding
text, or in a description list at the bottom of the page.
...a better way to handle this is to again provide links to glossary pages containing the acronym expansion and explanation, or at the very least include them in the surrounding
text in con
text.
...And 13 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using
text-align: right to align
text to the right.
...left is always left, no matter what direction your
text is running.
... this can become an issue when developing a site that has to work in multiple languages, including languages that have
text starting on the right, rather than the left.
...And 13 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px;
text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd;
text-align: center; float: right; -moz-user-select:
text; -webkit-user-select:
text; -ms-user-select:
text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'...
... all 0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px;
text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px;
text-align: right;
text-transform: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slide...
...r-right { background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0;
text-align: right;
text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px;
text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui slider */ .ui-slider { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-slider > * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-rad...
...And 13 more matches
Adding captions and subtitles to HTML5 video - Developer guides
for this article we will refer to the
text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people.
...the various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the
text file that contains the actual subtitle information.
... webvtt the files that contain the actual subtitle data are simple
text files that follow a specified format, in this case the web video
text tracks (webvtt) format.
...And 13 more matches
alignment-baseline - SVG: Scalable Vector Graphics
for example, this allows alphabetic baselines in roman
text to stay aligned across font size changes.
... as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <tspan>, <tref>, <altglyph>, and <
textpath> usage notes value auto | baseline | before-edge |
text-before-edge | middle | central | after-edge |
text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom default value auto animatable yes auto the value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent.
... before-edge the alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent
text content element.
...And 13 more matches
Mozilla's Section 508 Compliance
requirement windows linux/unix mac os requirement windows linux/unix mac os (a) when software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned
textually.
... caveats: 1) although sidebar cannot be customized without a mouse, all sidebar functions that come with the browser are available through other means 2) java and in-page plugins cannot be used with the keyboard, so they must not be installed for keyboard-only users additional features for the keyboard: 1) find as you type allows for quick navigation to links and convenient
text searching 2) browse with caret (f7 key toggles) allows users to select arbitrary content with the keyboard and move through content as if inside a readonly editor.
...when an image represents a program element, the information conveyed by the image must also be available in
text.
...And 10 more matches
NSS functions
4 and later cert_filtercertlistforusercerts mxr 3.6 and later cert_findcertbydercert mxr 3.2 and later cert_findcertbyissuerandsn mxr 3.2 and later cert_findcertbynickname mxr 3.2 and later cert_findcertbynicknameoremailaddr mxr 3.2 and later cert_findcertbysubjectkeyid mxr 3.7 and later cert_findcer
textension mxr 3.4 and later cert_findcertissuer mxr 3.3 and later cert_findkeyusageextension mxr 3.4 and later cert_findsmimeprofile mxr 3.2 and later cert_findsubjectkeyidextension mxr 3.7 and later cert_findusercertbyusage mxr 3.4 and later cert_findusercertsbyusage mxr 3.4 and later cert_finish...
...rt_formatname mxr 3.2 and later cert_freedistnames mxr 3.2 and later cert_freenicknames mxr 3.2 and later cert_getavatag mxr 3.2 and later cert_getcertchainfromcert mxr 3.4 and later cert_getcertemailaddress mxr 3.2 and later cert_getcertificatenames mxr 3.10 and later cert_getcertificatereques
textensions mxr 3.10 and later cert_getcertissuerandsn mxr 3.2 and later cert_getcertnicknames mxr 3.2 and later cert_getcerttrust mxr 3.2 and later cert_getcertuid mxr 3.2 and later cert_getclassicocspdisabledpolicy mxr 3.12 and later cert_getclassicocspenabledhardfailurepolicy mxr 3.12 and later ...
...rtlistnode mxr 3.6 and later cert_rfc1485_escapeandquote mxr 3.2 and later cert_savesmimeprofile mxr 3.2 and later cert_setsloptime mxr 3.2 and later cert_setocspfailuremode mxr 3.11.7 and later cert_setocsptimeout mxr 3.12 and later cert_setusepkixforvalidation mxr 3.12 and later cert_startcer
textensions mxr 3.5 and later cert_startcertificaterequestattributes mxr 3.10 and later cert_startcrlentryextensions mxr 3.10 and later cert_startcrlextensions mxr 3.10 and later cert_uncachecrl mxr 3.10 and later cert_verifycertname mxr 3.2 and later cert_verifycacertforusage mxr 3.6 and later cer...
...And 10 more matches
mozITXTToHTMLConv
the mozitxttohtmlconv interface is used to convert
text into html format.
... its primary use is in converting user-entered
text into properly-formatted html.
...x 2 / thunderbird 2 / seamonkey 1.1) inherits from nsistreamconverter implemented by @mozilla.org/txttohtmlconv;1 as a service: var ios = components.classes["@mozilla.org/txttohtmlconv;1"] .getservice(components.interfaces.mozitxttohtmlconv); method overview unsigned long citeleveltxt(in wstring line, out unsigned long loglinestart) void findurlinplain
text(in wstring
text, in long alength, in long apos, out long astartpos, out long aendpos) wstring scanhtml(in wstring
text, in unsigned long whattodo) wstring scantxt(in wstring
text, in unsigned long whattodo) constants conversion control attributes these bits allow you to control the conversion of
text into html.
...And 10 more matches
nsIAccessibleRole
it is used for html:
textfield, xul:groupbox, role="group".
...this object might look like
text or a graphic, but it acts like a button.
... it is used for xul:label@class="
text-link", html:a, html:area, xforms:trigger@appearance="minimal".
...And 10 more matches
nsIScriptableIO
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading
textual data, writing
textual data, list of file-related error codes.
...
text: read unicode-converted
text.
... the default character set is utf-8; to read
text in another character set, set the acharset argument to the desired character set.
...And 10 more matches
nsIXPCScriptable
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void precreate(in nsisupports nativeobj, in jscon
textptr cx, in jsobjectptr globalobj, out jsobjectptr parentobj); void create(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj); void postcreate(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj); prbool addproperty(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool delpropert...
...y(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool getproperty(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool setproperty(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool enumerate(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj); prbool newenumerate(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in pruint32 enum_op, in jsvalptr statep, out jsid idp); prbool newresolve(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in jsval id, in pruint32 flags, out jsobjectptr objp); prbool convert(in nsixpconn...
...ectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in pruint32 type, in jsvalptr vp); void finalize(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj); prbool checkaccess(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in jsval id, in pruint32 mode, in jsvalptr vp); prbool call(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in pruint32 argc, in jsvalptr argv, in jsvalptr vp); prbool construct(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in pruint32 argc, in jsvalptr argv, in jsvalptr vp); prbool hasinstance(in nsixpconnectwrappednative wrapper, in jscon
textptr cx, in jsobjectptr obj, in jsval val, out prbool bp); void trace(in nsixpconnectwrappedna...
...And 10 more matches
Migrating from Firebug - Firefox Developer Tools
in the con
text menu.
... in the devtools this option is also available via the con
text menu.
... copy html and related information firebug's html panel allows to copy the inner and outer html of an element as well as the css and xpath to it via the con
text menu of an element.
...And 10 more matches
Using the CSS Painting API - Web APIs
the second parameter is the class that does all the magic, defining the con
text options and what to paint to the two-dimensional canvas that will be our image.
...if set to false, all colours used on the canvas will be fully opaque */ static get con
textoptions() { return { alpha: true }; } /* ctx is the 2d drawing con
text a subset of the html5 canvas api.
... */ paint(ctx) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect(0, 15, 200, 20); /* order: x, y, w, h */ } }); in this class example we have defined a single con
text option with the con
textoptions() function: we returned a simple object stating alpha transparency is allowed.
...And 10 more matches
Element - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its pare...
... element.getclientrects() returns a collection of rectangles that indicate the bounding rectangles for each line of
text in a client.
...And 10 more matches
HTMLCanvasElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...And 10 more matches
HTMLElement - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
...And 10 more matches
Capabilities, constraints, and settings - Web APIs
below all of that, you'll see the video itself.</p> <p>click the "start" button to begin.</p> <h3>constrainable properties available:</h3> <ul id="supportedconstraints"> </ul> <div id="startbutton" class="button"> start </div> <div class="wrapper"> <div class="trackrow"> <div class="leftside"> <h3>requested video constraints:</h3> <
textarea id="videoconstrainteditor" cols=32 rows=8></
textarea> </div> <div class="rightside"> <h3>actual video settings:</h3> <
textarea id="videosettings
text" cols=32 rows=8 disabled></
textarea> </div> </div> <div class="trackrow"> <div class="leftside"> <h3>requested audio constraints:</h3> <
textarea id="audioconstrainteditor" cols=32 rows=8></
textarea> ...
... </div> <div class="rightside"> <h3>actual audio settings:</h3> <
textarea id="audiosettings
text" cols=32 rows=8 disabled></
textarea> </div> </div> <div class="button" id="applybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px;
text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float...
...: left; width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); }
textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { padding-top: 10px; } javascript content now let's take a look at the javascript code that makes everything work.
...And 10 more matches
::placeholder - CSS: Cascading Style Sheets
the ::placeholder css pseudo-element represents the placeholder
text in an <input> or <
textarea> element.
... note: in most browsers, the appearance of placeholder
text is a translucent or light gray color by default.
... syntax ::placeholder accessibility concerns color contrast contrast ratio placeholder
text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.
...And 10 more matches
Block and inline layout in normal flow - CSS: Cascading Style Sheets
normal flow is defined in the css 2.1 specification, which explains that any boxes in normal flow will be part of a formatting con
text.
...we describe block-level boxes as participating in a block formatting con
text, and inline-level boxes as participating in an inline formatting con
text.
... the behaviour of elements which have a block or inline formatting con
text is also defined in this specification.
...And 10 more matches
clip-path - CSS: Cascading Style Sheets
note: a computed value other than none results in the creation of a new stacking con
text the same way that css opacity does for values other than 1.
...class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <
text x="96" y="91">i love</
text> <
text x="96" y="109" class="em">clipping</
text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#mypath)<br><br> assuming the following clippath definition: <pre> <svg> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c 0.5,1,0,0.7...
...v class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <
text x="96" y="91">i love</
text> <
text x="96" y="109" class="em">clipping</
text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> ...
...And 10 more matches
HTMLFormElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...And 5 more matches
HTMLObjectElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlobjectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...And 5 more matches
HTMLOptionElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...And 5 more matches
HTMLOutputElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...And 5 more matches
HTMLTableCellElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-f...
...And 5 more matches
Node.nextSibling - Web APIs
syntax nextnode = node.nextsibling notes gecko-based browsers insert
text nodes into a document to represent whitespace in the source markup.
... therefore a node obtained, for example, using node.firstchild or node.previoussibling may refer to a whitespace
text node rather than the actual element the author intended to get.
... see whitespace in the dom and w3c dom 3 faq: why are some
text nodes empty?
...And 5 more matches
PasswordCredential - Web APIs
note: this interface is restricted to top-level con
texts and cannot be used from an <iframe>.
... constructor passwordcredential()secure con
text creates a new passwordcredential object.
... passwordcredential.additionaldata secure con
text one of a formdata instance, a urlsearchparams instance, or null.
...And 5 more matches
PublicKeyCredential - Web APIs
note: this api is restricted to top-level con
texts.
... properties publickeycredential.type read only secure con
text inherited from credential.
... publickeycredential.id read only secure con
text inherited from credential and overridden to be the base64url encoding of publickeycredential.rawid.
...And 5 more matches
SubtleCrypto.verify() - Web APIs
/* fetch the contents of the "message"
textbox, and encode it in a form we can use for sign operation.
... */ function getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new
textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
... /* fetch the contents of the "message"
textbox, and encode it in a form we can use for sign operation.
...And 5 more matches
Getting started with WebGL - Web APIs
<body> <canvas id="glcanvas" width="640" height="480"></canvas> </body> preparing the webgl con
text the main() function in our javascript code, is called when our script is loaded.
... its purpose is to set up the webgl con
text and start rendering content.
... // // start here // function main() { const canvas = document.queryselector("#glcanvas"); // initialize the gl con
text const gl = canvas.getcon
text("webgl"); // only continue if webgl is available and working if (gl === null) { alert("unable to initialize webgl.
...And 5 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
some examples of ways 3d cameras are used: when rendering animation—whether for filmmaking or for use within the con
text of a presentation or game—the virtual camera is used just like a real-world film camera.
... when accelerating bitmapped graphics, the renderer would draw the 2d image into a webgl
texture's buffer, then redraw the
texture to refresh the screen.
... this essentially uses the
texture as a backbuffer for performing multiple buffering in your 2d graphics application.
...And 5 more matches
Basic concepts behind Web Audio API - Web APIs
audio graphs the web audio api involves handling audio operations inside an audio con
text, and has been designed to allow modular routing.
...several sources — with different types of channel layout — are supported even within a single con
text.
...a simple, typical workflow for web audio would look something like this: create the audio con
text.
...And 5 more matches
Web Audio API best practices - Web APIs
there's the standardised-audio-con
text npm package, which creates api functionality consistently across browsers, full holes as they are found.
... autoplay policy browsers have started to implement an autoplay policy, which in general can be summed up as: "create or resume con
text from inside a user gesture".
...browser vendors decided that web audio con
texts should not be allowed to automatically play audio; they should instead be started by a user.
...And 5 more matches
Window.prompt() - Web APIs
the window.prompt() displays a dialog with an optional message prompting the user to input some
text.
... syntax result = window.prompt(message, default); parameters message optional a string of
text to display to the user.
... default optional a string containing the default value displayed in the
text input field.
...And 5 more matches
::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across
text).
... ::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands
text-decoration and its associated properties
text-emphasis-color
text-shadow in particular, background-image is ignored.
... syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this
text has special styles when you highlight it.
...And 5 more matches
Data URLs - HTTP
syntax data urls are composed of four parts: a prefix (data:), a mime type indicating the type of data, an optional base64 token if non-
textual, and the data itself: data:[<mediatype>][;base64],<data> the mediatype is a mime type string, such as 'image/jpeg' for a jpeg image file.
... if omitted, defaults to
text/plain;charset=us-ascii if the data is
textual, you can simply embed the
text (using the appropriate entities or escapes based on the enclosing document's type).
... simple
text/plain data.
...And 5 more matches
Evolution of HTTP - HTTP
http (hyper
text transfer protocol) is the underlying protocol of the world wide web.
... invention of the world wide web in 1989, while he was working at cern, tim berners-lee wrote a proposal to build a hyper
text system over the internet.
...built over the existing tcp and ip protocols, it consisted of 4 building blocks: a
textual format to represent hyper
text documents, the hyper
text markup language (html).
...And 5 more matches
Common MIME types - HTTP
two primary mime types are important for the role of default types:
text/plain is the default value for
textual files.
... a
textual file should be human-readable and must not contain binary data.
...zw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css)
text/css .csv comma-separated values (csv)
text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openxmlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz ...
...And 5 more matches
Feature-Policy: fullscreen - HTTP
syntax feature-policy: fullscreen <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing con
texts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing con
texts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing con
texts.
...And 5 more matches
Feature-Policy: geolocation - HTTP
syntax feature-policy: geolocation <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing con
texts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing con
texts (iframes) in the same origin.
... 'none': the feature is disabled in top-level and nested browsing con
texts.
...And 5 more matches
web-share - HTTP
the http feature-policy header web-share directive controls controls whether the current document is allowed to use the navigator.share() of web share api to share
text, links, images, and other content to arbitrary destiations of user's choice.
... syntax feature-policy: web-share <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing con
texts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing con
texts (iframes) in the same origin.
...And 5 more matches
path - SVG: Scalable Vector Graphics
the path attribute has two different meanings, either it defines a
text path along which the characters of a
text are rendered, or a motion path along which a referenced element is animated.
... two elements are using this attribute: <animatemotion> and <
textpath> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="mypath" fill="none" stroke="silver" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <
text> <
textpath path="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50"> quick brown fox jumps over the lazy dog.
... </
textpath> </
text> </svg> animatemotion for <animatemotion>, path defines the motion path, expressed in the same format and interpreted the same way as the d geometric property for the <path> element.
...And 5 more matches
target - SVG: Scalable Vector Graphics
this attribute specifies the name of the browsing con
text (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; }
text { font: 20px arial, helvetica, sans-serif; fill: blue;
text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <
text x="0" y="20">open link within iframe</
text> </a> <a href="https://developer.mozil...
...la.org" target="_blank"> <
text x="0" y="60">open link in new tab or window</
text> </a> <a href="https://developer.mozilla.org" target="_top"> <
text x="0" y="100">open link in this tab or window</
text> </a> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self animatable yes _replace the current svg image is replaced by the linked content in the same rectangular area in the same frame as the current svg image.
... note: this value was never well implemented, and the distinction between _replace and _self has been made redundant by changes in the html definition of browsing con
texts.
...And 5 more matches
Using shadow DOM - Web Components
high-level view this article assumes you are already familiar with the concept of the dom (document object model) — a tree-like structure of connected nodes that represents the different elements and strings of
text appearing in a markup document (usually an html document in the case of web documents).
...this takes as its parameter an options object that contains one option — mode — with a value of open or closed: let shadow = elementref.attachshadow({mode: 'open'}); let shadow = elementref.attachshadow({mode: 'closed'}); open means that you can access the shadow dom using javascript written in the main page con
text, for example using the element.shadowroot property: let myshadowdom = mycustomelem.shadowroot; if you attach a shadow root to a custom element with mode: closed set, you won't be able to access the shadow dom from the outside — mycustomelem.shadowroot returns null.
...this takes an image icon and a
text string, and embeds the icon into the page.
...And 5 more matches
Using the WebAssembly JavaScript API - WebAssembly
now, to help us understand what is going on here, let’s look at the
text representation of our wasm module (which we also meet in converting webassembly format to wasm): (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func.
... the equivalent code would look like this: fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(results => { results.instance.exports.exported_func(); }); viewing wasm in developer tools in firefox 54+, the developer tool debugger panel has functionality to expose the
text representation of any wasm code included in a web page.
... starting soon in firefox, in addition to viewing webassembly as
text, developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) webassembly using the
text format.
...And 5 more matches
Storing annotations - Archive of obsolete content
the annotation is composed of the
text the user entered and the "annotation anchor", which consists of the url, element id and element content: function handlenewannotation(annotation
text, anchor) { var newannotation = new annotation(annotation
text, anchor); simplestorage.storage.annotations.push(newannotation); } this function calls a constructor for an annotation object, which we also need to supply: function annotation(annot...
...ation
text, anchor) { this.annotation
text = annotation
text; this.url = anchor[0]; this.ancestorid = anchor[1]; this.anchor
text = anchor[2]; } now we need to link this code to the annotation editor, so that when the user presses the return key in the editor, we create and store the new annotation: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotation
text) { if (annotation
text) handlenewannotation(annotation
text, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of th...
... annotation list content script here's the annotation list's content script: self.on("message", function onmessage(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').
text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-
text') .
text(storedannotation.anchor
text); annotationh...
...And 4 more matches
Canvas code snippets - Archive of obsolete content
function getpixelamount(canvas, r, g, b) { var cx = canvas.getcon
text('2d'); var pixels = cx.getimagedata(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; }; getting the color of a pixel in a canvas this following snippet returns an object with th...
... function getpixelcolour(canvas, x, y) { var cx = canvas.getcon
text('2d'); var pixel = cx.getimagedata(x, y, 1, 1); return { r: pixel.data[0], g: pixel.data[1], b: pixel.data[2], a: pixel.data[3] }; } chaining methods this class provides jquery-style chained access to 2d con
text methods and properties.
... function canvas2dcon
text(canvas) { if (typeof canvas === 'string') { canvas = document.getelementbyid(canvas); } if (!(this instanceof canvas2dcon
text)) { return new canvas2dcon
text(canvas); } this.con
text = this.ctx = canvas.getcon
text('2d'); if (!canvas2dcon
text.prototype.arc) { canvas2dcon
text.setup.call(this, this.ctx); } } canvas2dcon
text.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'fill
text', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroke
text', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measure
text'...
...And 4 more matches
Forms related code snippets - Archive of obsolete content
date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="
text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="
text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later.
... otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; otd = document.createelement("td"); if (niter + 1 > nendblanks && niter < nend) { otd.classname = sprefs + "-active-cell"; otd.id = sprefs + "-day-" + this.id + "-" + nday; otd.onclick = ondayclick; otd.appendchild(document.create
textnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondocclick (opssevt) { const oevt = opssevt || /* ie */ window.event; var boutside = true; for (var ono...
...document.attachevent("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="
text/css"> table.zdp-calendar { border: 1px solid #666666; border-collapse: collapse; background-color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666;
text-align: center; } table.zdp-calendar caption { backg...
...And 4 more matches
Label and description - Archive of obsolete content
line breaking under normal conditions, a description will not break long-running
text and the
text may be cropped or hidden.
... to cause the
text to wrap: ensure the long-running
text is a
text node child of <description/> or <label/> (i.e., do not specify the long-running
text in the value attribute of these elements).
...
text is permitted to wrap.
...And 4 more matches
nss tech note4
the oid data structure contains an array of identifier bytes (each byte is a "level" in a hierarchical namespace), a
text description, and some other things.
... critical : indicates whether the extension is critical value : the value of the extension looping through all extensions certcer
textension** extensions =cert->extensions; if (extensions) { while (*extensions) { secitem *ext_oid = &(*extensions)->id; secitem *ext_critical = &(*extensions)->critical; secitem *ext_value = &(*extensions)->value; /* id attribute of the extension */ secoiddata *oiddata = secoid_findoid(ext_oid); if (oiddata == null) { /* oid not found */ /* secitem ext_oid has type (secitemtype), data (unsig...
... } extensions++; } } an example custom cert extension struct _mycer
textdata { secitem version; secitem streetaddress; secitem phonenum; secitem rfc822name; secitem id; secitem maxusers; }; typedef struct _mycer
textdata mycer
textdata; /* template used for decoding the extension */ const sec_asn1template mycer
texttemplate[] = { ...
...And 4 more matches
Hacking Tips
/js ./foo.js […] spidermonkey unwinder is disabled by default, to enable it type: enable unwinder .* spidermonkey (gdb) b js::math_cos (gdb) run […] #0 js::math_cos (cx=0x14f2640, argc=1, vp=0x7fffffff6a88) at js/src/jsmath.cpp:338 338 callargs args = callargsfromvp(argc, vp); (gdb) enable unwinder .* spidermonkey (gdb) backtrace 10 #0 0x0000000000f89979 in js::math_cos(jscon
text*, unsigned int, js::value*) (cx=0x14f2640, argc=1, vp=0x7fffffff6a88) at js/src/jsmath.cpp:338 #1 0x0000000000ca9c6e in js::calljsnative(jscon
text*, bool (*)(jscon
text*, unsigned int, js::value*), js::callargs const&) (cx=0x14f2640, native=0xf89960 , args=...) at js/src/jscntxtinlines.h:235 #2 0x0000000000c87625 in js::invoke(jscon
text*, js::callargs const&, js::maybeconstruct) (cx=0x14f2640, a...
...rgs=..., construct=js::no_construct) at js/src/vm/interpreter.cpp:476 #3 0x000000000069bdcf in js::jit::docallfallback(jscon
text*, js::jit::baselineframe*, js::jit::iccall_fallback*, uint32_t, js::value*, js::mutablehandlevalue) (cx=0x14f2640, frame=0x7fffffff6ad8, stub_=0x1798838, argc=1, vp=0x7fffffff6a88, res=jsval_void) at js/src/jit/baselineic.cpp:6113 #4 0x00007ffff7f41395 in <<jitframe_exit>> () #5 0x00007ffff7f42223 in <<jitframe_baselinestub>> () #6 0x00007ffff7f4423d in <<jitframe_baselinejs>> () #7 0x00007ffff7f4222e in <<jitframe_baselinestub>> () #8 0x00007ffff7f4326a in <<jitframe_baselinejs>> () #9 0x00007ffff7f38d5f in <<jitframe_entry>> () #10 0x00000000006a86de in enterbaseline(jscon
text*, js::jit::enterjitdata&) (cx=0x14f2640, data=...) at js/src/jit/baselinejit.cpp:1...
...[new thread 0xf7903b40 (lwp 12563)] [new thread 0xf6bdeb40 (lwp 12564)] run#0 breakpoint 1, js::ion::codegenerator::link (this=0x86badf8) at /home/code/mozilla-central/js/src/ion/codegenerator.cpp:4780 4780 { (gdb) n 4781 jscon
text *cx = getioncon
text()->cx; (gdb) n 4783 linker linker(masm); (gdb) n 4784 ioncode *code = linker.newcode(cx, jsc::ion_code); (gdb) n 4785 if (!code) (gdb) p code->code_ $1 = (uint8_t *) 0xf7fd25a8 "\201", <incomplete sequence \354\200> (gdb) x/2i 0xf7fd25a8 0xf7fd25a8: sub $0x80,%esp 0xf7fd25ae: mov 0x94(%esp),%ecx on arm, the compiled js code will always...
...And 4 more matches
JS::Compile
syntax // added in spidermonkey 45 bool js::compile(jscon
text *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscon
text *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscon
text *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscon
text *cx, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(...
...jscon
text *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscon
text *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscon
text *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscon
text *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscon
text *cx, js::handleobject obj, con...
...st js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscon
text *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); name type description cx jscon
text * pointer to a js con
text from which to derive runtime information.
...And 4 more matches
JS_DefineProperty
syntax bool js_defineproperty(jscon
text *cx, js::handleobject obj, const char *name, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscon
text *cx, js::handleobject obj, const char *name, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscon
text *cx, js::handleobject obj, const char *name, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscon
text *cx, js::handleobject obj, const char *name, int32_t value, unsigned attrs, ...
... jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscon
text *cx, js::handleobject obj, const char *name, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscon
text *cx, js::handleobject obj, const char *name, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscon
text *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscon
text *cx, js::handleobject obj, const char16_t *name, size_t na...
...melen, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscon
text *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscon
text *cx, js::handleobject obj, const char16_t *name, size_t namelen, int32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscon
text *cx, js::handleobject obj, const char16_t *name, size_t namelen, uint32_t value, unsigned attrs, jsnative getter = nullptr,...
...And 4 more matches
JS_GetGlobalObject
retrieves a con
text's global object.
... (in javascript, global variables are stored as properties of the global object.) syntax jsobject * js_getglobalobject(jscon
text *cx); name type description cx jscon
text * the con
text from which to retrieve the global object.
...the concept of a global object belonging to a con
text will likely be phased out in future versions of spidermonkey.
...And 4 more matches
JS_SetGlobalObject
set a con
text's global object.
... syntax void js_setglobalobject(jscon
text *cx, jsobject *obj); name type description cx jscon
text * the con
text to configure.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
...And 4 more matches
nsIAccessible
the accessible tree is a subset of nodes in the dom tree -- such as documents, focusable elements and
text.
...descriptions nsiaccessible.description and nsiaccessible.help provides additional
text information about accessible.
...also used for collectons of non-
text objects.
...And 4 more matches
nsIAccessibleStates
state_marqueed 0x00002000 the object is scrolling or moving
text or graphics.
... state_selfvoicing 0x00080000 the object or child uses
text-to-speech (tts) technology for description purposes.
...the object role will usually be role_
text_leaf.
...And 4 more matches
nsICompositionStringSynthesizer
you need to use nsi
textinputprocessor instead of this.
...compositionstringsynthesizer.appendclause("foo-".length, compositionstringsynthesizer.attr_converted
text); compositionstringsynthesizer.appendclause("bar".length, compositionstringsynthesizer.attr_selectedconverted
text); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_converted
text); // set caret position in the composition string.
...for example, if the "bar" is converted to "bar": compositionstringsynthesizer.setstring("foo-bar-buzz"); compositionstringsynthesizer.appendclause("foo-".length, compositionstringsynthesizer.attr_converted
text); compositionstringsynthesizer.appendclause("bar".length, compositionstringsynthesizer.attr_selectedconverted
text); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_converted
text); compositionstringsynthesizer.setcaret("foo-bar".length, 0); compositionstringsynthesizer.dispatchevent(); finally, when you commits composition with the last composition st...
...And 4 more matches
nsIParserUtils
implemented by: @mozilla.org/parserutils;1 as a service: var parserutils = components.classes["@mozilla.org/parserutils;1"] .getservice(components.interfaces.nsiparserutils); method overview astring converttoplain
text(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value description sanitizerallowcomments (1 << 0) f...
... methods converttoplain
text() converts html to plain
text.
... astring converttoplain
text( in astring src, in unsigned long flags, in unsigned long wrapcol ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value.) flags conversion option flags defined in nsidocumentencoder.
...And 4 more matches
Set a breakpoint - Firefox Developer Tools
the source pane con
text menu in the source pane, you can handle setting breakpoints by bringing up the con
text menu over a line number.
...you can set an unconditional breakpoint using the con
text menu (see above), or by: clicking on the line number for the line you want to break at in the source pane.
...you can set a conditional breakpoint using the con
text menu (see above), or by highlighting the line you want to break at in the source pane and pressing ctrl + shift + b (windows/linux) or cmd + shift + b (macos).
...And 4 more matches
Debugger - Firefox Developer Tools
the webassembly
text generation will be disabled.
... if the uncaught exception hook itself throws an exception,uncaught-hook-exception, spidermonkey throws a new error object,confess-to-debuggee-exception, to the debuggee whose message blames the debugger, and includes
textual descriptions ofuncaught-hook-exception and the originaldebugger-exception.
... if uncaughtexceptionhook’s value is null, spidermonkey throws an exception to the debuggee whose message blames the debugger, and includes a
textual description ofdebugger-exception.
...And 4 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
(this menu will not be present unless you have changed the preference as explained above.) selecting the 'browser' con
text in the scratchpad enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything.
... place = ' ' + site.source + ':' + site.line + ':' + site.column; } else { name = '(root)'; place = ''; } console.log(indent + totals.get(site) + ': ' + name + place); for (let [child, grandchildren] of children) walk(child, grandchildren, indent + ' '); } walk(null, rootchildren, ''); } })(); in the scratchpad, ensure that no
text is selected, and press the "run" button.
... (if you get an error complaining that components.utils is not defined, be sure you've selected browser from the scratchpad's environment menu, as described in step 2.) save the following html
text to a file, and visit the file in your browser.
...And 4 more matches
Manipulating video using canvas - Web APIs
border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="
text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2.
... var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcon
text('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcon
text('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of pa...
... it also fetches references to the graphics con
texts for each of the two canvases.
...And 4 more matches
Advanced animations - Web APIs
<canvas id="canvas" width="600" height="300"></canvas> as usual, we need a drawing con
text first.
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcon
text('2d'); var ball = { x: 100, y: 100, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and gets drawn with the help of the arc() method.
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcon
text('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ...
...And 4 more matches
Pixel manipulation with canvas - Web APIs
var myimagedata = ctx.createimagedata(anotherimagedata); getting the pixel data for a con
text to obtain an imagedata object containing a copy of the pixel data for a canvas con
text, you can use the getimagedata() method: var myimagedata = ctx.getimagedata(left, top, width, height); this method returns an imagedata object representing the pixel data for the area of the canvas whose corners are represented by the points (left,top), (left+width, top), (left, top+height), and (left+width, ...
...finally, we use the array data to set a background color and a
text in the <div> to display the color.
... <canvas id="canvas" width="300" height="227" style="float:left"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcon
text('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.
textcontent = rgba; } canvas.addeventlistener('mousemove', pick)...
...And 4 more matches
Transformations - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font,
textalign,
textbaseline, direction, imagesmoothingenabled.
... function draw() { var ctx = document.getelementbyid('canvas').getcon
text('2d'); ctx.fillrect(0, 0, 150, 150); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f'; // make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; // make changes to the settings ...
... function draw() { var ctx = document.getelementbyid('canvas').getcon
text('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second trans...
...And 4 more matches
Document.evaluate() - Web APIs
syntax var xpathresult = document.evaluate( xpathexpression, con
textnode, namespaceresolver, resulttype, result ); xpathexpression is a string representing the xpath to be evaluated.
... con
textnode specifies the con
text node for the query (see the xpath specification).
... it's common to pass document as the con
text node.
...And 4 more matches
Introduction to the DOM - Web APIs
every element in a document—the document as a whole, the head, tables within the document, table headers,
text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the dom and a scripting language like javascript.
...this function creates a new h1 element, adds
text to that element, and then adds the h1 to the tree for this document: <html> <head> <script> // run this function when the document is loaded window.onload = function() { // create a couple of elements in an otherwise empty html page const heading = document.createelement("h1"); const heading_
text = document.create
textnode("big head!"); hea...
...ding.appendchild(heading_
text); document.body.appendchild(heading); } </script> </head> <body> </body> </html> fundamental data types this reference tries to describe the various objects and types in simple terms.
...And 4 more matches
EXT_color_buffer_float - Web APIs
webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is available to webgl 2 con
texts only.
... color-renderable means: the webglrenderingcon
text.renderbufferstorage() method now accepts these formats.
...And 4 more matches
GeolocationCoordinates - Web APIs
geolocationcoordinates.latitude read only secure con
text returns a double representing the position's latitude in decimal degrees.
... geolocationcoordinates.longitude read only secure con
text returns a double representing the position's longitude in decimal degrees.
... geolocationcoordinates.altitude read only secure con
text returns a double representing the position's altitude in meters, relative to sea level.
...And 4 more matches
HTMLElement.dir - Web APIs
the htmlelement.dir property gets or sets the
text writing directionality of the content of the current element.
... the
text writing directionality of an element is which direction that
text goes (for support of different language systems).
... browsers might allow users to change the directionality of <input> and <
textarea>s in order to assist with authoring content.
...And 4 more matches
HTMLIFrameElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...And 4 more matches
HTMLImageElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...And 4 more matches
HTMLScriptElement - Web APIs
javascript files should be served with the application/javascript mime type, but browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or
text/csv.
...splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...And 4 more matches
KeyboardEvent - Web APIs
note: keyboardevent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no con
textual meaning to that interaction.
... when you need to handle
text input, use the input event instead.
... keyboard events may not be fired if the user is using an alternate means of entering
text, such as a handwriting system on a tablet or graphics tablet.
...And 4 more matches
MutationObserverInit.characterData - Web APIs
the mutationobserverinit dictionary's optional characterdata property is used to specify whether or not to monitor the node or nodes being observed for changes to their
textual contents.
... character data changes are detectable on any
text node, including nodes based on the
text, processinginstruction, and comment interfaces.
... note that this doesn't monitor content of an htmlelement, even if it only contains
text inside, as it only monitors
text nodes themselves.
...And 4 more matches
OVR_multiview2 - Web APIs
for more information, see also: multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser 6.0+ webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... this extension is only available to webgl 2 con
texts as it needs glsl 3.00 and
texture arrays.
... currently, there is no way to use multiview to render to a multisampled backbuffer, so you should create con
texts with antialias: false.
...And 4 more matches
Selection API - Web APIs
the selection api provides functionality for reading and manipulating the range of
text selected by the user.
... concepts and usage to retrieve the current
text range the user has selected, you can use the window.getselection() or document.getselection() method, storing the return value — a selection object — in a variable for futher use.
... once your selection is in a variable, you perform a variety of operations on it, for example copying the selection to a
text string using selection.tostring(), adding a range (as represented by a standard range object) to the selection (or removing one) with selection.addrange()/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren().
...And 4 more matches
Using Service Workers - Web APIs
this article provides information on getting started with service workers, including basic architecture, registering a service worker, the install and activation process for a new service worker, updating your service worker, cache control and custom responses, all in the con
text of a simple app with offline functionality.
... if successful, the service worker is executed in a serviceworkerglobalscope; this is basically a special kind of worker con
text, running off the main script execution thread, with no dom access.
... const imgload = (url) => { return new promise((resolve, reject) => { var request = new xmlhttprequest(); request.open('get', url); request.responsetype = 'blob'; request.onload = () => { if (request.status == 200) { resolve(request.response); } else { reject(error('image didn\'t load successfully; error code:' + request.status
text)); } }; request.onerror = () => { reject(error('there was a network error.')); }; request.send(); }); } we return a new promise using the promise() constructor, which takes as an argument a callback function with resolve and reject parameters.
...And 4 more matches
JS_GetGlobalForScopeChain
this article covers features introduced in spidermonkey 1.8.5 returns the global object for the active function on the con
text.
... syntax jsobject * js_getglobalforscopechain(jscon
text *cx); name type description cx jscon
text * the con
text for which to return the global object.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
...And 3 more matches
JS_NewObject
syntax // added in spidermonkey 45 jsobject * js_newobject(jscon
text *cx, const jsclass *clasp); bool js_newobjectwithgivenproto(jscon
text *cx, const jsclass *clasp, js::handle<jsobject*> proto); // obsolete since spidermonkey 38 jsobject * js_newobject(jscon
text *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); jsobject * js_newobjectwithgivenproto(jscon
text *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); // added in spidermonkey 1.8 name type description cx jscon
text * the con
text in which to create the new object.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
...cx is a pointer to a con
text associated with the runtime in which to establish the new object.
...And 3 more matches
Feed content access API
nsifeed
textconstruct represents
text values in a feed; includes functions that let you fetch the
text as plain
text or html.
...loading the feed and sending it to the parser is done using code similar to this: fetch: function(feedurl) { var httprequest = null; function inforeceived() { var data = httprequest.response
text; var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feedurl, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfac...
...e = { handleresult: function(result) { var feed = result.doc; feed.queryinterface(components.interfaces.nsifeed); // open a new window var win = window.open("", "feedtest_window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.
text + "</title></head><body>"); doc.write("<h1>" + feed.title.
text + "</h1><p>"); var itemarray = feed.items; var numitems = itemarray.length; // write the article information if (!numitems) { doc.write("<i>no news is good news!</i>"); } else { var i; var theentry; var theurl; var info; ...
...And 3 more matches
nsIEditorIMESupport
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void begincomposition(in ns
texteventreplyptr areply); native code only!
...obsolete since gecko 1.9.1 void notifyimeonblur(); obsolete since gecko 1.9.1 void notifyimeonfocus(); obsolete since gecko 1.9.1 void querycomposition(in ns
texteventreplyptr areply); native code only!
... obsolete since gecko 2.0 void setcompositionstring(in domstring acompositionstring, in nsiprivate
textrangelistptr a
textrange, in ns
texteventreplyptr areply); native code only!
...And 3 more matches
nsILoginManagerCrypto
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring decrypt(in astring cipher
text); astring encrypt(in astring plain
text); attributes attribute type description isloggedin boolean current login state of the token used for encryption.
... methods decrypt() decrypts the specified string, returning the plain
text value.
... can throw if the user cancels entry of their master password, or if the cipher
text value can not be successfully decrypted (for example, if it was encrypted with some other key).
...And 3 more matches
nsIProgressEventSink
method overview void onprogress(in nsirequest arequest, in nsisupports acon
text, in unsigned long long aprogress, in unsigned long long aprogressmax); void onstatus(in nsirequest arequest, in nsisupports acon
text, in nsresult astatus, in wstring astatusarg); methods onprogress() called to notify the event sink that progress has occurred for the given request.
... void onprogress( in nsirequest arequest, in nsisupports acon
text, in unsigned long long aprogress, in unsigned long long aprogressmax ); parameters arequest the request being observed (may qi to nsichannel).
... acon
text if arequest is a channel, then this parameter is the listener con
text passed to nsichannel.asyncopen().
...And 3 more matches
nsISelectionPrivate
void set
textrangestyle(in nsidomrange range, in const
textrangestyleref
textrangestyle); native code only!
... endplaceholdertransaction will give rise to reflow/refreshing view/scroll, and call times of ns
textframe::getpointfromoffset whose return value is to be cached.
... native code only!getcachedframeoffset returns cached value for ns
textframe::getpointfromoffset.
...And 3 more matches
nsISmsService
dom/sms/interfaces/nsismsservice.idlscriptable used to send sms
text messages for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) implemented by: @mozilla.org/sms/smsservice;1.
... to create an instance, use: var smsservice = components.classes["@mozilla.org/sms/smsservice;1"] .createinstance(components.interfaces.nsismsservice); method overview [implicit_jscon
text] nsidommozsmsmessage createsmsmessage(in long id, in domstring delivery, in domstring sender, in domstring receiver, in domstring body, in jsval timestamp, in bool read ); unsigned short getnumberofmessagesfor
text(in domstring
text); boolean hassupport(); void send(in domstring number, in domstring message, in long requestid, [optional] in unsigned long long processid); methods createsmsmessage() [implicit_jscon
text] nsidommozsmsmessage createsmsmessage( in long id, in domstring delivery, in domstring sender, in domstring receiver, in...
... body a domstring with the
text of the message.
...And 3 more matches
Creating a Custom Column
d now contain something similar to this: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" currentview="unthreaded" flex="2" label="reply-to" tooltip
text="click to sort by the reply-to header" /> </treecols> </tree> <!-- include our javascript file --> <script type="
text/javascript" src="chrome://replyto_col/content/replyto_col.js"/> </overlay> that's it!
... from nsitreeview: getcellproperties(row, col, props): optionally modify the props array getrowproperties(row, props): optionally modify the props array getimagesrc(row, col): return a string (or null) getcell
text(row, col): return a string representing the actual
text to display in the column from nsimsgcustomcolumnhandler: getsortstringforrow(hdr): return the string value that the column will be sorted by getsortlongforrow(hdr): return the long value that the column will be sorted by isstring(): return true / false warning!
... do not get confused between getcell
text() and getsortstring/longforrow()!
...And 3 more matches
Activity Manager examples
"].getservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // assuming folder is an instance of nsimsgfolder interface // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.con
texttype = "account"; // group this activity by account process.con
textobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step 3: removing the process and adding an event using process' attributes process.state = components.interfaces...
...tate_completed; gactivitymanager.removeactivity(process.id); let event = components.classes["@mozilla.org/activity-event;1"].createinstance(nsiae); // localization is omitted, initiator is omitted event.init(folder.prettiestname + " is processed", null, "no junk found", process.starttime, // start time date.now()); // completion time event.con
texttype = process.con
texttype; // optional event.con
textobj = process.con
textobj; // optional gactivitymanager.addactivity(event); showing a user-defined activity with cancel capability (javascript) this sample improves the previous one by providing an nsiactivitycancelhandler to allow the user to cancel the process.
...n time // do not forget to increase the ref counter if needed copyevent->setundohandler(undohandler); //////////////////////////////////////////////////////////////// //// adding the event into activity manager nscomptr<nsiactivitymanager> activitymgr(do_getservice("@mozilla.org/activity-manager;1")); pruint32 id; activitymgr->addactivity(copyevent, &id); adding an activity with a custom con
text type this sample shows how to provide a custom con
text type for junk processing.
...And 3 more matches
Debugger.Object - Firefox Developer Tools
if a function has no name, spidermonkey attempts to infer an appropriate name for it given its con
text.
...(this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preven
textensions() prevent properties from being added to the referent.
... (this function behaves like the standard object.preven
textensions function, except that the object to operate on is implicit and in a different compartment from the caller.) issealed() return true if the referent is sealed—that is, if it is not extensible, and all its properties have been marked as non-configurable.
...And 3 more matches
Index - Firefox Developer Tools
the browser toolbox's con
text is the whole browser rather than just single page on a single tab.
... 24 debugger.source a debugger.source instance represents either a piece of javascript source code or the serialized
text of a block of webassembly code.
... 70 use the inspector api inspector, reference, référence(2), tools firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul con
text: 71 use the inspector from the web console guide, inspector, tools the element that's currently selected in the page inspector can be referenced in the web console using the variable $0.
...And 3 more matches
Examine and edit CSS - Firefox Developer Tools
displaying pseudo-elements the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-
text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter...
... while you're editing css, the con
text menu you'll see is the normal one for working with editable
text: css variable autocompletion css variable names will auto-complete depending on the variables defined in the css.
...right-click on the changes panel and select copy rule from the con
text menu.
...And 3 more matches
AudioBuffer() - Web APIs
the default is the sample rate of the con
text used in constructing this object.
... deprecated parameters con
text a reference to an audiocon
text.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffer() constructorchrome full support 55notes full support 55notes notes the con
text parameter was supported up until version 57, but has now been removed.edge full support ≤79firefox full support 53ie no support noopera full support 42notes full support 4...
...And 3 more matches
AudioBufferSourceNode - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height...
...="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">audionode</
text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</
text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><l...
...ine x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
...And 3 more matches
AudioNode - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height...
...="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">audionode</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
...this graph is contained in an audiocon
text, and each audio node can only belong to one audio con
text.
...And 3 more matches
BasicCardResponse - Web APIs
properties basiccardresponse.cardnumber read only secure con
text contains the number of the card used to make the payment.
... basiccardresponse.cardholdername read only secure con
text optional contains the cardholder name of the card used to make the payment.
... basiccardresponse.cardsecuritycode read only secure con
text optional contains the security code of the card used to make the payment.
...And 3 more matches
Compositing example - Web APIs
','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gco
text = [ 'this is the default setting and draws new shapes on top of the existing canvas content.', 'the new shape is drawn only where both the new shape and the destination canvas overlap.
...d = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = document.createelement("dt"); dt.
textcontent = pop; dl.appendchild(dt); var dd = document.createelement("dd"); var p = document.createelement("p"); p.
textcontent = gco
text.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcon
text('2d'); ...
...tx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.fill
text(pop, 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawon.getcon
text('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.fill
text...
...And 3 more matches
Hit regions and accessibility - Web APIs
canvasrenderingcon
text2d.addhitregion() adds a hit region to the canvas.
... canvasrenderingcon
text2d.removehitregion() removes the hit region with the specified id from the canvas.
... canvasrenderingcon
text2d.clearhitregions() removes all hit regions from the canvas.
...And 3 more matches
DocumentOrShadowRoot.activeElement - Web APIs
often activeelement will return a htmlinputelement or html
textareaelement object if it has the
text selection at the time.
...for example, on macos systems, elements that aren't
text input elements are not typically focusable by default.
... example html <p>select some
text from one of the
text areas below:</p> <form> <
textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">this is
text area one.
...And 3 more matches
Examples of web and XML development using the DOM - Web APIs
<!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function change
text() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="change
text();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a ...
... var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selector
text + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simpl...
...le(refdiv, null).getpropertyvalue("background-color"); txtbackgroundcolor.value = b_style; } </script> <style> #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); height: 20px; max-width: 20px; } </style> </head> <body> <div id="d1"> </div> <form action=""> <p> <button type="button" onclick="cstyles();">getcomputedstyle</button> height<input id="t1" type="
text" value="1" /> max-width<input id="t2" type="
text" value="2" /> bg-color<input id="t3" type="
text" value="3" /> </p> </form> </body> </html> example 7: displaying event object properties this example uses dom methods to display all the properties of the window.onload event object and their values in a table.
...And 3 more matches
DragEvent - Web APIs
event types drag this event is fired when an element or
text selection is being dragged.
... dragenter this event is fired when a dragged element or
text selection enters a valid drop target.
... dragleave this event is fired when a dragged element or
text selection leaves a valid drop target.
...And 3 more matches
HTMLAnchorElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...And 3 more matches
HTMLAreaElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...And 3 more matches
HTMLBodyElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...And 3 more matches
HTMLInputElement.setSelectionRange() - Web APIs
the htmlinputelement.setselectionrange() method sets the start and end positions of the current
text selection in an <input> or <
textarea> element.
...this lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected
text toward the beginning.
... note that accordingly to the whatwg forms spec selectionstart, selectionend properties and setselectionrange method apply only to inputs of types
text, search, url, tel and password.
...And 3 more matches
HTMLMediaElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...And 3 more matches
OES_element_index_uint - Web APIs
the oes_element_index_uint extension is part of the webgl api and adds support for gl.unsigned_int types to webglrenderingcon
text.drawelements().
... webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is only available to webgl1 con
texts.
...And 3 more matches
Range.setStart() - Web APIs
if the startnode is a node of type
text, comment, or cdatasection, then startoffset is the number of characters from the start of startnode.
... the address contains nine nodes: five
text nodes, and four <br> elements.
...main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.
textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.
...And 3 more matches
SVGRectElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 3 more matches
File - Web APIs
a file object is a specific kind of a blob, and can be used in any con
text that a blob can.
...inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">blob</
text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4...
...f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">file</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
...And 2 more matches
HTMLBRElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="426" y="94" font-size="12px" font-family="...
...And 2 more matches
HTMLBaseElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...And 2 more matches
HTMLDivElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="421" y="94" font-size="12px" font-family=...
...And 2 more matches
HTMLEmbedElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...And 2 more matches
HTMLHRElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="426" y="94" font-size="12px" font-family="...
...And 2 more matches
HTMLHeadingElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-fam...
...And 2 more matches
HTMLImageElement.align - Web APIs
baseline alignment these three values specify the alignment of the element relative to the
text baseline.
... bottom the bottom edge of the image is to be aligned vertically with the current
text baseline.
...instead, they cause the image to "float" to the left or right margin, allowing the following
text to flow around the image.
...And 2 more matches
HTMLMapElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="421" y="94" font-size="12px" font-family=...
...And 2 more matches
HTMLMenuElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...And 2 more matches
HTMLParagraphElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-f...
...And 2 more matches
HTMLPreElement - Web APIs
the htmlpreelement interface exposes specific properties and methods (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating a block of preformatted
text (<pre>).
...splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...And 2 more matches
HTMLSelectElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...And 2 more matches
HTMLTableElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltableelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...And 2 more matches
HTMLTableRowElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...And 2 more matches
HTMLTableSectionElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="376" y="94" font-size="12px" fon...
...And 2 more matches
HTMLTitleElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...And 2 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
simply pass the javascript function to call while the con
text is handling microtasks into the queuemicrotask() method, which is exposed on the global con
text as defined by either the window or worker interface, depending on the current execution con
text.
...generally, it's about capturing or checking results, or performing cleanup, after the main body of a javascript execution con
text exits, but before any event handlers, timeouts and intervals, or other callbacks are processed.
... the snippet below creates a function that batches multiple messages into an array, using a microtask to send them as a single object when the con
text exits.
...And 2 more matches
HTML Drag and Drop API - Web APIs
each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or
text selection) is dragged.
... identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("
text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart", dragstart_handler); }); </script> <p id="p1" draggable="true">this element is draggable.</p> for more information, see: draggable attribute refere...
...each data item is a string of a particular type — typically a mime type such as
text/html.
...And 2 more matches
InputEvent - Web APIs
nline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">event</
text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill=...
..."#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">uievent</
text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">inputevent</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constructor inputevent() creates an inp...
...this may be an empty string if the change doesn't insert
text (such as when deleting characters, for example).
...And 2 more matches
MutationObserverInit.characterDataOldValue - Web APIs
the mutationobserverinit dictionary's optional characterdataoldvalue property is used to specify whether or not the mutationrecord.oldvalue property for dom mutations should be set to the previous value of
text nodes which changed.
... if you set the mutationobserverinit.characterdata property to true but don't set characterdataoldvalue to true as well, the mutationrecord will not include information describing the prior state of the
text node's contents.
... character data changes are detectable on any
text node, including nodes based on the
text, processinginstruction, and comment interfaces.
...And 2 more matches
Navigator.share() - Web APIs
text: a usvstring representing
text to be shared.
...the javascript looks like this: const sharedata = { title: 'mdn',
text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.
textcontent = 'mdn shared successfully' } catch(err) { resu...
...ltpara.
textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().
...And 2 more matches
Node.firstChild - Web APIs
<p id="para-01"> <span>first span</span> </p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> in the above, the console will show '#
text' because a
text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags.
... any whitespace will create a #
text node, from a single space to multiple spaces, returns, tabs, and so on.
... another #
text node is inserted between the closing </span> and </p>tags.
...And 2 more matches
PannerNode.coneInnerAngle - Web APIs
syntax var audioctx = new audiocon
text(); var panner = audioctx.createpanner(); panner.coneinnerangle = 360; value a double.
...they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocon
text, an oscillator and a pannernode: const con
text = new audiocon
text(); const osc = new oscillatornode(con
text); osc.type = 'sawtooth'; const panner = new pannernode(con
text); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if con...
...; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, con
text.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, con
text.currenttime); panner.orientationy.setvalueattime(y1, con
text.currentti...
...And 2 more matches
PannerNode.coneOuterAngle - Web APIs
syntax var audioctx = new audiocon
text(); var panner = audioctx.createpanner(); panner.coneouterangle = 0; value a double.
...they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocon
text, an oscillator and a pannernode: const con
text = new audiocon
text(); const osc = new oscillatornode(con
text); osc.type = 'sawtooth'; const panner = new pannernode(con
text); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if con...
...; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, con
text.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, con
text.currenttime); panner.orientationy.setvalueattime(y1, con
text.currentti...
...And 2 more matches
PannerNode.coneOuterGain - Web APIs
syntax var audioctx = new audiocon
text(); var panner = audioctx.createpanner(); panner.coneoutergain = 0; value a double.
...they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocon
text, an oscillator and a pannernode: const con
text = new audiocon
text(); const osc = new oscillatornode(con
text); osc.type = 'sawtooth'; const panner = new pannernode(con
text); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if con...
...; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, con
text.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, con
text.currenttime); panner.orientationy.setvalueattime(y1, con
text.currentti...
...And 2 more matches
PeriodicWave.PeriodicWave() - Web APIs
syntax var mywave = new periodicwave(con
text, options); parameters inherits parameters from the audionodeoptions dictionary.
... con
text a baseaudiocon
text representing the audio con
text you want the node to be associated with.
... options optional a periodicwaveoptions dictionary object defining the properties you want the periodicwave to have (it also inherits the options defined in the periodicwaveconstraints dictionary.): real: a float32array containing the cosine terms that you want to use to form the wave (equivalent to the real parameter of audiocon
text.createperiodicwave).
...And 2 more matches
Using Pointer Events - Web APIs
example the
text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus, mouse, or other method of pointing at a location.
... function handlestart(evt) { log("pointerdown."); var el = document.getelementsbytagname("canvas")[0]; var ctx = el.getcon
text("2d"); log("pointerdown: id = " + evt.pointerid); ongoingtouches.push(copytouch(evt)); var color = colorfortouch(evt); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.arc(evt.clientx, evt.clienty, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); } after storing some of t...
... function handlemove(evt) { var el = document.getelementsbytagname("canvas")[0]; var ctx = el.getcon
text("2d"); var color = colorfortouch(evt); var idx = ongoingtouchindexbyid(evt.pointerid); log("continuing touch: idx = " + idx); if (idx >= 0) { ctx.beginpath(); log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); log("ctx.lineto(" + evt.clientx + ", " + evt.clienty + ");...
...And 2 more matches
ReadableStreamDefaultReader.read() - Web APIs
function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function process
text({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); para.
textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.
textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(process
text); }); } example 2 - handling
text line by line this example shows how you might fetch a
text file and handle it as a stream of
text lines.
...And 2 more matches
SVGCircleElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 2 more matches
SVGEllipseElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 2 more matches
SVGLineElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 2 more matches
SVGPathElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 2 more matches
SVGPolygonElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 2 more matches
SVGPolylineElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 2 more matches
SVGSVGElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...And 2 more matches
Selection.deleteFromDocument() - Web APIs
the deletefromdocument() method of the selection interface deletes the selected
text from the document's dom.
... example this example lets you delete selected
text by clicking a button.
... upon clicking the button, the window.getselection() method gets the selected
text, and the deletefromdocument() method removes it.
...And 2 more matches
Using readable streams - Web APIs
note: in order to consume a stream using fetchevent.respondwith(), the enqueued stream contents must be of type uint8array; for example, encoded using
textencoder.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.
textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterv...
... function readstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function process
text({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
...And 2 more matches
SubtleCrypto - Web APIs
subtlecrypto.encrypt() returns a promise that fufills with the encrypted data corresponding to the clear
text, algorithm, and key given as parameters.
... subtlecrypto.decrypt() returns a promise that fulfills with the clear data corresponding to the encrypted
text, algorithm, and key given as parameters.
... subtlecrypto.sign() returns a promise that fulfills with the signature corresponding to the
text, algorithm, and key given as parameters.
...And 2 more matches
VTTCue() - Web APIs
syntax vttcue = new vttcue(starttime, endtime,
text); parameters starttime this is a double representing the initial
text track cue start time.
... endtime this is a double representing the ending time for this
text track cue.
...
text a domstring providing the
text that will be shown during the time span indicated by starttime and endtime.
...And 2 more matches
WEBGL_color_buffer_float - Web APIs
webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is available to webgl 1 con
texts only.
... the oes_
texture_float extension implicitly enables this extension.
...And 2 more matches
WebGL: 2D and 3D graphics for the web - Web APIs
the webgl 2 api introduces support for much of the opengl es 3.0 feature set; it's provided through the webgl2renderingcon
text interface.
... reference standard interfaces webglrenderingcon
text webgl2renderingcon
text webglactiveinfo webglbuffer webglcon
textevent webglframebuffer webglprogram webglquery webglrenderbuffer webglsampler webglshader webglshaderprecisionformat webglsync webgl
texture webgltransformfeedback webgluniformlocation webglvertexarrayobject extensions angle_instanced_arrays ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_
texture_lod ext_
texture_compression_bptc ext_
texture_compression_rgtc ext_
texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint oes_fbo_render_mipmap...
... oes_standard_derivatives oes_
texture_float oes_
texture_float_linear oes_
texture_half_float oes_
texture_half_float_linear oes_vertex_array_object ovr_multiview2 webgl_color_buffer_float webgl_compressed_
texture_astc webgl_compressed_
texture_atc webgl_compressed_
texture_etc webgl_compressed_
texture_etc1 webgl_compressed_
texture_pvrtc webgl_compressed_
texture_s3tc webgl_compressed_
texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_
texture webgl_draw_buffers webgl_lose_con
text events webglcon
textlost webglcon
textrestored webglcon
textcreationerror constants and types webgl constants webgl types webgl 2 webgl 2 is a major update to webgl which is provided through the webgl2renderingcon
text interface.
...And 2 more matches
Taking still photos with WebRTC - Web APIs
the rest is just some page layout fluff and a bit of
text offering a link back to this page.
...that code looks like this: function clearphoto() { var con
text = canvas.getcon
text('2d'); con
text.fillstyle = "#aaa"; con
text.fillrect(0, 0, canvas.width, canvas.height); var data = canvas.todataurl('image/png'); photo.setattribute('src', data); } we start by getting a reference to the hidden <canvas> element that we use for offscreen rendering.
...the code looks like this: function takepicture() { var con
text = canvas.getcon
text('2d'); if (width && height) { canvas.width = width; canvas.height = height; con
text.drawimage(video, 0, 0, width, height); var data = canvas.todataurl('image/png'); photo.setattribute('src', data); } else { clearphoto(); } } as is the case any time we need to work with the contents of a canvas, we start by getting the 2d draw...
...And 2 more matches
Lighting a WebXR setting - Web APIs
because the webxr device api relies on other technologies—namely, webgl and frameworks based upon it—to perform all rendering,
texturing, and lighting of a scene, the same general lighting concepts apply to webxr settings or scenes as to any other webgl-generated display.
... for each polygon in the scene, the vertex shader program determines the vertices' colors, and then the fragment shader generates each pixel in the polygon by combining the appropriate texel from the assigned
texture, any color tint or effect, and other visual data.
... the color of each pixel in the final, rendered, scene is calculated using some intricate math that factors in things like: the color of the
texture element (the pixel within the
texture mapped onto the object; also known as a texel) corresponding to the screen pixel, given the object geometry, the viewer position and orientation relative to each polygon, and so forth.
...And 2 more matches
Rendering and the WebXR frame animation callback - Web APIs
in this con
text, "repaint" simply means the process of ensuring that the screen's displayed content matches what the dom and the elements within are trying to present at the moment.
... hardare vertical refresh rate when the browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering callback, which uses the specified timestamp and any other relevant data, such as models and
textures, as well as application state, to render the scene—as it should appear at the specified time—into the webgl backbuffer.
...this pseudocode outlines that process: for each view in the pose's views list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() bindmatrices() binduniforms() bindbuffers() bind
textures() drawmyobject() put simply, this form of renderer is using view-first order.
...And 2 more matches
startOffset - SVG: Scalable Vector Graphics
the startoffset attribute defines an offset from the start of the path for the initial current
text position along the path after converting the path to the <
textpath> element's coordinate system.
... only one element is using this attribute: <
textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <
text> <
textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
... </
textpath> </
text> <
text> <
textpath href="#path2" startoffset="40"> quick brown fox jumps over the lazy dog.
...And 2 more matches
stroke - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <
text>, <
textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" sto...
... candidate recommendation definition for shapes and
texts.
... adds con
text-fill and con
text-stroke.
...And 2 more matches
xlink:href - SVG: Scalable Vector Graphics
the exact meaning of that link depends on the con
text of each element using it.
... 22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <
textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><
text x="10" y="25">mdn web docs</
text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
... value <iri> default value none animatable no
textpath for <
textpath>, xlink:href defines a reference to the <path> element onto which the glyphs will be rendered.
...And 2 more matches
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <
text x="150" y="125" font-size="60"
text-anchor="middle" fill="white">svg</
text> </svg> copy the code and paste it in a file demo1.svg.
... the
text "svg" is drawn.
...the
text is positioned by setting an anchor where we want the midpoint to be: in this case, the midpoint should correspond to the center of the green circle.
...And 2 more matches
SVG: Scalable Vector Graphics
as such, it's a
text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including css, dom, javascript, and smil.
... svg is, essentially, to graphics what html is to
text.
... svg images and their related behaviors are defined in xml
text files, which means they can be searched, indexed, scripted, and compressed.
...And 2 more matches
Tutorials
html tutorials introductory level introduction to html this module sets the stage, getting you used to important concepts and syntax, looking at applying html to
text, how to create hyperlinks, and how to use html to structure a webpage.
...we'll answer questions like: how do i make my
text black or red?
... the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like
text styling and css layout.
...And 2 more matches
Using templates and slots - Web Components
we can only display one bit of
text inside it, meaning that at the moment it is even less useful than a regular paragraph!
... we can make it possible to display different
text in each element instance in a nice declarative way using the <slot> element.
... so, if we want to add a slot into our trivial example, we could update our template's paragraph element like this: <p><slot name="my-
text">my default
text</slot></p> if the slot's content isn't defined when the element is included in the markup, or if the browser doesn't support slots, <my-paragraph> just contains the fallback content "my default
text".
...And 2 more matches
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
<?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet type="
text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript.
...'red': <?xslt-param name="color" value="red"?> set the parameter 'columns' to the number 2: <?xslt-param name="columns" select="2"?> set the parameter 'books' to a nodeset containing all <book> elements in the null namespace: <?xslt-param name="books" select="//book"?> set the parameter 'show-toc' to boolean true: <?xslt-param name="show-toc" select="true()"?> the select attribute con
text the following con
text is used to parse and evaluate the expression in the select attribute.
... the con
text node is the node used as initial current node used when executing the stylesheet.
...And 2 more matches
WebAssembly Concepts - WebAssembly
be readable and debuggable — webassembly is a low-level assembly language, but it does have a human-readable
text format (the specification for which is still being finalized) that allows code to be written, viewed, and debugged by hand.
... the generated html document loads the javascript glue file and writes stdout to a <
textarea>.
... in the same fashion as physical assembly languages, the webassembly binary format has a
text representation — the two have a 1:1 correspondence.
...And 2 more matches
Index - WebAssembly
6 converting webassembly
text format to wasm webassembly, assembly, conversion,
text format, wabt, wasm, wast2wasm, wat2wasm webassembly has an s-expression-based
textual representation, an intermediate form designed to be exposed in
text editors, browser developer tools, etc.
... this article explains a little bit about how it works, and how to use available tools to covert
text format files to the .wasm assembly format.
... 10 understanding webassembly
text format functions, javascript, s-expressions, webassembly, calls, memory, shared address, table,
text format, was, wasm this finishes our high-level tour of the major components of the webassembly
text format and how they get reflected in the webassembly js api.
...And 2 more matches
notifications - Archive of obsolete content
var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky",
text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", onclick: function (data) { console.log(data); // console.log(this.data) would produce the same result.
... var notifications = require("sdk/notifications"); var self = require("sdk/self"); var myiconurl = self.data.url("myicon.png"); notifications.notify({
text: "i have an icon!", iconurl: myiconurl }); from firefox 34, you can use "./myicon.png" as an alias for self.data.url("myicon.png").
... so you can rewrite the above code like this: var notifications = require("sdk/notifications"); var myiconurl = "./myicon.png"; notifications.notify({
text: "i have an icon!", iconurl: myiconurl }); this module depends on the underlying system's notification service.
...
text string a string to display as the body of the message.
page-worker - Archive of obsolete content
in this example we fetch the first paragraph of a page from wikipedia, then the first paragraph of a different page: var getfirstparagraph = "var paras = document.getelementsbytagname('p');" + "console.log(paras[0].
textcontent);" + "self.port.emit('loaded');" pageworker = require("sdk/page-worker").page({ contentscript: getfirstparagraph, contenturl: "http://en.wikipedia.org/wiki/chalk" }); pageworker.port.on("loaded", function() { pageworker.contenturl = "http://en.wikipedia.org/wiki/cheese" }); scripting page content to access the page's dom you need to attach a script to it.
...ge from wikipedia, and runs a content script in it to send all the headers back to the main add-on code: var pageworkers = require("sdk/page-worker"); // this content script sends header titles from the page to the add-on: var script = "var elements = document.queryselectorall('h2 > span'); " + "for (var i = 0; i < elements.length; i++) { " + " postmessage(elements[i].
textcontent) " + "}"; // create a page worker that loads wikipedia: pageworkers.page({ contenturl: "http://en.wikipedia.org/wiki/internet", contentscript: script, contentscriptwhen: "ready", onmessage: function(message) { console.log(message); } }); for conciseness, this example creates the content script as a string and uses the contentscript property.
... contentscript string,array a string or an array of strings containing the
texts of content scripts to load.
... contentscript a string or an array of strings containing the
texts of content scripts to load.
lang/type - Archive of obsolete content
source(value, indent, limit) returns the
textual representation of value, containing property descriptors and types of properties contained within the object.
... let { source } = require('sdk/lang/type'); var obj = { name: undefined, twitter: '@horse_js', tweets: [ { id: 100,
text: 'what happens to you if you break the monad laws?' }, { id: 101,
text: 'javascript dubstep generator' } ] }; console.log(source(obj)); // prints the below /* { // [object object] // writable configurable enumerable name: undefined, // writable configurable enumerable twitter: "@horse_js", // writable configurable enumerable tweets: [ { // [object object] // writable configurable enumerable id: 100, // writable configurable enumerable
text: "what happens to you if you break the monad laws?", "__proto__": { // [object object] } }, { // [o...
...bject object] // writable configurable enumerable id: 101, // writable configurable enumerable
text: "javascript dubstep generator", "__proto__": { // [object object] } } ], "__proto__": { // [object object] } } */ parameters value : mixed the source object to create a
textual representation of.
... returns string : the
textual representation of value.
ui/frame - Archive of obsolete content
ouple of <span> elements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="
text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-...
...this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script type="
text/javascript" src="frame.js"></script> as usual, the path to the script is relative to the html file's location.
..."city-info", title: "city info", items: [frame] }); function updateweather(location) { frame.postmessage(weather[location], frame.url); } to listen to these messages in the frame script, add a listener to the window's message event: window.addeventlistener("message", updateweather, false); function updateweather(message) { var label = window.document.getelementbyid("weather"); label.
textcontent = message.data; } from add-on to a specific frame you can send a message from the main add-on code to the frame hosted by a particular browser window.
...indow) of the frame: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ name: "my-toolbar", title: "my toolbar", items: [frame] }); frame.postmessage("ping", frame.url); frame scripts can receive these messages using window.addeventlistener(): function ponged(message) { label.
textcontent = message.data; } window.addeventlistener("message", ponged, false); to send a message only to the frame instance hosted by a specific browser window call postmessage() on the source property of the object passed into any of the frame's event listeners.
window/utils - Archive of obsolete content
parameters window : nsidomwindow returns nsidocshell getwindowloadingcon
text(window) returns the nsiloadcon
text.
... parameters window : nsidomwindow returns nsiloadcon
text open(uri, options) this function is used to open top level (application) windows.
... var { open } = require('sdk/window/utils'); var window = open('data:
text/html,hello window'); this function wraps nsiwindowwatcher.openwindow.
... var { open } = require('sdk/window/utils'); var window = open('data:
text/html,hello window', { name: 'jetpack window', features: { width: 200, height: 50, popup: true } }); args object extra argument(s) to be attached to the new window as the window.arguments property.
Displaying annotations - Archive of obsolete content
w', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchor
text + ')').last(); $(annotationanchor).addclass('annotated'); $(annotationanchor).attr('annotation', annotation.annotation
text); } save this in data as matcher.js.
... then in the module's scope implement a function to update the matcher's workers, and edit handlenewannotation to call this new function when the user enters a new annotation: function updatematchers() { matchers.foreach(function (matcher) { matcher.postmessage(simplestorage.storage.annotations); }); } function handlenewannotation(annotation
text, anchor) { var newannotation = new annotation(annotation
text, anchor); simplestorage.storage.annotations.push(newannotation); updatematchers(); } annotation panel the annotation panel just shows the content of an annotation.
... annotation panel html <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="
text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div {
text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html.
... annotation panel content script the annotation panel has a minimal content script that sets the
text: self.on('message', function(message) { $('#annotation').
text(message); }); save this in data/annotation as annotation.js.
Creating Reusable Modules - Archive of obsolete content
md5 is a commonly used hash function: although it's no longer considered secure, it works fine outside a security con
text.
...ke this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filter
text); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
...(hash.charcodeat(i))).join(""); return s; } function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filter
text); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
...ike this: var {cc, ci} = require("chrome"); function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filter
text); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
HTML to DOM - Archive of obsolete content
however, there are potential dangers involved in injecting remote content in a privileged con
text in your extension, so it can be desirable to parse the html safely.
... we're going to load our html document first: var request = xmlhttprequest(); request.open("get", "http://example.org/file.html", false); request.send(null); our next step is to create the document object that will represent the dom into which we'll insert our newly-retrieved html: var doc = document.implementation.createhtmldocument("example"); doc.documentelement.innerhtml = request.response
text; after this any manipulation that we might want to do will be something as simple as the following: doc.body.
textcontent = "this is inside the body!"; using a hidden iframe element to parse html to a window's dom sample code may need more work.
...let's take a look at the donkeyfire.donkeybrowser_onpageload() handler: donkeybrowser_onpageload: function(aevent) { var doc = aevent.originaltarget; var url = doc.location.href; if (aevent.originaltarget.nodename == "#document") { // ok, it's a real page, let's do our magic dump("[df] url = "+url+"\n"); var
text = doc.evaluate("/html/body/h1",doc,null,xpathresult.string_type,null).stringvalue; dump("[df]
text in /html/body/h1 = "+
text+"\n"); } }, as you can see, we obtain full access to the dom of the page we loaded in background, and we can even evaluate xpath expressions.
... in the example, we dump() to the console the page's url and the
text contained in the first h1 tag of the page's <body>.
Inline options - Archive of obsolete content
setting types there are several types of <setting>s, each with a different type attribute: type attribute displayed as preference stored as bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer
textbox integer string
textbox string color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored ...
...to set a description, either use the desc attribute, or a
text node as a child of the <setting> tag.
...<setting pref="extensions.myaddon.bool2" type="bool" title="boolean 2"> description of boolean 2 </setting> <!-- boolean stored as an integer --> <setting pref="extensions.myaddon.boolint" type="boolint" title="boolean 3" on="1" off="2"/> <!-- integer example --> <setting pref="extensions.myaddon.int" type="integer" title="integer"/> <!-- string examples --> <setting pref="extensions.myaddon.
text" type="string" title="
text"/> <setting pref="extensions.myaddon.password" type="string" title="password" inputtype="password"/> <!-- color example --> <setting pref="extensions.myaddon.color" type="color" title="color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="dir...
... <setting pref="extensions.throbberrestored.showtxtontoolbar" title="show
text on toolbar button" type="bool" oninputchanged="alert('new value is = ' + this.value); this.style.backgroundcolor='red';"> if labels on other toolbar buttons are visible (like by using add-on "classic theme restorer") then show label on throbber toolbar button </setting> note in order for the oninputchanged to execute, the setting must have a pref attribute, otherwise the oninputchan...
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
xml coding css coding basic javascript syntax xml: a
text-based structural language extensible markup language (xml) is a meta-language for expressing various kinds of data.
... an element can include other elements as well as
text in its content, and all information is structured as a tree.
... listing 2: css code sample body { color: black; background-color: white; } p { margin-bottom: 1em;
text-indent: 1em; } javascript: the world's most misunderstood language javascript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages.
... because it was often used at first to display pop-up windows, marching
text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
such implementations are meant to be used within a very different security con
text, namely a website, where the origin of the data is usually known in all instances and where vulnerabilities would have a much smaller impact.
...settimeout("alert('" + xhr.response
text + "');", 100); // attacker manipulated response
text to contain "attack!'); format_computer(); alert('done" settimeout("alert('attack!'); format_computer(); alert('done');", 100); as a general rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.
... var response = xhr.response
text; settimeout(function() { alert(response); }, 100); } alternative: use function.bind() introduced in javascript 1.8.5 function.bind is a new utility function that you may use to (partially) bind parameters to functions.
... addeventlistener("load", myaddon.init.bind(myaddon), true); settimeout(alert.bind(null, xhr.response
text), 100); function.bind() returns a new function.
Security best practices in extensions - Archive of obsolete content
using eval() in an extension using the built-in javascript eval function is frowned upon in the con
text of extensions.
... non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="
text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome con
text are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks.
...the usefulness of it and power of how it works is best illustrated by the popular greasemonkey extension, which works on the premise of scripts being downloaded and stored locally, to be injected into the web content con
text via the sandbox.
... third-party javascript in the con
text of web sites, using javascript written by others is very common.
Creating reusable content with CSS and XBL - Archive of obsolete content
you can use css to provide content for selected elements, but the content is limited to
text and images, and its positioning is limited to before or after the selected element.
...copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="
text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css.
...copy and paste the content from here: /*** xbl demonstration ***/ #square { -moz-binding: url("square.xbl#square"); } make a new
text file, square.xbl.
...it only contains the
text of the button's label.
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
unction processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = getldapvalue(values, "cn"); var mail = getldapvalue(values, "mail"); var url = getldapvalue(values, "labeleduri"); // those ldap variables are only available in this processldapvalues con
text!
...just setting mozilla_debug=1 (see js code in thunderbird.cfg) allow that message to appear , it's very useful in debuging con
text ...
...also related post in newsgroups: mozilla.dev.tech.js-engine date: wed, 17 may 2006 19:06:28 +0200 from: jehan procaccia <jehan.procaccia@int-evry.fr> newsgroups: mozilla.dev.tech.js-engine subject: scope of js file functions in frefox/thunderbird autoconfig con
text firefox 2.x recently (2007/03/20), i've tested autoconfig support in firefox 2.0.0.2 on a linux fedora.
...we use the autoadmin operation to redirect // netscape.cfg to read the plain-
text "config-file-unix.jsc" file.
Source code directories overview - Archive of obsolete content
editor contains c interfaces, c code and xul for the embeddable editor component which can edit both plain
text and html.
...composer in mozilla classic), for plain
text and html mail composition and for
text fields and
text areas throughout the product.
... the editor is designed like a "browser window with editing features" with extra classes for editing
text and managing undo/redo.
...essentially, it is a a set of interfaces for a platform-independent device (drawing) con
text.
Creating a hybrid CD - Archive of obsolete content
it is used as the creator type for readme and other
text files because it can handle unix and windows linebreaks, but teach
text cannot.
... # example filename mapping file used by mkhybrid for hfs # # extn xlate creator type comment .hqx ascii 'sitx' '
text' "binhex file" .zip raw 'sitx' 'zip ' "zip file" .gz raw 'sitx' 'zip ' "gzip file" .tgz raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw '8bim' 'tiff' "photoshop tiff image" .doc raw 'mswd' 'wdbn' "word file" .mov raw 'tvod' 'moov' "quicktime movie" .bin raw 'sitx' 'bina' "mac binary" .h ascii 'cwie' '
text' "c/c++ header file" .c ascii 'cwie' '
text' "c source file" .cp ascii 'cwie' '
text' "c++ source file" .cpp ascii 'cwie' '
text' "c++ source file" .exp ascii 'cwie' ...
... '
text' "symbol export file" .mcp raw 'cwie' 'mmpr' "codewarrior project file" .r ascii 'mps ' '
text' "rez file" .html ascii 'moss' '
text' "html file" .htm ascii 'moss' '
text' "html file" .txt ascii 'moss' '
text' "
text file" readme ascii 'moss' '
text' "
text file" changes ascii 'moss' '
text' "
text file" install ascii 'moss' '
text' "
text file" license ascii 'moss' '
text' "
text file" .gif raw 'ogle' 'giff' "gif file" .png raw 'ogle' 'png ' "png file" .jpg raw 'ogle' 'jpeg' "jpeg file" .jpeg raw 'ogle' 'jpeg' "jpeg file" .pl ascii 'mcpl' '
text' "perl file" .pm ascii 'mcpl' '
text' "perl module file" .xml ascii 'r*ch' '
text' ...
... "xml file" .xul ascii 'r*ch' '
text' "xul file" .xbl ascii 'r*ch' '
text' "xbl file" .css ascii 'r*ch' '
text' "css file" .dtd ascii 'r*ch' '
text' "dtd file" .js ascii 'r*ch' '
text' "javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 'tvod' 'mpeg' "mpeg file" .au raw 'tvod' 'ulaw' "audio file" * ascii 'ttxt' '
text' "
text file" for more information about recording cds, see the cd-recordable faq.
JavaScript Client API - Archive of obsolete content
all you have to do is write an object that extends cryptowrapper and maintains a property called clear
text.
... clear
text must be a json-able object.
... the skeleton of a sample record implementation: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo", ttl: foo_ttl, // optional get bar() this.clear
text.bar, set bar(value) { this.clear
text.bar = value; }, get baz() this.clear
text.baz, set baz(value) { this.clear
text.baz = value; } }; to save all that typing for declaring the getters and setters, you can also use utils.defergetset: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, ...
... _logname: "record.foo", ttl: foo_ttl // optional }; utils.defergetset(foorec, "clear
text", ["bar", "baz"]); the store object the store object (which extends store, as defined in services/sync/modules/engines.js) has the job of creating and maintaining a set of record objects from the underlying data.
JavaScript crypto - Archive of obsolete content
services are provided to enable: smart card events, generating certificate requests, importing user certs, generating random numbers, logging out of your tokens, and signing
text.
...tes script script calls key generation method (generatecrmfrequest) signing and encryption keys are generated encryption private key is wrapped with public key of key recovery authority (kra) (passed in in the form of a certificate as part of the script, and checked against a pre-installed certificate copy in the local certificate database) the public keys, wrapped encryption private key, and
text string from the script (possibly containing naming or enrollment info) are signed by the user signed blob is returned to the script script submits signed blob and any other necessary info to the ca/ra ca/ra verifies signature on signed blob ca/ra validates identity of user ca/ra sends wrapped encryption private key to kra kra sends escrow verification back to ca ca creates and signs certif...
...icates ca sends certificates back to the user (importusercertificates) typical use the ca's enrollment page could look something like this: <!doctype html> <h2>request a cert</h2> <form name="reqform" method="post" action="http://your.ra.site.org"> <p><input type=hidden name=cert_request value=""> <p>name: <input type=
text name=name value=""> <p>password: <input type=password name="password" value=""> <p><input type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authenticator = "server_magic"; var keytransportcert = null; var crmfobject = null; var form = document.forms[0]; function validate() { // generate keys for nsm.
...t name="load" value="submit"></p> </form> <script> /* the following values could be filled in by the server cgi */ var nickname= "mycertnickname"; var cert = "mkjflakdjfiwjflaksufklasf ..."; var forcebackup = false; function loadcertificate() { window.crypto.importusercertificates(nickname, cert, forcebackup); return false; } document.forms[0].onsubmit = loadcertificate; </script> signing
text domstring sign
text(domstring stringtosign, domstring caoption /* ...
Simple Storage - Archive of obsolete content
select some
text on the page, right-click, and select note.
... the
text will be remembered across browser restarts as a note.
... notes : [{ label: "(empty)", disabled: true }]) });}// modify the page's con
text menu by sneaking in before it's shown.
...:(jetpack.menu.con
text.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.
text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.
text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } });};// initialize the jetpack menu with the current notes.updatejetpackmenu(); see also settings jep 11 ...
Clipboard - Archive of obsolete content
the only flavors currently implemented are 'plain' (
text/unicode) and 'html' (which is html).string"
text" here's an example of how to use the method to set the clipboard.
... jetpack.import.future("clipboard");// in
text formatjetpack.clipboard.set("hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard.
...jetpack.import.future("clipboard");var mycontent = "<i>this is some italic
text</i>";jetpack.clipboard.set( mycontent, "html" ); getcurrentflavors()returns an array of available jetpack clipboard flavors, for the current system clipboard state.
... jetpack.import.future("clipboard");var mycontent = "<i>this is some italic
text</i>";jetpack.clipboard.set( mycontent, "html" );var flavs = jetpack.clipboard.getclipboardflavors();// should equal ["html", "
text"]console.log( flavs ); ...
Clipboard Test - Archive of obsolete content
the only flavors currently implemented are 'plain' (
text/unicode) and 'html' (which is html).string"
text" here's an example of how to use the method to set the clipboard.
... jetpack.import.future("clipboard");// in
text formatjetpack.clipboard.set("hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard.
...jetpack.import.future("clipboard");var mycontent = "<i>this is some italic
text</i>";jetpack.clipboard.set( mycontent, "html" ); getcurrentflavors()returns an array of available jetpack clipboard flavors, for the current system clipboard state.
... jetpack.import.future("clipboard");var mycontent = "<i>this is some italic
text</i>";jetpack.clipboard.set( mycontent, "html" );var flavs = jetpack.clipboard.getclipboardflavors();// should equal ["html", "
text"]console.log( flavs ); ...
Clipboard - Archive of obsolete content
the only flavors currently implemented are 'plain' (
text/unicode) and 'html' (which is html).string"
text" here's an example of how to use the method to set the clipboard.
... jetpack.import.future("clipboard"); // in
text format jetpack.clipboard.set("hello world"); // in other clipboard get(flavor string)returns data to jetpack from the clipboard.
...jetpack.import.future("clipboard"); var mycontent = "<i>this is some italic
text</i>"; jetpack.clipboard.set( mycontent, "html" ); getcurrentflavors()returns an array of available jetpack clipboard flavors, for the current system clipboard state.
... jetpack.import.future("clipboard"); var mycontent = "<i>this is some italic
text</i>"; jetpack.clipboard.set( mycontent, "html" ); var flavs = jetpack.clipboard.getclipboardflavors(); // should equal ["html", "
text"] console.log( flavs ); ...
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain
text.
...this api currently lives in the future and must be imported for use: jetpack.future.import("selection"); getting and setting the selection the current version of jetpack.selection includes these formats: .
text and .html getting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection");var
textofsel = jetpack.selection.
text;var htmlofsel = jetpack.selection.html; setting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection");jetpack.selection.
text = 'hello';jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain
text.
...this api currently lives in the future and must be imported for use: jetpack.future.import("selection"); getting and setting the selection the current version of jetpack.selection includes these formats: .
text and .html getting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); var
textofsel = jetpack.selection.
text; var htmlofsel = jetpack.selection.html; setting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); jetpack.selection.
text = 'hello'; jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
Simple Storage - Archive of obsolete content
select some
text on the page, right-click, and select note.
... the
text will be remembered across browser restarts as a note.
... notes : [{ label: "(empty)", disabled: true }]) }); } // modify the page's con
text menu by sneaking in before it's shown.
...:( jetpack.menu.con
text.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.
text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.
text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } }); }; // initialize the jetpack menu with the current notes.
Clipboard - Archive of obsolete content
the only flavors currently implemented are 'plain' (
text/unicode) and 'html' (which is html).string"
text" here's an example of how to use the method to set the clipboard.
... jetpack.import.future("clipboard"); // in
text format jetpack.clipboard.set("hello world"); // in other clipboard get(flavor string)returns data to jetpack from the clipboard.
...jetpack.import.future("clipboard"); var mycontent = "<i>this is some italic
text</i>"; jetpack.clipboard.set( mycontent, "html" ); getcurrentflavors()returns an array of available jetpack clipboard flavors, for the current system clipboard state.
... jetpack.import.future("clipboard"); var mycontent = "<i>this is some italic
text</i>"; jetpack.clipboard.set( mycontent, "html" ); var flavs = jetpack.clipboard.getclipboardflavors(); // should equal ["html", "
text"] console.log( flavs ); ...
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain
text.
...this api currently lives in the future and must be imported for use: jetpack.future.import("selection"); getting and setting the selection the current version of jetpack.selection includes these formats: .
text and .html getting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); var
textofsel = jetpack.selection.
text; var htmlofsel = jetpack.selection.html; setting the selection the following is an example of getting the selection from the user.
... jetpack.import.future("selection"); jetpack.selection.
text = 'hello'; jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
Monitoring downloads - Archive of obsolete content
dbconn.executesimplesql("create table items (source
text, size integer," + " starttime integer, endtime integer," + " speed real, status integer)"); dbconn.close(); }, this is fairly simple stuff.
...cument.getelementbyid("loglist"); var statement = dbconn.createstatement("select * from items"); // get all items in table try { while (statement.executestep()) { var row = document.createelement('listitem'); // add the cells to the row var cell = document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltip
text", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "
text-align:right"); row.appendchild(cell);...
...64(3)); // end time cell = document.createelement('listcell'); datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "
text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; ...
... to right-justify the numeric columns, we set the appropriate cells' style attribute to
text-align:right.
Venkman Internals - Archive of obsolete content
sourcecon
text is the 5 lines of source
text before the last instance of the word "function" on the line where this function starts.
... (not in 2006, seems to be computed on the fly in getsourcecon
text()).
... the full
text of the file can be found in an array located at scriptwrapper.scriptinstance.source
text.lines.
...if you want to get at the pretty printed source
text, instead of the actual source
text, use scriptwrapper.jsdscript.functionsource.
A XUL Bestiary - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a con
text for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...the term chrome is used in different con
texts to mean different things.
...the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
... skinning is most often brought up in the con
text of dynamic changes to the overall look of an application.
accesskey - Archive of obsolete content
« xul reference home attribute of: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton,
textbox accesskey type: character this should be set to a character that is used as a shortcut key.
...however, if the last character of the label is an ellipsis or a colon, the accesskey
text is inserted before them.
...for these languages, you can assign an accesskey different than any of the label characters, and the accesskey
text will always be appended as described above.
... example <vbox> <label value="enter name" accesskey="e" control="myname"/> <
textbox id="myname"/> <button label="cancel" accesskey="n"/> <button label="ok" accesskey="o"/> </vbox> see also label attribute accel
text attribute xul accesskey faq and policies ...
oninput - Archive of obsolete content
« xul reference home oninput type: script code this event is sent when a user enters
text in a
textbox.
... this event is only called when the
text displayed would change, thus it is not called when the user presses non-displayable keys.
... example <!-- this sets the label's
text to the
textbox value on each keystroke.
... --> <script language="javascript"> function setlabel(txtbox){ document.getelementbyid('lbl').value = txtbox.value; } </script> <label id="lbl"/> <
textbox oninput="setlabel(this);"/> this is similar to the onkeypress event used in html documents.
Popup Guide - Archive of obsolete content
con
text menus a con
text menu is like a regular menu except that the commands it contains apply to what the user had clicked on to open the con
text menu.
... a tooltip can be created by setting the tooltip
text attribute on an element or by using the tooltip element.
... using popups in extensions extensions may add additional menuitems either to a menu on the menu bar or to the con
text menu.
...another common task is to create an extension which adds an item to the browser's con
text menu.
Property - Archive of obsolete content
r builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow con
textmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disa...
...bled disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype empty
text deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject m...
...unt searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar status
text stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag
textlength
textvalue timeout title toolbarname toolbarset tooltip tooltip
text top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearlead...
...ement.nextelementsibling dom:element.nextsibling dom:element.nodename dom:element.nodetype dom:element.nodevalue dom:element.ownerdocument dom:element.parentnode dom:element.prefix dom:element.previouselementsibling dom:element.previoussibling dom:element.scrollheight dom:element.scrollleft dom:element.scrolltop dom:element.scrollwidth dom:element.tagname dom:element.
textcontent ...
SQLite Templates - Archive of obsolete content
the query for an sqlite datasource is just an sql select statement, as
text inside the query element.
...one possibility is to simply use methods to adjust the
text within the query element and rebuild the template.
...we could later change the age to use in the query with a short script: function adjustage(min, max) { document.getelementbyid("minage").
textcontent = min; document.getelementbyid("maxage").
textcontent = max; document.getelementbyid("friends").builder.rebuild(); } this function takes two arguments, the minimum and maximum values to use.
... we retrieve the param elements and set their
textcontent properties to the desired value.
Adding more elements - Archive of obsolete content
<hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <
textbox id="find-
text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog.
...you will notice that if the window is resized, the
textbox grows but the other components do not.
...10px"/> <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <
textbox id="find-
text" flex="1" style="min-width: 15em;"/> </hbox> <spacer style="height: 10px" flex="1"/> <hbox> now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog.
... <spacer style="width: 10px;"/> <
textbox id="find-
text" flex="1" style="min-width: 15em;"/> </groupbox> there are other cosmetic problems as well.
Additional Install Features - Archive of obsolete content
the
text 'file:///' is a special string which means the root of the filesystem.
...a block of
text will be added to this file for each installation that occurs.
... the logcomment() function can be used to write a string of
text to the log file.
... it takes one argument, the
text to write.
Anonymous Content - Archive of obsolete content
filename input field example another example, this time for a field for entering a filename: <binding id="fileentry"> <content> <
textbox/> <button label="browse..."/> </content> </binding> attaching this binding to an element will cause it to contain a field for entering
text, followed by a browse button.
...for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:
textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <
textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
...for example, the following xbl will cause
text labels and buttons to appear in a different location than other elements: source <binding id="navbox"> <content> <xul:vbox> <xul:label value="labels and buttons"/> <children includes="label|button"/> </xul:vbox> <xul:vbox> <xul:label value="other elements"/> <children/> </xul:vbox> </content> </binding> the first children element only grabs the label a...
Creating a Skin - Archive of obsolete content
tab:first-child { -moz-border-radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #000066; font-weight: bold;
text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab.
...it makes the
text in the selected tab appear bold, underlined and dark blue.
... #find-button { list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); font-weight: bold; } #cancel-button { list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold
text to indicate that it is the default button.
...we set the
text color to dark blue in this case.
Features of a Window - Archive of obsolete content
as in html, you can use the window interface's open() method loads the specified resource into the browsing con
text (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing con
text.">window.open() function to open the second window.
... see also window interface's open() method loads the specified resource into the browsing con
text (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing con
text.">window.open() next, we'll look at how to open secondary dialogs.
More Event Handlers - Archive of obsolete content
you might, however, want to display some help
text on a status bar.
...you might then unhighlight the element or remove status
text.
...here is an example which displays the current mouse coordinates: example 4 : source view <script> function updatemousecoordinates(e){ var
text = "x:" + e.clientx + " y:" + e.clienty; document.getelementbyid("xy").value =
text; } </script> <label id="xy"/> <hbox width="400" height="400" onmousemove="updatemousecoordinates(event);"/> in this example, the size of the box has been set explicitly so the effect is easier to see.
...there is also an unload event which is called once the window has closed, or in a browser con
text, when the page is switched to another url.
Property Files - Archive of obsolete content
properties dtd files are suitable when you have
text in a xul file.
...in addition, you may wish to display a message which is generated from a script, if, for example, you do not know the exact
text to be displayed.
...
text formatting the next method is getformattedstring().
...double-check the save options of your
text editor, because many don't do this by default.
Tree View Details - Archive of obsolete content
first, the simple functions: { treebox: null, selection: null, get rowcount() { return this.visibledata.length; }, settree: function(treebox) { this.treebox = treebox; }, getcell
text: function(idx, column) { return this.visibledata[idx][0]; }, iscontainer: function(idx) { return this.visibledata[idx][1]; }, iscontaineropen: function(idx) { return this.visibledata[idx][2]; }, iscontainerempty: function(idx) { return false; }, isseparator: function(idx) { return false; }, issorted: function() { return false; }, iseditable: functi...
... the getcell
text, iscontainer and iscontaineropen functions just return the corresponding element from the visibledata array.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: [...
..."helium", "nitrogen"] }, visibledata : [ ["solids", true, false], ["liquids", true, false], ["gases", true, false] ], treebox: null, selection: null, get rowcount() { return this.visibledata.length; }, settree: function(treebox) { this.treebox = treebox; }, getcell
text: function(idx, column) { return this.visibledata[idx][0]; }, iscontainer: function(idx) { return this.visibledata[idx][1]; }, iscontaineropen: function(idx) { return this.visibledata[idx][2]; }, iscontainerempty: function(idx) { return false; }, isseparator: function(idx) { return false; }, issorted: function() { return false; }, iseditable: function(idx, column) { return false; }, getparentindex: function(idx) { i...
Using Spacers - Archive of obsolete content
if adding support for multiple languages, the
text for one language may require more room than another.
...let's see what happens when a spacer is added between the
text box and the find button.
...you'll notice that the cancel button in the dialogs has always set its width so that it fits the
text inside it.
...other elements, such as the
text box have chosen a suitable default size.
XUL Reference - Archive of obsolete content
ces prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template
textnode
textbox
textbox (firefox autocomplete)
textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of...
... all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls ---
text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup p...
...anel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter
textbox
textbox (firefox autocomplete)
textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset ...
... rule template
textnode triple where script commandset command broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...
XML - Archive of obsolete content
html -- which is a derived language like our memoml (see the appendix notes for information on the geneology of markup languages) -- has been created for the purposes of representing hyper
text documents and the basic relationships between them.
...where in html the elements are used to describe the look of
text, in xul the elements are used to define the elements of an interface and some rules for putting them together.
...in the con
text of the interface being assembled, these xul elements are referred to as widgets -- and sometimes collectively as the xptoolkit.
... gecko reads xul and makes interfaces just as our specially created memo is nothing but
text unless there is an application for making use of the structure in some way, so too our xul widgets are just marked-up
text unless there is software to interpret the structures and render the xul as actual widgets.
command - Archive of obsolete content
for example, a clipboard paste operation can be invoked from the edit menu, a con
text menu and by pressing a keyboard shortcut.
...disabled elements are usually drawn with grayed-out
text.
...if this is left out, no
text appears.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
listheader - Archive of obsolete content
disabled elements are usually drawn with grayed-out
text.
...if this is left out, no
text appears.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagn...
preference - Archive of obsolete content
disabled elements are usually drawn with grayed-out
text.
...a change event is fired in different ways for different xul input elements as listed below: onchange type: script code
textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script con
text at this point can only access the following things: global values/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="
text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <
textbox id="find-
text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element.
... for a
textbox it also clears the undo transaction list (gecko 1.9).
tabbrowser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, contentcon
textmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowse...
... contentcon
textmenu type: id the id of a menupopup element serving as the con
text menu for the content area in the tabbrowser.
... webbrowserfind type: nsiwebbrowserfind this read-only property contains an nsiwebbrowserfind object which can be used to search for
text in the document.
...the properties of params are following: boolean inbackground boolean replace boolean allowthirdpartyfixup tab targettab number newindex object postdatas number usercon
textid note: this is the xul method on <browser> / <tabbrowser>, not the global function in chrome://browser/content/browser.js.
tabs - Archive of obsolete content
attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltip
textnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new t...
...disabled elements are usually drawn with grayed-out
text.
... tooltip
textnew not in firefox type: string used to set the
text which appears in the tooltip when the user moves the mouse over the new button in the tab row.
...for
textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the
textbox.value and menulist.value syntax.
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
... xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <
textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="enter last name:"/> <
textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!')"> <description>save</description> </button> </hbox> </vbox> </radiogroup> ...
... title type: string the
text to appear in the title bar of the window.
...values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
Gecko Compatibility Handbook - Archive of obsolete content
<table border="1"> <tr> <form name="form2"> <td> <input type="
text"> </td> </form> </tr> <table> this approach is commonly used to get around the fact that <form> is a block level element in html and will naturally begin on a new line in the page.
... <style type="
text/css"> #id1 {
text-decoration: line-through; } #id1 {
text-decoration: underline; } </style> <div id="id1"> should be line-through </div> <div id="id1"> should be underline </div> -(example removed)- note that the w3c's html validator will flag html id attributes as duplicates if they only differ due to case.
... css class names should be case-sensitive <style type="
text/css"> .class1 { font-size: 1em; } .class1 { font-size: 2em; } </style> <div> <div class="class1"> should be font-size: 1em; </div> <div class="class1"> should be font-size: 2em; </div> -(example removed)- gecko implements the case sensitivity of class names correctly and will display this example correctly while internet explorer treats all css classnames's as case-insensitive and will ...
...gecko browsers require that the server specifies the correct mime type to match the content type: html -
text/html css -
text/css (related article) xml -
text/xml svg - image/svg+xml faulty implementations of http several web servers incorrectly implement the http protocol which can result in problems for netscape 6.
Building a Theme - Archive of obsolete content
inside your new theme folder, create two new empty
text files, one called chrome.manifest and the other called install.rdf.
... the browser ui has absolutely no styling on its own - if you try to start up with an empty theme, firefox will be unusable, as the button elements will be drawn as plain
text.
... create a new
text file and put the full path to your development folder inside (e.g.
...firefox will detect the
text link to your theme directory and install the theme.
-ms-wrap-through - Archive of obsolete content
initial valuewrapapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values wrap the exclusion element inherits its parent node's wrapping con
text.
... none the exclusion element does not inherit its parent node's wrapping con
text.
... the wrapping con
text of a box is a collection of exclusion areas contributed by its associated exclusion boxes.
... the inline flow content of a box is placed in the area that corresponds to the subtraction of its wrapping con
text from its own content area.
::-ms-clear - Archive of obsolete content
the ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="
text">
text control that clears the current value.
... the clear button is only shown on focused, non-empty
text controls.
... this includes inputs that appear
text-like or fall back to type="
text".
...ck, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear example html <form> <label for="firstname">first name:</label> <input type="
text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <input type="
text" id="lastname" name="lastname" placeholder="second name"> </form> css input, label { display: block; } input[type=
text]::-ms-clear { color: red; /* this sets the cross color as red.
@if - Archive of obsolete content
syntax @if ( condition1 )
text1 [@elif ( condition2 )
text2] [@else
text3] @end parameters
text1 optional
text to be parsed if condition1 is true.
...
text2 optional
text to be parsed if condition1 is false and condition2 is true.
...
text3 optional
text to be parsed if both condition1 and condition2 are false.
... the @if statement is typically used to determine which
text among several options should be used for
text output.
Old Proxy API - Archive of obsolete content
object.freeze(proxy) object.seal(proxy) object.preven
textensions(proxy) fix: function() -> propertydescriptor map (indexed on property names) | undefined should return an object that maps property names to property descriptors.
...moreover, the respective method (freeze(), seal(), or preven
textension()) is immediately called on the fixed object.
...od default implementation description name in proxy has: function(name) -> boolean function(name) { return !!this.getpropertydescriptor(name); } object.prototype.hasownproperty.call(proxy, name) hasown: function(name) -> boolean function(name) { return !!this.getownpropertydescriptor(name); } proxy.name (in the con
text of "getting the value") receiver.name (if receiver inherits from a proxy and does not override name) get: function(receiver, name) -> any function(receiver, name) { var desc = this.getpropertydescriptor(name); if (desc === undefined) { return undefined; } if ('value' in desc) { return desc.value; } else { if (desc.get === undefined) { return undefi...
... proxy.name = val (in the con
text of "setting the value") receiver.name = val (if receiver inherits from a proxy and does not override name) set: function(receiver, name, val) -> boolean function(receiver, name, val) { var desc = this.getownpropertydescriptor(name); if (desc) { if ('writable' in desc) { if (desc.writable) { desc.value = val; this.defineproperty(name, desc); return true; } else { return false; } } else { // accessor if (desc.set) { desc.set.call(receiver, val); return true; } else { return false; } } } d...
XForms Custom Controls - Archive of obsolete content
currently it has no meaning outside of this con
text.
... */ void setcontent(in nsidomnode anode, in boolean aforceupdate); } note: setcontent() can be used to set place complexcontent (mixture of
text and element nodes) under the control's bound node.
...input.xml - contains the base bindings for input, secret and
textarea xforms controls.
...g></curimg> <img label="firefox">http://www.mozilla.com/images/firefox-logo-64x64.png</img> <img label="thunderbird">http://www.mozilla.com/images/thunderbird-logo-64x64.png</img> <img label="bugzilla">http://www.mozilla.org/images/p-bugz.gif</img> <img label="mozilla">http://www.mozilla.org/images/mozhead-80x64.gif</img> </data> </xf:instance> </xf:model> <style type="
text/css"> @namespace xf url(http://www.w3.org/2002/xforms); xf|output[mediatype="image/*"] { -moz-binding: url('#output-image'); } </style> </head> <body> <h1>custom control sample</h1> <xf:select1 ref="curimg"> <xf:label>select image to display: </xf:label> <xf:itemset nodeset="../img"> <xf:label ref="@label"/> <xf:value ref="."/> </xf:...
XForms Output Element - Archive of obsolete content
representations the xforms output element can be represented by the following widgets for the specified data types (or types derived from these data types):
text - default representation for instance data of most types, especially static
text (xhtml/xul).
...
text displaying the data as
text is the default presentation.
... xforms output is most often used when a form author needs to render simple
text of an instance node (xhtml/xul).
... characteristics
text is presented to the user when there is no type given for the bound node or a type is specified that is not handled by one of the other widgets (as documented below).
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
if the author had set a font size on the body element, for example, the font size of
text within a table would match the user's default, not the body style.
...for example, if an author writes: <style type="
text/css"> body {font-size: 11px;} </style> ...then the
text inside table cells should also be 11 pixels in size.
...in these browsers, a table's
text would be the same size as the user's default settings, regardless of the css assigned to ancestor elements such as body.
... this represented a violation of css inheritance rules, and led many authors to create workarounds such as: <style type="
text/css"> body, table, td {font-size: 11px;} </style> recreating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and related browsers will mimic old browsers when in "quirks" mode.
Windows Media in Netscape - Archive of obsolete content
<object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="preludesteel.wma" /> </object> <script type="
text/javascript"> if(!document.playerex2.versioninfo) { // control not installed -- the versioninfo property returns null // redirect users to http://www.microsoft.com/windows/windowsmedia/download/default.asp } else { //control was correctly created //proceed with scripting calls, etc.
...for example, in ie it is possible to do this: player.closedcaption.captioningid = "cap
text"; here, "cap
text" is the id of an html element, assigned to the captioningid property of the player.
... instead of doing that, this is the recommendation and workaround for netscape 7.1: <script for="player" event="scriptcommand(type, param)"> if (type == "
text") { var cap = document.getelementbyid("cap
text"); cap.innerhtml = param; } </script> more detailed examples are available in the final section on examples and sample code.
...in the case of close captioning media content, the player api player.closedcaption.captioningid = "cap
text"; is not supported, and the workaround is to capture events fired by the media player in script using script for event.
Building up a basic demo with PlayCanvas editor - Game development
to add an entity to the scene you have to click on the big plus button located in the top left area of the editor, next to the hierarchy
text.
...now edit the name
text field to give it a unique name (we've chosen boxmaterial).
...from here you can click your desired color or enter it in the bottom
text field as a hex value.
... we've chosen a blue color with a hex value of 0095dd — enter this code in the
text field and press return for it to be accepted.
Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.
textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we then give it some
text content.
... an example of an async callback is the second parameter of the addeventlistener() method (as we saw in action above): btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.
textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the event is fired.
...so you could have different actions to run on the response downloaded, such as processjson(), display
text(), etc.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
it then runs the function once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring(); document.getelementbyid('demo').
textcontent = time; } const createclock = setinterval(displaytime, 1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval.
...add the following at the bottom of your code: function reset() { btn.style.display = 'block'; result.
textcontent = ''; result.style.display = 'none'; } okay, enough preparation!
... add the following function to your code next: function setendgame() { cancelanimationframe(raf); spinnercontainer.style.display = 'none'; result.style.display = 'block'; result.
textcontent = 'players go!!'; document.addeventlistener('keydown', keyhandler); function keyhandler(e) { let isover = false; console.log(e.key); if (e.key === "a") { result.
textcontent = 'player 1 won!!'; isover = true; } else if (e.key === "l") { result.
textcontent = 'player 2 won!!'; isover = true; } if (isover) { document.removeeventlist...
... next, display the results paragraph and set its
text content to "players go!!" to signal to the players that they can now press their button to win.
Introduction to events - Learn web development
btn.
textcontent, or btn.style), but it is a special type — when you set it to be equal to some code, that code is run when the event fires on the button.
... first, a simple html form that requires you to enter your first and last name: <form> <div> <label for="fname">first name: </label> <input id="fname" type="
text"> </div> <div> <label for="lname">last name: </label> <input id="lname" type="
text"> </div> <div> <input id="submit" type="submit"> </div> </form> <p></p> div { margin-bottom: 10px; } now some javascript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the
text fie...
... — and then display an error message in the paragraph below our form to tell the user what's wrong: const form = document.queryselector('form'); const fname = document.getelementbyid('fname'); const lname = document.getelementbyid('lname'); const para = document.queryselector('p'); form.onsubmit = function(e) { if (fname.value === '' || lname.value === '') { e.preventdefault(); para.
textcontent = 'you need to fill in both names!'; } } obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is ok for example purposes.
... also, it is important to understand that the different con
texts in which javascript is used have different event models — from web apis to other areas such as browser webextensions and node.js (server-side javascript).
Aprender y obtener ayuda - Learn web development
textual articles you'll find a lot of written articles on the web to teach you about web design.
... note: the above
text should have given you an important fact — you aren't expected to remember everything!
...many people prefer
textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from.
... make sure the
text is centered inside each menu item etc.
Framework main features - Learn web development
angular calls this process dependency injection; vue has provide() and inject() component methods; react has a con
text api; ember shares state through services.
... lifecycle in the con
text of a framework, a component’s lifecycle is a collection of phases a component goes through from the time it is rendered by the browser (often called mounting) to the time that it is removed from the dom (often called unmounting).
... here’s a quick test for our counterbutton written with the help of react testing library — it tests a number of things, such as the button's existance, and whether the button is displaying the correct
text after being clicked 0, 1, and 2 times: import react from "react"; import { render, fireevent } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; import counterbutton from "./counterbutton"; it("renders a semantic with an initial state of 0", () => { const { getbyrole } = render(<counterbutton />); const btn = getbyrole("button"); expect(btn).tobeinthedocum...
...ent(); expect(btn).tohave
textcontent("clicked 0 times"); }); it("increments the count when clicked", () => { const { getbyrole } = render(<counterbutton />); const btn = getbyrole("button"); fireevent.click(btn); expect(btn).tohave
textcontent("clicked 1 times"); fireevent.click(btn); expect(btn).tohave
textcontent("clicked 2 times"); }); summary at this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks.
React interactivity: Editing, filtering, conditional rendering - Learn web development
copy this block of code into the todo() function, beneath your usestate() hook but above the return statement: const editingtemplate = ( <form classname="stack-small"> <div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-
text" type="
text" /> </div> <div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props.name}</span> </button> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div...
... editing from the ui much of what we're about to do will mirror the work we did in form.js: as the user types in our new input field, we need to track the
text they enter; once they submit the form, we need to use a callback prop to update our state with the new name of the task.
...update it as follows: <input id={props.id} classname="todo-
text" type="
text" value={newname} onchange={handlechange} /> finally, we need to create a function to handle the edit form’s onsubmit event; add the following just below the previous function you added: function handlesubmit(e) { e.preventdefault(); props.edittask(props.id, newname); setnewname(""); setediting(false); } remember that our edittask() callback prop needs the id of the ...
...when you press a filter button, you should see its
text take on a new outline — this tells you it has been selected.
React resources - Learn web development
the con
text api the application that we built in this tutorial utilized component props to pass data from its app component to the child components that needed it.
... react provides the con
text api as a way to provide data to components that need it without passing props down the component tree.
... there's also a usecon
text hook that facilitates this.
... if you'd like to try this api for yourself, smashing magazine has written an introductory article about react con
text.
Creating our first Vue component - Learn web development
making components dynamic with props our todoitem component is still not very useful because we can only really include this once on a page (ids need to be unique), and we have no way to set the label
text.
... the label key's value should be an object with 2 properties (or props, as they are called in the con
text of being available to the components).
...it’s important to know that content inside {{}} is displayed as
text and not html.
... note: because of the way that this works in arrow functions (binding to the parent’s con
text), you wouldn’t be able to access any of the necessary attributes from inside data if you used an arrow function.
Implementing feature detection - Learn web development
function supports_canvas() { return !!document.createelement('canvas').getcon
text; } if(supports_canvas()) { ...
...we first use the media attribute to only apply the brick css to the page if the page width is 480px or less: <link href="dist/brick.css" type="
text/css" rel="stylesheet" media="all and (max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views).
... next, fill in the your-api-key placeholder
text in the second <script> element (as it is now) with a valid google maps api key.
...position) { let latlng = new google.maps.latlng(position.coords.latitude,position.coords.longitude); let myoptions = { zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.terrain, disabledefaultui: true } let map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); }); } else { const para = document.createelement('p'); para.
textcontent = 'argh, no geolocation!'; document.body.appendchild(para); } try your example out!
Creating Sandboxed HTTP Connections
it takes two arguments: a listener and a con
text that is passed to the listener's methods.
...or that nsiuri gchannel = ioservice.newchannelfromuri(uri); // get an listener var listener = new streamlistener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acon
text) { this.mdata = ""; }, ondataavailable: function (arequest, acon
text, astream, asourceoffset, alength) { var scriptableinputstream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(alength); }, onstoprequ...
...est: function (arequest, acon
text, astatus) { if (components.issuccesscode(astatus)) { // request was successfull this.mcallbackfunc(this.mdata); } else { // request failed this.mcallbackfunc(null); } gchannel = null; }, // nsichanneleventsink onchannelredirect: function (aoldchannel, anewchannel, aflags) { // if redirecting, store the new channel gchannel = anewchannel; }, // nsiinterfacerequestor getinterface: function (aiid) { try { return this.queryinterface(aiid); } catch (e) { throw components.results.ns_nointerface; } }, // nsiprogresseventsink (not implementing will cause annoying exceptions) onprogress : function (arequest, acon
text, aprogress, aprogressmax) { }, onstatus : function (areque...
...st, acon
text, astatus, astatusarg) { }, // nsihttpeventsink (not implementing will cause annoying exceptions) onredirect : function (aoldchannel, anewchannel) { }, // we are faking an xpcom interface, so we need to implement qi queryinterface : function(aiid) { if (aiid.equals(components.interfaces.nsisupports) || aiid.equals(components.interfaces.nsiinterfacerequestor) || aiid.equals(components.interfaces.nsichanneleventsink) || aiid.equals(components.interfaces.nsiprogresseventsink) || aiid.equals(components.interfaces.nsihttpeventsink) || aiid.equals(components.interfaces.nsistreamlistener)) return this; throw components.results.ns_nointerface; } }; quick note: storing the channel in a global (especially in an extension) i...
Using the Browser API
ovebwd() { browser.getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <form> containing a single
text <input>.
...this is implemented in our sample app with the following functions: browser.addeventlistener('mozbrowserloadstart',function() { stopreload.
textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function(e) { canmovebwd(); canmovefwd(); stopreload.
textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); when the mozbrowserloadstart event fires, the latest page request has started loading, and we change the button to a cross to indicate "stop".
... stopreload.addeventlistener('touchend',function() { if(stopreload.
textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); implementing the search bar let's now turn our attention to implementing browser search using the browser api.
... var searchactive = false; prev.disabled = true; next.disabled = true; next, we add an event listener to the searchform so that when it is submitted, the htmliframeelement.findall() method is used to do a search for the string entered into the search input element (searchbar) within the
text of the current page (the second parameter can be changed to 'case-insensitive' if you want a case-insensitive search.) we then enable the previous and next buttons, set searchactive to true, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted.
Embedding the editor
note here that i use the term 'composer' to mean an html-savvy compose widget that does rich
text editing, and 'editor' to mean a plain
text editor (as well as the underlying technology for composer).
... <htmlarea> is intended as a shorthand for a rich-
text multiline
text widget embedded in an html document, and is not meant to infer that future versions of mozilla will support this specific tag.
...they should need to do as little work as possible to get basic editing functionality, be able to have any number of <editor>s per window, and control whether those <editor>s are in html or plain
text mode.
...nsieditorframe should contain methods for getting the editing session, and doing some generic editor-related stuff (probably common to html and plain
text editing).
Embedding Tips
how do i implement con
text menus?
... make your chrome object implement the nsicon
textmenulistener or nsicon
textmenulistener2.
... the nsicon
textmenulistener::onshowcon
textmenu() method will be called with the dom node that the con
text applies, the dom event plus some flag combinations that assist in determining what menu to display (document, link, image, selected
text etc.) how do i implement tool tips?
...methods to hide or show the tool tips will automatically be called upon it when the user hovers over an item with title
text.
JNI.jsm
tion main() { var my_jenv; try { my_jenv = jni.getforthread(); var sig = { windowmanager: 'landroid/view/windowmanager;', windowmanager_layoutparams: 'landroid/view/windowmanager$layoutparams;', viewgroup_layoutparams: 'landroid/view/viewgroup$layoutparams;', view: 'landroid/view/view;', void: 'v', con
text: 'landroid/content/con
text;', string: 'ljava/lang/string;', object: 'ljava/lang/object;', geckoappshell: 'lorg/mozilla/gecko/geckoappshell;' }; var geckoappshell = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.geckoappshell), { static_methods: [ { name: 'getcon
text', sig: '()' + sig...
....con
text }] }); var con
text = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.con
text), { methods: [ { /* http://developer.android.com/reference/android/content/con
text.html#getsystemservice%28java.lang.class%3ct%3e%29 * public abstract object getsystemservice (string name) */ name: 'getsystemservice', sig: genmethodsig([ sig.string // name ], sig.object // return ) }], static_fields: [ { name: 'window_service', sig: sig.string } // http://developer.android.com/reference/android/cont...
...ent/con
text.html#window_service // public static final string window_service ] }); var windowmanager = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.windowmanager), { methods: [ { name: 'addview', sig: '(' + sig.view + sig.viewgroup_layoutparams + ')' + sig.void }, { name: 'removeview', sig: '(' + sig.view + ')' + sig.void }] }); var acon
text = geckoappshell.getcon
text(); var wm = acon
text.getsystemservice(con
text.window_service); var wm_casted = jni.classes.android.view.windowmanager.__cast__(wm); } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } } // helpe...
...rthread(); var sig = { environment: 'landroid/os/environment;', string: 'ljava/lang/string;', file: 'ljava/io/file;' }; var environment = jni.loadclass(my_jenv, sig.environment.substr(1, sig.environment.length - 2), { static_fields: [ { name: 'directory_pictures', sig: sig.string } ], static_methods: [ { name:'ge
texternalstoragedirectory', sig:'()' + sig.file } ] }); jni.loadclass(my_jenv, sig.file.substr(1, sig.file.length - 2), { methods: [ { name:'getpath', sig:'()' + sig.string } ] }); var javafile_dirextstore = environment.ge
texternalstoragedirectory(); // object { js#obj: cdata } var javastr_dirextstorepath = javafile_dirextstore.getpath(); // ob...
WebChannel.jsm
parameters callback callback function containing function(id, message, sendercon
text) parameters.
... id - webchannel id of the incoming messages message - incoming message object sendercon
text - incoming message con
text - this should be treated as an opaque object and passed to the .send() method stoplistening() resets the callback for messages on this channel.
... parameters message the message object that will be sent sendercon
text the sendercon
text parameter passed to the .listen method.
... examples setting up a webchannel between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercon
text) { // send messages channel.send({ data: { greeting: true } }, sendercon
text); }); webpage code receive messages from an existing webchannel in content code window.addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.customevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
JSErrorReport
linebuf const char *
text of the line that caused the error, minus the trailing newline character.
...we check the strictness of the con
text's top frame's script; where that isn't appropriate, the caller should do the right checks itself instead of using this flag.
...to use jserrorreport, your application must define a variable of type jserrorreport and allocate a buffer to hold the
text that generated the error condition.
...for unicode scripts, define a second buffer that holds the unicode version of the
text the generated the error.
JS_BeginRequest
syntax void js_beginrequest(jscon
text *cx); void js_endrequest(jscon
text *cx); name type description cx jscon
text * the con
text in which the calling thread intends to call jsapi functions.
... description when your multithreaded application wants to use a jscon
text, it must use js_beginrequest and js_endrequest to bracket maximal non-blocking hunks of native code that call the jsapi.
...in this reference, the cx parameter of such functions is documented with the phrase “requires request”, like this: name type description cx jscon
text * the con
text to use.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
JS_CompileFunction
creates a javascript function from a
text string.
... syntax jsfunction * js_compilefunction(jscon
text *cx, jsobject *obj, const char *name, unsigned int nargs, const char **argnames, const char *body, size_t length, const char *filename, unsigned int lineno); jsfunction * js_compileucfunction(jscon
text *cx, jsobject *obj, const char *name, unsigned int nargs, const char **argnames, const jschar *body, size_t length, const char *filename, unsigned int lineno); name type description cx jscon
text * the con
text in which to compile the function.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
... description js_compilefunction compiles a function from a
text string, bytes, and optionally associates it with a js object, obj.
JS_CompileFunctionForPrincipals
create a security-enabled js function from a
text string.
... syntax jsfunction * js_compilefunctionforprincipals(jscon
text *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const char *body, size_t length, const char *filename, unsigned int lineno); jsfunction * js_compileucfunctionforprincipals(jscon
text *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const jschar *body, size_t length, const char *filename, unsigned int lineno); name type description cx jscon
text * the con
text in which to compile the function.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
... description js_compilefunctionforprincipals compiles a security-enabled function from a
text string, bytes, and associates it with a js object, obj.
JS_CompileScriptForPrincipals
syntax jsscript * js_compilescriptforprincipals(jscon
text *cx, jsobject *obj, jsprincipals *principals, const char *src, size_t length, const char *filename, unsigned int lineno); jsscript * js_compileucscriptforprincipals(jscon
text *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t length, const char *filename, unsigned int lineno); jsobject * js_compilescriptforprincipalsversion(jscon
text *cx, jsobject *obj, jsprincipals *principals, const char *src, size_t length, const char *filename, unsigned int lineno, jsvers...
...ion version); // obsoleted since jsapi 19 jsobject * js_compileucscriptforprincipalsversion(jscon
text *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t length, const char *filename, unsigned int lineno, jsversion version); // obsoleted since jsapi 19 name type description cx jscon
text * the con
text in which to compile the script.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
... src is the string containing the
text of the script.
JS_DefineElement
syntax /* added in spidermonkey 38 (jsapi 32) */ bool js_defineelement(jscon
text *cx, js::handleobject obj, uint32_t index, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscon
text *cx, js::handleobject obj, uint32_t index, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscon
text *cx, js::handleobject obj, uint32_t index, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jsco...
...n
text *cx, js::handleobject obj, uint32_t index, int32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscon
text *cx, js::handleobject obj, uint32_t index, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscon
text *cx, js::handleobject obj, uint32_t index, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); /* obsolete since jsapi 32 */ js_defineelement(jscon
text *cx, jsobject *obj, uint32_t index, jsval value, jspropertyop getter, jsstrictpropertyop setter, unsigned attrs); ...
... name type description cx jscon
text * the con
text in which to create the new property.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
JS_EnterCompartment
this article covers features introduced in spidermonkey 24 note: the preferred way of changing a con
text's current compartment is using jsautocompartment.
... enter a different compartment on the given con
text, so that objects in that compartment can be accessed.
... syntax jscompartment * js_entercompartment(jscon
text *cx, jsobject *target); name type description cx jscon
text * the con
text on which a cross-compartment call is needed.
... description every jscon
text has a current compartment.
JS_EnterLocalRootScope
syntax jsbool js_enterlocalrootscope(jscon
text *cx); name type description cx jscon
text * pointer to the con
text.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
...calling js_enterlocalrootscope and js_leavelocalrootscope around the body of the native hook protects each object, double, and string created using the same jscon
text from gc.
... for example: jsbool my_getproperty(jscon
text *cx, jsobject *obj, jsval id, jsval *vp) { jsbool ok; if (!js_enterlocalrootscope(cx)) return js_false; // this function doesn't need to bother rooting any new objects, // strings, or doubles it creates using cx.
JS_EvaluateScript
syntax jsbool js_evaluatescript(jscon
text *cx, jsobject *obj, const char *src, unsigned int length, const char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluateucscript(jscon
text *cx, jsobject *obj, const jschar *src, unsigned int length, const char *filename, unsigned int lineno, jsval *rval); name type description cx jscon
text * the con
text in which to run the script.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
... src is the string containing the
text of the script.
... length indicates the size of the
text version of the script in characters.
JS_EvaluateScriptForPrincipals
syntax jsbool js_evaluatescriptforprincipals(jscon
text *cx, jsobject *obj, jsprincipals *principals, const char *src, unsigned int length, const char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluatescriptucforprincipals(jscon
text *cx, jsobject *obj, jsprincipals *principals, const jschar *src, unsigned int length, const char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluatescriptforprincipalsversion(jscon
text *cx, jsobject *obj, jsprincipals *principals, const char *bytes, unsigned int length, const...
... char *filename, unsigned int lineno, jsval *rval, jsversion version); jsbool js_evaluateucscriptforprincipalsversion(jscon
text *cx, jsobject *obj, jsprincipals *principals, const jschar *chars, unsigned int length, const char *filename, unsigned int lineno, jsval *rval, jsversion version); name type description cx jscon
text * the con
text in which to run the script.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
... src is the string containing the
text of the script.
JS_ExecuteScript
syntax bool js_executescript(jscon
text *cx, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey 45 bool js_executescript(jscon
text *cx, js::handlescript script); // added in spidermonkey 45 bool js_executescript(jscon
text *cx, js::autoobjectvector &scopechain, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey 36 bool js_executescript(jscon
text *cx, js::autoobjectvector &scopechain, js::handlescript script); // added in spidermonkey 36 bool js_executescript(jscon
text *cx, js::handleobject obj, js::handlescript script, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js_executescript(jscon
text *cx, js::handleobject obj, js...
...::handlescript script); // obsolete since jsapi 39 bool js::cloneandexecutescript(jscon
text *cx, js::handle<jsscript*> script); // added in spidermonkey 45 bool js::cloneandexecutescript(jscon
text *cx, js::handle<jsobject*> obj, js::handle<jsscript*> script); // added in spidermonkey 31, obsoleted since jsapi 39 name type description cx jscon
text * the con
text in which to execute the script.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
... in ecmascript terms, the script is executed in a new execution con
text, but that con
text is not initialized quite as described in any of the three cases in ecma 262-3 §10.2.
JS_GetPendingException
get the current pending exception for a given jscon
text.
... syntax bool js_getpendingexception(jscon
text *cx, js::mutablehandlevalue vp); name type description cx jscon
text * pointer to the js con
text in which the exception was thrown.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
... description if an exception has been thrown in the con
text cx, and it has not yet been caught or cleared, js_getpendingexception stores the exception object in *vp and returns true.
JS_GetRuntime
syntax jsruntime * js_getruntime(jscon
text *cx); name type description cx jscon
text * the con
text to query.
... description js_getruntime retrieves a pointer to the jsruntime with which a specified jscon
text, cx, is associated.
... each con
text is associated with a particular jsruntime when it is created (see js_newcon
text); js_getruntime provides a convenient, programmatic way to look up the association.
... see also mxr id search for js_getruntime js_newcon
text ...
JS_LeaveLocalRootScopeWithResult
syntax void js_leavelocalrootscopewithresult(jscon
text *cx, jsval rval); name type description cx jscon
text * pointer to the con
text.
... this must be the same con
text that was passed to js_enterlocalrootscope.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
...otherwise, the value is stored in an internal per-jscon
text slot.
JS_LookupProperty
syntax bool js_lookupproperty(jscon
text *cx, js::handleobject obj, const char *name, js::mutablehandlevalue vp); bool js_lookupucproperty(jscon
text *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_lookuppropertybyid(jscon
text *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 bool js_lookupelement(jscon
text *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue...
... vp); // ---- obsolete since spidermonkey 31 ---- bool js_lookuppropertywithflags(jscon
text *cx, js::handleobject obj, const char *name, unsigned flags, js::mutablehandlevalue vp); bool js_lookuppropertywithflagsbyid(jscon
text *cx, js::handleobject obj, js::handleid id, unsigned flags, js::mutablehandleobject objp, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 name type description cx jscon
text * pointer to a js con
text from which to derive runtime information.
...in a js_threadsafe build, the caller must be in a request on this jscon
text.
...when executing javascript code that uses properties, spidermonkey looks up properties using slightly different rules depending on the syntactic con
text in which the property name appears.
Introduction to DOM Inspector - Firefox Developer Tools
the following descriptions provide an overview of what these viewers are about: the dom nodes viewer shows attributes of nodes that can take them, or the
text content of
text nodes, comments, and processing instructions.
... the attributes and
text contents may also be edited.
...the javascript object viewer also allows javascript to be evaluated by selecting the appropriate menuitem in the con
text menu.
...you can perform actions on the individual items in this list from the con
text menu and the edit menu, both of which contain menutimes that allow you edit the values of those attributes.
Debugger.Object - Firefox Developer Tools
if a function has no name, spidermonkey attempts to infer an appropriate name for it given its con
text.
...(this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preven
textensions() prevent properties from being added to the referent.
... (this function behaves like the standard object.preven
textensions function, except that the object to operate on is implicit and in a different compartment from the caller.) issealed() return true if the referent is sealed—that is, if it is not extensible, and all its properties have been marked as non-configurable.
...(in the terms used by the ecmascript specification, the variableenvironment of the execution con
text forcode is the referent, and thebindings appear in a new declarative environment, which is the eval code’s lexicalenvironment.) theoptions argument is as for debugger.frame.prototype.eval.
Tutorial: Set a breakpoint - Firefox Developer Tools
save the following
text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web developer”, and then “browser content toolbox”.
...reportdo.script.setbreakpoint(0, { hit: function (frame) { console.log('hit breakpoint in ' + frame.callee.name); console.log('what = ' + frame.eval('what').return); } }); console.log('finished setting breakpoint!'); in the scratchpad, ensure that no
text is selected, and press the “run” button.
... now, click on the
text that says “click me!” in the web page.
...the toolbox’s console now looks like this: you can also click on the
text that says “or me!”, to see report called from a different handler.
Shader Editor - Firefox Developer Tools
in webgl they can be included in a page in several ways: as
text hardcoded in javascript strings, as separate files included using <script> tags, or retrieved from the server as plain
text.
... at first you'll just see a blank window with a button asking you to reload the page: to get started, load a page which creates a webgl con
text and loads a program into it.
... you'll now see a window divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl con
text.
... you can edit these programs and see the results the next time the webgl con
text redraws (for example, in the next animation frame).
ANGLE_instanced_arrays - Web APIs
webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is only available to webgl1 con
texts.
... in webgl2, the functionality of this extension is available on the webgl2 con
text by default and the constants and methods are available without the "angle" suffix.
... examples enabling the extension: var ext = gl.ge
textension('angle_instanced_arrays'); specifications specification status comment angle_instanced_arraysthe definition of 'angle_instanced_arrays' in that specification.
AnalyserNode.getFloatFrequencyData() - Web APIs
syntax var audioctx = new audiocon
text(); var analyser = audioctx.createanalyser(); var dataarray = new float32array(analyser.frequencybincount); // float32array should be the same length as the frequencybincount void analyser.getfloatfrequencydata(dataarray); // fill the float32array with data returned from getfloatfrequencydata() parameters array the float32array that the frequency domain data will be copied to.
... example const audioctx = new audiocon
text(); const analyser = audioctx.createanalyser(); // float32array should be the same length as the frequencybincount const mydataarray = new float32array(analyser.frequencybincount); // fill the float32array with data returned from getfloatfrequencydata() analyser.getfloatfrequencydata(mydataarray); drawing a spectrum the following example shows basic usage of an audiocon
text to connect a mediaelementaudiosourcenode to an analysernode.
... <!doctype html> <body> <script> const audioctx = new audiocon
text(); //create audio source //here, we use an audio file, but this could also be e.g.
...; //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.width = window.innerwidth; canvas.height = window.innerheight; document.body.appendchild(canvas); const canvasctx = canvas.getcon
text('2d'); canvasctx.clearrect(0, 0, canvas.width, canvas.height); function draw() { //schedule next redraw requestanimationframe(draw); //get spectrum data analysernode.getfloatfrequencydata(dataarray); //draw black background canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, canvas.width, canvas.height); //draw spectrum const barwidth = (canvas.width / bufferleng...
AudioBufferSourceNode.start() - Web APIs
syntax audiobuffersourcenode.start([when][, offset][, duration]); parameters when optional the time, in seconds, at which the sound should begin to play, in the same time coordinate system used by the audiocon
text.
... if when is less than (audiocon
text.currenttime, or if it's 0, the sound begins to play at once.
... offset optional an offset, specified as the number of seconds in the same time coordinate system as the audiocon
text, to the time within the audio buffer that playback should begin.
... source.start(audioctx.currenttime + 1,3,10); for a more complete example showing start() in use, check out our audiocon
text.decodeaudiodata() example, you can also run the code example live, or view the source.
AudioDestinationNode - Web APIs
the audiodestinationnode interface represents the end destination of an audio graph in a given con
text — usually the speakers of your device.
... it can also be the node that will "record" the audio data when used with an offlineaudiocon
text.
... the audiodestinationnode of a given audiocon
text can be retrieved using the audiocon
text.destination property.
...their speakers), so you can get it hooked up inside an audio graph using only a few lines of code: var audioctx = new audiocon
text(); var source = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn web audio examples, such as voice-change-o-matic or violent theremin.
AudioScheduledSourceNode.stop() - Web APIs
this value is specified in the same time coordinate system as the audiocon
text is using for its currenttime attribute.
...the stop time is determined by taking the audio con
text's current time from audiocon
text.currenttime and adding 1 second.
... con
text = new audiocon
text(); osc = con
text.createoscillator(); osc.connect(con
text.destination); /* let's play a sine wave for one second.
... */ osc.start(); osc.stop(con
text.currenttime + 1); specifications specification status comment web audio apithe definition of 'stop()' in that specification.
AuthenticatorAttestationResponse - Web APIs
note: this interface is restricted to top-level con
texts.
... properties authenticatorattestationresponse.clientdatajson secure con
textread only client data for the authentication, such as origin and challenge.
... authenticatorattestationresponse.attestationobject secure con
textread only an arraybuffer containing authenticator data and an attestation statement for a newly-created key pair.
... methods authenticatorattestationresponse.gettransports()secure con
text returns an array of strings describing which transport methods (e.g.
Using the Beacon API - Web APIs
navigator.sendbeacon() the beacon api's navigator.sendbeacon() method sends a beacon request to the server in the global browsing con
text.
... in the following example, a worker sends a beacon using the url and data from the global con
text.
... this code snippet is for the global con
text: function worker_send(url, data) { // create the worker object var myworker = new worker("worker-using.js"); // send the worker the url and data to beacon myworker.postmessage([url, data]); // set up a message handler to receive the success/fail message from the worker myworker.onmessage = function(event) { var msg = event.data; // log worker's send status console.log("worker reply: sendbeacon() status = " + msg); }; } this code snippet is for the worker (worker-using.js): onmessage = function(event) { var msg = event.data; // split the url and data from the message var url = msg[0]; var data = msg[1]; // if the browser supports worker sendbeacon(), then send the beacon; otherwise // return failure messa...
...ge to the global con
text if (self.navigator.sendbeacon) { var status = self.navigator.sendbeacon(url, data); postmessage(status ?
Blob - Web APIs
the blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as
text or binary data, or converted into a readablestream so its methods can be used for processing the data.
... blob.prototype.
text() returns a promise that resolves with a usvstring containing the entire contents of the blob interpreted as utf-8
text.
... function typedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, '
text/plain'); const link = document.createelement('a'); link.href = url; link.inner
text = 'open the array url'; document.body.appendchild(link); result click the link in the example to see the browser decode the object url.
...the following code reads the content of a blob as
text: const
text = await (new response(blob)).
text(); or by using blob.prototype.
text(): const
text = await blob.
text(); by using other methods of filereader, it is possible to read the contents of a blob as a string or a data url.
BroadcastChannel: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <
textarea> when the user clicks a button.
... sender <h1>sender</h1> <label for="message">type a message to broadcast:</label><br/> <
textarea id="message" name="message" rows="1" cols="40">hello</
textarea> <button id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; padding: .5rem; height: 150px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; }
textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadc...
...essagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.
textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.
...
textcontent = event.data; }); result specifications specification status html living standard living standard ...
CSSPrimitiveValue - Web APIs
a cssprimitivevalue object only occurs in a con
text of a css property.
...ne-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">cssvalue</
text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" heigh...
...t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
...the value can only be obtained by using the css
text attribute.
CSS Painting API - Web APIs
paintworkletglobalscope the global execution con
text of the paintworklet.
... paintrenderingcon
text2d implements a subset of the canvasrenderingcon
text2d api.
... dictionaries paintrenderingcon
text2dsettings a dictionary providing a subset of canvasrenderingcon
text2d settings.
... we create our paintworklet called 'hollowhighlights' using the registerpaint() function: registerpaint('hollowhighlights', class { static get inputproperties() { return ['--boxcolor']; } static get inputarguments() { return ['*','<length>']; } static get con
textoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.85; const thecolor = props.get( '--boxcolor' ); const stroketype = args[0].tostring(); const strokewidth = parseint(args[1]); console.log(thecolor); if ( strokewidth ) { ctx.linewidth = s...
Optimizing canvas - Web APIs
mycanvas.offscreencanvas = document.createelement('canvas'); mycanvas.offscreencanvas.width = mycanvas.width; mycanvas.offscreencanvas.height = mycanvas.height; mycanvas.getcon
text('2d').drawimage(mycanvas.offscreencanvas, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values.
...ey = window.innerheight / canvas.height; var scaletofit = math.min(scalex, scaley); var scaletocover = math.max(scalex, scaley); stage.style.transformorigin = '0 0'; //scale from top left stage.style.transform = 'scale(' + scaletofit + ')'; turn off transparency if your application uses canvas and doesn’t need a transparent backdrop, set the alpha option to false when creating a drawing con
text with htmlcanvaselement.getcon
text().
... var ctx = canvas.getcon
text('2d', { alpha: false }); more tips batch canvas calls together.
... avoid
text rendering whenever possible.
Canvas API - Web APIs
next, the htmlcanvaselement.getcon
text() method gets that element's con
text—the thing onto which the drawing will be rendered.
... the actual drawing is done using the canvasrenderingcon
text2d interface.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcon
text('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcon
text2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcon
text textmetrics offscreencanvas path2d imagebitmaprenderingcon
text note: the interfaces related to the webglrenderingcon
text are referenced under webgl.
... specifications specification status comment html living standardthe definition of 'the 2d rendering con
text' in that specification.
Channel Messaging API - Web APIs
the channel messaging api allows two separate scripts running in different browsing con
texts attached to the same document (e.g., two iframes, or the main document and an iframe, two documents via a sharedworker, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.
...once created, the two ports of the channel can be accessed through the messagechannel.port1 and messagechannel.port2 properties (which both return messageport objects.) the app that created the channel uses port1, and the app at the other end of the port uses port2 — you send a message to port2, and transfer the port over to the other browsing con
text using window.postmessage along with two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.) when these transferable objects are transferred, they are 'neutered' on the previous con
text — the one they previously belonged to.
... for instance a port, when is sent, cannot be used anymore by the original con
text.
... the other browsing con
text can listen for the message using messageport.onmessage, and grab the contents of the message using the event's data attribute.
CharacterData - Web APIs
this is an abstract interface, meaning there aren't any object of type characterdata: it is implemented by other interfaces, like
text, comment, or processinginstruction which aren't abstract.
...lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">characterdata</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties fr...
... characterdata.data is a domstring representing the
textual data contained in this object.
ChildNode.before() - Web APIs
domstring objects are inserted as equivalent
text nodes.
... examples inserting an element var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span); console.log(parent.outerhtml); // "<div><span></span><p></p></div>" inserting
text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.before("
text"); console.log(parent.outerhtml); // "<div>
text<p></p></div>" inserting an element and
text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(sp...
...an, "
text"); console.log(parent.outerhtml); // "<div><span></span>
text<p></p></div>" childnode.before() is unscopable the before() method is not scoped into the with statement.
...argitem : document.create
textnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); specification specification status comment domthe definition of 'childnode.before()' in that specification.
CredentialsContainer - Web APIs
methods credentialscontainer.create()secure con
text returns a promise that resolves with a new credential instance based on the provided options, or null if no credential object can be created.
... credentialscontainer.get()secure con
text returns a promise that resolves with the credential instance that matches the provided parameters.
... credentialscontainer.preventsilentaccess()secure con
text sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty promise.
... credentialscontainer.store()secure con
text stores a set of credentials for a user, inside a provided credential instance and returns that instance in a promise.
DataTransferItemList.add() - Web APIs
some example types are
text/html and
text/plain.
...v> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "
text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "
text/html"); datalist.add("http://www.example.org","
text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^
text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^
text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^
text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
Document.popupNode - Web APIs
when a popup attached via the popup or con
text attributes is opened, the xul document's popupnode property is set to the node that was clicked on.
...typically, this property will be checked during a popupshowing event handler for a con
text menu to initialize the menu based on the con
text.
... this property is only set for popups attached via the popup or con
text attributes.
... syntax var node = document.popupnode; example <menupopup id="toolbarcon
textmenu"> ...
EXT_float_blend - Web APIs
webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is available to both, webgl1 and webgl2 con
texts.
... usage notes on devices that support the ext_float_blend extension, it is automatically, implicitly, enabled when any one or more of ext_color_buffer_float, oes_
texture_float, or webgl_color_buffer_float are enabled.
... examples const gl = canvas.getcon
text('webgl2'); // enable necessary extensions gl.ge
textension('ext_color_buffer_float'); gl.ge
textension('ext_float_blend'); const tex = gl.create
texture(); gl.bind
texture(gl.
texture_2d, tex); // use floating point format gl.teximage2d(gl.
texture_2d, 0, gl.rgba32f, 1, 1, 0, gl.rgba, gl.float, null); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, fb); gl.framebuffer
texture2d(gl.framebuffer, gl.color_attachment0, gl.
texture_2d, tex, 0); // enable blending gl.enable(gl.blend); gl.drawarrays(gl.points, 0, 1); // won't throw gl.invalid_operation with the extension enabled specifications specification status ...
EXT_frag_depth - Web APIs
webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is only available to webgl1 con
texts.
... in webgl2, the functionality of this extension is available on the webgl2 con
text by default.
... examples enable the extension: gl.ge
textension('ext_frag_depth'); now the output variable gl_fragdepthext is available to set a depth value of a fragment from within the fragment shader: <script type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(1.0, 0.0, 1.0, 1.0); gl_fragdepthext = 0.5; } </script> specifications specification status comment ext_frag_depththe definition of 'ext_frag_depth' in that specification.
Element: auxclick event - Web APIs
additionally, you may need to avoid opening a system con
text menu after a right click.
...instead, this can be done by preventing the default behavior of the con
textmenu event.
...the former changes the color of the button background, while the latter changes the button foreground (
text) color.
... html = document.queryselector('html'); function random(number) { return math.floor(math.random() * number); } function randomcolor() { return `rgb(${random(255)}, ${random(255)}, ${random(255)})`; } button.onclick = function() { button.style.backgroundcolor = randomcolor(); }; button.onauxclick = function(e) { e.preventdefault(); button.style.color = randomcolor(); } button.oncon
textmenu = function(e) { e.preventdefault(); } notice that in addition to capturing the auxclick event using onauxclick, the con
textmenu event is also captured, and preventdefault() called on that event, in order to prevent the con
text menu from popping up after the color change is applied.
Element.scrollHeight - Web APIs
ent.scrolltop === element.clientheight when the container does not scroll, but has overflowing children, these checks determine if the container can scroll: window.getcomputedstyle(element).overflowy === 'visible' window.getcomputedstyle(element).overflowy !== 'hidden' scrollheight demo associated with the onscroll event, this equivalence can be useful to determine whether a user has read a
text or not (see also the element.scrolltop and element.clientheight properties).
... for example: html <form name="registration"> <p> <
textarea id="rules">lorem ipsum dolor sit amet, consectetur adipiscing elit.
... </
textarea> </p> <p> <input type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border:...
..."thank you." : "please, scroll and read the following
text."; } onload = function () { var otoberead = document.getelementbyid("rules"); checkreading.noticebox = document.createelement("span"); document.registration.accept.checked = false; checkreading.noticebox.id = "notice"; otoberead.parentnode.insertbefore(checkreading.noticebox, otoberead); otoberead.parentnode.insertbefore(document.createelement("br"), otoberead); otoberead.onscroll ...
Element.slot - Web APIs
examples in our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-
text.
... when <my-paragraph> is used in the document, the slot is populated by a slotable element by including it inside the element with a slot attribute with the value my-
text.
... here is one such example: <my-paragraph> <span slot="my-
text">let's have some different
text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the name of the corresponding <slot> element.
... let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.slot); // logs 'my-
text' specifications specification status comment domthe definition of 'slot' in that specification.
Event.preventDefault() - Web APIs
<code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid
text input can be stopped from reaching the input field with preventdefault().
... html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="
text" id="my-
textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
... first, listen for keypress events: var my
textbox = document.getelementbyid('my-
textbox'); my
textbox.addeventlistener('keypress', checkname, false); the checkname() function, which looks at the pressed key and decides whether to allow it: function checkname(evt) { var charcode = evt.charcode; if (charcode != 0) { if (charcode < 97 || charcode > 122) { evt.preventdefault(); displaywarning( "please use lowercase letters only." + "\n" + "charcode: " + charcode + "\n" ); } } } the displaywarning() function presents a notification of a problem.
... it's not an elegant function but does the job for the purposes of this example: var warningtimeout; var warningbox = document.createelement("div"); warningbox.classname = "warning"; function displaywarning(msg) { warningbox.innerhtml = msg; if (document.body.contains(warningbox)) { window.cleartimeout(warningtimeout); } else { // insert warningbox after my
textbox my
textbox.parentnode.insertbefore(warningbox, my
textbox.nextsibling); } warningtimeout = window.settimeout(function() { warningbox.parentnode.removechild(warningbox); warningtimeout = -1; }, 2000); } result notes calling preventdefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not...
FileHandle API - Web APIs
var idbreq = indexeddb.open("myfilestoragedatabase"); idbreq.onsuccess = function(){ var db = this.result; var buildhandle = db.mozcreatefilehandle("test.txt", "plain/
text"); buildhandle.onsuccess = function(){ var myfilehandle = this.result; console.log('handle', myfilehandle); }; }; mozcreatefilehandle() takes two arguments: a name and an optional type.
...the lockedfile interface provides a readas
text method and a readasarraybuffer method.
...ckedfile object from the handle var myfile = myfilehandle.open('readwrite'); // retrieve the size of the file var getmeta = myfile.getmetadata(); getmeta.onsuccess = function () { var size = this.result.size; // the reading operation will start with the byte at index 0 in the file myfile.location = 0; // start a reading operation for the whole file content var reading = myfile.readas
text(size); reading.onsuccess = function () { console.log('the content of the file is:'); console.log(this.result); } reading.onerror = function () { console.log('something goes wrong in the reading process: ' + this.error); } } file snapshot in many cases it can be handy to get a snapshot of the file.
... var idbreq = window.indexeddb.open('myfilestoragedatabase'); // if necessary, let's create a datastore for the files idbreq.onupgradeneeded = function () { this.result.createobjectstore('files'); } idbreq.onsuccess = function () { var db = this.result; // let's create a new file var handlereq = db.mozcreatefilehandle("test.txt", "plain/
text"); handlereq.onsuccess = function () { var myfilehandle = this.result; var store = db.transaction(['files'], 'readwrite').objectstore('files'); // let's store the file permanently // hint: it could be handy to use the file name as the storage key var storereq = store.add(myfilehandle, myfilehandle.name); storereq.onsuccess = function () { console.log('the file h...
HTMLAudioElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmediaelement</
text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlaudioelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlaudioelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the process of loading an...
HTMLButtonElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbuttonelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDListElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmldlistelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmldataelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataListElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmldatalistelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the contained option elements.
HTMLElement: change event - Web APIs
the change event is fired for <input>, <select>, and <
textarea> elements when an alteration to the element's value is committed by the user.
...io"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <
textarea> or <input type="
text">).
...anilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.
textcontent = `you like ${event.target.value}`; }); result
text input element for some elements, including <input type="
text">, the change event doesn't fire until the control loses focus.
... html <input placeholder="enter some
text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('change', updatevalue); function updatevalue(e) { log.
textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLElement.onpaste - Web APIs
the paste event fires when the user attempts to paste
text.
... note that there is currently no dom-only way to obtain the
text being pasted; you'll have to use an nsiclipboard to get that information.
... example this example logs every copy and paste attempt to the <
textarea>.
... html <h3>play with this
text area:</h3> <
textarea id="editor" rows="3">try copying and pasting
text into this field!</
textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.inner
text = 'copied!\n' + log.inner
text; } function logpaste(event) { log.inner
text = 'pasted!\n' + log.inner
text; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLFieldSetElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlfieldsetelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlheadelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlhtmlelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLInputElement.select() - Web APIs
the htmlinputelement.select() method selects all the
text in a <
textarea> element or in an <input> element that includes a
text field.
... syntax element.select(); example click the button in this example to select all the
text in the <input> element.
... html <input type="
text" id="
text-box" size="20" value="hello world!"> <button onclick="select
text()">select
text</button> javascript function select
text() { const input = document.getelementbyid('
text-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
... in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample
text" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.length);" value="sample
text" /> specifications specification status comment html living standardthe definition of 'select' in that specification.
HTMLLIElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="426" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmllielement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLabelElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmllabelelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLegendElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmllegendelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLinkElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllinkelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmllinkelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and linkstyle.
HTMLMediaElement.onencrypted - Web APIs
block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmediaelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ...
HTMLMediaElement.onwaitingforkey - Web APIs
block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmediaelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ...
HTMLMenuItemElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLMetaElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmetaelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMeterElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmeterelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent, htmlelement.
HTMLModElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="421" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmodelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOListElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlolistelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptGroupElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmloptgroupelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLParamElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlparamelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLPictureElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-fam...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlpictureelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLProgressElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlprogresselement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLQuoteElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlquoteelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLShadowElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlshadowelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSourceElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlsourceelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSpanElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlspanelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlstyleelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="376" y="94" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmltablecaptionelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableColElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmltablecolelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTemplateElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmltemplateelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTimeElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="416" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmltimeelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTrackElement: cuechange event - Web APIs
the cuechange event fires when a
texttrack has changed the currently displaying cues.
... the event is fired at both the
texttrack and at the htmltrackelement in which it's being presented, if any.
... bubbles no cancelable no interface event event handler oncuechange examples on the
texttrack you can set up a listener for the cuechange event on a
texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying
texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
... let
texttrackelem = document.getelementbyid("
texttrack");
texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let
texttrackelem = document.getelementbyid("
texttrack");
texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living standardthe definition of 'cuechange' in that specification.
HTMLUListElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlulistelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUnknownElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-fam...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlunknownelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htmlelement.
HTMLVideoElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlelement</
text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmediaelement</
text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlvideoelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlvideoelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its ancestor interfaces, htmlmediaelement, and htmlelement.
Dragging and Dropping Multiple Items - Web APIs
this function similarly to setdata() var dt = event.datatransfer; dt.mozsetdataat("
text/plain", "data to drag", 0); dt.mozsetdataat("
text/plain", "second data to drag", 1); this example adds two items to be dragged.
... event.datatransfer.mozcleardataat("
text/plain", 1); caution: removing the last format for a particular index will remove that item entirely, shifting the remaining items down, so the later items will have different indices.
... for example: var dt = event.datatransfer; dt.mozsetdataat("
text/uri-list", "url1", 0); dt.mozsetdataat("
text/plain", "url1", 0); dt.mozsetdataat("
text/uri-list", "url2", 1); dt.mozsetdataat("
text/plain", "url2", 1); dt.mozsetdataat("
text/uri-list", "url3", 2); dt.mozsetdataat("
text/plain", "url3", 2); // [item1] data=url1, index=0 // [item2] data=url2, index=1 // [item3] data=url3, index=2 after you added three items in two different formats, dt.mozcleardataat("
text/uri-list", 1); dt.mozcleardataat("
text/plain", 1); you've removed the second item clearing all types, then the old third item becomes new second item, and its index decreases.
...i < count; i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(
text) { document.getelementbyid("output").
textcontent +=
text; dump(
text); } </script> </head> <body> <div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="document.getelementbyid('output').
textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.sto...
InputEvent.inputType - Web APIs
possible changes include for example inserting, deleting, and formatting
text.
...there are many possible values, such as insert
text, deletecontentbackward, insertfrompaste, and formatbold.
... html <p id="log">input type: </p> <div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;"> <p>some sample
text.
... try inserting line breaks, or deleting
text in different ways, or pasting different content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </div> javascript const log = document.getelementbyid('log'); const editable = document.queryselector('div[contenteditable]'); editable.addeventlistener('input', loginputtype); function loginputtype(event) { log.
textcontent = `input type: ${event.inputtype}`; } result try editing the
text inside the <div> and see what happens.
KeyboardEvent.key - Web APIs
if the key produces a character key that would result in a character being inserted into possibly an <input>, <
textarea> or an element with htmlelement.contenteditable set to true, the beforeinput and input event types are fired in that order.
... html <div class="fx"> <div> <
textarea rows="5" name="test-target" id="test-target"></
textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } ...
... .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let
textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; }
textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); });
textarea.addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); });
textarea.addeventlistener('in...
...put', (e) => { logmessage(`key "${e.data}" input [event: input]`); });
textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while (child) { consolelog.removechild(child); child = consolelog.firstchild; } }); result note: on browsers that don't fully implement the inputevent interface which is used for the beforeinput and input events, you may get incorrect output on those lines of the log output.
MediaElementAudioSourceNode - Web APIs
a mediaelementsourcenode has no inputs and exactly one output, and is created using the audiocon
text.createmediaelementsource() method.
... number of inputs 0 number of outputs 1 channel count defined by the media in the htmlmediaelement passed to the audiocon
text.createmediaelementsource method that created it.
... var audioctx = new (window.audiocon
text || window.webkitaudiocon
text)(); var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain...
...} // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(gainnode); gainnode.connect(audioctx.destination); note: as a consequence of calling createmediaelementsource(), audio playback from the htmlmediaelement will be re-routed into the processing graph of the audiocon
text.
MediaList - Web APIs
properties medialist.media
text a stringifier that returns a domstring representing the medialist as
text, and also allows you to set a new medialist.
... medialist.item() a getter that returns a cssomstring representing a media query as
text, given the media query's index value inside the medialist.
... examples the following would log to the console a
textual representation of the medialist of the first stylesheet applied to the current document.
... const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.media
text); specifications specification status comment css object model (cssom)the definition of 'medialist' in that specification.
MediaStreamAudioSourceNode - Web APIs
a mediastreamaudiosourcenode has no inputs and exactly one output, and is created using the audiocon
text.createmediastreamsource() method.
... number of inputs 0 number of outputs 1 channel count defined by the first audio mediastreamtrack passed to the audiocon
text.createmediastreamsource() method that created it.
...usermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocon
text(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination,...
... .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocon
text.
MediaStreamTrackAudioSourceNode() - Web APIs
another way to create a mediastreamtrackaudiosourcenode is to call theaudiocon
text.createmediastreamtracksource() method, specifying the mediastreamtrack from which you want to obtain audio.
... syntax audiotracknode = new mediastreamtrackaudiosourcenode(con
text, options); parameters con
text an audiocon
text representing the audio con
text you want the node to be associated with.
... exceptions notsupportederror the specified con
text is not an audiocon
text.
... let audioctx = new (window.audiocon
text || window.webkitaudiocon
text)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error o...
MediaStreamTrackAudioSourceNode - Web APIs
a mediastreamtrackaudiosourcenode has no inputs and exactly one output, and is created using the audiocon
text.createmediastreamtracksource() method.
... number of inputs 0 number of outputs 1 channel count defined by the first audio mediastreamtrack passed to the audiocon
text.createmediastreamtracksource() method that created it.
...usermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocon
text(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination,...
... .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocon
text.
MerchantValidationEvent - Web APIs
constructor merchantvalidationevent() secure con
text creates a new merchantvalidationevent object describing a merchantvalidation event that will be sent to the payment handler to request that it validate the merchant.
... properties merchantvalidationevent.methodname secure con
text a domstring providing a unique payment method identifier for the payment handler that's requiring validation.
... merchantvalidationevent.validationurl secure con
text a usvstring specifying a url from which the site or app can fetch payment handler specific validation information.
... methods merchantvalidationevent.complete() secure con
text pass the data retrieved from the url specified by validationurl into complete() to complete the validation process for the paymentrequest.
Using the Notifications API - Web APIs
in addition, in chrome and firefox you cannot request notifications at all unless the site is a secure con
text (i.e.
...this constructor expects a title to display within the notification and some options to enhance the notification such as an icon or a
text body.
... for example, in the to-do-list example we use the following snippet to create a notification when required (found inside the createnotification() function): var img = '/to-do-notifications/img/icon-128.png'; var
text = 'hey!
... your task "' + title + '" is now overdue.'; var notification = new notification('to do list', { body:
text, icon: img }); closing notifications used close() to remove a notification that is no longer relevant to the user (e.g.
OES_standard_derivatives - Web APIs
webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is only available to webgl1 con
texts.
... in webgl2, the functionality of this extension is available on the webgl2 con
text by default.
... glsl built-in functions the following new functions can be used in glsl shader code, if this extension is enabled: gentype dfdx(gentype) gentype dfdy(gentype) gentype fwidth(gentype) examples enabling the extensions: gl.ge
textension('oes_standard_derivatives'); gl.ge
textension('ext_shader_
texture_lod'); shader code that avoids artifacts when wrapping
texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_
texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d my
texture; varying vec2 texcoord; void main(){ gl_fragcolor =
texture2dgradext(my
texture, mod(texc...
OES_vertex_array_object - Web APIs
webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: this extension is only available to webgl1 con
texts.
... in webgl2, the functionality of this extension is available on the webgl2 con
text by default and the constants and methods are available without the "oes" suffix.
... examples var oes_vao_ext = gl.ge
textension('oes_vertex_array_object'); var vao = oes_vao_ext.createvertexarrayoes(); oes_vao_ext.bindvertexarrayoes(vao); // ...
OscillatorNode.stop() - Web APIs
syntax oscillator.stop(when); // stop playing oscillator at when parameters when optional an optional double representing the audio con
text time when the oscillator should stop.
...if the time is equal to or before the current audio con
text time, the oscillator will stop playing immediately.
... example the following example shows basic usage of an audiocon
text to create an oscillator node.
... // create web audio api con
text var audioctx = new (window.audiocon
text || window.webkitaudiocon
text)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.connect(audioctx.destination); oscillator.start(); oscillator.stop(audioctx.currenttime + 2); // stop 2 seconds after the current time specifications specification status comment web audio apithe definition of 'stop' in that specification.
OscillatorNode - Web APIs
an oscillatornode is created using the baseaudiocon
text.createoscillator() method.
... if the default values are acceptable, you can simply call the baseaudiocon
text.createoscillator() factory method.
... examples the following example shows basic usage of an audiocon
text to create an oscillator node and to start playing a tone on it.
... // create web audio api con
text var audioctx = new (window.audiocon
text || window.webkitaudiocon
text)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'oscillatornode' in that specification.
PannerNode.orientationX - Web APIs
they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocon
text, an oscillator and a pannernode: const con
text = new audiocon
text(); const osc = new oscillatornode(con
text); osc.type = 'sawtooth'; const panner = new pannernode(con
text); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if con...
...; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, con
text.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, con
text.currenttime); panner.orientationy.setvalueattime(y1, con
text.currentti...
...me); panner.orientationz.setvalueattime(z1, con
text.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, con
text.currenttime + 2); panner.orientationy.setvalueattime(y2, con
text.currenttime + 2); panner.orientationz.setvalueattime(z2, con
text.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
... osc.connect(panner) .connect(con
text.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'orientationx' in that specification.
PannerNode.orientationY - Web APIs
they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocon
text, an oscillator and a pannernode: const con
text = new audiocon
text(); const osc = new oscillatornode(con
text); osc.type = 'sawtooth'; const panner = new pannernode(con
text); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if con...
...; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, con
text.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, con
text.currenttime); panner.orientationy.setvalueattime(y1, con
text.currentti...
...me); panner.orientationz.setvalueattime(z1, con
text.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, con
text.currenttime + 2); panner.orientationy.setvalueattime(y2, con
text.currenttime + 2); panner.orientationz.setvalueattime(z2, con
text.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
... osc.connect(panner) .connect(con
text.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'orientationy' in that specification.
PannerNode.orientationZ - Web APIs
they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocon
text, an oscillator and a pannernode: const con
text = new audiocon
text(); const osc = new oscillatornode(con
text); osc.type = 'sawtooth'; const panner = new pannernode(con
text); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if con...
...; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, con
text.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, con
text.currenttime); panner.orientationy.setvalueattime(y1, con
text.currentti...
...me); panner.orientationz.setvalueattime(z1, con
text.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, con
text.currenttime + 2); panner.orientationy.setvalueattime(y2, con
text.currenttime + 2); panner.orientationz.setvalueattime(z2, con
text.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
... osc.connect(panner) .connect(con
text.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'orientationz' in that specification.
ParentNode.prepend() - Web APIs
domstring objects are inserted as equivalent
text nodes.
...each node can be specified as either a node object or as a string; strings are inserted as new
text nodes.
... examples prepending an element var parent = document.createelement("div"); var p = document.createelement("p"); var span = document.createelement("span"); parent.append(p); parent.prepend(span); console.log(parent.childnodes); // nodelist [ <span>, <p> ] prepending
text var parent = document.createelement("div"); parent.append("some
text"); parent.prepend("headline: "); console.log(parent.
textcontent); // "headline: some
text" appending an element and
text var parent = document.createelement("div"); var p = document.createelement("p"); parent.prepend("some
text", p); console.log(parent.childnodes); // nodelist [ #
text "some
text", <p> ] parentnode.prepend(...
...argitem : document.create
textnode(string(argitem))); }); this.insertbefore(docfrag, this.firstchild); } }); }); })([element.prototype, document.prototype, documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.prepend()' in that specification.
PaymentRequestUpdateEvent - Web APIs
those events are: shippingaddresschange secure con
text dispatched whenever the user changes their shipping address.
... shippingoptionchange secure con
text dispatched whenever the user changes a shipping option.
... constructor paymentrequestupdateevent() secure con
text creates a new paymentrequestupdateevent object.
... methods in addition to methods inherited from the parent interface, event, paymentrequestupdateevent offers the following methods: paymentrequestupdateevent.updatewith() secure con
text if the event handler determines that information included in the payment request needs to be changed, or that new information needs to be added, it calls updatewith() with the information that needs to be replaced or added.
performance.now() - Web APIs
bear in mind the following points: in dedicated workers created from a window con
text, the value in the worker will be lower than performance.now() in the window who spawned that worker.
... it used to be the same as t0 of the main con
text, but this was changed.
... in shared or service workers, the value in the worker might be higher than that of the main con
text because that window can be created after those workers.
... starting with firefox 79, high resolution timers can be used if you cross-origin isolate your document using the cross-origin-opener-policy and cross-origin-embedder-policy headers: cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp these headers ensure a top-level document does not share a browsing con
text group with cross-origin documents.
Range.toString() - Web APIs
the range.tostring() method is a stringifier returning the
text of the range.
... alerting the contents of a range makes an implicit tostring() call, so comparing range and
text through an alert dialog is ineffective.
... syntax
text = range.tostring(); example html <p>this example logs <b>everything</b> between the bold <b>words</b>.
... look at the output below.</p> <p id="log"></p> javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); document.getelementbyid('log').
textcontent = range.tostring(); result specifications specification status comment domthe definition of 'range.tostring()' in that specification.
Range - Web APIs
the range interface represents a fragment of a document that can contain nodes and parts of
text nodes.
... range.tostring() returns the
text of the range.
... range.createcon
textualfragment() returns a documentfragment created from a given string of code.
... working draft added the method createcon
textualfragment().
Response - Web APIs
response.status
text read only the status message corresponding to the status code.
...it returns a promise that resolves with the result of parsing the body
text as json.
... body.
text() takes a response stream and reads it to completion.
... it returns a promise that resolves with a usvstring (
text).
SVGAnimateElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="386" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimationelement</
text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimateelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimateMotionElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="386" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimationelement</
text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationeleme...
SVGAnimateTransformElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="386" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimationelement</
text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimatio...
SVGAnimationElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="386" y="94" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimationelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGClipPathElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgclippathelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGComponentTransferFunctionElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="94" font-size=...
..."12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomponenttransfer_type_unknown 0 the type is not one of predefined types.
SVGCursorElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcursorelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgcursorelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDefsElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgdefselement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggraphics...
SVGDescElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgdescelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGFEBlendElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfeblendelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_feblend_mode_unknown 0 the type is not one of predefined types.
SVGFEColorMatrixElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="366" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecolormatrix_type_unknown 0 the type is not one of predefined types.
SVGFEComponentTransferElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransferelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="336" y="94" font-size="12px"...
... font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes.
SVGFECompositeElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="376" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomposite_operator_unknown 0 the type is not one of predefined types.
SVGFEConvolveMatrixElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement" target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="351" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEDiffuseLightingElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="346" y="94" font-size="12px" f...
...ont-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEDisplacementMapElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="346" y="94" font-size="12px" f...
...ont-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_channel_unknown 0 the type is not one of predefined types.
SVGFEDistantLightElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="361" y="94" font-size="12px" font...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="371" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfefloodelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
SVGFEFuncAElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="94" font-size="12...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</
text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properti...
SVGFEFuncBElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="94" font-size="12...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</
text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properti...
SVGFEFuncGElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="94" font-size="12...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</
text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properti...
SVGFEFuncRElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="94" font-size="12...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</
text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properti...
SVGFEGaussianBlurElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="361" y="94" font-size="12px" font...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEImageElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfeimageelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurireference.
SVGFEMergeElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfemergeelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEMergeNodeElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="376" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEMorphologyElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="371" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the type is not one of predefined types.
SVGFEOffsetElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="371" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfepointlightelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFESpecularLightingElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightingelement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="341" y="94" font-size="12px" ...
...font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFESpotLightElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="376" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfetileelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFETurbulenceElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="371" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants turbulence types name value description svg_turbulence_type_unknown 0 the type is not one of predefined types.
SVGFilterElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfilterelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgfilterelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element.
SVGForeignObjectElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgforeignobjectelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and implements pr...
SVGGElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggrap...
SVGGeometryElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggeometryelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} note: the pathlength property and the gettotallength() and getpointatlength() methods were originally part of the ...
SVGGradientElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggradientelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the type is not one of predefined types.
SVGGraphicsElement - Web APIs
splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGImageElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgimageelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement.
SVGLinearGradientElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggradientelement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svglineargradientelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGMPathElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgmpathelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMaskElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmaskelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgmaskelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGMetadataElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgmetadataelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGPatternElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="396" y="94" font-size="12px" font-family...
...="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgpatternelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements the ones from svgfittoviewbox and svgurireference.
SVGRadialGradientElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggradientelement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGScriptElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgscriptelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties svgscriptelement.type read only a domstring corresponding to the type attribute of the given <script> element.
SVGSetElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="386" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svganimationelement</
text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgsetelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, s...
SVGStopElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="411" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgstopelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGStyleElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstyleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgstyleelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement and implements properties from linkstyle.
SVGSwitchElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgswitchelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interfac...
SVGSymbolElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="401" y="94" font-size="12px" font-family=...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgsymbolelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement, and implements properties from svgfittoviewbox.
SVGTitleElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="406" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgtitleelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGUseElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svggraphicselement</
text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svguseelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svggraphicselement and implements properties ...
ServiceWorkerGlobalScope - Web APIs
the serviceworkerglobalscope interface of the serviceworker api represents the global execution con
text of a service worker.
...lock; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" width="17...
...0" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">workerglobalscope</
text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events:...
...this algorithm is the entry point for the fetch handling handed to the service worker con
text.
Slottable: assignedSlot - Web APIs
examples in our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-
text.
... when <my-paragraph> is used in the document, the slot is populated by a slottable element by including it inside the element with a slot attribute with the value my-
text.
... here is one such example: <my-paragraph> <span slot="my-
text">let's have some different
text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the original <slot> element the <span> was inserted in.
... let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.assignedslot); // logs '<slot name="my-
text">' specifications specification status comment domthe definition of 'assignedslot' in that specification.
SpeechSynthesisEvent - Web APIs
speechsynthesisevent.charindex read only returns the index position of the character in the speechsynthesisutterance.
text that was being spoken when the event was triggered.
... speechsynthesisevent.elapsedtime read only returns the elapsed time in milliseconds after the speechsynthesisutterance.
text started being spoken that the event was triggered at.
... speechsynthesisevent.name read only returns the name associated with certain types of events occuring as the speechsynthesisutterance.
text is being spoken: the name of the ssml marker reached in the case of a mark event, or the type of boundary reached in the case of a boundary event.
... examples utterthis.onpause = function(event) { var char = event.utterance.
text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.
text + '", which is "' + char + '".'); } utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speechsynthesisevent' in that specification.
Storage Access API - Web APIs
the storage access api provides a way for embedded, cross-origin content to gain unrestricted access to storage that it would normally only have access to in a first-party con
text (we refer to this as an origin’s first-party storage).
...these restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party con
text.
... the semantics around third-party cookie blocking policies in particular differ from browser to browser, but the core functionality is similar: cross-origin resources embedded in a third-party con
text are not given access to the same cookies and site storage that they would have access to when loaded in a first-party con
text.
...access requests are automatically denied if the browser detects that the user hasn’t interacted with the embedded content in a first-party con
text recently (in firefox, "recently" is "within 30 days").
Using writable streams - Web APIs
the constructor call in our example looks like this: const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true })...
...; var listitem = document.createelement('li'); listitem.
textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); the write() method contains a promise including code that decodes each written chunk into a format that can be written to the ui.
...write content to the stream we call the sendmessage() function, passing it a message to be written and the stream to write to: sendmessage("hello, world.", writablestream); the sendmessage() definition looks like so: function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all ch...
... we also create a new
textencoder instance using the relevant constructor to encode the message into chunks to be put into the stream.
SubtleCrypto.digest() - Web APIs
examples basic example this example encodes a message, then calculates its sha-256 digest and logs the digest length: const
text = 'an obscure body in the s-k system, your majesty.
... the inhabitants refer to it as the planet earth.'; async function digestmessage(message) { const encoder = new
textencoder(); const data = encoder.encode(message); const hash = await crypto.subtle.digest('sha-256', data); return hash; } const digestbuffer = await digestmessage(
text); console.log(digestbuffer.bytelength); converting a digest to a hex string the digest is returned as an arraybuffer, but for comparison and display digests are often represented as hex strings.
... this example calculates a digest, then converts the arraybuffer to a hex string: const
text = 'an obscure body in the s-k system, your majesty.
... the inhabitants refer to it as the planet earth.'; async function digestmessage(message) { const msguint8 = new
textencoder().encode(message); // encode as (utf-8) uint8array const hashbuffer = await crypto.subtle.digest('sha-256', msguint8); // hash the message const hasharray = array.from(new uint8array(hashbuffer)); // convert buffer to byte array const hashhex = hasharray.map(b => b.tostring(16).padstart(2, '0')).join(''); // convert bytes to hex string return hashhex; } const digesthex = await digestmessage(
text); console.log(digesthex); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.digest()' in that specification.
SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.
textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
...ion exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.
textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...nction exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "spki", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin public key-----\n${exportedasbase64}\n-----end public key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.
textcontent = pemexported; } /* generate an encrypt/decrypt key pair, then set up an event listener on the "export" button.
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "jwk", key ); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.
textcontent = json.stringify(exported, null, " "); } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
SubtleCrypto.wrapKey() - Web APIs
*/ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new
textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-kw key using pbkdf2.
...*/ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new
textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-gcm key using pbkdf2.
...*/ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new
textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-cbc key using pbkdf2.
...*/ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new
textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-gcm key using pbkdf2.
TaskAttributionTiming - Web APIs
the taskattributiontiming interface of the long tasks api returns information about the work involved in a long task and its associate frame con
text.
... the frame con
text, also called the container, is the iframe, embed or object that is being implicated, on the whole, for a long task.
... position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">performanceentry</
text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" ...
...width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">taskattributiontiming</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
getTrackById() - Web APIs
the
texttracklist method gettrackbyid() returns the first
texttrack object from the track list whose id matches the specified string.
... syntax var thetrack =
texttracklist.gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track list.
... return value a
texttrack object indicating the first track found within the
texttracklist whose id matches the specified string.
... specifications specification status comment html living standardthe definition of '
texttracklist.gettrackbyid()' in that specification.
TrackEvent - Web APIs
events based on trackevent are always sent to one of the media track list types: events involving video tracks are always sent to the videotracklist found in htmlmediaelement.videotracks events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks events affecting
text tracks are sent to the
texttracklist object indicated by htmlmediaelement.
texttracks.
...if not null, this is always an object of one of the media track types: audiotrack, videotrack, or
texttrack).
... var videoelem = document.queryselector("video"); videoelem.videotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.videotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.
texttracks.addeventlistener("addtrack", handletrackevent, false); videoelem.
texttracks.addeventlistener("removetrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotracklist)) { trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(
texttracklist...
...)) { trackkind = "
text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed from the element.
WEBGL_debug_shaders - Web APIs
the webgl_debug_shaders extension is part of the webgl api and exposes a method to debug shaders from privileged con
texts.
... webgl extensions are available using the webglrenderingcon
text.ge
textension() method.
... availability: depending on the privacy settings of the browser, this extension might only be available to privileged con
texts.
... this extension is available to both, webgl1 and webgl2 con
texts.
Simple color animation - Web APIs
<p>a simple webgl program that shows color animation.</p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body {
text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false);...
... stopanimation({type: "click"}); var gl; function drawanimation () { if (!gl) { var canvas = document.getelementbyid("canvas-view"); gl = canvas.getcon
text("webgl") ||canvas.getcon
text("experimental-webgl"); if (!gl) { clearinterval(timer); alert("failed to get webgl con
text.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.
... var color = getrandomcolor(); // set the webglrenderingcon
text clear color to the // random color.
... gl.clearcolor(color[0], color[1], color[2], 1.0); // clear the con
text with the newly set color.
Lighting in WebGL - Web APIs
return { position: positionbuffer, normal: normalbuffer,
texturecoord:
texturecoordbuffer, indices: indexbuffer, }; this should look pretty familiar by now; we create a new buffer, bind it to be the buffer we're working with, then send along our array of vertex normals into the buffer by calling bufferdata().
...let's take a look at the code: const vssource = ` attribute vec4 avertexposition; attribute vec3 avertexnormal; attribute vec2 a
texturecoord; uniform mat4 unormalmatrix; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying highp vec2 v
texturecoord; varying highp vec3 vlighting; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; v
texturecoord = a
texturecoord; // apply lighting effect highp vec3 ambientlight = vec3(0.3, 0.
... the fragment shader the fragment shader now needs to be updated to take into account the lighting value computed by the vertex shader: const fssource = ` varying highp vec2 v
texturecoord; varying highp vec3 vlighting; uniform sampler2d usampler; void main(void) { highp vec4 texelcolor =
texture2d(usampler, v
texturecoord); gl_fragcolor = vec4(texelcolor.rgb * vlighting, texelcolor.a); } `; here we fetch the color of the texel, just like we did in the previous example, but before setting the color of the fragment, we multiply the texel's c...
... const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), vertexnormal: gl.getattriblocation(shaderprogram, 'avertexnormal'),
texturecoord: gl.getattriblocation(shaderprogram, 'a
texturecoord'), }, uniformlocations: { projectionmatrix: gl.getuniformlocation(shaderprogram, 'uprojectionmatrix'), modelviewmatrix: gl.getuniformlocation(shaderprogram, 'umodelviewmatrix'), normalmatrix: gl.getuniformlocation(shaderprogram, 'unormalmatrix'), usampler: gl.getuniformlocation(shaderprogram, 'usampler'), ...
Fundamentals of WebXR - Web APIs
this is an important fact to keep in mind; while webxr manages the timing, scheduling, and the various points of view relevant when drawing the scene, it does not actually know how to load and manage models, render and
texture them, and so forth.
...the former, specified by the session mode string inline, presents the rendered scene within the con
text of a document in a web browser, and doesn't require special xr hardware to view.
... types of webxr hardware the simplest xr presentation involves rendering the scene directly to the user's screen, either in the con
text of a web document, or in full screen mode.
...they're designed for creating and animating 3d scenes regardless of con
text.
Web Workers API - Web APIs
worker()) that runs a named javascript file — this file contains the code that will run in the worker thread; workers run in another global con
text that is different from the current window.
... this con
text is represented by either a dedicatedworkerglobalscope object (in the case of dedicated workers - workers that are utilized by a single script), or a sharedworkerglobalscope (in the case of shared workers - workers that are shared between multiple scripts).
... audio workers provide the ability for direct scripted audio processing to be done inside a web worker con
text.
... sharedworker represents a specific kind of worker that can be accessed from several browsing con
texts, being several windows, iframes or even workers.
window.postMessage() - Web APIs
ener-policy with same-origin as value (protects your origin from attackers) cross-origin-embedder-policy with require-corp as value (protects victims from your origin) cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker con
texts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } see also planned changes to shared memory which is starting to roll out to browsers (firefox 79, for example).
... postmessage() schedules the messageevent to be dispatched only after all pending execution con
texts have finished.
...(the other properties have their expected values.) it is not possible for content or web con
text scripts to specify a targetorigin to communicate directly with an extension (either the background script or a content script).
...web con
text scripts can use custom events to communicate with content scripts (with randomly generated event names, if needed, to prevent snooping from the guest page).
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
explanation code executed by settimeout() is called from an execution con
text separate from the function from which settimeout was called.
... // recommended window.settimeout(function() { alert('hello world!'); }, 500); // not recommended window.settimeout("alert('hello world!');", 500); a string passed to settimeout is evaluated in the global con
text, so local symbols in the con
text where settimeout() was called will not be available when the string is evaluated as code.
... firefox 50 no longer throttles background tabs if a web audio api audiocon
text is actively playing sound.
... firefox 51 further amends this such that background tabs are no longer throttled if an audiocon
text is present in the tab at all, even if no sound is being played.
WorkerGlobalScope - Web APIs
workers have no browsing con
text; this scope contains the information usually conveyed by window objects — in this case event handlers, the console or the associated workernavigator object.
...the self property returns the specialized scope for each con
text.
... properties implemented from elsewhere windoworworkerglobalscope.caches read only returns the cachestorage object associated with the current con
text.
... windoworworkerglobalscope.issecurecon
text read only returns a boolean indicating whether the current con
text is secure (true) or not (false).
XMLHttpRequest.response - Web APIs
the value is null if the request is not yet complete or was unsuccessful, with the exception that when reading
text data using a responsetype of "
text" or the empty string (""), the response can contain the response so far while the request is still in the loading readystate (3).
... "" an empty responsetype string is treated the same as "
text", the default type.
...
text the response is a
text in a domstring object.
... the content is handled as raw
text data (since nothing here is overriding the default responsetype).
XMLHttpRequest.responseXML - Web APIs
usually, the response is parsed as "
text/xml".
... if the responsetype is set to "document" and the request was made asynchronously, instead the response is parsed as "
text/html".
... if the server doesn't specify the content-type as "
text/xml" or "application/xml", you can use xmlhttprequest.overridemimetype() to parse it as xml anyway.
... example var xhr = new xmlhttprequest; xhr.open('get', '/server'); // if specified, responsetype must be empty string or "document" xhr.responsetype = 'document'; // force the response to be parsed as xml xhr.overridemimetype('
text/xml'); xhr.onload = function () { if (xhr.readystate === xhr.done && xhr.status === 200) { console.log(xhr.response, xhr.responsexml); } }; xhr.send(); specifications specification status comment xmlhttprequestthe definition of 'responsexml' in that specification.
XPathExpression.evaluate() - Web APIs
syntax xpathresult node.evaluate(con
textnode, type, result); parameters con
textnode a node representing the con
text to use for evaluating the expression.
... wrong_document_err if the provided con
text node is from a document that is not supported by the xpathevaluator, a domexception of type wrong_document_err is raised.
... not_supported_err if the provided con
text node is not a type permitted as an xpath con
text node or the request type is not permitted by the xpathevaluator, a domexception of type not_supported_err is raised.
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").
textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression.evaluate()' in that specification.
ARIA Screen Reader Implementors Guide - Accessibility
text to speech and a braille display), then two queues can be maintained to allow for parallel presentation.
...this is particularly important for changes in data cells, where the column and row headers provide important con
textual information.
... ideas for settings and heuristics allow for a different voice (in
text-to-speech) or other varying presentational characteristics to set live changes apart.
...for example, automatically speak changes that are caused by the user's own input, as part of the con
text of that input.
Using the progressbar role - Accessibility
note: assistive technologies generally will render the value of aria-valuenow as a percent of the range between the value of aria-valuemin and aria-valuemax, unless aria-value
text is specified.
...if the progress bar is labeled, the label
text should be mentioned as well.
... examples example 1: basic progressbar with percentage values <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> example 2: using aria-value
text <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-value
text="step 2: copying files...
...</div> working examples: notes aria attributes used progressbar aria-valuenow aria-valuemin aria-valuemax aria-value
text related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
ARIA: cell role - Accessibility
associated wai-aria roles, states, and properties con
text roles role="row" an element with role="row" is a row of cells within a tabular structure.
...rowgroup is an optional con
textual row parent.
... role="table" one of the three possible con
texts (along with grid and treegrid) in which you'll find a row containing cells.
... role="grid" one of the three possible con
texts (along with table and treegrid) in which you'll find a row containing cells and gridcells.
ARIA: grid role - Accessibility
30 </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> css body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000;
text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'...
...se "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.
textcontent); break; } event.preventdefault(); }); html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader" aria-label="tuesd...
...ex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <!-- … additional rows … --> </tbody> </table> css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000;
text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), ro...
...se "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.
textcontent); break; } event.preventdefault(); }); more examples data grid examples layout grids examples w3c/wai tutorial: tables accessibility concerns even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys.
ARIA: heading role - Accessibility
<div role="heading" aria-level="1">this is a main page heading</div> this defines the
text in the div to be the main heading of the page, indicated by being level 1 via the aria-level attribute.
...screen readers would read the
text and indicate that it is formatted like a heading.
... instead of using a <div> or <span> with a heading role and aria-level, consider using a native <h1> through <h6> element instead to indicate that this
text is a heading, and what part of the structure it represents.
... <div id="container"> <div role="heading" aria-level="1">the main page heading</div> <p>this article is about showing a page structure.</p> <div role="heading" aria-level="2">introduction</div> <p>an introductory
text.</p> <div role="heading" aria-level="2">chapter 1</div> <p>
text</p> <div role="heading" aria-level="3">chapter 1.1</div> <p>more
text in a sub section.</p> ...</div> however, instead, you should do: <div id="container"> <h1>the main page heading</h1> <p>this article is about showing a page structure.</p> <h2>introduction</h2> <p>an introductory
text.</p> <h2>chapter 1</h2> <p>
text</p> <h3>chapter 1.1</h3> <p>more
text in a sub section.</p> ...</div> accessibility concerns if you must use the heading role and aria-leve...
Accessibility and Spacial Patterns - Accessibility
text and padding wcag standards for contrast perception do not take into account the effect of padding.
... for example, blue
text on a gray background is easier to perceive if it is surrounded "locally" by black than by white.
...a user of braille does not simply lay a finger on "top" of a braille character, the user has to move her finger over the character, in the way that a sighted person must move her eyes across
text written on a page.
...es and physical reactions web accessibility: understanding colors and luminance braille part 3: a step-by-step guide to typesetting ada braille correctly in adobe illustrator spatial math in brailleblaster (4 of 5) government literature nasa: designing with blue math spatial reasoning: why math talk is about more than numbers scientific literature colour constancy in con
text: roles for local adaptation and levels of reference gamma oscillations and photosensitive epilepsy characterizing the patterned images that precipitate seizures and optimizing guidelines to prevent them arnold wilkins, john emmett, and graham harding contributers: heartfelt thanks to jim allan of the diagram center for his discussions on the topic of alternative means of education.
HTML To MSAA - Accessibility
stem_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping
text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a ...
...if @usemap attribute is used then image accessible has children for each map item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=
text,
textarea role_system_
text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @type=password role_system_
text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element retur...
...property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ static
text from child nodes n/a n/a n/a n/a n/a legend role_system_ static
text n/a n/a n/a label_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a opti...
...on role_system_ listitem from @label attribute, from child
text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell...
Accessibility Information for Web Authors - Accessibility
it can perform a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt
text attribute quality.
...you can see a
text-only view and and outline view of the document.
...(...) about one-third complained about low contrast between
text and background." top ten web design mistakes of 2005: 1.
... legibility problems how can a web author establish easily and quickly if the background color and foreground (
text) color in use in his webpages have sufficient color contrast difference and sufficient color brightness difference?
Mobile accessibility checklist - Accessibility
colour colour contrast must comply with wcag 2.1 aa level requirements: contrast ratio of 4.5:1 for normal
text (less than 18 point or 14 point bold.) contrast ratio of 3:1 for large
text (at least 18 point or 14 point bold.) information conveyed via colour must be also available by other means too (underlined
text for links, etc.) visibility content hiding techniques such as zero opacity, z-index order and off-screen placement must not be used exclusively to handle visibility.
...
text equivalents
text equivalent must be provided for every non-strictly presentational non-
text element within the app.
... images of
text must be avoided.
... all user interface components with visible
text (or image of
text) as labels must have the same
text available in the programmatic name of the component.
Web accessibility for seizures and physical reactions - Accessibility
for example, many users have difficulty reading
text that has a small difference in contrast to the
text background and would prefer a larger contrast." sometimes there can be such a thing as too much contrast; a halo effect around
text can occur in such situations and actually reduce legibility.
... personalization help and support the requirement for the literal property is taken from section 23 non-literal
text and images requirement: some users cannot understand non-literal
text and icons such as metaphors, idioms etc.
... the literal property is intended to identify
text or images as non-literal and allows the author to explain non-literal
text and images to users.
... see also mdn accessibility: what users can to to browse more safely accessibility: understanding color and luminance applying svg effects to html content basic animations (canvas tutorial) canvas api canvasrenderingcon
text2d.drawimage() <color> document object model mediaquerylist using dynamic styling information webgl: 2d and 3d graphics for the web color color tutorial: describing color tom jewett.
::after (:after) - CSS: Cascading Style Sheets
html <p class="boring-
text">here is some plain old boring
text.</p> <p>here is some normal
text that is neither boring nor exciting.</p> <p class="exciting-
text">contributing to mdn is easy and fun.</p> css .exciting-
text::after { content: " <- exciting!"; color: green; } .boring-
text::after { content: " <- boring"; color: red; } result decorative example we can style
text or images in the content property ...
... html <span class="ribbon">look at the orange box after this
text.
... html <p>here we have some <span tabindex="0" data-descr="collection of words and punctuation">
text</span> with a few <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>.
... </p> css span[data-descr] { position: relative;
text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifications specification status comment css pseudo-elements level 4the definition of '::after' in that specification.
:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <input> or <
textarea> element that is currently displaying placeholder
text.
... html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing
text when form fields are too small, placeholder
text can get cropped in an undesirable way.
... you can use the
text-overflow property to alter the way overflowing
text is displayed.
... html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown {
text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style.
:read-only - CSS: Cascading Style Sheets
the :read-only css pseudo-class represents an element (such as input or
textarea) that is not editable by the user.
... input:read-only,
textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <
textarea>.
... input:-moz-read-only,
textarea:-moz-read-only, input:read-only,
textarea:read-only { border: 0; box-shadow: none; background-color: white; }
textarea:-moz-read-write,
textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<
textarea> elements — it will select any element that cannot be edited by the user.
:read-write - CSS: Cascading Style Sheets
the :read-write css pseudo-class represents an element (such as input or
textarea) that is editable by the user.
... input:read-write,
textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <
textarea>.
... input:-moz-read-only,
textarea:-moz-read-only, input:read-only,
textarea:read-only { border: 0; box-shadow: none; background-color: white; }
textarea:-moz-read-write,
textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<
textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
-ms-high-contrast - CSS: Cascading Style Sheets
the available color keywords are: window
text: controls the color of
text content.
... highlight
text: controls the color of selected
text.
... highlight: controls the background color of selected
text.
... buttonface: controls the color of a <button> element's
text.
Spanning and Balancing Columns - CSS: Cascading Style Sheets
in fragmented con
texts such as paged media, only the last fragment is balanced.
... there is a second value for balancing, balance-all, which attempts to balance all columns in fragmented con
texts and not just the columns on the final fragment.
... in this example, we have columns containing an image and some
text which are balanced.
... the image cannot break and so goes into the first column and the other columns fill with equal amounts of
text.
Using multi-column layouts - CSS: Cascading Style Sheets
the css multi-column layout module extends the block layout mode to allow the easy definition of multiple columns of
text.
... people have trouble reading
text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on.
... therefore, to make maximum use of a large screen, authors should have limited-width columns of
text placed side by side, just as newspapers do.
... unfortunately this is impossible to do with css and html without forcing column breaks at fixed positions, or severely restricting the markup allowed in the
text, or using heroic scripting.
Variable fonts guide - CSS: Cascading Style Sheets
oblique is defined in this con
text with the term slant (see the below section), and a typeface would typically have one or the other, but not both.
... in css, both italic and oblique are applied to
text using the font-style property.
...the term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the
text occupies does not change, so changing the
text grade doesn't change the overall layout of the
text or elements around it.
... this makes grade a useful axis of variation as it can be varied or animated without causing reflow of the
text itself.
Using CSS transforms - CSS: Cascading Style Sheets
width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white;
text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rot...
...atey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif;
text-align: left; } result the second element to configure is the position of the viewer, with the perspective-origin property.
...face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white;
text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotate...
...y(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif;
text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result once you have done this, you can work on the element in the 3d space.
Specificity - CSS: Cascading Style Sheets
by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <span>
text</span> </div> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order,
text will be green because that rule is most specific.
... <div class="outer"> <p>this is in the outer div.</p> <div class="inner"> <p>this
text is in the inner div.</p> </div> </div> ...
...</div> <div class="outer"> <p>this is in the outer div.</p> <div class="inner"> <p>this
text is in the inner div.</p> </div> </div> ...
... <p id="foo">i am a sample
text.</p> ...
WebKit CSS extensions - CSS: Cascading Style Sheets
eight -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-
text-combine -webkit-
text-decoration-skip -webkit-
text-decorations-in-effect -webkit-
text-fill-color -webkit-
text-security -webkit-
text-stroke-color -webkit-
text-stroke-width -webkit-
text-stroke -webkit-
text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track **...
... m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-
text-decoration -webkit-
text-color-decoration -webkit-
text-decoration-line -webkit-
text-decoration-style -epub-
text-emphasis -webkit-
text-emphasis -epub-
text-emphasis-color -webkit-
text-emphasis-color -webkit-
text-emphasis-position -epub-
text-emphasis-style -webkit-
text-emphasis-style -webkit-
text-justify -webkit-
text-orientation -webkit-
text-size-adjust -webkit-
text-underline-position ...
... -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap j -webkit-justify-content m -webkit-mask -webkit-mask-clip -webkit-mask-composite* -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-position-x** -webkit-mask-position-y** -webkit-mask-repeat -webkit-mask-size o-p -webkit-order -webkit-perspective -webkit-perspective-origin t -webkit-
text-fill-color** -webkit-
text-size-adjust -webkit-
text-stroke** -webkit-
text-stroke-color** -webkit-
text-stroke-width** -webkit-transform -webkit-transform-origin -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u -webkit-user-select *supported with -moz- and -webkit- prefix in firefox, but not su...
...s-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-webkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-background ::-webkit-media-controls-volume-slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-suboptimum-value -webkit-media-
text-track-container ::-webkit-outer-spin-button ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value ::-webkit-search-cancel-button ::-webkit-search-results-button ::-webkit-slider-runnable-track ::-webkit-slider-thumb note: generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is inval...
background-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the background color and the color of the
text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.
... color contrast ratio is determined by comparing the luminance of the
text and background color values.
... in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for
text content and 3:1 for larger
text such as headings.
... large
text is defined as 18.66px and bold or larger, or 24px or larger.
<display-inside> - CSS: Cascading Style Sheets
these keywords specify the element’s inner display type, which defines the type of formatting con
text that lays out its contents (assuming it is a non-replaced element).
... if its outer display type is inline or run-in, and it is participating in a block or inline formatting con
text, then it generates an inline box.
... depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline formatting con
text, it either establishes a new block formatting con
text (bfc) for its contents or integrates its contents into its parent formatting con
text.
... flow-root the element generates a block element box that establishes a new block formatting con
text, defining where the formatting root lies.
font - CSS: Cascading Style Sheets
fantasy">fantasy</label><br /> <input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setcss()"> <label for="font-family-system-ui">system-ui</label><br /> </div> </div> <div class="cf propinputs"> <div class="propinputcont tar"> font : </div> <div class="propinputcont"> <input type="
text" class="curcss" id="input_font_style"><br/> font-style <br/> optional </div> <div class="propinputcont"> <input type="
text" class="curcss" id="input_font_variant"> <br/> font-variant <br/> optional </div> <div class="propinputcont"> <input type="
text" class="curcss" id="input_font_weight"> <br...
.../> font-weight <br/> optional </div> <div class="propinputcont"> <input type="
text" class="curcss mandatory" id="input_font_size"> <br/> font-size <br/> mandatory </div> <div class="propinputcont"> <input type="
text" class="curcss" id="input_line_height"> <br/> line-height <br/> optional </div> <div class="propinputcont"> <input type="
text" class="curcss mandatory" id="input_font_family"> <br/> font-family <br/> mandatory </div> </div> </form> <div class="fontshorthand"> this is some sample
text.
... </div> <br/><br/><br/><br/><br/><br/> css body, input { font: 14px arial; overflow: hidden; } .propinputcont { float: left;
text-align: center; margin-right: 5px; width: 80px; } .setpropcont { float: left; margin-right: 5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black;
text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px;
text-align: right; } .fontfamily { display: inline-block; } javascript var
textareas = document.getelementsbyclassname("curcss"), short
text = "", getcheckedvalue, setcss, getproperties, injectcss; getp...
...roperties = function () { short
text = getcheckedvalue("font_style") + " " + getcheckedvalue("font_variant") + " " + getcheckedvalue("font_weight") + " " + getcheckedvalue("font_size") + getcheckedvalue("line_height") + " " + getcheckedvalue("font_family"); return short
text; } getcheckedvalue = function(radio_name) { oradio = document.forms[0].elements[radio_name]; for (var i = 0; i < oradio.length; i++) { if(oradio[i].checked) { var propinput = "input_" + radio_name, curelemname = "input_" + radio_name, curelem = document.getelementbyid(curelemname); curelem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () { getproperties(); injectcss(short
text); } injectcss = functio...
ime-mode - CSS: Cascading Style Sheets
the ime-mode css property controls the state of the input method editor (ime) for
text fields.
... active the input method editor is initially active;
text entry is performed through it unless the user specifically dismisses it.
... formal definition initial valueautoapplies to
text fieldsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | normal | active | inactive | disabled examples disabling input method support this example disables input method support for a form field.
... <input type="
text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to prevent extended characters from passing through your form.
Inheritance - CSS: Cascading Style Sheets
and the markup: <p>this paragraph has <em>emphasized
text</em> in it.</p> ...
... the words "emphasized
text" will appear green, since the em element has inherited the value of the color property from the p element.
...and the markup: <p>this paragraph has <em>emphasized
text</em> in it.</p> ...
... the words "emphasized
text" will not have a border (since the initial value of border-style is none).
initial-letter-align - CSS: Cascading Style Sheets
values auto the user agent selects the value which corresponds to the language of the
text.
... alphabetic as described above, the cap height of the initial letter aligns with the cap height of the first line of
text.
... the baseline of the initial letter aligns with the baseline of the nth
text baseline.
... hanging the hanging baseline of the initial letter aligns with the hanging baseline of the first line of
text.
isolation - CSS: Cascading Style Sheets
the isolation css property determines whether an element must create a new stacking con
text.
... values auto a new stacking con
text is created only if one of the properties applied to the element requires it.
... isolate a new stacking con
text must be created.
...in svg, it applies to container elements, graphics elements, and graphics referencing elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking con
text for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status comment compos...
margin-inline-end - CSS: Cascading Style Sheets
the margin-inline-end css property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and
text orientation.
... in other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... syntax /* <length> values */ margin-inline-end: 10px; /* an absolute length */ margin-inline-end: 1em; /* relative to the
text size */ margin-inline-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-end: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-end' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
the margin-inline-start css property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and
text orientation.
... it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... syntax /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /* relative to the
text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element.
...formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
overflow-x - CSS: Cascading Style Sheets
the box is not a scroll container, and does not start a new formatting con
text.
... if you wish to start a new formatting con
text, you can use display: flow-root to do so.
...if content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting con
text.
...initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> — hides the
text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:visible</code> — displays the
text outside the box if needed <div id="div3"> abcdefghijkl...
padding-block-end - CSS: Cascading Style Sheets
the padding-block-end css property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and
text orientation.
... syntax /* <length> values */ padding-block-end: 10px; /* an absolute length */ padding-block-end: 1em; /* a length relative to the
text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical
text html content <div> <p class="example
text">example
text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in t...
padding-block-start - CSS: Cascading Style Sheets
the padding-block-start css property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and
text orientation.
... syntax /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length relative to the
text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical
text html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specificat...
padding-inline-end - CSS: Cascading Style Sheets
the padding-inline-end css property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and
text orientation.
... syntax /* <length> values */ padding-inline-end: 10px; /* an absolute length */ padding-inline-end: 1em; /* a length relative to the
text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical
text html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
the padding-inline-start css property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and
text orientation.
... syntax /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length relative to the
text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical
text html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and
text orientation.
... /* <length> values */ padding-inline: 10px 20px; /* an absolute length */ padding-inline: 1em 2em; /* relative to the
text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the padding-left property.
... description values for this property correspond to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical
text html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
perspective - CSS: Cascading Style Sheets
using this property with a value different than 0 and none creates a new stacking con
text.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valuethe absolute length or noneanimation typea lengthcreates stacking con
textyes formal syntax none | <length> examples setting perspective this example shows a cube with the perspective set at different positions.
... width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white;
text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rot...
...atey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif;
text-align: left; } result specifications specification status comment css transforms level 2the definition of 'perspective' in that specification.
ruby-align - CSS: Cascading Style Sheets
/* keyword values */ ruby-align: start; ruby-align: center; ruby-align: space-between; ruby-align: space-around; /* global values */ ruby-align: inherit; ruby-align: initial; ruby-align: unset; syntax values start is a keyword indicating that the ruby will be aligned with the start of the base
text.
... center is a keyword indicating that the ruby will be aligned at the middle of the base
text.
... formal definition initial valuespace-aroundapplies toruby bases, ruby annotations, ruby base containers, ruby annotation containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base
text html <ruby> <rb>this is a long
text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: start; } result ruby aligned at the center of the base
text html <ruby> <rb>this is a long
text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: center; } result extra space distributed between ruby eleme...
...nts html <ruby> <rb>this is a long
text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-between; } result extra space distributed between and around ruby elements html <ruby> <rb>this is a long
text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-around; } result specifications specification status comment css ruby layout module level 1the definition of 'ruby-align' in that specification.
Audio and Video Delivery - Developer guides
web audio api var con
text; var request; var source; try { con
text = new audiocon
text(); request = new xmlhttprequest(); request.open("get","http://jplayer.org/audio/mp3/riomez-01-sleep_together.mp3",true); request.responsetype = "arraybuffer"; request.onload = function() { con
text.decodeaudiodata(request.response, function(buffer) { source = con
text.createbuffersource(); s...
...ource.buffer = buffer; source.connect(con
text.destination); // auto play source.start(0); // start was previously noteon }); }; request.send(); } catch(e) { alert('web audio api not supported'); } in this example we retrieve an mp3 file via xhr, load it into a source and play it (try it for yourself).
... video.js: gratis and open source (apache 2 licensed.) audio and video jplayer: gratis and open source (mit licensed.) mediaelement.js: gratis and open source (mit licensed.) web audio api audiocon
text monkeypatch: a polyfill for older versions of the web audio api; open source (apache 2 licensed.) basic tutorials creating a cross-browser video player a guide to creating a basic cross browser video player using the <video> element.
... advanced tutorials adding captions and subtitles to html5 video this article explains how to add captions and subtitles to html5 <video>, using web_video_
text_tracks_format and the <track> element.
Challenge solutions - Developer guides
use domi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal
text.
...the resulting file looks like this: p {color: blue; } strong {color: orange;
text-decoration: underline;} later sections of this tutorial describe style rules and declarations in greater detail.
... selectors second paragraph blue challenge without changing your html file, add a single rule to your css file that keeps all the initial letters the same color as they are now, but makes all the other
text in the second paragraph blue.
... solution one way to do this is to put comment delimiters around the rule for .carrot: /* .carrot { color: orange; } */
text styles big initial letters challenge without changing anything else, make all six initial letters twice the size in the browser's default serif font.
Using HTML sections and outlines - Developer guides
it makes sense to use the section element to provide extra con
text for the parent element.
...in the con
text of a section, a footer might contain the sectioned content's publication date, license information, etc.
...the heading does not require the use of the <header> element <section> <h1>amazing mdn contributors</h1> <ul> <li><img src="link" alt="descriptive
text"></li> <li><img src="link" alt="descriptive
text"></li> <li><img src="link" alt="descriptive
text"></li> </ul> </section> aside element the <aside> element defines related content that has a different placement than the main content.
... <section> <h1>amazing mdn contributors</h1> <ul> <li><img src="link" alt="descriptive
text"></li> <li><img src="link" alt="descriptive
text"></li> <li><img src="link" alt="descriptive
text"></li> </ul> <aside> <p>to get involved contact</p> </aside> </section> nesting aside elements the <aside> element can be nested inside of other sectional html elements.
Content-Security-Policy - HTTP
child-src defines the valid sources for web workers and nested browsing con
texts loaded using elements such as <frame> and <iframe>.
... instead of child-src, if you want to regulate nested browsing con
texts and workers, you should use the frame-src and worker-src directives, respectively.
... frame-src specifies valid sources for nested browsing con
texts loading using elements such as <frame> and <iframe>.
... form-action restricts the urls which can be used as the target of a form submissions from a given con
text.
Content-Type - HTTP
it also needs to have a mime type of its parsed value (ignoring parameters) of either application/x-www-form-urlencoded, multipart/form-data, or
text/plain.
... syntax content-type:
text/html; charset=utf-8 content-type: multipart/form-data; boundary=something directives media-type the mime type of the resource or the data.
... <form action="/" method="post" enctype="multipart/form-data"> <input type="
text" name="description" value="some
text"> <input type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 68137 content-type: multipart/form-data; boundary=---------------------------974767299852498929531610575 -----------------------------97476729985249892953...
...1610575 content-disposition: form-data; name="description" some
text -----------------------------974767299852498929531610575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type:
text/plain (content of the uploaded file foo.txt) -----------------------------974767299852498929531610575-- specifications specification title rfc 7233, section 4.1: content-type in multipart hyper
text transfer protocol (http/1.1): range requests rfc 7231, section 3.1.1.5: content-type hyper
text transfer protocol (http/1.1): semantics and content ...
Index - HTTP
browsers set adequate values for this header depending on the con
text where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
... 31 csp: child-src csp, directive, http, reference, security the deprecated http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing con
texts loaded using elements such as <frame> and <iframe>.
... 35 csp: form-action csp, directive, http, security the http content-security-policy (csp) form-action directive restricts the urls which can be used as the target of a form submissions from a given con
text.
... 37 csp: frame-src csp, directive, http, reference, security the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing con
texts loading using elements such as <frame> and <iframe>.
Warning - HTTP
header type general header forbidden header name no syntax warning: <warn-code> <warn-agent> <warn-
text> [<warn-date>] directives <warn-code> a three-digit warning number.
... <warn-
text> advisory
text describing the error.
... code
text description 110 response is stale a response provided by a cache is stale (the expiration time set for it has passed).
... 299 miscellaneous persistent warning same as 199, but indicating a persistent warning examples warning: 110 anderson/1.3.37 "response is stale" date: wed, 21 oct 2015 07:28:00 gmt warning: 112 - "cache down" "wed, 21 oct 2015 07:28:00 gmt" specifications specification title rfc 7234, section 5.5: warning hyper
text transfer protocol (http/1.1): caching ...
HTTP headers - HTTP
headers can be grouped according to their con
texts: general headers apply to both requests and responses, but with no relation to the data transmitted in the body.
... request con
text from contains an internet email address for a human user who controls the requesting user agent.
... response con
text allow lists the set of http request methods supported by a resource.
... x-download-options the x-download-options http header indicates that the browser (internet explorer) should not display the option to "open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the con
text of the application.
JavaScript data types and data structures - JavaScript
string type javascript's string type is used to represent
textual data.
... strings are the common denominator of a lot of apis (input fields, local storage values, xmlhttprequest responses when using response
text, etc.) and it can be tempting to only work with strings.
... use strings for
textual data.
...this has the downside that the data is available to any script running in the same con
text.
Equality comparisons and sameness - JavaScript
but most browsers permit a very narrow class of objects (specifically, the document.all object for any page), in some con
texts, to act as if they emulate the value undefined.
... loose equality is one such con
text: null == a and undefined == a evaluate to true if, and only if, a is an object that emulates undefined.
... same-value equality same-value equality addresses a final use case: determining whether two values are functionally identical in all con
texts.
...however, since typed arrays are available, we can have distinct instances, which don't behave identically in all con
texts.
JavaScript modules - JavaScript
fast forward a few years and we now have complete applications being run in browsers with a lot of javascript, as well as javascript being used in other con
texts (node.js, for example).
...returns an object containing the canvas's 2d con
text and the wrapper's id.
...to get modules to work correctly in a browser, you need to make sure that your server is serving them with a content-type header that contains a javascript mime type such as
text/javascript.
... we mentioned this before, but to reiterate: .js files need to be loaded with a mime-type of
text/javascript (or another javascript-compatible mime-type, but
text/javascript is recommended), otherwise you'll get a strict mime type checking error like "the server responded with a non-javascript mime type".
RegExp.prototype.exec() - JavaScript
using this internally, exec() can be used to iterate over multiple matches in a string of
text (with capture groups), as opposed to getting just the matching strings with string.prototype.match().
...the returned array has the matched
text as the first item, and then one item for each parenthetical capture group of the matched
text.
... false source the
text of the pattern.
...'; msg += 'next match starts at ' + myre.lastindex; console.log(msg); } this script displays the following
text: found abb.
Set - JavaScript
examples using the set object let myset = new set() myset.add(1) // set [ 1 ] myset.add(5) // set [ 1, 5 ] myset.add(5) // set [ 1, 5 ] myset.add('some
text') // set [ 1, 5, 'some
text' ] let o = {a: 1, b: 2} myset.add(o) myset.add({a: 1, b: 2}) // o is referencing a different object, so this is okay myset.has(1) // true myset.has(3) // false, since 3 has not been added to the set myset.has(5) // true myset.has(math.sqrt(25)) // true myset.has('some
text'.tolowercase()) // true myset.has(o) // true m...
...yset.size // 5 myset.delete(5) // removes 5 from the set myset.has(5) // false, 5 has been removed myset.size // 4, since we just removed one value console.log(myset) // logs set(4) [ 1, "some
text", {…}, {…} ] in firefox // logs set(4) { 1, "some
text", {…}, {…} } in chrome iterating sets // iterate over items in set // logs the items in the order: 1, "some
text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset) console.log(item) // logs the items in the order: 1, "some
text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset.keys()) console.log(item) // logs the items in the order: 1, "some
text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset.values()) console.log(item) // logs the items in the order: 1, "some
text", {"a...
...": 1, "b": 2}, {"a": 1, "b": 2} // (key and value are the same here) for (let [key, value] of myset.entries()) console.log(key) // convert set object to an array object, with array.from let myarr = array.from(myset) // [1, "some
text", {"a": 1, "b": 2}, {"a": 1, "b": 2}] // the following will also work if run in an html document myset.add(document.body) myset.has(document.queryselector('body')) // true // converting between set and array myset2 = new set([1, 2, 3, 4]) myset2.size // 4 [...myset2] // [1, 2, 3, 4] // intersect can be simulated via let intersection = new set([...set1].filter(x => set2.has(x))) // difference can be simulated via let difference = new set([...set1].filter(x => !set2.has(x))) // iterate set entries with foreach() myset.fore...
...console.log([...myset]) // will show you exactly the same array as myarray remove duplicate elements from the array // use to remove duplicate elements from the array const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5] console.log([...new set(numbers)]) // [2, 3, 4, 5, 6, 7, 32] relation with strings let
text = 'india' let myset = new set(
text) // set ['i', 'n', 'd', 'i', 'a'] myset.size // 5 //case sensitive & duplicate ommision new set("firefox") // set(7) [ "f", "i", "r", "e", "f", "o", "x" ] new set("firefox") // set(6) [ "f", "i", "r", "e", "o", "x" ] specifications specification ecmascript (ecma-262)the definition of 'set' in that specification.
String.prototype.link() - JavaScript
the link() method creates a string representing the code for an <a> html element to be used as a hyper
text link to another url.
... description use the link() method to create an html snippet for a hyper
text link.
... examples using link() the following example displays the word "mdn" as a hyper
text link that returns the user to the mozilla developer network.
... var hot
text = 'mdn'; var url = 'https://developer.mozilla.org/'; console.log('click to return to ' + hot
text.link(url)); // click to return to <a href="https://developer.mozilla.org/">mdn</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.link' in that specification.
String.prototype.substring() - JavaScript
let
text = 'mozilla' console.log(
text.substring(2,5)) // => "zil" console.log(
text.substr(2,3)) // => "zil" differences between substring() and slice() the substring() and slice() methods are almost identical, but there are a couple of subtle differences between the two, especially in the way negative arguments are dealt with.
... let
text = 'mozilla' console.log(
text.substring(5, 2)) // => "zil" console.log(
text.slice(5, 2)) // => "" if either or both of the arguments are negative or nan, the substring() method treats them as if they were 0.
... console.log(
text.substring(-5, 2)) // => "mo" console.log(
text.substring(-5, -2)) // => "" slice() also treats nan arguments as 0, but when it is given negative values it counts backwards from the end of the string to find the indexes.
... console.log(
text.slice(-5, 2)) // => "" console.log(
text.slice(-5, -2)) // => "zil" see the slice() page for more examples with negative numbers.
Template literals (Template strings) - JavaScript
syntax `string
text` `string
text line 1 string
text line 2` `string
text ${expression} string
text` tag`string
text ${expression} string
text` description template literals are enclosed by the backtick (` `) (grave accent) character instead of double or single quotes.
...the expressions in the placeholders and the
text between the backticks (` `) get passed to a function.
... using normal strings, you would have to use the following syntax in order to get multi-line strings: console.log('string
text line 1\n' + 'string
text line 2'); // "string
text line 1 // string
text line 2" using template literals, you can do the same like this: console.log(`string
text line 1 string
text line 2`); // "string
text line 1 // string
text line 2" expression interpolation in order to embed expressions within normal strings, you would use the following syntax: let a = 5; let b = 10; console.log('fifteen...
... function tag(strings) { console.log(strings.raw[0]); } tag`string
text line 1 \n string
text line 2`; // logs "string
text line 1 \n string
text line 2" , // including the two characters '\' and 'n' in addition, the string.raw() method exists to create raw strings—just like the default template function and string concatenation would create.
Autoplay guide for media and Web Audio APIs - Web media technologies
this includes both the use of html attributes to autoplay media as well as the user of javascript code to start playback outside the con
text of handling user input.
... the play() method the term "autoplay" also refers to scenarios in which a script tries to trigger the playback of media that includes audio, outside the con
text of handling a user input event.
... autoplay using the web audio api in the web audio api, a web site or app can start playing audio using the start() method on a source node linked to the audiocon
text.
... doing so outside the con
text of handling a user input event is subject to autoplay rules.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
0 1 0 0 0" style="color-interpolation-filters:srgb"/> </filter> </svg> the five filters are applied using the following css: p.target { filter:url(#f3); } p.target:hover { filter:url(#f5); } b.target { filter:url(#f1); } b.target:hover { filter:url(#f4); } pre.target { filter:url(#f2); } pre.target:hover { filter:url(#f3); } view this example live example: blurred
text in order to blur
text, webkit based browsers have a (prefixed) css filter called blur (see also css filter).
... example:
text effects svg effects can also be used to add a more dynamic and flexible approach to adding
text compared to plain html
text.
... by creating the
text using svg elements combined with html you can make a variety of different
text effects.
... you can rotate the
text: <svg height="60" width="200"> <
text x="0" y="15" fill="blue" transform="rotate(30 20,50)">example
text</
text> </svg> using external references svg used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the html document to which it's applied.
baseline-shift - SVG: Scalable Vector Graphics
the baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent
text content element.
... as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <
textpath>, <tref>, and <tspan> usage notes value <length-percentage> | sub | super default value 0 animatable yes sub the dominant-baseline is shifted to the default position for subscripts.
... <length-percentage> a length value raises (positive value) or lowers (negative value) the dominant-baseline of the parent
text content element by the specified length.
... a percentage value raises (positive value) or lowers (negative value) the dominant-baseline of the parent
text content element by the specified percentage of the line-height.
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <
text>, <
textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,...
..."pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x="6" /> <use xlink:href="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="6" /> <use xlink:href="#highlight" x="8" y="6" /> </svg> usage con
text value arcs | bevel |miter | miter-clip | round default value miter animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browser compatibility bellow for details.
... candidate recommendation definition for shapes and
texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-linejoin' in that specification.
... recommendation initial definition for shapes and
texts ...
stroke-miterlimit - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <
text>, <
textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-3 l7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 ...
... usage con
text value <number> default value 4 animatable yes the value of stroke-miterlimit must be greater than or equal to 1.
... candidate recommendation definition for shapes and
texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-miterlimit' in that specification.
... recommendation initial definition for shapes and
texts ...
word-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <
text>, <
textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <
text y="20" word-spacing="2">bigger spacing between words</
text> <
text x="0" y="40" word-spacing="-0.5">smaller spacing between words</
text> </svg> usage notes value normal | <length> animatable yes default values no...
... prior to firefox 72 firefox ignored word-spacing and renders
text without.
... specifications specification status comment css
text module level 3the definition of 'word-spacing' in that specification.
... working draft svg 2 just refers to the definition in css
text 3.
writing-mode - SVG: Scalable Vector Graphics
the writing-mode attribute specifies whether the initial inline-progression-direction for a <
text> element shall be left-to-right, right-to-left, or top-to-bottom.
... the writing-mode attribute applies only to <
text> elements; the attribute is ignored for <tspan>, <tref>, <altglyph> and <
textpath> sub-elements.
... (note that the inline-progression-direction can change within a <
text> element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) note: as a presentation attribute, writing-mode can be used as a css property.
... as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <
text>, <
textpath>, <tref>, and <tspan> usage notes default value horizontal-tb value horizontal-tb | vertical-rl | vertical-lr animatable yes horizontal-tb this value defines a top-to-bottom block flow direction.
<a> - SVG: Scalable Vector Graphics
svg's <a> element is a container, which means you can create a link around
text (like in html) but also around any shape.
... @namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a
text --> <a href="/docs/web/svg/element/
text"> <
text x="50" y="90"
text-anchor="middle"> <circle> </
text> </a> </svg> /* as svg does not provide a default visual style for links, it's considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s.
... see warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a
text,
text svg|a { fill: blue; /* even for
text, svg uses fill over color */
text-decoration: underline; } svg|a:hover, svg|a:active { outline: dotted 1px blue; } since this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element.
...a-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-value
text, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <
text>, <view> speci...
<desc> - SVG: Scalable Vector Graphics
the <desc> element provides an accessible, long-
text description of any svg container element or graphics element.
...
text in a <desc> element is not rendered as part of the graphic.
... if the element can be described by visible
text, it is possible to reference that
text with the aria-describedby attribute.
... the hidden
text of a <desc> element can also be concatenated with the visible
text of other elements using multiple ids in an aria-describedby value.
<feColorMatrix> - SVG: Scalable Vector Graphics
usage con
text categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in type values dom interface this element implements the svgfecolormatrixelement interface.
...meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <
text x="70" y="50">reference</
text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <
text x="70" y="120">identity matrix</
text...
...> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colormegreen)" /> <
text x="70" y="190">rgbtogreen</
text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <
text x="70" y="260">saturate</
text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filte...
...r> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <
text x="70" y="330">huerotate</
text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 350)" filter="url(#colormelta)" /> <
text x="70" y="400">luminancetoalpha</
text> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fecolormatrix>' in that specification.
<metadata> - SVG: Scalable Vector Graphics
usage con
text categoriesdescriptive elementpermitted contentany elements or character data attributes global attributes core attributes global event attributes specific attributes none dom interface this element implements the svgmetadataelement interface.
... <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket5"/> </rdf:description> </rdf:rdf> </metadata> <title>network</title> <desc>an example of a computer network based on a hub.</desc> <style> svg { /* default styles to be inherited */ fill: white; stroke: black; }
text { fill: black; stroke: none; } path { fill: none; } </style> <!-- define symbols used in the svg --> <defs> <!-- hubplug symbol.
... used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <
text x="0" y="15">hub</
text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> <use xlink:href="#...
...d flat box style</desc> <rect width="160" height="60"/> <g id="discdrive" transform="translate(70 8)"> <title>disc drive</title> <desc>a built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/> </g> <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <
text x="0" y="15">network</
text> <!-- use the hub symbol.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
text module
text implemented.
... various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant,
text-decoration svg
textelement recently imlemented bindings: selectsubstring recently implemented attributes:
textlength, lengthadjust tspan implemented.
... various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant,
text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes:
textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171).
...
textpath implemented.
Web Components
:host-con
text(): selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the dom hierarchy.
... relevant node additions additions to the node interface relevant to shadow dom: the node.getrootnode() method returns the con
text object's root, which optionally includes the shadow root if it is available.
... the node.isconnected property returns a boolean indicating whether or not the node is connected (directly or indirectly) to the con
text object, e.g.
... slotable a mixin implemented by both element and
text nodes, defining features that allow them to become the contents of an <slot> element.
position - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the position function returns a number equal to the con
text position from the expression evaluation con
text.
... syntax position() returns an integer equal to the con
text position from the expression evaluation con
text.
... notes note that a node's position in a con
text is not zero-based.
... the con
text is determined by the rest of the path.
An Overview - XSLT: Extensible Stylesheet Language Transformations
it can be made up of seven different types of nodes: the single root node, element nodes,
text nodes, attribute nodes, comment nodes, processing instruction nodes, and namespace nodes.
...there are certain constraints on which type of nodes can occur where: for example,
text nodes can have no children.
...to facilitate this, the w3c decided to use a separate language, xpath, which also has uses outside the xslt con
text.
...for example, if the stylesheet is called inventory.xsl and resides in the same directory as the xml document, the processing instruction in the xml document would look like this: <?xml-stylesheet type="
text/xml" href="inventory.xsl"?> this must be placed in the prolog section of the xml document.
Communicating With Other Scripts - Archive of obsolete content
a page-mod and a con
text-menu) they can directly communicate by dispatching and listening for customevents on dom objects they can access (e.g.
...this is true as long as both con
text scripts have direct access to the same dom objects.
...elf.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="
text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = documen...
Interacting with page scripts - Archive of obsolete content
cloneinto() creates a structured clone of the object in the target con
text, and returns a reference to the clone.
... "page.html" and attaches a content script to it: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.open({ url: self.data.url("page.html"), onready: attachscript }); function attachscript(tab) { tab.attach({ contentscriptfile: self.data.url("content-script.js") }); } the content script defines a function greetme() and exports it to the page script con
text.
...elf.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="
text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = new cus...
Open and Save Dialogs - Archive of obsolete content
fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filter
text | nsifilepicker.filterall); the first example will add filters for html and for image files.
... the second example will add filters for
text files and for all files.
... the user therefore has the option to display
text files only or all files.
Updating Commands - Archive of obsolete content
for example, the paste command is valid when a
textbox has the focus and there is something on the clipboard to paste.
... the command will become enabled whenever a
textbox is focused and when the clipboard contents change.
... select: occurs when the selected
text changes.
Using Visual Studio as your XUL IDE - Archive of obsolete content
compared to a simple
text-editor, visual studio gives you some special features when writing xul: intellisense / autocompletion for elements and attributes validation syntax coloring (okay, more sophisticated editors like notepad++ provide this as well) before you can use all of this, you have to adjust visual studio a little.
...>
text editor > file extension and add the extension "xul" with "xml editor".
...5.2
text preprocessor the mozilla build system includes a
text preprocessor.
Writing Skinnable XUL and CSS - Archive of obsolete content
skin files that don't import any other skin files, but that are only intended to be used in the con
text of another component's skin are also considered derived skin files, since they are implicitly importing information from the other component's skin.
...they should instead rely on the con
text in which they will appear for color, font, and border information.
...xul overlays, however, should not, since they will be used in the con
text of other skins.
arrowscrollbox - Archive of obsolete content
low"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...disabled elements are usually drawn with grayed-out
text.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width disabled type: boolean gets and sets the value of the disabled attribute.
dialog - Archive of obsolete content
tonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="
text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="tru...
...e"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <
textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... title type: string the
text to appear in the title bar of the window.
grid - Archive of obsolete content
the second column is twice as big as the first column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <
textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevent...
...s, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ...
...ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeat...
keyset - Archive of obsolete content
attributes disabled examples <keyset> <key id="sample-key" modifiers="shift" key="r"/> </keyset> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...disabled elements are usually drawn with grayed-out
text.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
listhead - Archive of obsolete content
disabled elements are usually drawn with grayed-out
text.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, g...
notification - Archive of obsolete content
if this is left out, no
text appears.
...be aware, however, that some elements, such as
textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easi...
...for
textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the
textbox.value and menulist.value syntax.
prefwindow - Archive of obsolete content
reaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-...
...backup"/> <
textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... title type: string the
text to appear in the title bar of the window.
progressmeter - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...for
textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the
textbox.value and menulist.value syntax.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfea...
query - Archive of obsolete content
for sql datasources, the query should contain an sql statement as
text.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width pro...
...perties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), g...
radiogroup - Archive of obsolete content
disabled elements are usually drawn with grayed-out
text.
...be aware, however, that some elements, such as
textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easi...
...for
textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the
textbox.value and menulist.value syntax.
scale - Archive of obsolete content
disabled elements are usually drawn with grayed-out
text.
...be aware, however, that some elements, such as
textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easi...
...for
textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the
textbox.value and menulist.value syntax.
spinbuttons - Archive of obsolete content
for instance, spinbuttons are used for the number type
textbox, and with the timepicker and datepicker.
... attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheigh...
...t, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), qu...
titlebar - Archive of obsolete content
buttons inside it can't be clicked and
textboxes can't be focused with the mouse.
... -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute,...
toolbaritem - Archive of obsolete content
the element is used, for example, to hold the location bar's
textbox in firefox.
... <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
treecols - Archive of obsolete content
attributes pickertooltip
text properties accessibletype examples (example needed) attributes pickertooltip
text type: string the
text for the tooltip on the column picker.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeat...
wizardpage - Archive of obsolete content
attributes description, label, next, pageid properties next, pageid attributes description type: string descriptive
text to appear in addition to the dialog title.
...if this is left out, no
text appears.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(),...
Windows and menus in XULRunner - Archive of obsolete content
here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="
text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
...the dtd is used to create entity references so strings for titles and labels are not stored directly in the xul file; this makes updating the
text -- and localization of the application -- much easier.
... building on the simple window code, here is what xul menus and toolbars look like: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="
text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuitem label="&file.new;" oncommand="dofilenew();"/> ...
2006-10-13 - Archive of obsolete content
user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=347230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a
textfield where you can type in the installation directory.
... firefox browser problem: width:30ex does not respect font discussion about a font rendering problem with firefox print on the firefox con
text menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=204519 is a wontfix.
... (user feels print belongs on the con
text menu along with back, reload, etc.) questions about programming for firefox a student questions how to create an extension that changes fonts, and how to capture website content before it is displayed.
Extentsions FAQ - Archive of obsolete content
how to get the value of a
text box when a button is clicked?
...however, it's functional and does allow for the explorer to be handling the display of the folder contents, and all of the right-click con
text menu support is present so it should meet my needs.
... asking for help in knowing the data that is typed into
text boxes.
NPP_Print - Archive of obsolete content
an embedded plug-in shares printing with the browser; the plug-in prints the part of the page it occupies, and the browser handles everything else, including displaying print dialog boxes, getting the printer device con
text, and any other tasks involved in printing, as well as printing the rest of the page.
... ms windows on ms windows printinfo->print.embedprint.platformprint is the device con
text (dc) handle.
...this means that you need to convert the x-y coordinates using the windows api call dptolp when you output
text.
Getting Started - Archive of obsolete content
to get the most from this tutorial, you will need a
text editor and a rss reader.
... note: a word processor is not a
text editor.
... if a word processor is used, you must make sure to save your rss files in a (pure and plain)
text format.
title - Archive of obsolete content
it is used to specify thetitle of a <channel>, an <image>, an <item>, or a <
textinput>.
... the rsstitle element contain onlyplain
text data.
...td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss image element</td> <td><image></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss
text input element</td> <td><
textinput></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </table> </center> see also none rss element</td> <th colspan="9" style="
text-align:center">rss version ...
Sunbird Theme Tutorial - Archive of obsolete content
to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain
text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end.
... creating information about your theme in your theme directory, create a plain
text file named <tt>install.rdf</tt>.
... registering your theme to register your theme, create a plain
text file named <tt>chrome.manifest</tt>.
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w3c feature or recommended replacement deprecated font html 4.01 span plus css1 color: ; font-family: ; font-size: ; deprecated center or align="center" css1
text-align: center; for in-line elements like
text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scripting n...
...value) ie5+ formname.inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ formctrlname dom level 1: document.forms["formname"].formctrlname ie5+ document.forms(0) dom level 1: document.forms[0] ie elemref.inner
text dom level 1 (core) interface we could introduce dom 3 core
textcontent attribute here which is supported by mozilla 1.5+ and is a perfect equivalent to inner
text.
... http://www.w3.org/tr/2004/rec-dom-le...e3-
textcontent ie5+ elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie5+ elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; ie5+ new activexobject("microsoft.xmlhttp") new xmlhttprequest() proprietary or deprecated feature w3c feature or recommended replacement ...
-ms-block-progression - Archive of obsolete content
remarks in vertical layout,
text lines are rotated 90° clockwise.
...box layout in vertical orientations is exactly analogous to layout in the horizontal orientation: width, height, top, bottom, right, and left do not rotate with the
text.
... this property is based on the block-progression property of the css3
text layout module.
E4X for templating - Archive of obsolete content
ach line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} </vbox> the following example shows iteration over an e4x object itself: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} or if the e4x child element had its own children and
text: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem.
text()} {elem.somechild}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} sorting /* @param {xmllist} xmllist the xmllist to sort @param {function} h the sorting handler */ function sort (xmllist, h) { var k, arr=[], ret = <></>; for (k in xmllist) { if (xmllist.hasownproperty(k...
... ret += new xml(item); } else { var ser = (new xmlserializer()).serializetostring(item); ret += new xml(ser); } }); return ret; } example: var fruits = <fruits> <item>pear</item> <item>banana</item> <item>grapes</item> </fruits>; alert( // using a javascript 1.8 expression closure <output> {sort(fruits.*, function (a, b) a.
text() > b.
text() /*
text() call may not be necessary */ )} </output>.toxmlstring() ); /* <output> <item>banana</item> <item>grapes</item> <item>pear</item> </output> */ the above utility also works if the input is an htmlcollection, an array of strings, an array of dom objects, or an array of e4x objects (assuming the comparison function is changed or adapted accordingly).
...although a big advantage of e4x is being able to separate presentation from business logic, and the above-mentioned technique may fly in the face of this, if formatted well, it can also allow inline shaping of xml somewhat akin to the w3c standard xquery language, allowing the scripting to mix in con
text with the surrounding declarative xml: var a = <a><b/><c/><d/></a>; var b = <bar>{function () { var content = <></>; for each (var el in a) { el.@att = 'val'; content += el; } return content; }()}</bar>; giving: <bar> <b att="val"/> <c att="val"/> <d att="val"/> </bar> one may still wish to remove complex business logic and supply as variables to the e4x, ...
Mozilla MathML Status
altimg, altimg-width, altimg-height, altimg-valign, alt
text accepted, but do not have any effect on the rendering.
... m
text implemented.
...we are only interested in supporting attributes "inherited from the surrounding con
text", which are those effectively used in practice.
TraceMalloc
pe count bytes count bytes count bytes %total total 48942 4754774 76136 6566453 27194 1811679 100.00 nstokenallocator 17 110007 60 388260 43 278253 15.36 nsimagegtk 476 2197708 341 2366564 -135 168856 9.32 nsmemcacherecord 843 45767 2328 124767 1485 79000 4.36 ns
textnode 209 11704 1614 90384 1405 78680 4.34 htmlattributesimpl 482 14288 2824 88400 2342 74112 4.09 nsscanner 58 76824 94 146300 36 69476 3.83 nsscripterror 253 25070 842 91548 589 66478 3.67 nshtmldocument.mreferrer 177 21550 691 85460 514 63910 3.53 nsht...
...build/dist/minefield.app/contents/macos/firefox --trace-malloc /dev/null --shutdown-leaks=sdleak.log # convert raw log to
text representation of call trees perl source/tools/trace-malloc/diffbloatdump.pl --depth=15 --use-address /dev/null sdleak.log > sdleak.tree.raw # frobulate trees to remove extraneous junk perl source/tools/rb/fix-macosx-stack.pl sdleak.tree.raw > sdleak.tree you can also use the leakstats program to analyze a log for shutdown leaks.
...<script type="
text/javascript"> var filename = window.prompt("filename to log: "); if (filename) tracemallocdumpallocations(filename); </script> one can then use the script tools/trace-malloc/diffbloatdump.pl to compare trace-malloc dumps before and after doing an action that might leak.
Phishing: a short definition
verification via
text message if a service supports verification, via sms, it sends a
text message with a one-time pin to the user’s phone number.
...this was chosen as an early second factor 'protocol' as
text messages are widely supported, however, even nist no longer recommends sms verification.
... the ss7 telephony system is vulnerable, making eavesdropping, or rerouting
text messages quite trivial.
Profile Manager
the profile will be backed up, and the backup will appear under the backups column in the main display: to restore a profile: select the backup in the main display, open the con
text menu, and choose "restore".
... to delete a backup: select the backup in the main display, open the con
text menu, and choose "delete".
... other operations con
text-clicking any profile in the profile list will cause a popup menu to appear with the following commands: copy - makes a copy of the profile using a name and location of your choice.
Midas editor module security preferences
to protect users' private information, unprivileged scripts cannot invoke the cut, copy, and paste commands in midas, which is mozilla's rich
text editor component.
... this means that the corresponding buttons on the mozilla rich
text editing demo page will not work.
... open the user.js file from that directory in a
text editor.
An overview of NSS Internals
you must know which data you are expecting, and use the correct template for parsing, based on the con
text of your software's interaction.
...create a con
text handle while providing all the parameters required for the operation, then call an “update” function multiple times to pass subsets of the input to nss.
... the data will be processed and either returned directly or sent to a callback function registered in the con
text.
Certificate functions
4 and later cert_filtercertlistforusercerts mxr 3.6 and later cert_findcertbydercert mxr 3.2 and later cert_findcertbyissuerandsn mxr 3.2 and later cert_findcertbynickname mxr 3.2 and later cert_findcertbynicknameoremailaddr mxr 3.2 and later cert_findcertbysubjectkeyid mxr 3.7 and later cert_findcer
textension mxr 3.4 and later cert_findcertissuer mxr 3.3 and later cert_findkeyusageextension mxr 3.4 and later cert_findsmimeprofile mxr 3.2 and later cert_findsubjectkeyidextension mxr 3.7 and later cert_findusercertbyusage mxr 3.4 and later cert_findusercertsbyusage mxr 3.4 and later cert_finish...
...rt_formatname mxr 3.2 and later cert_freedistnames mxr 3.2 and later cert_freenicknames mxr 3.2 and later cert_getavatag mxr 3.2 and later cert_getcertchainfromcert mxr 3.4 and later cert_getcertemailaddress mxr 3.2 and later cert_getcertificatenames mxr 3.10 and later cert_getcertificatereques
textensions mxr 3.10 and later cert_getcertissuerandsn mxr 3.2 and later cert_getcertnicknames mxr 3.2 and later cert_getcerttrust mxr 3.2 and later cert_getcertuid mxr 3.2 and later cert_getclassicocspdisabledpolicy mxr 3.12 and later cert_getclassicocspenabledhardfailurepolicy mxr 3.12 and later ...
...rtlistnode mxr 3.6 and later cert_rfc1485_escapeandquote mxr 3.2 and later cert_savesmimeprofile mxr 3.2 and later cert_setsloptime mxr 3.2 and later cert_setocspfailuremode mxr 3.11.7 and later cert_setocsptimeout mxr 3.12 and later cert_setusepkixforvalidation mxr 3.12 and later cert_startcer
textensions mxr 3.5 and later cert_startcertificaterequestattributes mxr 3.10 and later cert_startcrlentryextensions mxr 3.10 and later cert_startcrlextensions mxr 3.10 and later cert_uncachecrl mxr 3.10 and later cert_verifycertname mxr 3.2 and later cert_verifycacertforusage mxr 3.6 and later cer...
NSS 3.12.5 release_notes
(see ssl.h) error codes: ssl_error_decompression_failure (see sslerr.h) ssl_error_renegotiation_not_allowed (see sslerr.h) new con
text initialization and shutdown functions see nss.h for details.
... the 2 new functions are: nss_initcon
text nss_shutdowncon
text parameters for these functions are used to initialize softoken.
...memory for the strings are owned by the caller, who is free to free them once nss_con
textinit returns.
NSS Sample Code Sample_1_Hashing
*/ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[4096]; unsigned char digest[64]; unsigned int len; unsigned int digestlen; hash_hashtype hashtype; hashcon
text *hashcon
text = null; hashtype = hash_gethashtypebyoidtag(hashoidtag); hashcon
text = hash_create(hashtype); if (hashcon
text == null) { return secfailure; } do { hash_begin(hashcon
text); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcon
text, ibuf, nb); ...
... } hash_end(hashcon
text, digest, &len, 64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcon
text != null) hash_destroy(hashcon
text); return secsuccess; } /* * this sample computes the hash of a file and saves it * to another file.
NSS Sample Code Sample_2_Initialization of NSS
clude <pk11func.h> #include "util.h" /* print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -d <dbdirpath> [-p <plainpasswc>]" " [-f <passwdffile>]\n\n", progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-15s specify a plain
text password\n\n", "-p <plainpasswc>"); fprintf(stderr, "%-15s specify a password file\n\n", "-f <plainpasswc>"); exit(-1); } /* initialize the slot password */ char *initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null; secupwdata *pwd...
...ata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plain
text) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output t...
...rt_free(p1); } fclose(input); fclose(output); return p0; } /* change the password */ secstatus changepw(pk11slotinfo *slot, char *oldpass, char *newpass, char *oldpwfile, char *newpwfile) { secstatus rv; secupwdata pwdata; secupwdata newpwdata; char *oldpw = null; char *newpw = null; if (oldpass) { pwdata.source = pw_plain
text; pwdata.data = oldpass; } else if (oldpwfile) { pwdata.source = pw_fromfile; pwdata.data = oldpwfile; } else { pwdata.source = pw_none; pwdata.data = null; } if (newpass) { newpwdata.source = pw_plain
text; newpwdata.data = newpass; } else if (newpwfile) { newpwdata.source = pw_fromfile; newpwdata.data = n...
NSS Sample Code Utilities_1
this code shows the following: extract seed from noise file read der encoding from a file extract the password from a
text file get the module password print as ascii or hexadecimal sample code #include <prlog.h> #include <termios.h> #include <base64.h> #include <unistd.h> #include <sys/stat.h> #include <prprf.h> #include "util.h" /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
...n(phrase)-1] = 0; /* validate password */ if (!(*ok)(phrase)) { if (!istty) return 0; fprintf(output, "password must be at least 8 characters long with one or more\n"); fprintf(output, "non-alphabetic characters\n"); continue; } return (char*) port_strdup(phrase); } } /* * filepasswd extracts the password from a
text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be entered in the command line is not a feasible option.
...r_stderr, "incorrect password/pin entered.\n"); return null; } switch (pwdata->source) { case pw_none: sprintf(prompt, "enter password or pin for \"%s\":", pk11_gettokenname(slot)); return getpassword(stdin, stdout, prompt, checkpassword); case pw_fromfile: pw = filepasswd(slot, retry, pwdata->data); pwdata->source = pw_plain
text; pwdata->data = pl_strdup(pw); return pw; case pw_plain
text: return pl_strdup(pwdata->data); default: break; } pr_fprintf(pr_stderr, "password check failed: no password found.\n"); return null; } /* * generaterandom */ secstatus generaterandom(unsigned char *rbuf, int rsize) { char meter[] = { "\r| ...
NSS Sample Code sample2
*/ #include "nss.h" #include "pk11pub.h" /* example key & iv */ unsigned char gkey[] = {0xe8, 0xa7, 0x7c, 0xe2, 0x05, 0x63, 0x6a, 0x31}; unsigned char giv[] = {0xe4, 0xbb, 0x3b, 0xd3, 0xc3, 0x71, 0x2e, 0x58}; int main(int argc, char **argv) { ck_mechanism_type ciphermech; pk11slotinfo* slot = null; pk11symkey* symkey = null; secitem* secparam = null; pk11con
text* enccon
text = null; secitem keyitem, ivitem; secstatus rv, rv1, rv2; unsigned char data[1024], buf1[1024], buf2[1024]; int i, result_len, tmp1_outlen, tmp2_outlen; /* initialize nss * if your application code has already initialized nss, you can skip it * here.
...buf1 len must be atleast (data len + 8) */ tmp1_outlen = tmp2_outlen = 0; /* create cipher con
text */ enccon
text = pk11_createcon
textbysymkey(ciphermech, cka_encrypt, symkey, secparam); rv1 = pk11_cipherop(enccon
text, buf1, &tmp1_outlen, sizeof(buf1), data, strlen(data)+1); rv2 = pk11_digestfinal(enccon
text, buf1+tmp1_outlen, &tmp2_outlen, sizeof(buf1)-tmp1_outlen); pk11_destroycon
text(enccon
text, ...
...buf2 len must be atleast buf1 len */ tmp1_outlen = tmp2_outlen = 0; /* create cipher con
text */ enccon
text = pk11_createcon
textbysymkey(ciphermech, cka_decrypt, symkey, secparam); rv1 = pk11_cipherop(enccon
text, buf2, &tmp1_outlen, sizeof(buf2), buf1, result_len); rv2 = pk11_digestfinal(enccon
text, buf2+tmp1_outlen, &tmp2_outlen, result_len-tmp1_outlen); pk11_destroycon
text(enccon
text, pr_true); result_len = tmp1_outle...
Hashing - sample 1
*/ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[4096]; unsigned char digest[64]; unsigned int len; hash_hashtype hashtype; hashcon
text *hashcon
text = null; hashtype = hash_gethashtypebyoidtag(hashoidtag); hashcon
text = hash_create(hashtype); if (hashcon
text == null) { return secfailure; } do { hash_begin(hashcon
text); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcon
text, ibuf, nb); ...
... } hash_end(hashcon
text, digest, &len, 64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcon
text != null) hash_destroy(hashcon
text); return secsuccess; } /* * this sample computes the hash of a file and saves it * to another file.
Initialize NSS database - sample 2
/* * print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -d [-p ]" " [-f ]\n\n", progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d "); fprintf(stderr, "%-15s specify a plain
text password\n\n", "-p "); fprintf(stderr, "%-15s specify a password file\n\n", "-f "); exit(-1); } /* * initslotpassword */ char * initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; ...
... if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plain
text) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); ret...
...(p1)); port_free(p1); } fclose(input); fclose(output); return p0; } /* * changepw */ secstatus changepw(pk11slotinfo *slot, char *oldpass, char *newpass, char *oldpwfile, char *newpwfile) { secstatus rv; secupwdata pwdata; secupwdata newpwdata; char *oldpw = null; char *newpw = null; if (oldpass) { pwdata.source = pw_plain
text; pwdata.data = oldpass; } else if (oldpwfile) { pwdata.source = pw_fromfile; pwdata.data = oldpwfile; } else { pwdata.source = pw_none; pwdata.data = null; } if (newpass) { newpwdata.source = pw_plain
text; newpwdata.data = newpass; } else if (newpwfile) { newpwdata.source = pw_fromfile; newpwdata.data = n...
sample1
*/ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[4096]; unsigned char digest[64]; unsigned int len; unsigned int digestlen; hash_hashtype hashtype; hashcon
text *hashcon
text = null; hashtype = hash_gethashtypebyoidtag(hashoidtag); hashcon
text = hash_create(hashtype); if (hashcon
text == null) { return secfailure; } do { hash_begin(hashcon
text); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcon
text, ibuf...
..., nb); } hash_end(hashcon
text, digest, &len, 64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustration let's print it in hex.
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcon
text != null) hash_destroy(hashcon
text); return secsuccess; } /* * this sample computes the hash of a file and saves it to another file.
DelayNode() - Web APIs
syntax var delaynode = new delaynode(con
text); var delaynode = new delaynode(con
text, options); parameters inherits parameters from the audionodeoptions dictionary.
... con
text a reference to an audiocon
text or offlineaudiocon
text.
... example const audioctx = new audiocon
text(); const delaynode = new delaynode(audioctx, { delaytime: 0.5, maxdelaytime: 2, }); specifications specification status comment web audio apithe definition of 'delaynode()' in that specification.
DelayNode.delayTime - Web APIs
delaytime is expressed in seconds, its minimal value is 0, and its maximum value is defined by the maxdelaytime argument of the audiocon
text.createdelay() method that created it.
... syntax var audioctx = new audiocon
text(); var mydelay = audioctx.createdelay(5.0); mydelay.delaytime.value = 3.0; note: though the audioparam returned is read-only, the value it represents is not.
... var audiocon
text = window.audiocon
text || window.webkitaudiocon
text; var audioctx = new audiocon
text(); var synthdelay = audioctx.createdelay(5.0); ...
Document.caretRangeFromPoint() - Web APIs
null, if x or y are negative, outside viewport, or there is no
text entry node.
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> javascript function insertbreakatpoint(e) { let range; let
textnode; let offset; if (document.caretpositionfrompoint) { range = document.caretpositionfrompoint(e.clientx, e.clienty);
textnode = range.offsetnode; offset = range.offset; } else if (document.caretrangefrompoint) { range = document.caretrangefrompoint(e.clientx, e.clienty);
textnode = range.startcontainer; offset = range.startoffset; } // only split
text_nodes ...
...if (
textnode &&
textnode.nodetype == 3) { let replacement =
textnode.split
text(offset); let br = document.createelement('br');
textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); } result ...
Document.execCommand() - Web APIs
note that internet explorer uses this to set the
text background color.
...(not supported by internet explorer.) defaultparagraphseparator changes the paragraph separator used when new paragraphs are created in editable
text regions.
...(internet explorer inserts a paragraph at the insertion point and deletes the selection.) insert
text inserts the given plain
text at the insertion point (deletes selection).
Document.getElementsByTagNameNS() - Web APIs
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="
text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = allparas.length; alert("there are " + num + " <p> elements in this document"); } function div1paraelems() { var div1 = document.getelementbyid("div1") var div1paras = div1.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var n...
...rt("there are " + num + " <p> elements in div1 element"); } function div2paraelems() { var div2 = document.getelementbyid("div2") var div2paras = div2.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div2paras.length; alert("there are " + num + " <p> elements in div2 element"); } </script> </head> <body style="border: solid green 3px"> <p>some outer
text</p> <p>some outer
text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1
text</p> <p>some div1
text</p> <p>some div1
text</p> <div id="div2" style="border: solid red 3px"> <p>some div2
text</p> <p>some div2
text</p> </div> </div> <p>some outer
text</p> <p>some outer
text</p> <button onclick="getallparaelems();"> show all p elements in document</b...
...(to accommodate explorer, one could call an xpath wrapper instead of the xpath in the function below (as explorer supports xpath with a different api), such as this wrapper class.) function getelementsbytagnamenswrapper (ns, elname, doc, con
text) { if (!doc) { doc = document; } if (!con
text) { con
text = doc; } var result = doc.evaluate('//*[local-name()="'+elname+'" and namespace-uri() = "'+ns+'"]', con
text, null, xpathresult.ordered_node_snapshot_type, null); var a = []; for(var i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(i); } return a; } specifications ...
Document.write() - Web APIs
the document.write() method writes a string of
text to a document stream opened by document.open().
... syntax document.write(markup); parameters markup a string containing the
text to be written to the document.
... example <html> <head> <title>write example</title> <script> function newcontent() { document.open(); document.write("<h1>out with the old, in with the new!</h1>"); document.close(); } </script> </head> <body onload="newcontent();"> <p>some original document content.</p> </body> </html> notes the
text you write is parsed into the document's structure model.
DocumentOrShadowRoot.getSelection() - Web APIs
the getselection() property of the documentorshadowroot interface returns a selection object representing the range of
text selected by the user, or the current position of the caret.
...to use a selection object as a string, call its tostring() method directly: var selected
text = selobj.tostring(); selobj is a selection object.
... selected
text is a string (selected
text).
Element: compositionend event - Web APIs
the compositionend event is fired when a
text composition system such as an input method editor completes or cancels the current composition session.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="
text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the
textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="
text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <
textarea readonly class="event-log-contents" rows="8" cols="25"...
...></
textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="
text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="
text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.
textcontent = ''; }); function handleevent(event) { log.
textcontent = log.
textcontent + `${event.type}: ${event.data}\n`; } inputeleme...
Element: compositionstart event - Web APIs
the compositionstart event is fired when a
text composition system such as an input method editor starts a new composition session.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="
text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the
textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="
text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <
textarea readonly class="event-log-contents" rows="8" cols="25"...
...></
textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="
text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="
text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.
textcontent = ''; }); function handleevent(event) { log.
textcontent = log.
textcontent + `${event.type}: ${event.data}\n`; } inputeleme...
Element: compositionupdate event - Web APIs
the compositionupdate event is fired when a new character is received in the con
text of a
text composition session controlled by a
text composition system such as an input method editor.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="
text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the
textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="
text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <
textarea readonly class="event-log-contents" rows="8" cols="25"></
texta...
...rea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="
text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="
text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.
textcontent = ''; }); function handleevent(event) { log.
textcontent = log.
textcontent + `${event.type}: ${event.data}\n`; } inputelement.addev...
Element.getClientRects() - Web APIs
originally, microsoft intended this method to return a
textrectangle object for each line of
text.
... firefox 3.5 note firefox 3.5 adds width and height properties to the
textrectangle object.
... strong {
text-align: center; } div { display: inline-block; width: 150px; } div p, ol, table { border: 1px solid blue; } span, li, th, td { border: 1px solid green; } javascript the javascript code draws the client rects for all html elements that have css class withclientrectsoverlay assigned.
Element: mousedown event - Web APIs
when the page loads, constants mypics and con
text are created to store a reference to the canvas and the 2d con
text we will use to draw.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const con
text = mypics.getcon
text('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... // add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(con
text, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(con
text, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(con
text, x1, y1, x2, y2) { con
text.beginpath(); con
text.strokestyle = 'black'; con
text.linewidth = 1; con
text.moveto(x1, y1); con
text.lineto(x2, y2); con
text.stroke(); con
text.closepath(); } result specifications specification status ...
Element: mousemove event - Web APIs
when the page loads, constants mypics and con
text are created to store a reference to the canvas and the 2d con
text we will use to draw.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const con
text = mypics.getcon
text('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... // add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(con
text, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(con
text, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(con
text, x1, y1, x2, y2) { con
text.beginpath(); con
text.strokestyle = 'black'; con
text.linewidth = 1; con
text.moveto(x1, y1); con
text.lineto(x2, y2); con
text.stroke(); con
text.closepath(); } result specifications specification status ...
Element: mouseup event - Web APIs
when the page loads, constants mypics and con
text are created to store a reference to the canvas and the 2d con
text we will use to draw.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const con
text = mypics.getcon
text('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... // add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(con
text, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(con
text, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(con
text, x1, y1, x2, y2) { con
text.beginpath(); con
text.strokestyle = 'black'; con
text.linewidth = 1; con
text.moveto(x1, y1); con
text.lineto(x2, y2); con
text.stroke(); con
text.closepath(); } result specifications specification status ...
Element: paste event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable con
text (for example, in a <
textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.
... examples live example html <div class="source" contenteditable="true">try copying
text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata |...
...| window.clipboarddata).getdata('
text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.create
textnode(paste)); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
GainNode - Web APIs
you shouldn't manually create a gain node; instead, use the method audiocon
text.creategain().
... example the following example shows basic usage of an audiocon
text to create a gainnode, which is then used to mute and unmute the audio when a mute button is clicked by changing the gain property value.
... the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocon
text || window.webkitaudiocon
text)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your brow...
Geolocation - Web APIs
geolocation.getcurrentposition() secure con
text determines the device's current location and gives back a geolocationposition object with the data.
... geolocation.watchposition() secure con
text returns a long value representing the newly established callback function to be invoked whenever the device location changes.
... geolocation.clearwatch() secure con
text removes the particular handler previously installed using watchposition().
GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div id="box"> <div id="
text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px;
text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-c...
...olor: darkgreen; font: 14px "open sans", "arial", sans-serif; } #
text { width: 46px; padding: 10px; position: relative;
text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
...it simply sets the box's animation-play-state to "paused", then updates the
text displayed in the button to indicate that clicking the button will start playing the next iteration of theanimation.
GlobalEventHandlers.onselect - Web APIs
the select event only fires after
text inside an <input type="
text"> or <
textarea> is selected.
... examples this example logs the
text you select inside a <
textarea> element.
... html <
textarea>try selecting some
text in this element.</
textarea> <p id="log"></p> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.
textcontent = `you selected: ${selection}`; } const
textarea = document.queryselector('
textarea');
textarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in that specification.
GlobalEventHandlers - Web APIs
globaleventhandlers.oncon
textmenu is an eventhandler representing the code to be called when the con
textmenu event is raised.
...when the user starts to make a new
text selection on a web page.
...when the
text selected on a web page changes.
HTMLCanvasElement.toBlob() - Web APIs
var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcon
text('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.
textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.url.create...
...objecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to disk with os.file (chrome/add-on con
text only) this technique saves it to the desktop and is only useful in firefox chrome con
text or add-on code as os apis are not present on web sites.
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcon
text('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var r = new filereader(); r.onloadend = function () { // r.result contains the arraybuffer.
HTMLDocument - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">document</
text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmldocument</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLElement.isContentEditable - Web APIs
syntax editable = element.iscontenteditable example html <p id="my
text1">uneditable paragraph</p> <p id="my
text2" contenteditable="true">editable paragraph</p> <p id="info
text1">can edit the first paragraph?
... </p> <p id="info
text2">can edit the second paragraph?
... </p> javascript document.getelementbyid('info
text1').innerhtml += document.getelementbyid('my
text1').iscontenteditable; document.getelementbyid('info
text2').innerhtml += document.getelementbyid('my
text2').iscontenteditable; result specifications specification status comment html living standardthe definition of 'htmlelement.contenteditable' in that specification.
HTMLElement.lang - Web APIs
the htmlelement.lang property gets or sets the base language of an element's attribute values and
text content.
... syntax var languageused = elementnodereference.lang; // get the value of lang elementnodereference.lang = newlanguage; // set new value for lang languageused is a string variable that gets the language in which the
text of the current element is written.
... newlanguage is a string variable with its value setting the language in which the
text of the current element is written.
HTMLElement.oncopy - Web APIs
the copy event fires when the user attempts to copy
text.
... example this example blocks every copy and paste attempt from the <
textarea>.
... html <h3>play with this
text area:</h3> <
textarea id="editor" rows="3">try copying and pasting
text into this field!</
textarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.inner
text = 'copy blocked!\n' + log.inner
text; event.preventdefault(); } function logpaste(event) { log.inner
text = 'paste blocked!\n' + log.inner
text; event.preventdefault(); } const editor = document.getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLElement.oncut - Web APIs
the cut event fires when the user attempts to cut
text.
... example this example allows
text to be copied from the <
textarea>, but doesn't allow
text to be cut.
... html <h3>play with this
text area:</h3> <
textarea id="editor" rows="3">try copying and cutting the
text in this field!</
textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.inner
text = 'copied!\n' + log.inner
text; } function preventcut(event) { event.preventdefault(); log.inner
text = 'cut blocked!\n' + log.inner
text; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = preventcut; result specification whatwg standard ...
HTMLFormElement.elements - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <
textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
... <form id="my-form"> <input type="
text" name="username"> <input type="
text" name="full-name"> <input type="password" name="password"> </form> var inputs = document.getelementbyid("my-form").elements; var inputbyindex = inputs[0]; var inputbyname = inputs["username"]; accessing form controls this example gets the form's element list, then iterates over the list, looking for <input> elements of type "
text" so that some form of processing can be performed on them.
... var inputs = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { if (inputs[i].nodename === "input" && inputs[i].type === "
text") { // update
text input inputs[i].value.tolocaleuppercase(); } } disabling form controls var inputs = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { // disable all form controls inputs[i].setattribute("disabled", ""); } specifications specification status comment html living standardthe definition of 'htmlformelement.elements' in that specification.
HTMLMarqueeElement - Web APIs
tion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... htmlmarqueeelement.behavior sets how the
text is scrolled within the marquee.
... examples <marquee>this
text will scroll from right to left</marquee> <marquee direction="up">this
text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this
text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definiti...
Option() - Web APIs
syntax var optionelementreference = new option(
text, value, defaultselected, selected); parameters
text optional a domstring representing the content of the element, i.e.
... the displayed
text.
...if this is not specified, the value of
text is used as the value, e.g.
HTMLSelectElement.add() - Web APIs
examples creating elements from scratch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1"; opt1.
text = "option: value 1"; opt2.value = "2"; opt2.
text = "option: value 2"; sel.add(opt1, null); sel.add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> */ the before parameter is optional.
... append to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.
text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> */ the before parameter is optional.
... inserting to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.
text = "option: value 3"; sel.add(opt, sel.options[1]); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> <option value="2">option: value 2</option> </select> */ specifications specification status comment html living standardthe definition of 'htmlselectelement.add()' in that ...
Ajax navigation example - Web APIs
ation starts from <strong>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle;
text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer.
...it is shared between all ajax pages.</p> include/before_content.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="
text/html; charset=utf-8" /> <script type="
text/javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { r...
...eturn; } oreq.abort(); closereq(); } function ajaxerror () { alert("unknown error."); } function ajaxload () { var vmsg, nstatus = this.status; switch (nstatus) { case 200: vmsg = json.parse(this.response
text); document.title = opageinfo.title = vmsg.page; document.getelementbyid(stargetid).innerhtml = vmsg.content; if (bupdateurl) { history.pushstate(opageinfo, opageinfo.title, opageinfo.url); bupdateurl = false; } break; default: vmsg = nstatus + ": " + (ohttpstatus[nstatus] || "unknown"); switch (math.floor(nstatus / 100)) { ...
IDBDatabase - Web APIs
note: everything you do in indexeddb always happens in the con
text of a transaction, representing interactions with data in the database.
...lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" hei...
...ght="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">idbdatabase</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
IIRFilterNode() - Web APIs
syntax var iirfilternode = new iirfilternode(con
text, options) parameters inherits parameters from the audionodeoptions dictionary.
... con
text a reference to an audiocon
text.
... examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.0126964558, -1.9991880801, 0.9873035442]; const audiocon
text = window.audiocon
text || window.webkitaudiocon
text; const audioctx = new audiocon
text(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment web audio apithe definition of 'iirfilternode()' in that specification.
Basic concepts - Web APIs
indexeddb is an asynchronous api that can be used in most con
texts, including web workers.
...everything you do in indexeddb always happens in the con
text of a transaction.
... full
text searching.
InputEvent() - Web APIs
inputeventinitoptional is a inputeventinit dictionary, having the following fields: inputtype: (optional) a string specifying the type of change for editible content such as, for example, inserting, deleting, or formatting
text.
...this may be an empty string if the change doesn't insert
text (such as when deleting characters, for example).
... datatransfer: (optional) a datatransfer object containing information about rich
text or plain
text data being added to or removed from editible content.
InputEvent.data - Web APIs
this may be an empty string if the change doesn't insert
text (such as when deleting characters, for example).
... examples in the following simple example we've set up an event listener on the input event so that when any change is made to the contents of the <input> element (either by typing or pasting), the
text that was added is retrieved via the inputevent.data property and reported in the paragraph below the input.
... <p>some
text to copy and paste.</p> <input type="
text"> <p class="result"></p> var editable = document.queryselector('input') var result = document.queryselector('.result'); editable.addeventlistener('input', (e) => { result.
textcontent = "inputted
text: " + e.data; }); specifications specification status comment input events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
the datatransfer read-only property of the inputevent interface returns a datatransfer object containing information about rich
text or plain
text data being added to or removed from editible content.
... <p><span style="font-weight: bold; color: blue">whoa, bold blue
text!</span></p> <p><span style="font-style: italic; color: red">exciting: italic red
text!</span></p> <p>boring normal
text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferob...
...j; editable.addeventlistener('input', (e) => { result.
textcontent = e.datatransfer.getdata('
text/html'); }); specifications specification status comment input events level 2the definition of 'datatransfer' in that specification.
Intersection Observer API - Web APIs
lid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; margin: 0; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3em; height: 18px; padding: 2px;
text-align: center; } .topleft { left: 2px; top: 2px; } .topright { right: 2px; top: 2px; } .bottomleft { bottom: 2px; left: 2px; } .bottomright { bottom: 2px; right: 2px; } let observers = []; startup = () => { let wrapper = document.queryselector(".wrapper"); // options for the observers let observeroptions = { root: null, rootmargin: "0px", threshold: [] ...
... if one of the containing elements is the root of a nested browsing con
text (such as the document contained in an <iframe>, the intersection rectangle is clipped to the containing con
text's viewport, and recursion upward through the containers continues with the container's containing block.
...ackground-color: rgba(40, 40, 190, 255); border: 4px solid rgb(20, 20, 120); transition: background-color 1s, border 1s; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; padding: 20px; } .vertical { color: white; font: 32px "arial"; } .extra { width: 350px; height: 350px; margin-top: 10px; border: 4px solid rgb(20, 20, 120);
text-align: center; padding: 20px; } javascript finally, let's take a look at the javascript code that uses the intersection observer api to make things happen.
KeyboardEvent: code values - Web APIs
"" 0xe04f "end" "end" 0xe050 "arrowdown" "arrowdown" 0xe051 "pagedown" "pagedown" 0xe052 "insert" "insert" 0xe053 "delete" "delete" 0xe054 ~ 0xe05a "unidentified" "" 0xe05b "metaleft" "osleft" 0xe05c "metaright" "osright" 0xe05d "con
textmenu" "con
textmenu" 0xe05e "power" "" 0xe05f ~ 0xe064 "unidentified" "" 0xe065 "browsersearch" "browsersearch" 0xe066 "browserfavorites" "browserfavorites" 0xe067 "browserrefresh" "browserrefresh" 0xe068 "browserstop" "browserstop" 0xe069 "browserforward" "browserforward" ...
... 0x007e "unidentified" "numpadchangesign" 0x007f "pause" "pause" 0x0080 "unidentified" "" 0x0081 "numpadcomma" "" 0x0082 "lang1" "hangulmode" 0x0083 "lang2" "hanja" 0x0084 "intlyen" "intlyen" 0x0085 "osleft" "osleft" 0x0086 "osright" "osright" 0x0087 "con
textmenu" "con
textmenu" 0x0088 "browserstop" "cancel" 0x0089 "again" "" 0x008a "props" "" 0x008b "undo" "undo" 0x008c "select" "" 0x008d "copy" "copy" 0x008e "open" "" 0x008f "paste" "paste" 0x0090 "find" "" 0x0091 "cut" "cut" 0x0092 "help...
...eup" 0x0074 "power" 0x0075 "numpadequal" 0x0076 "unidentified" 0x0077 "pause" 0x0078 "unidentified" 0x0079 "numpadcomma" 0x007a "lang1" 0x007b "lang2" 0x007c "intlyen" 0x007d "metaleft" 0x007e "metaright" 0x007f "con
textmenu" 0x0080 "browserstop" 0x0081 "again" 0x0082 "props" 0x0083 "undo" 0x0084 "select" 0x0085 "copy" 0x0086 "open" 0x0087 "paste" 0x0088 "find" 0x0089 "cut" 0x008a "help" 0x008b ~ 0x008d "unidentified" 0x008e "sleep" ...
MediaElementAudioSourceNode() - Web APIs
syntax var myaudiosource = new mediaelementaudiosourcenode(con
text, options); parameters inherits parameters from the audionodeoptions dictionary.
... con
text an audiocon
text representing the audio con
text you want the node to be associated with.
... example var ac = new audiocon
text(); var mediaelement = document.createelement('audio'); var options = { mediaelement : mediaelement } var myaudiosource = new mediaelementaudiosourcenode(ac, options); specifications specification status comment web audio apithe definition of 'mediaelementaudiosourcenode' in that specification.
MediaSource - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" hei...
...ght="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">mediasource</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
... mediasource.activesourcebuffers read only returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within mediasource.sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden
text tracks.
MediaStreamAudioDestinationNode.MediaStreamAudioDestinationNode() - Web APIs
syntax var myaudiodest = new mediastreamaudiodestinationnode(con
text, options); parameters inherits parameters from the audionodeoptions dictionary.
... con
text an audiocon
text representing the audio con
text you want the node to be associated with.
... example var ac = new audiocon
text(); var mydestination = new mediastreamaudiodestinationnode(ac); specifications specification status comment web audio apithe definition of 'mediastreamaudiodestinationnode' in that specification.
MediaStreamAudioSourceNode() - Web APIs
note: another way to create a mediastreamaudiosourcenode is to call theaudiocon
text.createmediastreamsource() method, specifying the stream from which you want to obtain audio.
... syntax audiosourcenode = new mediastreamaudiosourcenode(con
text, options); parameters con
text an audiocon
text representing the audio con
text you want the node to be associated with.
... // define variables var audioctx = new (window.audiocon
text || window.webkitaudiocon
text)(); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints: audio and video for this app { audio: true, video: false }).then(function(stream) { var options = { mediastream : stream } ...
MessageEvent - Web APIs
nline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">event</
text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">messageevent</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
... messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.
textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworkerglobalscope.onconnect handler to connect to the same port discussed above.
MessagePort: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script creates a messagechannel and sends one of the ports to a different browsing con
text, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessa...
...ge('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages on it using code like this: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.
textcontent = event.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.
textcontent = event.data; }; }); specifications specification status html living standard living standard ...
ParentNode.append() - Web APIs
domstring objects are inserted as equivalent
text nodes.
... examples appending an element let parent = document.createelement("div") let p = document.createelement("p") parent.append(p) console.log(parent.childnodes) // nodelist [ <p> ] appending
text let parent = document.createelement("div") parent.append("some
text") console.log(parent.
textcontent) // "some
text" appending an element and
text let parent = document.createelement("div") let p = document.createelement("p") parent.append("some
text", p) console.log(parent.childnodes) // nodelist [ #
text "some
text", <p> ] parentnode.append() is unscopable the append() method is not scope...
...argitem : document.create
textnode(string(argitem))); }); this.appendchild(docfrag); } }); }); })([element.prototype, document.prototype, documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.append()' in that specification.
PaymentItem - Web APIs
properties amount secure con
text a paymentcurrencyamount object describing the monetary value of the item.
... label secure con
text a string specifying a human-readable name or description of the item or service being charged for.
... pending secure con
text a boolean value which is true if the specified amount has not yet been finalized.
Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); checkoutbutton.inner
text = "loading..."; if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.inner
text = "fast checkout with w3c"; } else { checkoutbutton.inner
text = "setup w3c checkout"; } }).catch(function(...
... checkoutbutton.inner
text = "checkout with w3c"; }); } note: see our customizing the payment button demo for the full code.
... showing additional user interface after successful payments if the merchant desires to collect additional information not part of the api (e.g., additional delivery instructions), the merchant can show a page with additional <input type="
text"> fields after the checkout.
PerformanceNavigationTiming - Web APIs
position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">performanceentry</
text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" ...
...y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
... performancenavigationtiming.redirectcount read only a number representing the number of redirects since the last non-redirect navigation under the current browsing con
text.
PeriodicWave - Web APIs
the periodicwave itself is created/returned by audiocon
text.createperiodicwave().
...if you wish to establish custom property values at the outset, use the audiocon
text.createperiodicwave() factory method instead.
... var real = new float32array(2); var imag = new float32array(2); var ac = new audiocon
text(); var osc = ac.createoscillator(); real[0] = 0; imag[0] = 0; real[1] = 1; imag[1] = 0; var wave = ac.createperiodicwave(real, imag, {disablenormalization: true}); osc.setperiodicwave(wave); osc.connect(ac.destination); osc.start(); osc.stop(2); this works because a sound that contains only a fundamental tone is by definition a sine wave here, we create a periodicwave with two values.
Permissions API - Web APIs
the permissions api provides a consistent programmatic way to query the status of api permissions attributed to the current con
text.
... the permissions property has been made available on the navigator object, both in the standard browsing con
text and the worker con
text (workernavigator — so permission checks are available inside workers), and returns a permissions object that provides access to the permissions api functionality.
... interfaces navigator.permissions and workernavigator.permissions read only provides access to the permissions object from the main con
text and worker con
text respectively.
PositionOptions - Web APIs
properties positionoptions.enablehighaccuracy secure con
text is a boolean that indicates the application would like to receive the best possible results.
... positionoptions.timeout secure con
text is a positive long value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position.
... positionoptions.maximumage secure con
text is a positive long value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return.
ProcessingInstruction - Web APIs
isplay: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">characterdata</
text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" ...
...y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">processinginstruction</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specification status comment domthe definition of 'processinginstruction' in that specification.
PromiseRejectionEvent - Web APIs
the promiserejectionevent interface represents events which are sent to the global script con
text when javascript promises are rejected.
...yle="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">event</
text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" he...
...ight="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">promiserejectionevent</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
PublicKeyCredential.response - Web APIs
in order to validate the creation of credentials, a relying party's server needs both: this response the extensions of the client (given by publickeycredential.getclien
textensionresults()) to validate the demand.
... note: this property may only be used in top-level con
texts and will not be available in an <iframe> for example.
...e corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var response = pubkeycredential.response; var clien
textresults = pubkeycredential.getclien
textensionresults(); // send response and client extensions to the server so that it can validate // and create credentials }).catch(function (err) { // deal with any error }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'response' in...
PublicKeyCredentialRequestOptions.extensions - Web APIs
this
text is displayed on a prompt of the authenticator before verifying the user or testing their presence.
... the client outputs a usvstring which is the
text as it was displayed (line breaks may have been added).
...this is used to display an image or some non-
textual content on the authenticator before verifying the user or testing their presence.
RTCIceCandidate.usernameFragment - Web APIs
if you instead call rtcicecandidate() with a string parameter containing the candidate m-line
text, the value of usernamefragment is extracted from the m-line.
... randomization at least 24 bits of the
text in the ufrag are required to be randomly selected by the ice layer at the beginning of the ice session.
... the specifics for which bits are random and what the remainder of the ufrag
text are are left up to the browser implementation to decide.
ReadableStream.cancel() - Web APIs
var searchterm = "service workers"; // chars to show either side of the result in the match var con
textbefore = 30; var con
textafter = 30; var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new
textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ?
... searchterm.tolowercase() : searchterm; var buffersize = math.max(tomatch.length - 1, con
textbefore); var bytesreceived = 0; var buffer = ''; var matchfoundat = -1; return reader.read().then(function process(result) { if (result.done) { console.log('failed to find match'); return; } bytesreceived += result.value.length; console.log(`received ${bytesreceived} bytes of data so far`); buffer += decoder.decode(result.value, {stream: true}); // already found match & just con
text-gathering?
...buffer.tolowercase() : buffer).indexof(tomatch); } if (matchfoundat === -1) { buffer = buffer.slice(-buffersize); } else if (buffer.slice(matchfoundat + tomatch.length).length >= con
textafter) { console.log("here's the match:") console.log(buffer.slice( math.max(0, matchfoundat - con
textbefore), matchfoundat + tomatch.length + con
textafter )); console.log("cancelling fetch"); reader.cancel(); return; } else { console.log('found match, but need more con
text…'); } // keep reading return reader.read().then(process); }); }).catch(err => { console.log("something went wrong.
ReadableStream.getReader() - Web APIs
function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function process
text({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); para.
textcontent = value; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.
textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(process
text); }); } specifications specification status comment streamsthe definition of 'getreader()' in that specification.
ReadableStream.tee() - Web APIs
function teestream() { const teedoff = stream.tee(); fetchstream(teedoff[0], list2); fetchstream(teedoff[1], list3); } function fetchstream(stream, list) { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function process
text({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.
textcontent = 'read ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list.appendchild(listitem); // read some more, and call this function again return reader.read().then(process
text); }); } specifications specification status comment streamsthe definition of 'tee()' in that specification.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function process
text({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); para.
textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.
textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(process
text); }); } specifications specification status comment streamsthe definition of 'readablestreamdefaultreader()' in that specification.
ReadableStreamDefaultReader.cancel() - Web APIs
function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function process
text({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); reader.cancel(); para.
textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.
textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(process
text); }); } specifications specification status comment streamsthe definition of 'cancel()' in that specification.
SVGElement - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">element</
text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">svgelement</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
Screen Wake Lock API - Web APIs
if ('wakelock' in navigator) { issupported = true; statuselem.
textcontent = 'screen wake lock api supported!'; } else { wakebutton.disabled = true; statuselem.
textcontent = 'wake lock is not supported by this browser.'; } requesting a wake lock the following example demonstrates how to request a wakelocksentinel object.
... // create a reference for the wake lock let wakelock = null; // create an async function to request a wake lock const requestwakelock = async () => { try { wakelock = await navigator.wakelock.request('screen'); // change up our interface to reflect wake lock active statuselem.
textcontent = 'wake lock is active!'; } catch (err) { // if wake lock request fails - usually system related, such as battery statuselem.
textcontent = `${err.name}, ${err.message}`; } } releasing wake lock the following example shows how to release the previously acquired wake lock.
... wakelock.addeventlistener('release', () => { // the wake lock has been released statuselem.
textcontent = 'wake lock has been released'; }); reacquiring a wake lock the following code reacquires the wake lock should the visibility of the document change and the wake lock is released.
ScriptProcessorNode.bufferSize - Web APIs
syntax var audioctx = new audiocon
text(); var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); value an integer.
... example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocon
text.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocon
text and buffer source var audioctx = new audiocon
text(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); ...
ScriptProcessorNode.onaudioprocess - Web APIs
syntax var audioctx = new audiocon
text(); var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); scriptnode.onaudioprocess = function() { ...
... } example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocon
text.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocon
text and buffer source var audioctx = new audiocon
text(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); ...
ScriptProcessorNode - Web APIs
the size of the input and output buffer are defined at the creation time, when the audiocon
text.createscriptprocessor() method is called (both are defined by audiocon
text.createscriptprocessor()'s buffersize parameter).
... examples the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocon
text.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... note: for a full working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocon
text and buffer source var audioctx = new audiocon
text(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); ...
SharedWorker - Web APIs
the sharedworker interface represents a specific kind of worker that can be accessed from several browsing con
texts, such as several windows, iframes or even workers.
... note: if sharedworker can be accessed from several browsing con
texts, all those browsing con
texts must share the exact same origin (same protocol, host and port).
... messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.
textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworkerglobalscope.onconnect handler to connect to the same port discussed above.
SourceBuffer - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" he...
...ight="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">sourcebuffer</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
... sourcebuffer.
texttracks read only a list of the
text tracks currently contained inside the sourcebuffer.
SpeechSynthesisUtterance - Web APIs
speechsynthesisutterance.
text gets and sets the
text that will be synthesised when the utterance is spoken.
... inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), use the constructor to create a new utterance instance containing the
text from the
text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
... var synth = window.speechsynthesis; var voices = synth.getvoices(); var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.
textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance' in that specif...
StorageEstimate - Web APIs
properties quota secure con
text a numeric value in bytes which provides a conservative approximation of the total storage the user's device or computer has available for the site origin or web app.
... usage secure con
text a numeric value in bytes approximating the amount of storage space currently being used by the site or web app, out of the available space as indicated by quota.
... usagedetails secure con
text a dictionary containing a breakdown of usage by storage system.
StorageEvent - Web APIs
a storageevent is sent to a window when a storage area it has access to is changed within the con
text of another document.
...nline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">event</
text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">storageevent</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring represents the key changed.
StorageManager - Web APIs
methods storagemanager.estimate() secure con
text returns a promise that resolves to a storageestimate object containing usage and quota numbers for your origin.
... storagemanager.persist() secure con
text returns a promise that resolves to true if the user agent is able to persist your site's storage.
... storagemanager.persisted() secure con
text returns a promise that resolves to true if persistence has already been granted for your site's storage.
SubtleCrypto.deriveBits() - Web APIs
namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.
textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely const generatealiceskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); const generatebob...
...*/ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new
textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive some bits from a password supplied by the user.
... "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.
textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { getderivedbits(); }); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.derivebits()' in that specification.
TimeEvent - Web APIs
the timeevent interface, a part of svg smil animation, provides specific con
textual information associated with time events.
...nline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">event</
text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fil...
...l="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">timeevent</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
VTTRegion - Web APIs
the vttregion interface—part of the api for handling webvtt (
text tracks on media presentations)—describes a portion of the video to render a vttcue onto.
...var cue = new vttcue(2, 3, 'cool
text to be displayed'); cue.region = region; // this cue will be drawn only within this region.
... specifications specification status comment webvtt: the web video
text tracks format candidate recommendation ...
WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
syntax gl.ge
textension('webgl_debug_shaders').gettranslatedshadersource(shader); parameters shader a webglshader to get the translated source from.
...an empty string is returned, if: no source has been defined or, webglrenderingcon
text.compileshader() has not yet been called or, the translation for the shader failed.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcon
text('webgl'); var shader = gl.createshader(gl.fragment_shader); gl.shadersource(shader, 'void main() { gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0); }'); gl.compileshader(shader); var src = gl.ge
textension('webgl_debug_shaders').gettranslatedshadersource(shader); console.log(src); // "void main(){ // (gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0)); // }" specifications specification status comment webgl_debug_shadersthe definition of 'webgl_debug_shaders.gettranslatedshadersource' in that specification.
WaveShaperNode.curve - Web APIs
syntax var audioctx = new audiocon
text(); var distortion = audioctx.createwaveshaper(); distortion.curve = mycurvedataarray; // mycurvedataarray is a float32array value a float32array.
... example the following example shows basic usage of an audiocon
text to create a wave shaper node.
... var audioctx = new (window.audiocon
text || window.webkitaudiocon
text)(); var distortion = audioctx.createwaveshaper(); ...
WebGLShaderPrecisionFormat - Web APIs
the webglshaderprecisionformat interface is part of the webgl api and represents the information returned by calling the webglrenderingcon
text.getshaderprecisionformat() method.
... examples a webglshaderprecisionformat object is returned by the webglrenderingcon
text.getshaderprecisionformat() method.
... var canvas = document.getelementbyid('canvas'); var gl = canvas.getcon
text('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat' in that specification.
Hello GLSL - Web APIs
hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body {
text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script...
... type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcon
text())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(...
...ays(gl.points, 0, 1); cleanup(); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcon
text() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcon
text("webgl") || canvas.getcon
text("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl con
text." + "your browser or device may not support webgl."; retu...
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body {
text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0,...
...} </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcon
text())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(...
...fer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcon
text() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcon
text("webgl") || canvas.getcon
text("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl con
text." + "your browser or device may not support webgl."; retu...
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body {
text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisp...
...lay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcon
text())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misse...
... + 120 * randnums[1] ]; rect.position = [ randnums[2]*(gl.drawingbufferwidth - rect.size[0]), gl.drawingbufferheight ]; rect.velocity = 1.0 + 6.0*math.random(); rect.color = getrandomvector(); gl.clearcolor(rect.color[0], rect.color[1], rect.color[2], 1.0); function getrandomvector() { return [math.random(), math.random(), math.random()]; } } function getrenderingcon
text() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcon
text("webgl") || canvas.getcon
text("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl con
text." + "your browser or device may not support webgl."; retu...
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body {
text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl con
text, and the color and //...
...var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcon
text())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top.
... position = [ math.random()*(gl.drawingbufferwidth - size[0]), gl.drawingbufferheight ]; // random velocity between 1.0 and 7.0 velocity = 1.0 + 6.0*math.random(); color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); } } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } function getrenderingcon
text() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcon
text("webgl") || canvas.getcon
text("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl con
text." + "your browser or device may not support webgl."; retu...
WebGL types - Web APIs
webgl 1 these types are used within a webglrenderingcon
text.
...used for example in webglrenderingcon
text.clear().
... webgl 2 these types are used within a webgl2renderingcon
text.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
offsetting positions within a reference space the simplest case for using getoffsetreferencespace() is to transform a point or matrix within the con
text of the same space.
...this commonly happens when your user interface provides a way to preview the scene inline within the con
text of a web page, with a button or other control to switch to immersive mode.
... <<<--- more
text and example about how to handle rendering during lost tracking --->>> when tracking resumes you can detect when tracking has resumed after being lost when the user position jumps while at the same time the value of emulatedposition changes from true to false.
Web Speech API - Web APIs
the web speech api has two parts: speechsynthesis (
text-to-speech), and speechrecognition (asynchronous speech recognition.) web speech concepts and usage the web speech api makes web apps able to handle voice data.
... there are two components to this api: speech recognition is accessed via the speechrecognition interface, which provides the ability to recognize voice con
text from an audio input (normally via the device's default speech recognition service) and respond appropriately.
...grammar is defined using jspeech grammar format (jsgf.) speech synthesis is accessed via the speechsynthesis interface, a
text-to-speech component that allows programs to read out their
text content (normally via the device's default speech synthesiser.) different voice types are represented by speechsynthesisvoice objects, and different parts of
text that you want to be spoken are represented by speechsynthesisutterance objects.
WheelEvent - Web APIs
nline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">event</
text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill=...
..."#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">uievent</
text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">mouseevent</
text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" s...
...troke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">wheelevent</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
Window.crypto - Web APIs
although window.crypto is available on all windows, the returned crypto object only has one usable feature in insecure con
texts: the getrandomvalues() method.
... in general, you should use this api only in secure con
texts.
... javascript genrandomnumbers = function getrandomnumbers() { var array = new uint32array(10); window.crypto.getrandomvalues(array); var rand
text = document.getelementbyid("myrand
text"); rand
text.innerhtml = "the random numbers are: " for (var i = 0; i < array.length; i++) { rand
text.innerhtml += array[i] + " "; } } html <p id="myrand
text">the random numbers are: </p> <button type="button" onclick='genrandomnumbers()'>generate 10 random numbers</button> result specifications specification status comment ...
Window.find() - Web APIs
syntax window.find(astring, acasesensitive, abackwards, awraparound, awholeword, asearchinframes, ashowdialog); astring the
text string for which to search.
... example javascript findstring = function find
text(
text) { alert("string \x22" +
text + "\x22 found?
... " + window.find(
text)); } html <p>apples, bananas, and oranges.</p> <button type="button" onclick='findstring("apples")'>search for apples</button> <button type="button" onclick='findstring("banana")'>search for banana</button> <button type="button" onclick='findstring("orange")'>search for orange</button> result notes in some browsers, window.find() selects (highlights) the found content on the site.
Window.getComputedStyle() - Web APIs
examples in this example we style a <p> element, then retrieve those styles using getcomputedstyle(), and print them into the
text content of the <p>.
... html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif;
text-align: center; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.
textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; result description the returned object is the same cssstyledeclaration type as the object returned from the element's style property.
...non-elements, like a
text node, will throw an error.
Window.name - Web APIs
gets/sets the name of the window's browsing con
text.
... syntax string = window.name; window.name = string; example <script> // open a tab with a specific browsing con
text name const othertab = window.open("url1", "_blank"); if (othertab) othertab.name = "other-tab"; </script> <a href="url2" target="other-tab">this link will be opened in the other tab.</a> notes the name of the window is used primarily for setting targets for hyperlinks and forms.
... browsing con
texts do not need to have names.
Window.self - Web APIs
the advantage of the standalone notation is that a similar notation exists for non-window con
texts, such as in web workers.
... by using self, you can refer to the global scope in a way that will work not only in a window con
text (self will resolve to window.self) but also in a worker con
text (self will then resolve to workerglobalscope.self).
... if (window.parent.frames[0] != window.self) { // this window is not the first frame in the list } furthermore, when executing in the active document of a browsing con
text, window is a reference to the current global object and thus all of the following are equivalent: var w1 = window; var w2 = self; var w3 = window.window; var w4 = window.self; // w1, w2, w3, w4 all strictly equal, but only w2 will function in workers specifications specification status comment html living standardthe definition of 'window.self' in that specification.
Window.sessionStorage - Web APIs
opening a page in a new tab or window creates a new session with the value of the top-level browsing con
text, which differs from how session cookies work.
... sessionstorage.setitem('mycat', 'tom'); the following example autosaves the contents of a
text field, and if the browser is refreshed, restores the
text field content so that no writing is lost.
... // get the
text field that we're going to track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.getitem("autosave")) { // restore the contents of the
text field field.value = sessionstorage.getitem("autosave"); } // listen for changes in the
text field field.addeventlistener("change", function() { // and save the results into the session storage object sessionstorage.setitem("autosave", field.value); }); note: please refer to the using the web storage api article for a full example.
WritableStream.WritableStream() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all ch...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.
textcontent = "chunk decoded: " + decoded; ...
... list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStream.getWriter() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all ch...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.
textcontent = "chunk decoded: " + decoded; ...
... list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStream - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all ch...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.
textcontent = "chunk decoded: " + decoded; ...
... list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all ch...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.
textcontent = "chunk decoded: " + decoded; ...
... list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.close() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all ch...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.
textcontent = "chunk decoded: " + decoded; ...
... list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.write() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensure that all ch...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.
textcontent = "chunk decoded: " + decoded; ...
... list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new
textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready again to ensu...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new
textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.
textco...
...ntent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.
textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
XMLDocument - Web APIs
lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">eventtarget</
text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
... fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">node</
text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><
text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">document</
text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><
text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"
text-anchor="middle" alignment-baseline="middle">xmldocument</
text></a></svg></div> a:hover
text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
HTML in XMLHttpRequest - Web APIs
this limitation avoids wasting time parsing html uselessly when legacy code uses xmlhttprequest in the default mode to retrieve response
text for
text/html resources.
... also, this limitation avoids problems with legacy code that assumes that responsexml is null for http error pages (which often have a
text/html response body).
...for older browsers, you can even use the xmlhttprequest.response
text property in association with regular expressions in order to get, for example, the source code of an html element given its id: function gethtml (oxhr, stargetid) { var ropen = new regexp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + stargetid + "[\"\'][^>]*>" ,"i"), ssrc = oxhr.response
text, aexec = ropen.exec(ssrc); return aexec ?
XMLHttpRequest.getResponseHeader() - Web APIs
the xmlhttprequest method getresponseheader() returns the string containing the
text of a particular header's value.
... syntax var myheader = xmlhttprequest.getresponseheader(headername); parameters headername a bytestring indicating the name of the header you want to return the
text value of.
... return value a bytestring representing the header's
text value, or null if either the response has not yet been received or the header doesn't exist in the response.
XMLHttpRequest.responseType - Web APIs
if an empty string is set as the value of responsetype, the default value of
text is used.
... the values supported by responsetype are the following: "" an empty responsetype string is treated the same as "
text", the default type.
...
text the response is a
text in a domstring object.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
note also that we set oncon
textmenu up to be ignored by calling preventdefault() on those events.
... this prevents the right-clicks from causing the con
text menu from appearing in the browser.
... canvas.oncon
textmenu = (event) => { event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.
inset-block - CSS: Cascading Style Sheets
the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and
text orientation.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specifica...
inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and
text orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' in that spec...
inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and
text orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-start' in that ...
inset-inline - CSS: Cascading Style Sheets
the inset-inline css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and
text orientation.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specifi...
<length> - CSS: Cascading Style Sheets
lengths can be used in numerous css properties, such as width, height, margin, padding, border-width, font-size, and
text-shadow.
... note: many users increase their user agent's default font size to make
text more legible.
... html <div class="outer"> <div class="input-container"> <label>enter width:</label> <input type="
text" id="length"> </div> <div class="inner"> </div> </div> <div class="results"> </div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width: 100%; height: 50px; background-color: #eee; position: relative; } .inner { height: 50px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -...
margin-block-end - CSS: Cascading Style Sheets
the margin-block-end css property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and
text orientation.
... syntax /* <length> values */ margin-block-end: 10px; /* an absolute length */ margin-block-end: 1em; /* relative to the
text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
the margin-block-start css property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and
text orientation.
... syntax /* <length> values */ margin-block-start: 10px; /* an absolute length */ margin-block-start: 1em; /* relative to the
text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-start' in that specification.
margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and
text orientation.
... /* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /* relative to the
text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and
text orientation.
... /* <length> values */ margin-inline: 10px 20px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the
text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline' in that specification.
max-block-size - CSS: Cascading Style Sheets
this is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your
text content, you need to be able to do so with the writing direction in mind.
... the writing modes lr, lr-tb, rl, rb, and rb-tl are no longer allowed in html con
texts; they may only be used in svg 1.x con
texts.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max-block-size with horizontal and vertical
text in this example, the same
text (the opening sentences from herman melville's novel moby-dick) is presented in both the horizontal-tb and vertical-rl writing modes.
max() - CSS: Cascading Style Sheets
this ensure it is legible and ensures accessibility <h1>this
text is always legible, but doesn't change size</h1> <h1 class="responsive">this
text is always legible, and is responsive, to a point</h1> think of the max() function as finding the minimum value allowed for a property.
... accessibility concerns when max() is used for controlling
text size, make sure the
text is always large enough to read.
...for example: small { font-size: max(min(0.5vw, 0.5em), 1rem); } this ensures a minimum size of 1rem, with a
text size that scales if the page is zoomed.
outline-color - CSS: Cascading Style Sheets
color contrast ratio is determined by comparing the luminosity of the
text and background color values.
... in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for
text content and 3:1 for larger
text such as headings.
... large
text is defined as 18.66px and bold or larger, or 24px or larger.
overflow-block - CSS: Cascading Style Sheets
if content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting con
text.
...nitial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> — hides the
text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </div> </li> <li><code>overflow-block:visible</code> — displays the
text outside the box if needed <div id="div3"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and
text orientation.
... /* <length> values */ padding-block: 10px 20px; /* an absolute length */ padding-block: 1em 2em; /* relative to the
text size */ padding-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and
text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical
text html <div> <p class="example
text">example
text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .example
text { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block...
paint-order - CSS: Cascading Style Sheets
the paint-order css property lets you control the order in which the fill and stroke (and painting markers) of
text content and shapes are drawn.
...they do not apply to html
text, so in that case, you can only determine the order of stroke and fill.
... formal definition initial valuenormalapplies to
text elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <
text x="10" y="75">stroke in front</
text> <
text x="10" y="150" class="stroke-behind">stroke behind</
text> </svg> css
text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specificatio...
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <
text>, <
textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="...
... candidate recommendation definition for shapes and
texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-opacity' in that specification.
... recommendation initial definition for shapes and
texts ...
stroke-width - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on shapes and
text con
text elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <
text>, <
textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes ...
... candidate recommendation definition for shapes and
texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-width' in that specification.
... recommendation initial definition for shapes and
texts ...
visibility - SVG: Scalable Vector Graphics
note: if the visibility attribute is set to hidden on a
text element, then the
text is invisible but still takes up space in
text layout calculations.
... as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <
text>, <
textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="2...
...it may receive pointer events depending on the pointer-events attribute, may receive focus depending on the tabindex attribute, contributes to bounding box calculations and clipping paths, and does affect
text layout.
xlink:arcrole - SVG: Scalable Vector Graphics
the xlink:arcrole attribute specifies a con
textual role for the element and corresponds to the rdf primer notion of a property.
... this con
textual role can differ from the meaning of the resource when taken outside the con
text of this particular arc.
... for example, a resource might generically represent a "person," but in the con
text of a particular arc it might have the role of "mother" and in the con
text of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <
textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended property.
xlink:title - SVG: Scalable Vector Graphics
it may be used, for example, to make titles available to applications used by visually impaired users, or to create a table of links, or to present help
text that appears when a user lets a mouse pointer hover over a starting resource.
... these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <
textpath>, <tref>, and <use> usage con
text value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
... candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <lineargradient>, <pattern>, <radialgradient>, <script>, <
textpath>, and <use> scalable vector graphics (svg) 1.1 (second edition)the definition of 'seed' in that specification.
<feComponentTransfer> - SVG: Scalable Vector Graphics
usage con
text categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface.
... id="gamma" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" amplitude="4" exponent="7" offset="0"></fefuncr> <fefuncg type="gamma" amplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <
text x="0" y="20">default</
text> <rect x="0" y="30" width="100%" height="20"></rect> <
text x="0" y="70">identity</
text> <rect x="0" y="80" width="100%" height="20" style="filter:url(#identity)"></rect> <
text x="0" y="120">table lookup</
text> <rect x="0" y="130" width="100%" height="20" style="filter:url(#table)"></rect> <
text x="0" y="170">discrete table lookup</
text> <rect...
... x="0" y="180" width="100%" height="20" style="filter:url(#discrete)"></rect> <
text x="0" y="220">linear function</
text> <rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect> <
text x="0" y="270">gamma function</
text> <rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
usage con
text categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in operator radius dom interface this element implements the svgfemorphologyelement interface.
... examples filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <
text y="1em">normal
text</
text> <
text id="thin" y="2em">thinned
text</
text> <
text id="thick" y="3em">fattened
text</
text> </svg> css
text { font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/>...
... </filter> </svg> <p>normal
text</p> <p id="thin">thinned
text</p> <p id="thick">fattened
text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
<feSpecularLighting> - SVG: Scalable Vector Graphics
such a map is intended to be combined with a
texture using the add term of the arithmetic <fecomposite> method.
... multiple light sources can be simulated by adding several of these light maps before applying it to the
texture image.
... usage con
text categoriesfilter primitive elementpermitted contentexactly one light source element first and any number of descriptive elements in any order.
<foreignObject> - SVG: Scalable Vector Graphics
in the con
text of a browser, it is most likely (x)html.
... html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html
text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the con
text of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the con
text of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...a-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-value
text, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<foreignobject>' in that specification.
<svg> - SVG: Scalable Vector Graphics
value type: <string> ; default value:
text/css; animatable: no height the displayed height of the rectangular viewport.
...a-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-value
text, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <...
...
text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<switch> - SVG: Scalable Vector Graphics
usage con
text categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <
text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired tran...
... svg <switch> example this example demonstrates showing different
text content depending on the browser's language settings.
... html content <svg viewbox="0 -20 100 50"> <switch> <
text systemlanguage="ar">مرحبا</
text> <
text systemlanguage="de,nl">hallo!</
text> <
text systemlanguage="en-us">howdy!</
text> <
text systemlanguage="en-gb">wotcha!</
text> <
text systemlanguage="en-au">g'day!</
text> <
text systemlanguage="en">hello!</
text> <
text systemlanguage="es">hola!</
text> <
text systemlanguage="fr">bonjour!</
text> <
text systemlanguage="ja">こんにちは</
text> <
text systemlanguage="ru">Привет!</
text> <
text>☺</
text> </switch> </svg> resu...
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
the <title> element provides an accessible, short-
text description of any svg container element or graphics element.
...
text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip.
... if an element can be described by visible
text, it is recommended to reference that
text with an aria-labelledby attribute rather than using the <title> element.
<tref> - SVG: Scalable Vector Graphics
the
textual content for a <
text> svg element can be either character data directly embedded within the <
text> element or the character data content of a referenced element, where the referencing is specified with a <tref> element.
... usage con
text categories
text content element,
text content child elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatecolor>, <set> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgtrefelement interface.
... example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <
text id="referenced
text"> referenced character data </
text> </defs> <
text x="100" y="100" font-size="45" > inline character data </
text> <
text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referenced
text"/> </
text> <!-- show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg> specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font>' in that specification.
SVG element reference - SVG: Scalable Vector Graphics
<fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <
text> <
textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unkn...
...femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <
text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgra...
...dient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <
text>, <
textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use>
text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <
textpath>, <
text>, <tref>, <tspan>
text content child elements <altglyph>, <
textpath>, <tref>, <tspan> uncategorized elements <clippath>, <color-profile>, <cursor>, <filter>, <foreignobject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> obsolete and deprecated elements warning: these are old svg elements which ...
Example - SVG: Scalable Vector Graphics
view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='
text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label {
text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opaci...
... </p> <div> (c) 2006 <a id='emailme' href='#'>nick johnson</a> <script type='
text/javascript'> <![cdata[ // foil spam bots var email = '@riovia.net'; email ='nick' + email; document.getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all.
...velocity:</label> <input id='max_velocity' value='15'/> <br/> <label>attraction to cursor:</label> <input id='attract_cursor' value='6'/> <br/> <label>repulsion from peers:</label> <input id='repel_peer' value='5'/> <br/> </p> </form> <script type='
text/javascript'> <![cdata[ // array of motes var motes; // get the display element.
Toolbars - Archive of obsolete content
for example, the mozilla browser window contains a
textbox that displays the page url.
...of course you wouldn't normally put a
textbox in a vertical toolbar.
Using the standard theme - Archive of obsolete content
applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
... multiple <tt>xml-stylesheet</tt> processing instructions simply add one <tt>xml-stylesheet</tt> processing instruction for every style sheet you want to associate with your xul file: <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="
text/css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the css <tt>@import</tt> rule: @import url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="
text/css"?
XUL Changes for Firefox 1.5 - Archive of obsolete content
this element works similarly to the <listbox> which is designed primarily for lists of
textual items.
... <menulist> items in a <menulist> support the description attribute to allow for extra descriptive
text to appear beside an item's label.
action - Archive of obsolete content
examples example needed attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getele...
assign - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
bbox - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
binding - Archive of obsolete content
properties object, predicate, subject examples fixme: (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, d...
bindings - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
box - Archive of obsolete content
amples <box orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
broadcaster - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
broadcasterset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
browser - Archive of obsolete content
contentprincipal type: nsiprincipal this read-only property contains the principal for the content loaded in the browser, which provides security con
text information.
... webbrowserfind type: nsiwebbrowserfind this read-only property contains an nsiwebbrowserfind object which can be used to search for
text in the document.
column - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
columns - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
commandset - Archive of obsolete content
select: occurs when the selected
text changed.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
conditions - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
deck - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
dropmarker - Archive of obsolete content
examples properties accessibletype attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(),...
grippy - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
groupbox - Archive of obsolete content
properties accessibletype examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(),...
hbox - Archive of obsolete content
example <!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
listcol - Archive of obsolete content
s> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
listcols - Archive of obsolete content
istcol flex="1"/> <listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
member - Archive of obsolete content
properties child, container examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
menubar - Archive of obsolete content
statusbar type: id if you set this attribute to the id of a statusbar element, the label on the statusbar will update to the status
text of the items on the menu as the user moves the mouse over them.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), get...
notificationbox - Archive of obsolete content
finding the current notification box within a firefox extension, you can retrieve the current notification box for a specific tab by calling the global function getnotificationbox(): notifybox = chromewin.getnotificationbox(notifywindow) notifybox = getnotificationbox(notifywindow) // applies to current con
text's window object here, chromewin is the xul window (usually just window), and notifywindow is the web content window for the tab you want to find the notification box for.
... properties currentnotification, allnotifications, notificationshidden methods appendnotification, getnotificationwithvalue, removeallnotifications, removecurrentnotification, removenotification, removetransientnotifications, attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
observes - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
page - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width ...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagname...
param - Archive of obsolete content
the value to bind should be
text as a child of the param element.
... type type: one of the values below the type of the parameter's value integer 32 bit integer int64 64 bit integer double double-precision floating-point number string string literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
popupset - Archive of obsolete content
examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" con
text="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, pop...
...up, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattribut...
preferences - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods void firechangedevent(in domelement preference); creates and dispatches a changed (non-bubbling) event to the specified preference element.
queryset - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties inh...
...erited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getus...
resizer - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
row - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
rows - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
script - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
scrollbox - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
scrollcorner - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width prop...
...erties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), ge...
separator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
spacer - Archive of obsolete content
examples <box> <button label="left"/> <spacer flex="1"/> <button label="right"/> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
splitter - Archive of obsolete content
the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltip
text="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
stack - Archive of obsolete content
--> </hbox> </stack> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
statusbar - Archive of obsolete content
properties accessibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), get...
stringbundleset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribute...
tabpanel - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
template - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
toolbargrippy - Archive of obsolete content
properties accessible examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
toolbarpalette - Archive of obsolete content
examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltip
text="&mytip
text;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minw...
...idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), ...
toolbarseparator - Archive of obsolete content
properties accessibletype examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getc...
toolbarset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), geteleme...
toolbarspacer - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattrib...
toolbarspring - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width pr...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getele...
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </to...
...olbox> <
textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for th...
treechildren - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
treerow - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
treeseparator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
triple - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
vbox - Archive of obsolete content
example <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
...cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), gete...
rule - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
scrollbar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
stringbundle - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
tabpanels - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, con
text, con
textmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, status
text, style, template, tooltip, tooltip
text, top, uri, wait-...
treeitem - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, con
textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , status
text, style, ,, tooltip, tooltip
text, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition,...
CommandLine - Archive of obsolete content
.getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="
text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...
Custom app bundles for Mac OS X - Archive of obsolete content
a xul application for mac os x should follow something similar to this basic directory structure: example.app/ contents/ info.plist (application bundle properties are specified in this xml file.) pkginfo (this is a simple
text file and is created along with the info.plist file) macos/ (the macos folder will contain your xulrunner executable) xulrunner (this is the xulrunner stub) resources/ (this is where you place your xul application code and support files) application.ini (xulrunner-related application settings) example.icns (this is the icon which ...
Make your xulrunner app match the system locale - Archive of obsolete content
from xpcom import components ps_cls = components.classes["@mozilla.org/preferences-service;1"] ps = ps_cls.getservice(components.interfaces.nsiprefservice) branch = ps.getbranch("general.useragent.") branch.setcharpref("locale", lang) i also set the language environment variable to match the system locale so that python's get
text functionality will work (it pulls straight from language instead of using setlocale): os.environ["language"] = lang ...
XULRunner tips - Archive of obsolete content
, "", "chrome"); alternatively, the dom inspector may also be added as an extension: (if you already have inspector installed for another application you can skip to the next step) follow the instructions above through "unzip the package." create a file in the extensions directory of your application with the same name as the dom inspector id (inspector@mozilla.org) containing one line of
text -- the exact path to the root directory of dom inspector (where the install.rdf is) like this one: /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/ now create a javascript file with the following code and include it in the main window of your application: function startdomi() { // load the window datasource so that browser windows opened subsequent to d...
ant script to assemble an extension - Archive of obsolete content
this ant script helps to package an extension <?xml version="1.0"?> this build file was written by régis décamps <decamps@users.sf.net> <project name="blogmark" default="createxpi"> <property name="version" value="1.3-rc1"/> <property name="description" value="new con
text-menu item to add the current page in your blogmarks"/> xpi file is created after "chrome/blogmark.jar" is created, which is then stuffed into "blogmark.xpi" <target name="createxpi" depends="createjar" description="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${version}.xpi"> <zipfileset dir="." includes="chrome/blogmark.jar" /> <zipfi...
application/http-index-format specification - Archive of obsolete content
100: 300: ftp://test.netscape.com/u/montulli 100: 200: filename content-length content-type file-type last-modified 201: foo.txt 512
text/plain file tue,%2015%20nov%201994%2008:12:31%20gmt 201: bar.html 9683
text/html file tue,%2025%20oct%201994%2008:12:31%20gmt 201: foobar 0 application/http-index-format directory tue,%2025%20oct%201994%2008:12:31%20gmt original document information author(s): christian biesinger last updated date: may 10, 2004 copyright information: portions of this content are © 1998–2007 by ...
calIFileType - Archive of obsolete content
defined in calendar/base/public/caliimportexport.idl interface code [scriptable, uuid(efef8333-e995-4f45-bdf7-bfcabbd9793e)] interface califiletype : nsisupports { readonly attribute astring defaul
textension; readonly attribute astring extensionfilter; readonly attribute astring description; }; attributes defaul
textension the default extension that should be associated with files of this type.
reftest opportunities files - Archive of obsolete content
large tests from mozilla source tree parser/htmlparser/tests/html/xmp005.html parser/htmlparser/tests/html/value001.html parser/htmlparser/tests/html/utf8001.html parser/htmlparser/tests/html/usascii.html parser/htmlparser/tests/html/title01.html parser/htmlparser/tests/html/title.html parser/htmlparser/tests/html/tiny.html parser/htmlparser/tests/html/thead001.html parser/htmlparser/tests/html/
text003.html parser/htmlparser/tests/html/
text002.html parser/htmlparser/tests/html/
text001.html parser/htmlparser/tests/html/tbody001.html parser/htmlparser/tests/html/target01.html parser/htmlparser/tests/html/tag008.html parser/htmlparser/tests/html/tag007.html parser/htmlparser/tests/html/tag006.html parser/htmlparser/tests/html/tag005.html parser/htmlparser/tests/html/tag004.html parser/htmlparse...