CanvasPattern.setTransform() - Web APIs
the pattern gets applied if you set it as the current fillstyle and gets drawn onto the canvas when using the fillrect() method, for example. ...
...the pattern gets applied if you set it as the current fillstyle and gets drawn onto the canvas when using the fillrect() method, for example. ...
...the pattern gets applied if you set it as the current fillstyle and gets drawn onto the canvas when using the fillrect() method, for example. ...
...And 6 more matches

SVGTransformable - Web APIs
browser compatibility the compatibility table on this page is generated from structured data. ...
... browser compatibility the compatibility table on this page is generated from structured data. ...
... browser compatibility the compatibility table on this page is generated from structured data. ...
...And 6 more matches

WebGLTransformFeedback - Web APIs
the webgltransformfeedback interface is part of the webgl 2 api and enables transform feedback, which is the process of capturing primitives generated by vertex processing. it allows to preserve the post-transform rendering state of an object and resubmit this data multiple times. ...
... the webgltransformfeedback interface is part of the webgl 2 api and enables transform feedback, which is the process of capturing primitives generated by vertex processing. it allows to preserve the post-transform rendering state of an object and resubmit this data multiple times. ...
...terface is part of the webgl 2 api and enables transform feedback, which is the process of capturing primitives generated by vertex processing. it allows to preserve the post-transform rendering state of an object and resubmit this data multiple times. ...
...And 6 more matches

XRRigidTransform() - Web APIs
these dimensions are specified in meters. if this parameter is left out or is not compatible with dompointinit, the position used is assumed to be {x: 0, y: 0, z: 0, w: 1}. w must always be 1. ...
...these dimensions are specified in meters. if this parameter is left out or is not compatible with dompointinit, the position used is assumed to be {x: 0, y: 0, z: 0, w: 1}. w must always be 1. ...
...these dimensions are specified in meters. if this parameter is left out or is not compatible with dompointinit, the position used is assumed to be {x: 0, y: 0, z: 0, w: 1}. w must always be 1. ...
...And 6 more matches

Basic Transformations - SVG: Scalable Vector Graphics
t distorting our beautiful images. but first, let's formally introduce the <g> element. with this helper, you can assign properties to a complete set of elements. actually, that's its only purpose. an example: <svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg> all following transformations are summed up in an element's transform attribute. transformations can be chained simply by concatenating them, separated by whitespace. translation it may be necessary to move an element around, even though you can position it with the according attributes. for this purpose, the translate() transformation stands ready. <svg width="40" height="50" style="background-color:#bff;"> <rec...
...transform attribute. transformations can be chained simply by concatenating them, separated by whitespace. translation it may be necessary to move an element around, even though you can position it with the according attributes. for this purpose, the translate() transformation stands ready. <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0). if the second value is not given, it is assumed to be 0. rotation rotating an element is quite a common task. ...
...te() transformation stands ready. <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0). if the second value is not given, it is assumed to be 0. rotation rotating an element is quite a common task. use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> this example shows a square that is rotated by 45 degrees. the value for rotate() is given in degrees. multiple transformations transformations can be concatenated easily just by separating them with spaces. for example, translate() and rotate() are common used tra...
...And 6 more matches

XSL Transformations in Mozilla FAQ - Web APIs
use the <?xml-stylesheet ?> processing instruction instead of the non-standard xml:stylesheet. the most common cause is the mime type handling. to find out which mime type your server sends, look at page info, use extensions like livehttpheaders or a download manager like wget. mozilla won't load xslt stylesheets from a different domain for security reasons. ...
...workaround is to add a sufficiently long xml comment to the beginning of your xml file in order to "push" the <feed> or <rss> tag out of the first 512 bytes, which is analyzed by firefox to determine if it's a feed or not. see the discussion on bug #338621 for more information. it works in ie, but not in mozilla? there are even more differences. most come from what we suspect ie to do after the transformation. it (afaict) serializes and parses the output to generate what it actually renders. mozilla in contrast renders exactly the result of your transformation. can i do disable-output-escaping? this is actually pretty close to the question above. and in short, no. disabling output escaping requires us to add a parsing step to our output generation, which we don't. in most cases, there are prett...
...there are pretty easy workarounds. the only use cases we have seen are bad xml or bad xslt. and rss feeds. the latter is pretty much the only issue to us, and we're sorry that we can't support it. but mixing parsing with xslt is brittle and we rather not support d-o-e than either crash or be even slower. ...
...And 5 more matches

Using CSS transforms - CSS: Cascading Style Sheets
by modifying the coordinate space, css transforms change the shape and position of the affected content without disrupting the normal document flow. this guide provides an introduction to using transforms. css transforms are implemented using a set of css properties that let you apply affine linear transformations to html elements. these transformations include rotation, skewing, scaling, and translation both in the plane and in the 3d space. only elements positioned by the box model can be transformed. as a rule of thumb, an element is positioned by the box model if it has display: block. css transforms properties two major properties are used to define css transforms: transform and transform-origin transform-origin specifies the position of the origin. by default, it is at the center ...
...s positioned by the box model can be transformed. as a rule of thumb, an element is positioned by the box model if it has display: block. css transforms properties two major properties are used to define css transforms: transform and transform-origin transform-origin specifies the position of the origin. by default, it is at the center of the element and can be moved. it is used by several transforms, like rotations, scaling or skewing, that need a specific point as a parameter. transform specifies the transforms to apply to the element. it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right to left. examples here is an unaltered image of the mdn logo: ...
...pecifies the transforms to apply to the element. it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right to left. examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner. <img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis. ...
...And 5 more matches

An Overview - XSLT: Extensible Stylesheet Language Transformations
an xslt stylesheet is marked as such by the inclusion of a standard xslt heading. ...
...on of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows. an xslt stylesheet is an xml document. unlike css, which has its own specialized syntax, an xslt stylesheet is an xml document, which must conform to all xml rules, including well-formedness. so the model for transformation is that one xml document is used to transform another xml document. an xslt stylesheet is marked as such by the inclusion of a standard xslt heading. the outermost element in an xslt stylesheet must be the <xsl:stylesheet> element (an acceptable alternate is the <xsl:transform> element). this element will include at least one namespace declaration and the mandatory version attribute. other...
...of a standard xslt heading. the outermost element in an xslt stylesheet must be the <xsl:stylesheet> element (an acceptable alternate is the <xsl:transform> element). this element will include at least one namespace declaration and the mandatory version attribute. other namespaces and three optional attributes may also be included. the mandatory namespace for xslt is "http://www.w3.org/1999/xsl/transform". namespaces are the subject of a fair amount of confusion in xml. despite the fact that very often namespaces appear to be uris, they do not, in fact, refer to a resource located at that address. ...
...And 5 more matches

CanvasRenderingContext2D.setTransform() - Web APIs
the canvasrenderingcontext2d.settransform() method of the canvas 2d api resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. this lets you scale, rotate, translate (move), and skew the context. note: see also the transform() method; instead of overriding the current transform matrix, it multiplies it with a given one. syntax ctx.settransform(a, b, c, d, e, f); ctx.settransform(matrix); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters settransform() has two types of parameter that it can accept. ...
...s it with a given one. syntax ctx.settransform(a, b, c, d, e, f); ctx.settransform(matrix); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters settransform() has two types of parameter that it can accept. the older type consists of several parameters representing the individual components of the transformation matrix to set: a (m11) horizontal scaling. a value of 1 results in no scaling. b (m12) vertical skewing. c (m21) horizontal skewing. d (m22) vertical scaling. a value of 1 results in no scaling. e (dx) horizontal translation (moving). f (dy) vertical translation (moving). ...
... examples skewing a shape this example skews a rectangle both vertically (.2) and horizontally (.8). scaling and translation remain unchanged. ...
...And 4 more matches

CanvasRenderingContext2D.transform() - Web APIs
a value of 1 results in no scaling. b (m12) vertical skewing. c (m21) horizontal skewing. d (m22) vertical scaling. a value of 1 results in no scaling. ...
...a value of 1 results in no scaling. b (m12) vertical skewing. c (m21) horizontal skewing. d (m22) vertical scaling. a value of 1 results in no scaling. ...
...a value of 1 results in no scaling. b (m12) vertical skewing. c (m21) horizontal skewing. d (m22) vertical scaling. a value of 1 results in no scaling. ...
...And 4 more matches

TransformStream - Web APIs
the transformstream interface of the streams api represents a set of transformable data. constructor transformstream() creates and returns a transform stream object from the given handlers. properties transformstream.readable read only the readable end of a transformstream. transformstream.writable read only the writable end of a transformstream. methods none examples anything-to-uint8array stream in the following example, a transform stream passes through all chunks it receives as uint8array values. const transformcontent = { start() {}, // required. ...
...ers. properties transformstream.readable read only the readable end of a transformstream. transformstream.writable read only the writable end of a transformstream. methods none examples anything-to-uint8array stream in the following example, a transform stream passes through all chunks it receives as uint8array values. const transformcontent = { start() {}, // required. ...
...ntroller.terminate() else if (arraybuffer.isview(chunk)) controller.enqueue(new uint8array(chunk.buffer, chunk.byteoffset, chunk.bytelength)) else if (array.isarray(chunk) && chunk.every(value => typeof value === 'number')) controller.enqueue(new uint8array(chunk)) else if ('function' === typeof chunk.valueof && chunk.valueof() !== chunk) this.transform(chunk.valueof(), controller) // hack else if ('tojson' in chunk) this.transform(json.stringify(chunk), controller) break case 'symbol': controller.error("cannot send a symbol as a chunk part") break case 'undefined': controller.error("cannot send undefined as a chunk part") default: controller.enqueue(this.textencoder.encode(string...
...And 4 more matches

WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
the webgl2renderingcontext.transformfeedbackvaryings() method of the webgl 2 api specifies values to record in webgltransformfeedback buffers. syntax void gl.transformfeedbackvaryings(program, varyings, buffermode); parameters program a webglprogram. varyings an array of domstring specifying the the names of the varying variables to use. buffermode a glenum specifying the mode to use when capturing the varying variables. either gl.interleaved_attribs or gl.separate_attribs. return value none. ...
...dback buffers. syntax void gl.transformfeedbackvaryings(program, varyings, buffermode); parameters program a webglprogram. varyings an array of domstring specifying the the names of the varying variables to use. buffermode a glenum specifying the mode to use when capturing the varying variables. either gl.interleaved_attribs or gl.separate_attribs. return value none. ...
...gl.transformfeedbackvaryings(program, varyings, buffermode); parameters program a webglprogram. varyings an array of domstring specifying the the names of the varying variables to use. buffermode a glenum specifying the mode to use when capturing the varying variables. either gl.interleaved_attribs or gl.separate_attribs. return value none. ...
...And 3 more matches

XRRigidTransform.matrix - Web APIs
the read-only xrrigidtransform property matrix returns the transform matrix represented by the object. the returned matrix can then be premultiplied with a column vector to rotate the vector by the 3d rotation specified by the orientation, then translate it by the position. syntax let matrix = xrrigidtransform.matrix; value a float32array containing 16 entries which represents the 4x4 transform matrix which is described by the position and orientation properties. usage notes matrix format all 4x4 transform matrices used in webgl are stored in 16-element float32arrays. the values are stored into the array in column-major order; that is, each column is written into the array top-down before moving to the right one column and writing the next column into the array. thus, for an array [a...
...] & a[12]\\ a[1] & a[5] & a[9] & a[13]\\ a[2] & a[6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[15]\\ \end{bmatrix} the first time matrix is requested, it gets computed; after that, it's should be cached to avoid slowing down to compute it every time you need it. creating the matrix in this section, intended for more advanced readers, we cover how the api calculates the matrix for the specified transform. it begins by allocating a new matrix and writing a 4x4 identity matrix into it: [1000010000100001]\begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix} this is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied. next, the position is placed into the right-hand column, like this, result...
...here px, py, and pz are the values of the x, y, and z members of the dompointreadonly position. ...
...And 3 more matches

XRRigidTransform.position - Web APIs
the units are meters. note: the w component of the point is always 1.0. ...
...the units are meters. note: the w component of the point is always 1.0. ...
...the units are meters. note: the w component of the point is always 1.0. ...
...And 3 more matches

XRRigidTransform - Web APIs
the xrrigidtransform is a webxr api interface that represents the 3d geometric transform described by a position and orientation. xrrigidtransform is used to specify transforms throughout the webxr apis, including: the offset and orientation relative to the parent reference space to use when creating a new reference space with getoffsetreferencespace(). the transform of an xrview. the transform of an xrpose. the xrreferencespaceevent event's transform property, as found in the reset event received by an xrreferencespace. the advantage to using xrrigidtransform in these places rather than bare arrays that providing the matrix data is that the xrrigidtransform automatically does things like computing the inverse of the transform. even better, once it's been computed, it's cached so that sub...
...und in the reset event received by an xrreferencespace. the advantage to using xrrigidtransform in these places rather than bare arrays that providing the matrix data is that the xrrigidtransform automatically does things like computing the inverse of the transform. even better, once it's been computed, it's cached so that subsequent requests are significantly faster. constructor new xrrigidtransform() creates a new xrrigidtransform object which represents a transform that applies a specified position and/or orientation. attributes xrrigidtransform.position read only a dompointreadonly specifying a 3-dimensional point, expressed in meters, describing the translation component of the transform. ...
...cantly faster. constructor new xrrigidtransform() creates a new xrrigidtransform object which represents a transform that applies a specified position and/or orientation. attributes xrrigidtransform.position read only a dompointreadonly specifying a 3-dimensional point, expressed in meters, describing the translation component of the transform. the w attribute is always 1.0. xrrigidtransform.orientation read only a dompointreadonly which contains a unit quaternion describing the rotational component of the transform. as a unit quaternion, its length is always normalized to 1.0. xrrigidtransform.matrix read only returns the transform matrix in the form of a 16-member float32array. see the section matrix format for how the array is used to represent a matrix. xrrigidtransf...
...And 3 more matches

JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
the stylesheet has to be passed in as an xml document, which means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet(). this can be done via xmlhttprequest or xmldocument.load(). ...
...the stylesheet has to be passed in as an xml document, which means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet(). this can be done via xmlhttprequest or xmldocument.load(). ...
...the xml document can be a separate xml file loaded as shown in figure 1, or it can be part of the existing page. to process part of a page's dom, it is necessary to first create an xml document in memory. assuming that the dom to be processed is contained by an elemen...
...And 3 more matches

XRPose.transform - Web APIs
this is the same pose that's returned by the frame's getpose() method. example this handler for the xrsession event select handles events for tracked pointers. ...
...this is the same pose that's returned by the frame's getpose() method. example this handler for the xrsession event select handles events for tracked pointers. ...
...this is the same pose that's returned by the frame's getpose() method. example this handler for the xrsession event select handles events for tracked pointers. ...
...And 2 more matches

XRReferenceSpaceEventInit.transform - Web APIs
examples this simple snippet calls the constructor to create a new reference space event of type reset. ...
... examples this simple snippet calls the constructor to create a new reference space event of type reset. ...
... examples this simple snippet calls the constructor to create a new reference space event of type reset. ...
...And 2 more matches

XRView.transform - Web APIs
the read-only transform property of the xrview interface is an xrrigidtransform object which provides the position and orientation of the viewpoint relative to the xrreferencespace specified when the xrframe.getviewerpose() method was called to obtain the view object. with the transform, you can then position the view as a camera within the 3d scene. if you instead need the more traditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. syntax let viewtransform = xrview.transform; value a xrrigidtransform object specifying the position and orientation of the viewpoint represented by the xrview. ...
...ene. if you instead need the more traditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. syntax let viewtransform = xrview.transform; value a xrrigidtransform object specifying the position and orientation of the viewpoint represented by the xrview. examples for each view making up the presented scene, the view's transform represents the position and orientation of the viewer or camera relative to the reference space's origin. you can then use the inverse of this matrix to transform the objects in your scene to adjust their placement and orientation to simulate the viewer's movement through space. in this example, we see an outline of a code fragment used while rendering an xrframe, which makes use of the view tra...
...g an xrframe, which makes use of the view transform to place objects in the world during rendering. const modelviewmatrix = mat4.create(); const normalmatrix = mat4.create(); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); for (let obj of world.objects) { mat4.multiply(modelviewmatrix, view.transform.inverse.matrix, obj.matrix); mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); obj.render(modelviewmatrix, normalmatrix); } } two matrices are created outside the rendering loop; this avoids repeatedly allocating and deallocating the matrices, and generally reduces overhead by reusing the same matrix for each object rendered. then we iterate...
...And 2 more matches

gradientTransform - SVG: Scalable Vector Graphics
the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox). this allows for things such as skewing the gradient. this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <sto...
...ialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes ...
... <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system. specifications specification status comment css transforms level 1the definition of 'surfacescale for <fespecularlighting>' in that...
...And 2 more matches

<animateTransform> - SVG: Scalable Vector Graphics
the animatetransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. ...
...its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. ...
...by allowing animations to control translation, scaling, rotation, and/or skewing. ...
...And 2 more matches

CanvasRenderingContext2D.getTransform() - Web APIs
the canvasrenderingcontext2d.gettransform() method of the canvas 2d api retrieves the current transformation matrix being applied to the context. syntax let storedtransform = ctx.gettransform(); parameters none. return value a dommatrix object. the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] note: the returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned dommatrix. examples in the following example, we have two <canvas> elements. ...
...n matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] note: the returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned dommatrix. examples in the following example, we have two <canvas> elements. we apply a transform to the first one's context using canvasrenderingcontext2d.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 context 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 { bo...
...ix directly to the second canvas context by passing the dommatrix object directly to settransform(), and draw a circle on it. ...
...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].getcontext('2d'); const ctx2 = canvases[1].getcontext('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 'canvasrenderingcontext2d.gettransform' in that specification. living standard ...

CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcontext2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix. syntax void ctx.resettransform(); examples resetting the matrix this example draws a rotated rectangle after modifying the matrix, and then resets the matrix using the resettransform() method. html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by 45°. the fillrect() method draws a filled rectangle, adjusted according to that matrix. ...
...orm() method. html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by 45°. the fillrect() method draws a filled rectangle, adjusted according to that matrix. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('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. in this example, the first two shapes are drawn with a skew transformation, and the last two are drawn with the identity (regular) transformation. html <canvas id="canvas"></canvas...
...ing transformed shapes, you should call resettransform() before rendering anything else. in this example, the first two shapes are drawn with a skew transformation, and the last two are drawn with the identity (regular) transformation. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('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. ...
...ext('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 'canvasrenderingcontext2d.resettransform' in that specification. living standard ...

Using device orientation with 3D transforms - Developer guides
this article provides tips on how to use device orientation information in tandem with css 3d transforms. using orientation to rotate an element the easiest way to convert orientation data to a 3d transform is basically to use the alpha, gamma, and beta values as rotatez, rotatex and rotatey values. there are however two corrections that should be applied to those values: the initial alpha value is 180 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez...
...x down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey. here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality. this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = ...
...tey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality. ...
...); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality. ...

patternTransform - SVG: Scalable Vector Graphics
the patterntransform attribute defines a list of transform definitions that are applied to a pattern tile. only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile. note: as of svg2, it is also allowed to ...
...30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile. note: as of svg2, it is also allowed to use the css transform property. however, the current state of implementation isn't very good. for backward compatibility reason, it is highly suggested to keep using the patterntransform attribute. ...
...url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile. note: as of svg2, it is also allowed to use the css transform property. however, the current state of implementation isn't very good. for backward compatibility reason, it is highly suggested to keep using the patterntransform attribute. value <transform-list> default value identity transform animatable yes transform functions to know more about the definition of transform functions, see the transform attribute definition. specifications specification status comment scalable vector graphics (svg) 2the definition of 'patterntransform' in that specification. candidate recommendation ...
...sform functions to know more about the definition of transform functions, see the transform attribute definition. specifications specification status comment scalable vector graphics (svg) 2the definition of 'patterntransform' in that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'patterntransform' in that specification. recommendation initial definition ...

Basic Example - XSLT: Extensible Stylesheet Language Transformations
these are the same files used in the generating html example in the xslt in netscape gecko article. the xml file describes an article and the xsl file formats the information for display. figure 4 : xml file <?xml version="1.0"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr. foo</myns:author> <myns:author>mr. bar</myns:author> </myns:authors> <myns:body> the <b>rain</b> in <u>spain</u> stays mainly in the plains. ...
...cle</myns:title> <myns:authors> <myns:author company="foopy corp.">mr. foo</myns:author> <myns:author>mr. bar</myns:author> </myns:authors> <myns:body> the <b>rain</b> in <u>spain</u> stays mainly in the plains. ...
... </xsl:copy> </xsl:template> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> </xsl:stylesheet> the example loads using synchronous xmlhttprequest both the .xsl (xslstylesheet) and the .xml (xmldoc) files into memory. the .xsl file is then imported (xsltprocessor.importstylesheet(xslstylesheet)) and the transformation run (xsltprocessor.transformtofragment(xmldoc, document)). this allows fetching of data after the page has been loaded, without initiating a fresh page load. figure 6 : example var xslstylesheet; var xsltprocessor = new xsltprocessor(); var mydom; var xmldoc; function init(){ // load the xslt file, example1.xsl var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("ge...
...et", "example1.xsl", false); myxmlhttprequest.send(null); xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xml", false); myxmlhttprequest.send(null); xmldoc = myxmlhttprequest.responsexml; var fragment = xsltprocessor.transformtofragment(xmldoc, document); document.getelementbyid("example").innerhtml = ""; mydom = fragment; document.getelementbyid("example").appendchild(fragment); } ...

XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents. although the process is referred to as "transformation," the original document is not changed; rather, a new xml document is created based on the content of an existing document. then, the new document may be serialized (output) by the processor in standard xml syntax or in another format, such as html or plain text. ...
... a new xml document is created based on the content of an existing document. then, the new document may be serialized (output) by the processor in standard xml syntax or in another format, such as html or plain text. xslt is most often used to convert data between different xml schemas or to convert xml data into web pages or pdf documents. documentation xslt element reference reference. ...
...ing document. then, the new document may be serialized (output) by the processor in standard xml syntax or in another format, such as html or plain text. xslt is most often used to convert data between different xml schemas or to convert xml data into web pages or pdf documents. documentation xslt element reference reference. transforming xml with xslt xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format. using the mozilla javascript interface to xsl transformations this document describes the javascript interface to the xslt processing engine in mozilla 1.2 and up. specifying parameters using processing...
...essing instructions firefox allows stylesheet parameters to be specified when using the <?xml-stylesheet?> processing instruction. this is done using the <?xslt-param?> pi described in this document. xslt & xpath tutorial the topxml xslt tutorial introduces you to the basics of xslt concepts, syntax, and programming. xslt tutorial this w3schools tutorial teaches the reader how to use xslt to transform xml documents into other formats, like xhtml. what is xslt? this extensive introduction to xslt and xpath assumes no prior knowledge of the technologies and guides the reader through background, context, structure, concepts and introductory terminology. common xslt errors this article lists some common problems using xslt in firefox. xslt 2.0 (new) view all... community view mozilla ...

CanvasRenderingContext2D.currentTransform - Web APIs
the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specification) or svgmatrix (old specification) object for the current transformation matrix. syntax ctx.currenttransform [= value]; value a dommatrix or svgmatrix object to use as the current transformation matrix. examples manually changing the matrix this example uses the currenttransform property to set a transformation matrix. a rectangle is then drawn using that transformation. ...
...gmatrix object to use as the current transformation matrix. examples manually changing the matrix this example uses the currenttransform property to set a transformation matrix. a rectangle is then drawn using that transformation. ...
...is example uses the currenttransform property to set a transformation matrix. a rectangle is then drawn using that transformation. ...

SVGAnimateTransformElement - Web APIs
the svganimatetransformelement interface corresponds to the <animatetransform> element. <div id="interfacediagram" style="display: inline-block; 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...
...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 t...
...svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement. methods this interface has no methods but inherits methods from its parent, svganimationelement. specifications specification status comment svg animations level 2the definition of 'svganimatetransformelement' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svganimatetransformelement' in that specification. recommendation initial definition ...

SVGAnimatedTransformList - Web APIs
svg animated transform list interface the svganimatedtransformlist interface is used for attributes which take a list of numbers and which can be animated. interface overview also implement none methods none properties readonly svgtransformlist baseval readonly svgtransformlist animval normative document svg 1.1 (2nd edition) properties name type description baseval svgtransformlist the base value of the given attribute before applying any animations. animval svgtransformlist a read only svgtransformlist representing the current animated value of the given attribute. ...
...ent svg 1.1 (2nd edition) properties name type description baseval svgtransformlist the base value of the given attribute before applying any animations. animval svgtransformlist a read only svgtransformlist representing the current animated value of the given attribute. if the given attribute is not currently being animated, then the svgtransformlist will have the same contents as baseval. the object referenced by animval will always be distinct from the one referenced by baseval, even when the attribute is not animated. methods the svganimatedtransformlist interface doesn't provide any specific methods. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to t...
...thods. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

XRReferenceSpaceEvent.transform - Web APIs
the read-only xrreferencespaceevent property transform indicates the position and orientation of the affected referencespace's native origin after the changes the event represents are applied. the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system. syntax let refspace = xrreferencespaceevent.transform; value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system. usage notes upon receiving a reset event, you can apply the transform to cached position or orientation information to shift them into the updated coordinate system. alternatively, you can just discard...
... you can just discard any cached positional information and recompute from scratch. the approach you take will depend on your needs. for details on what causes a reset event and how to respond, see the reset event's documentation. examples this example handles the reset event by walking through all the objects in a scene, updating each object's position by multiplying it with the event's given transform. ...
...tion. examples this example handles the reset event by walking through all the objects in a scene, updating each object's position by multiplying it with the event's given transform. the scene is represented by a scene object, with all the objects in an array called objects within it. xrreferencespace.addeventlistener("reset", event => { for (let obj of scene.objects) { mat4.multiply(obj.transform, obj.transform, event.transform); } }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceevent.transform' in that specification. working draft initial definition. ...

XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
an instruction, on the other hand, is associated with a template. a stylesheet may include several templates. a third type of element, not discussed here, is the literal result element (lre). an lre also appears in a template. ...
...ribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fallback><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) <xsl:include> <xsl:key> <xsl:message> <xsl:namespac...
...l:if> <xsl:import> (mostly supported) <xsl:include> <xsl:key> <xsl:message> <xsl:namespace-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:output> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:transform> <xsl:value-of> (partially supported) <xsl:variable> <xsl:when> <xsl:with-param> ...

Advanced Example - XSLT: Extensible Stylesheet Language Transformations
ing value is set using xsltprocessor.setparameter(). the xslt file has a parameter called myorder that javascript sets to change the sorting method. the xsl:sort element's order attribute can access the value of the parameter using $myorder. however, the value needs to be an xpath expression and not a string, so {$myorder} is used. using {} evaluates the content as an xpath expression. once the transformation is complete, the result is appended to the document, as shown in this example. figure 7: sorting based on div contentview example // xhtml fragment: <div id="example"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltproces...
...importnode(mynode, true); // after cloning, we append xmlref.appendchild(clonednode); // set the sorting parameter in the xsl file var sortval = xsltprocessor.getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the transformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/...
...contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the transformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...

Building TransforMiiX standalone - Archive of obsolete content
this document is out of date. we support building a standalone version of transformiix on windows, unix and os x. read the build instructions for your platform to get the requirements, which are the same as for mozilla. you need to get the source from cvs. add tx_exe=1 mk_add_options build_modules="xpcom transformiix" ac_add_options --enable-standalone-modules="xpcom transformiix" to your .mozconfig, and use client.mk to pull as usual. this will pull the necessary subtree with mozilla/client.mk mozilla/build/unix/modules.mk mozilla/build mozilla/config mozilla/expat mozilla/extensions/transformiix mozilla/include mozilla/allmakefiles.sh mozilla/client.mk mozilla/aclocal.m4 mozilla/configure mozilla/configure.in mozilla/makefile.in plus nspr and xpcom from the cvs repository. building from ...
...ilding from a full mozilla tree is not supported. it is recommended to add ac_add_options --disable-gtktest ac_add_options --without-jpeg ac_add_options --without-zlib ac_add_options --without-png ac_add_options --without-x to your .mozconfig, too, as it stops configure from testing unneeded libs. make -f client.mk build as usual. of course, make -f client.mk checks out and builds just transformiix alright. the binary transformiix(.exe) will be in extensions/transformiix/source and dist/bin/ (symbolic link). run it via run-mozilla.sh transformiix on unices and just transformiix.exe on windows. original document information author: axel hecht last updated date: april 5, 2004 copyright information: portions of this content are © 1998–2006 by individual mozilla.org contributors; ...

WebGL2RenderingContext.beginTransformFeedback() - Web APIs
the webgl2renderingcontext.begintransformfeedback() method of the webgl 2 api starts a transform feedback operation. syntax void gl.begintransformfeedback(primitivemode); parameters primitivemode a glenum specifying the output type of the primitives that will be recorded into the buffer objects that are bound for transform feedback. possible values: gl.points gl.lines gl.triangles return value none. examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status comment webgl 2.0the definition of 'begintransformfeedback' in that specification. editor's draft...
...eedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status comment webgl 2.0the definition of 'begintransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glbegintransformfeedback' in that specification. standard man page of the (similar) opengl api. ...

WebGL2RenderingContext.bindTransformFeedback() - Web APIs
the webgl2renderingcontext.bindtransformfeedback() method of the webgl 2 api binds a passed webgltransformfeedback object to the current gl state. syntax void gl.bindtransformfeedback(target, transformfeedback); parameters target a glenum specifying the target (binding point). must be gl.transform_feedback. transformfeedback a webgltransformfeedback object to bind. return value none. examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); specifications specification status comment webgl 2.0the definition of 'bindtransformfeedback' in that specification. editor's draft initial definition for webgl. ...
.... return value none. examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); specifications specification status comment webgl 2.0the definition of 'bindtransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glbindtransformfeedback' in that specification. standard man page of the (similar) opengl api. ...

WebGL2RenderingContext.isTransformFeedback() - Web APIs
the webgl2renderingcontext.istransformfeedback() method of the webgl 2 api returns true if the passed object is a valid webgltransformfeedback object. syntax glboolean gl.istransformfeedback(transformfeedback); parameters transformfeedback a webgltransformfeedback object to test. return value a glboolean indicating whether the given object is a valid webgltransformfeedback object (true) or not (false). examples gl must be a webgl2renderingcontext. webgltransformfeedback objects are not available in webgl 1. var transformfeedback = gl.createtransformfeedback(); // ... gl.istransformfeedback(transformfeedback); specifications specification status comment webgl 2.0the definition of 'istransformfeedback' in that specification. editor's draft i...
...ansformfeedback objects are not available in webgl 1. var transformfeedback = gl.createtransformfeedback(); // ... gl.istransformfeedback(transformfeedback); specifications specification status comment webgl 2.0the definition of 'istransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glistransformfeedback' in that specification. standard man page of the (similar) opengl api. ...

XRRigidTransform.orientation - Web APIs
the read-only xrrigidtransform property orientation is a dompointreadonly containing a normalized quaternion (also called a unit quaternion or versor) specifying the rotational component of the transform represented by the object. if you specify a quaternion whose length is not exactly 1.0 meters, it will be normalized for you. syntax let orientation = xrrigidtransform.orientation; value a dompointreadonly object which contains a unit quaternion providing the orientation component of the transform. as a unit quaternion, the length of the returned quaternion is always 1.0 meters. ...
...ientation; value a dompointreadonly object which contains a unit quaternion providing the orientation component of the transform. as a unit quaternion, the length of the returned quaternion is always 1.0 meters. examples to create a reference space which is oriented to look straight up, positioned 2 meters off of ground level: xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0}); ); the unit quaternion specified here is [0.0, 1.0, 0.0, 1.0] to indicate that the object should be facing directly along the y axis. specifications specification status comment webxr device apithe definition of 'xrrigidtransform.orientation' in that specification. working draft initial definition. ...

-webkit-transform-2d - CSS: Cascading Style Sheets
the -webkit-transform-2d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 2d transforms are supported. apple has a description in safari css reference. syntax -webkit-transform-2d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 2d transforms. values true the browser supports the 2d css transforms with the -webkit prefix. false the 2d css transforms prefixed with -webkit are not supported by the browser. examples basic example @media (-webkit-transform-2d) { div { -webkit-transform: translate(100px, 100px); } } this media feature is only supported by webkit. ...
...e the browser supports the 2d css transforms with the -webkit prefix. false the 2d css transforms prefixed with -webkit are not supported by the browser. examples basic example @media (-webkit-transform-2d) { div { -webkit-transform: translate(100px, 100px); } } this media feature is only supported by webkit. if possible, use an @supports feature query instead: @supports (-webkit-transform: translate(100px, 100px)) { div { -webkit-transform: translate(100px, 100px); } } specifications not part of any standard. ...

-webkit-transform-3d - CSS: Cascading Style Sheets
the -webkit-transform-3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 3d transforms are supported. note: this media feature is only supported by webkit and blink. if possible, use an @supports feature query instead. syntax -webkit-transform-3d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 3d transforms. values true the browser supports the 3d css transforms with the -webkit prefix. false the 3d css transforms prefixed with -webkit are not supported by the browser. ...
...link. if possible, use an @supports feature query instead. syntax -webkit-transform-3d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 3d transforms. values true the browser supports the 3d css transforms with the -webkit prefix. false the 3d css transforms prefixed with -webkit are not supported by the browser. examples @media (-webkit-transform-3d) { .foo { transform-style: preserve-3d; } } @media (-webkit-transform-3d: 1) { .foo { transform-style: preserve-3d; } } specifications specification status comment compatibility standardthe definition of '-webkit-transform-3d' in that specification. living standard initial standardization safari css reference 'media query extens...

transform-origin - SVG: Scalable Vector Graphics
the transform-origin svg attribute sets the origin for an item’s transformations. note: as a presentation attribute in svg, transform-origin corresponds in syntax and behavior to the transform-origin property in css, and can be used as css property to style svg. see the css transform-origin property for more information. usage notes values [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not explici...
...or one of the keywords left, center, and right. the other value must be a <length>, a <percentage>, or one of the keywords top, center, and bottom. three-value syntax: the first two values are the same as for the two-value syntax. the third value must be a <length>. it always represents the z offset. specifications specification status comment css transforms level 1the definition of 'transform-origin' in that specification. working draft scalable vector graphics (svg) 2the definition of 'transform-origin' in that specification. candidate recommendation ...

Visualize transforms - Firefox Developer Tools
if you hover over a transform property in the rules view, you'll see the transformation overlaid in the page: ...

WebGL2RenderingContext.createTransformFeedback() - Web APIs
the webgl2renderingcontext.createtransformfeedback() method of the webgl 2 api creates and initializes webgltransformfeedback objects. syntax webgltransformfeedback gl.createtransformfeedback(); parameters none. return value a webgltransformfeedback object. examples gl must be a webgl2renderingcontext. webgltransformfeedback objects are not available in webgl 1. var transformfeedback = gl.createtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'createtransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgentransformfeedbacks' in that specification. standard man page of the (similar) opengl api. ...

WebGL2RenderingContext.deleteTransformFeedback() - Web APIs
the webgl2renderingcontext.deletetransformfeedback() method of the webgl 2 api deletes a given webgltransformfeedback object. syntax void gl.deletetransformfeedback(transformfeedback); parameters transformfeedback a webgltransformfeedback object to delete. return value none. examples gl must be a webgl2renderingcontext. webgltransformfeedback objects are not available in webgl 1. var transformfeedback = gl.createtransformfeedback(); // ... gl.deletetransformfeedback(transformfeedback); specifications specification status comment webgl 2.0the definition of 'deletetransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'gldeletetransformfeedbacks' in that specification. ...

WebGL2RenderingContext.endTransformFeedback() - Web APIs
the webgl2renderingcontext.endtransformfeedback() method of the webgl 2 api ends a transform feedback operation. syntax void gl.endtransformfeedback(); parameters none. return value none. examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'endtransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glendtransformfeedback' in that specification. standard man page of the (similar) opengl api. ...

WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.gettransformfeedbackvarying() method of the webgl 2 api returns information about varying variables from webgltransformfeedback buffers. syntax webglactiveinfo gl.gettransformfeedbackvarying(program, index); parameters program a webglprogram. index a gluint specifying the index of the varying variable whose information to retrieve. return value a webglactiveinfo object. examples activeinfo = gl.gettransformfeedbackvarying(program, 0); specifications specification status comment webgl 2.0the definition of 'gettransformfeedbackvarying' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgettransformfeedbackvarying' in that specification. standard man p...

WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
the webgl2renderingcontext.pausetransformfeedback() method of the webgl 2 api pauses a transform feedback operation. syntax void gl.pausetransformfeedback(); parameters none. return value none. examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.pausetransformfeedback(); //... gl.resumetransformfeedback(); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'pausetransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glpausetransformfeedback' in that specification. standa...

WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
the webgl2renderingcontext.resumetransformfeedback() method of the webgl 2 api resumes a transform feedback operation. syntax void gl.resumetransformfeedback(); parameters none. return value none. examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.pausetransformfeedback(); //... gl.resumetransformfeedback(); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'resumetransformfeedback' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glresumetransformfeedback' in that specification. s...

CSS Transforms - CSS: Cascading Style Sheets
css transforms is a module of css that defines how elements styled with css can be transformed in two-dimensional or three-dimensional space. reference properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using css transforms step-by-step tutorial about how to transform elements styled with css. specifications specification status comment css transforms level 1 working draft initial definition. css transforms level 2 editor's draft adds individual transforms. ...

Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml. to find out the current type, load the file in mozilla and look at the page info. or use a download tool, those usually tell the mime type. in firefox 6 and forward, you can also use the official xslt mimetype: application/xslt+xml. namespace the xslt 1.0 namespace is http://www.w3.org/1999/xsl/transform. older versions of ie used a different namespace. however these versions also used a draft version of xslt which is incompatible with what eventually became the xslt 1.0 specification. firefox only supports the official xslt 1.0 version. missing features there are some features in the xslt 1.0 specification which firefox unfortunately does not yet support. specifically: the namespace:: axis ...

<xsl:attribute-set> - XSLT: Extensible Stylesheet Language Transformations
> required attributes name specifies the name of the attribute set. the name must be a valid qname. optional attributes use-attribute-sets builds an attribute set from other attribute sets. the names of the contributing sets must be separated with whitespace characters and must not directly or indirectly embed themselves. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 7.1.4. gecko support supported. ...

<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
is (‰). zero-digit specifies the digit zero character. the default is (0). digit specifies the character used in the format pattern to stand for a digit. the default is (#). pattern-separator specifies the character separating positive and negative subpatterns in a format pattern. the default is the semi-colon (;). type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 12.3. gecko support supported as of 1.0 (mozilla 1.0, netscape 7.0). ...

<xsl:import> - XSLT: Extensible Stylesheet Language Transformations
rting stylesheet. this is in contrast to <xsl:include> where the contents of the included stylesheet have exactly the same precedence as the contents of the including stylesheet. syntax <xsl:import href=uri /> required attributes href specifies the uri of the stylesheet to import. optional attributes none. type top-level, must appear before any other child of <xsl:stylesheet> or <xsl:transform> in the importing stylesheet. defined xslt, section 2.6.2. gecko support mostly supported with a few issues with top level variables and parameters as of mozilla 1.0. ...

<xsl:include> - XSLT: Extensible Stylesheet Language Transformations
ne stylesheet with another. unlike the case of <xsl:import>, the contents of an included stylesheet have exactly the same precedence as the contents of the including stylesheet. syntax <xsl:include href=uri /> required attributes href specifies the uri of the stylesheet to include. optional attributes none. type top-level, may appear in any order as a child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 2.6.1. gecko support supported. ...

<xsl:key> - XSLT: Extensible Stylesheet Language Transformations
defined xslt, section 12.2. gecko support supported. ...

<xsl:namespace-alias> - XSLT: Extensible Stylesheet Language Transformations
e which is appropriately re-converted back to the xslt namespace in the output tree. syntax <xsl:namespace-alias stylesheet-prefix=name result-prefix=name /> required attributes stylesheet-prefix specifies the temporary namespace. result-prefix specifies the desired namespace for the output tree. optional attributes none. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 7.1.1 gecko support not supported at this time. ...

<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
ut document. cdata-section-elements lists elements whose text contents should be written as cdata sections. elements should be whitespace separated. indent (not supported.) specifies if the output should be indented to indicate its hierarchic structure. media-type (not supported.) specifies the output document mime type. type top-level, must be the child <xsl:stylesheet> or <xsl:transform>. defined xslt, section 16. gecko support partial support. see comments above. ...

<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
espace character. preserving whitespace is the default setting, so this element only needs to be used to counteract an <xsl:strip-space> element. syntax <xsl:preserve-space elements=list-of-element-names /> required attributes elements specifies the elements for which whitespace should be preserved. optional attributes none. type top-level, must be a child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 3.4 gecko support supported. ...

<xsl:strip-space> - XSLT: Extensible Stylesheet Language Transformations
defined xslt, section 3.4 gecko support supported. ...

<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:stylesheet> element (or the equivalent <xsl:transform> element) is the outermost element of a stylesheet. namespace declaration a pseudo-attribute required to identify the document as an xslt stylesheet. typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform". syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet. optional attributes exclude-result-prefixes specifies any namespace used in this document that should n...

<xsl:template> - XSLT: Extensible Stylesheet Language Transformations
e, which can be matched by an attribute of the <xsl:apply-templates> element. this is useful for processing the same information in multiple ways. priority specifies a numeric priority for this template. this can be any number other than infinity. the processor uses this number when more than one template matches the same node. type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>. defined xslt, section 5.3. gecko support supported. ...

<xsl:text> - XSLT: Extensible Stylesheet Language Transformations
t/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:text> element writes literal text to the output tree. it may contain #pcdata, literal text, and entity references. syntax <xsl:text disable-output-escaping="yes" | "no"> text </xsl:text> required attributes none. optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially irrelevant in context. to output html-entities, use numerical values instead, eg &#160; for &nbsp;) specifies whether special characters are escaped when written to the output. the available values are "yes" or "no". if "yes" is set, for example, the character > is output as >, not as &gt;. type instruction, appears within a templat...

<xsl:value-of> - XSLT: Extensible Stylesheet Language Transformations
lue-of> element evaluates an xpath expression, converts it to a string, and writes that string to the result tree. syntax <xsl:value-of select=expression disable-output-escaping="yes" | "no" /> required attributes select specifies the xpath expression to be evaluated and written to the output tree. optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially irrelevant in context. to output html-entities, use numerical values instead, eg &#160 for &nbsp) specifies whether special characters are escaped when written to the output. the available values are "yes" or "no". if "yes" is set, for example, the character > is output as >, not as "&gt". type instruction, appears with a template. ...

PI Parameters - XSLT: Extensible Stylesheet Language Transformations
-param?> and <?xslt-param-namespace?>. both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does. the following document passes the two parameters "color" and "size" to the stylesheet "style.xsl". <?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. processing instructions the attributes in the xslt-param and xslt-param-namespace pis are parsed using the rules defined in xml-stylesheet. any unrecognized attributes must be ignored. parsing of any attribute must not fail due to the presence of an unrecognized attribute as long as that attribute follows the syntax in xml-stylesheet. ...

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 0764543814 michael kay is a member of the w3c xsl working group and the developer of his own open-source xslt processor, saxon. he is also the author of the only book on this subject to have reached a second edition. this is a very big book, well laid out, and exhaustive, if sometimes exhausting, in detail, covering every possible base in the xslt story. ...

The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
:message (supported) xsl:namespace-alias (not supported) xsl:number (partially supported) xsl:otherwise (supported) xsl:output (partially supported) xsl:param (supported) xsl:preserve-space (supported) xsl:processing-instruction xsl:sort (supported) xsl:strip-space (supported) xsl:stylesheet (partially supported) xsl:template (supported) xsl:text (partially supported) xsl:transform (supported) xsl:value-of (partially supported) xsl:variable (supported) xsl:when (supported) xsl:with-param (supported) axes ancestor ancestor-or-self attribute child descendant descendant-or-self following following-sibling namespace (not supported) parent preceding preceding-sibling self functions boolean() (supported) ceiling() (supported) concat() (supported)...

Resources - XSLT: Extensible Stylesheet Language Transformations
msdn: xslt concepts ...

Setting Parameters - XSLT: Extensible Stylesheet Language Transformations
for example, javascript and xslt could be used to sort xml data and then display it. the sorting would have to alternate between ascending and descending sorting. xslt provides the xsl:param element, which is a child of the xsl:stylesheet element. xsltprocessor provides three javascript methods to interact with these parameters: xsltprocessor.setparameter(), xsltprocessor.getparameter() and xsltprocessor.removeparameter(). ...

Index - Web APIs
ia, reference, web audio api the analysernode constructor of the web audio api creates a new analysernode object instance. 53 analysernode.fftsize api, analysernode, property, reference, web audio api, fftsize the fftsize property of the analysernode interface is an unsigned long value and represents the window size in samples that is used when performing a fast fourier transform (fft) to get frequency domain data. 54 analysernode.frequencybincount api, analysernode, property, reference, web audio api, frequencybincount the frequencybincount read-only property of the analysernode interface is an unsigned integer half that of the analysernode.fftsize. this generally equates to the number of data values you will have to play with for the visualization. ...
...ini, operator, property, reference the cssmathvalue.operator read-only property of the cssmathvalue interface indicates the operator that the current subtype represents. for example, if the current cssmathvalue subtype is cssmathsum, this property will return the string "sum". 415 cssmatrix api, reference a cssmatrix represents a homogeneous 4x4 matrix to which 2d or 3d transforms can be applied. this class was allegedly part of css transitions module level 3 at some point, but is not present in the current working draft. use dommatrix instead. 416 cssmediarule api, cssom, interface, reference the cssmediarule interface represents a single css @media rule. it implements the cssconditionrule interface, and therefore the cssgroupingrule and the cssrule ...
...html, html5, tutorial this article provides suggestions for optimizing your use of the canvas element to ensure that your graphics perform well. 530 pixel manipulation with canvas canvas, graphics, intermediate, tutorial the imagedata object represents the underlying pixel data of an area of a canvas object. it contains the following read-only attributes: 531 transformations canvas, graphics, guide, html, html5, intermediate, web before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings. 532 using images advanced, canvas, graphics, html, tutorial importing images into a canvas is basically a two step process: 533 manipulatin...
...And 41 more matches

Creating a Microsummary - Archive of obsolete content
elements in their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. in this tutorial we're going to create a microsummary generator for the spread firefox home page that displays the current firefox download count along with the label fx downloads; for example: 174475447 fx downloads. we'll build the xslt transform sheet that converts that page into its microsummary, learn how to specify that the generator applies to that page, and find out how to make the generator available for download and installation. in each step of revising the transform sheet and other code in this tutorial, new material added will be shown in boldface so you can follow along more easily. note: if you are a web site developer, and...
...ive enough to give users a good idea what information the microsummaries will provide. ...
...tion the microsummaries will provide. ...
...And 22 more matches

Web audio spatialization basics - Web APIs
ction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180 degrees and facing away from us. we need to set up a few things for the interface. ...
...elements we want to move, then we'll store references to the values we'll change when we set up css transforms to actually do the movement. ...
...t to move, then we'll store references to the values we'll change when we set up css transforms to actually do the movement. ...
...And 22 more matches

SVG and CSS - SVG: Scalable Vector Graphics
ointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g cla...
...> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> ...
...d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(108)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g cl...
...And 20 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
makes sense to do it yourself for various reasons, such as to improve performance of calculations by not having to repeatedly perform normalization. once you've determined the matrix representing the combination of movements you wish the camera to make, you need to reverse it, because you're not moving the camera. ...
...arious reasons, such as to improve performance of calculations by not having to repeatedly perform normalization. once you've determined the matrix representing the combination of movements you wish the camera to make, you need to reverse it, because you're not moving the camera. since you're actually moving everything except the camera, take the inverse of the transform matrix to get an inverse transform matrix. this inverse matrix can then be applied to the objects in the world to alter their positions and orientations to simulate the desired camera position. this is why the xrrigidtransform object used by webxr to represent transforms includes an inverse property. the inverse property is another xrrigidtransform object which is the inverse of the parent transform. since the xrview representing...
...verse matrix can then be applied to the objects in the world to alter their positions and orientations to simulate the desired camera position. this is why the xrrigidtransform object used by webxr to represent transforms includes an inverse property. the inverse property is another xrrigidtransform object which is the inverse of the parent transform. ...
...And 17 more matches

WebGL model view projection - Web APIs
f basic matrix math using translation, scale, and rotation matrices. it explains the three core matrices that are typically used when composing a 3d scene: the model, view and projection matrices. note: this article is also available as an mdn content kit. it also uses a collection of utility functions available under the mdn global object. the model, view, and projection matrices individual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation. these matrices can be composed together and grouped in special ways to make them useful for rendering complicated 3d scenes. these composed matrices ultimately move the original model data around into a special coordinate space called clip space. this is a 2 unit ...
... able to see. the sections below offer an in-depth look into the ideas behind and implementation of the model, view, and projection matrices. these matrices are core to moving data around on the screen, and are concepts that transcend individual frameworks and engines. clip space in a webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader transforms those points into a special coordinate system known as clip space. any data which extends outside of the clip space is clipped off and not rendered. however, if a triangle straddles the border of this space then it is chopped up into new triangles, and only the parts of the new triangles that are in clip space are kept. the above graphic is a visualization of the clip space that all of the po...
...the cube is the point (0,0,0). this 8 cubic meter coordinate system used by clip space is known as normalized device coordinates (ndc). you may encouter that term from time to time while researching and wokring with webgl code. for this section we will put our data into the clip space coordinate system directly. normally model data is used that is in some arbitrary coordinate system, and is then transformed using a matrix, converting the model coordinates into the clip space coordinate system. for this example, it's easiest to illustrate how clip space works by simply using model coordinate values ranging from (-1,-1,-1) to (1,1,1). the code below will create 2 triangles that will draw a square on the screen. the z depth in the squares determines what gets drawn on top when the squares share the s...
...And 16 more matches

Inputs and input sources - Web APIs
itted (such as the front tip of the controller, or the end of a gun barrel if the controller is being rendered as a gun, for example), and the space's orientation vector extends outward along the path of the target ray. you can easily obtain the target ray corresponding to the targetrayspace from within the drawing handler for a given frame using xrframe's getpose() method. ...
...e front tip of the controller, or the end of a gun barrel if the controller is being rendered as a gun, for example), and the space's orientation vector extends outward along the path of the target ray. you can easily obtain the target ray corresponding to the targetrayspace from within the drawing handler for a given frame using xrframe's getpose() method. ...
...t ray corresponding to the targetrayspace from within the drawing handler for a given frame using xrframe's getpose() method. the returned xrpose's transform is the transform corresponding to the target ray. thus, for an input controller primaryinput: let targetraypose = frame.session.getpose(primaryinput.targetrayspace, viewerrefspace); let targetrayorigin = targetraypose.transform.position; let targetrayvector = targetraypose.transform.orientation; with this, you now have the point from which the targeting ray is emitted (targetrayorigin) and the direction in which it's pointing (targetrayvector), given in the viewer's reference space (viewerrefspace). that's everything you need to be able to draw the targeting ray, determine what's being pointed at, do hit testing, and ...
...And 15 more matches

Using the CSS Typed Object Model - Web APIs
rn a csskeywordvalue instead of a cssunitvalue. csskeywordvalues do not have a unit property, so in these cases our get().unit returns undefined. had the width or height been defined in a <length> or <percent>, the cssunitvalue unit would have been px or percent respectively. there are other types available: an <image> will return a cssimagevalue. a <color> would return a cssstylevalue. a transform returns a csstransformvalue. a custom property returns a cssunparsedvalue. you can use a cssunitvalue or csskeywordvalue to create other objects. for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("center"), new cssunitvalue(10, "px")); cssstylevalue the cssstyle...
... to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("center"), new cssunitvalue(10, "px")); cssstylevalue the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api, including cssimagevalue, csskeywordvalue, cssnumericvalue, csspositionvalue, csstransformvalue, and cssunparsedvalue. it has two methods: cssstylevalue.parse() cssstylevalue.parseall() as noted above, stylepropertymapreadonly.get('--customproperty') returns a cssunparsedvalue. we can parse cssunparsedvalue object instances with the inherited cssstylevalue.parse() and cssstylevalue.parseall() methods. let's examine a css example with several custom properties, transforms, calc...
... <button>styled button</button> // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // cssmathsum example let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmat...
...And 14 more matches

Matrix math for the web - Web APIs
matrices can be used to represent transformations of objects in space, and are used for performing many key types of computation when constructing images and visualizing data on the web. this article explores how to create matrices and how to use them with css transforms and the matrix3d transform type. while this article uses css to simplify explanations, matrices are a core concept used by many different technologies including webgl, the webxr (vr and ar) api, and glsl shaders. this article is also available as an mdn content kit. the live examples use a collection of utility functions available under a global object named mdn. transformation matrices there are many types of matrices, but the ones we are interested in are the 3d transformation matrices. these matrices consist of a set of 16 v...
...llection of utility functions available under a global object named mdn. transformation matrices there are many types of matrices, but the ones we are interested in are the 3d transformation matrices. these matrices consist of a set of 16 values arranged in a 4x4 grid. in javascript, it is easy to represent a matrix as an array. let's begin by considering the identity matrix. this is a special transformation matrix which functions much like the number 1 does in scalar multiplication; just like n * 1 = n, multiplying any matrix by the identity matrix gives a resulting matrix whose values match the original matrix. the identity matrix looks like this in javascript: let identitymatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; what does multiplying by the identity matrix look...
...trix gives a resulting matrix whose values match the original matrix. the identity matrix looks like this in javascript: let identitymatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; what does multiplying by the identity matrix look like? the easiest example is to multiply a single point by the identity matrix. since a 3d point only needs three values (x, y, and z), and the transformation matrix is a 4x4 value matrix, we need to add a fourth dimension to the point. by convention, this dimension is called the perspective, and is represented by the letter w. for a typical position, setting w to 1 will make the math work out. after adding the w component to the point, notice how neatly the matrix and the point line up: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] [4, 3...
...And 12 more matches

XRView - Web APIs
pective. this value is used to ensure that any content which is pre-rendered for presenting to a specific eye is distributed or positioned correctly. the value can also be none if the xrview is presenting monoscopic data (such as a 2d image, a full-screen view of text. or a close-up view of something that doesn't need to appear in 3d). ...
...data (such as a 2d image, a full-screen view of text. or a close-up view of something that doesn't need to appear in 3d). projectionmatrix read only the projection matrix that will transform the scene to appear correctly given the point-of-view indicated by eye. this matrix should be used directly in order to avoid presentation distortions that may lead to potentially serious user discomfort. transform read only an xrrigidtransform which describes the current position and orientation of the viewpoint in relation to the xrreferencespace specified when getviewerpose() was called on the xrframe being rendered. usage notes positions and number of xrviews per frame while rendering a scene, the set of views that are used to render the scene for the viewer as of the current frame are obtained by...
...ye. in addition, the number of views can change at any time, depending on the needs of the time. so you should process the view list every time without making assumptions based on previous frames. all positions and orientations within the views for a given xrviewerpose are specified in the reference space that was passed to xrframe.getviewerpose(); this is called the viewer reference space. the transform property describes the position and orientation of the eye or camera represented by the xrview, given in that reference space. the destination rendering layer to render a frame, you just iterate over the xrviewerpose's views, rendering each of them into the appropriate viewport within the frame's xrwebgllayer. currently, the specification (and therefore all current implementations of webxr) is ...
...And 12 more matches

Using CSS transitions - CSS: Cascading Style Sheets
n over a different period of time. ...
... period of time. ...
... height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-col...
...And 11 more matches

CSS property compatibility table for form controls - Learn web development
text-align yes yes text-decoration partial partial see the note about opera text-indent partial[1] partial[1] ie9 supports this property only on <textarea>s, whereas opera only supports it on single line text fields. text-overflow partial partial text-shadow partial partial text-transform yes yes border and background background partial[1] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. on windows 7, internet explorer 9 does not apply the border unless background:none is app...
...os. text and font color yes yes font yes yes see the note about line-height. letter-spacing yes yes text-align no no text-decoration partial yes text-indent yes yes text-overflow no no text-shadow partial partial text-transform yes yes border and background background yes yes border-radius yes[1] yes[1] on opera the border-radius property is applied only if an explicit border is set. box-shadow no partial[1] ie9 does not support this property. number see the number input type. there is no standa...
... text and font color yes yes font yes yes see the note about line-height. letter-spacing yes yes text-align yes yes text-decoration partial partial text-indent yes yes text-overflow no no text-shadow partial partial text-transform n.a. n.a. border and background background no no supported but there is too much inconsistency between browsers to be reliable. border-radius no no box-shadow no no check boxes and radio buttons see the checkbox and radio input types. property n t note css box model wid...
...And 10 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
multiple situations. the vertex and fragment shaders the vertex and fragment shaders are both exactly the same as those used in the example for our article lighting in webgl. refer to that if you're interested in the glsl source code for the basic shaders used here. suffice it to say that the vertex shader computes the position of each vertex given the initial positions of each vertex and the transforms that need to be applied to convert them to simulate the viewer's current position and orientation. the fragment shader returns the color of each vertex, interpolating as needed from the values found in the texture and applying the lighting effects. starting up and shutting down webxr upon initially loading the script, we install a handler for the load event, so that we can perform initializati...
...r(xrsession, gl) }); if (session_type == "immersive-vr") { refspacetype = "local"; } else { refspacetype = "viewer"; } mat4.fromtranslation(cubematrix, viewerstartposition); vec3.copy(cubeorientation, viewerstartorientation); xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, cubeorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); return xrsession; } after storing the newly-created xrsession object into xrsession, the label of the button is set to "exit webxr" to indicate its new function after starting the scene, and a handler is installed for the end event, so we get notified when the xrsession ends...
...gllayer. we then look at the value of the session_type constant to see whether the webxr context should be immersive or inline. immersive sessions use the local reference space, while inline sessions use the viewer reference space. the glmatrix library's fromtranslation() function for 4x4 matrices is used to convert the viewer's start position as given in the viewerstartposition constant into a transform matrix. the viewer's starting orientation, viewerstartorientation, is copied into the cubeorientation property, which will be used to track the rotation of the cube over time. sessionstarted() finishes up by calling the session's requestreferencespace() method to get a reference space object describing the space in which the object is being created. when the promise returned resolves to a xrrefe...
...And 8 more matches

matrix3d() - CSS: Cascading Style Sheets
the matrix3d() css function defines a 3d transformation as a 4x4 homogeneous matrix. its result is a <transform-function> data type. syntax the matrix3d() function is specified with 16 values. they are described in the column-major order. matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) values a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 are <number>s describing the linear transformation. a4 b4 c4 d4 are <number>s describing the translation to apply. note: until firefox 16, gecko accepted a <length> value for a4, b4 and c4. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. a g...
...d4 are <number>s describing the translation to apply. note: until firefox 16, gecko accepted a <length> value for a4, b4 and c4. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. a generic 3d affine transformation can't be represented using a cartesian-coordinate matrix, as translations are not linear transformations. a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4 examples cube squashing example the following example shows a 3d cube created from dom elements and transforms, which can be hovered/focused to apply a matrix3d() transform to it. html <section id="example-element" tabindex="0"> <div cla...
...sforms, which can be hovered/focused to apply a matrix3d() transform to it. ...
...And 8 more matches

SVG documentation index - SVG: Scalable Vector Graphics
ph-orientation-vertical deprecated, svg, svg attribute the glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered. 96 glyphref deprecated, svg, svg attribute the glyphref attribute represents the glyph identifier, the format of which is dependent on the format of the given font. ...
...tribute the glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered. 96 glyphref deprecated, svg, svg attribute the glyphref attribute represents the glyph identifier, the format of which is dependent on the format of the given font. ...
...unt that hte current text position advances as each glyph is rendered. 96 glyphref deprecated, svg, svg attribute the glyphref attribute represents the glyph identifier, the format of which is dependent on the format of the given font. 97 gradienttransform svg, svg attribute the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox). ...
...And 8 more matches

rotate() - CSS: Cascading Style Sheets
syntax the amount of rotation created by rotate() is specified by an <angle>. if positive, the movement will be clockwise; if negative, it will be counter-clockwise. a rotation by 180° is called point reflection. rotate(a) values a is an <angle> representing the angle of the rotation. ...
... syntax the amount of rotation created by rotate() is specified by an <angle>. if positive, the movement will be clockwise; if negative, it will be counter-clockwise. a rotation by 180° is called point reflection. rotate(a) values a is an <angle> representing the angle of the rotation. ...
... syntax the amount of rotation created by rotate() is specified by an <angle>. if positive, the movement will be clockwise; if negative, it will be counter-clockwise. a rotation by 180° is called point reflection. rotate(a) values a is an <angle> representing the angle of the rotation. ...
...And 7 more matches

Connecting to Remote Content - Archive of obsolete content
extract information from web pages once they load, along with the page load interception techniques discussed previously. xpath is very useful for cases when you're receiving large and complex xml files, and you only need some of the data contained in them. using xpath to parse a complete xml document is probably not a good idea performance-wise. ...
... load interception techniques discussed previously. xpath is very useful for cases when you're receiving large and complex xml files, and you only need some of the data contained in them. using xpath to parse a complete xml document is probably not a good idea performance-wise. using xslt xslt (extensible stylesheet language transformations) is another tool used to manipulate xml documents and transform them into other forms of text output, such as html, xul, and so on. we can not cover all transformations to various output formats, so we'll just look into converting an xml document to xul. first you need to create an xslt stylesheet that acts as a template. this template will transform the xml you receive (in our case, the example xml document above) and convert it into xul. the xslt tutorial...
...converting an xml document to xul. first you need to create an xslt stylesheet that acts as a template. this template will transform the xml you receive (in our case, the example xml document above) and convert it into xul. the xslt tutorial contains details for building these templates. ...
...And 6 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
many browsers, such as internet explo...
...defined, it is sent as the body of the post request. body can be an xml document or a string serialized xml document. void setrequestheader (string headername, string headervalue) sets an http request header for use in the http request. has to be called after open() is called. string status the status code of the http response. xslt differences mozilla supports xsl transformations (xslt) 1.0. it also allows javascript to perform xslt transformations and allows running xpath on a document. mozilla requires that you send the xml and xslt files with an xml mimetype (text/xml or application/xml). this is the most common reason why xslt won't run in mozilla but will in internet explorer. mozilla is strict in that way. internet explorer 5.0 and 5.5 supported xslt's worki...
...why xslt won't run in mozilla but will in internet explorer. mozilla is strict in that way. internet explorer 5.0 and 5.5 supported xslt's working draft, which is substantially different than the final 1.0 recommendation. the easiest way to distinguish what version an xslt file was written against is to look at the namespace. ...
...And 6 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the coordinate systems, perform operations affecting these spaces and their corresponding objects, and so forth. describing a position relative to a space there are two scenarios in which you may need to describe a position and/or orientation relative to a space. the first is described above: applying a reference space to an offset (or vice-versa, since the result is the same) to determine the transform matrix that represents the resulting location in the space's coordinate system. poses once your reference space or spaces are established for the various key objects in the scene, you will have times when you need to describe another position relative to the origin of a particular reference space. this is done using poses. a pose, simply put, describes a position and orientation relative to the...
...spaces are established for the various key objects in the scene, you will have times when you need to describe another position relative to the origin of a particular reference space. this is done using poses. a pose, simply put, describes a position and orientation relative to the origin of the reference space from which it was created. in webxr, a pose is represented by an xrpose object, whose transform property is an xrrigidtransform defining the transform matrix that, applied to any coordinate, vector, or matrix in the original space, converts it to the target space. thus a pose can be used to not only convert and determine positions, but also rotational information. there is only one way to create an xrpose, and that's using the getpose() method on an animation frame as given using an xrfram...
...sh to draw a hand controller's representation using the controller's gripspace, you can get the pose needed like this: let controlpose = frame.getpose(worldrefspace, inputsource.gripspace); this converts the position and orientation of the input's grip space to use the world's coordinate system, then generates the corresponding xrpose, storing it in controlpose. you can then apply controlpose's transform to the vertices in the object model representing the controller to calculate the webgl coordinates to use when rendering the controller's representation to the framebuffer. viewer poses a specialized type of pose, the viewer pose, is the pose that represents the perspective of the viewer of the scene. a viewer pose is represented by webxr's xrviewerpose interface. when rendering a frame, you'll...
...And 6 more matches

CSS3 - Archive of obsolete content
he css animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function properties, as well as the @keyframes at-rule. web animations working draft css text module level 3 working draft extends: the css text-transform property with the value full-width. the css text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text. the css text-align property with a <string> value to align on that character. this is useful to align number on the decimal point. the css word-spacing and letter-spacing properties with rang...
...wrap, and text-align-last properties. control on how justification is happening, in order to support more type of scripts, using the css text-justify property. control on edge effect using the css text-indent and hanging-punctuation properties. a few features present in early css text level 3 draft have being postponed to the next iteration of this module . ...
... support more type of scripts, using the css text-justify property. control on edge effect using the css text-indent and hanging-punctuation properties. a few features present in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties. ...
...And 5 more matches

-ms-filter - Archive of obsolete content
<function-token> <any-value> ')' the <string> contains the list of filters, transitions, and procedural surfaces. refer to the filters and transitions reference for details. examples the following example shows how to use the -ms-filter attribute in internet explorer 8. ...
...e list of filters, transitions, and procedural surfaces. refer to the filters and transitions reference for details. examples the following example shows how to use the -ms-filter attribute in internet explorer 8. ...
...rkshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the i...
...And 5 more matches

Fundamental text and font styling - Learn web development
ng point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> html { font-size: 10px; } h1 { font-size: 5rem; } p { font-size: 1.5rem; color: red; font-family: helvetica, arial, sans-serif; } font style, font weight, text transform, and text decoration css provides four common properties to alter the visual weight/emphasis of text: font-style: used to turn italic text on and off. possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason): normal: sets the text to the normal font (turns existing italics off.) italic: sets the text to use the italic ve...
..., -extrabold, -black, etc.), but realistically you'll rarely use any of them except for normal and bold: normal, bold: normal and bold font weight lighter, bolder: sets the current element's boldness to be one step lighter or heavier than its parent element's boldness. 100–900: numeric boldness values that provide finer grained control than the above keywords, if needed. ...
...y you'll rarely use any of them except for normal and bold: normal, bold: normal and bold font weight lighter, bolder: sets the current element's boldness to be one step lighter or heavier than its parent element's boldness. 100–900: numeric boldness values that provide finer grained control than the above keywords, if needed. text-transform: allows you to set your font to be transformed. values include: none: prevents any transformation. uppercase: transforms all text to capitals. lowercase: transforms all text to lower case. capitalize: transforms all words to have the first letter capitalized. full-width: transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. latin characters along with asian ...
...And 5 more matches

nsIXSLTProcessor
content/xslt/public/nsixsltprocessor.idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/document-transformer;1?type=xslt. ...
... content/xslt/public/nsixsltprocessor.idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/document-transformer;1?type=xslt. ...
...this will make the processor use the default-value for all parameters as specified in the stylesheet. void clearparameters(); parameters none. getparameter() gets a parameter if previousl...
...And 5 more matches

DOMMatrixReadOnly.scale() - Web APIs
the scale() method of the dommatrixreadonly interface creates a new matrix being the result of the original matrix with a scale transform applied. syntax the scale() method is specified with either one or six values. dommatrix.scale(scalex[, scaley][, scalez][, originx][, originy][, originz]) parameters scalex a multiplier for the scale value on the x-axis. scaley optional a multiplier for the scale value on the y-axis. if not supplied, this defaults to the value of scalex. scalez optional a multiplier for the scale value on the z-axis. if this value is anything other than 1, the resulting matrix will be 3d. originx optional an x-coordinate for the origin of the transformation. if no origin is supplied, this defaults to 0. originy optional a y-coordinate for the origi...
... scale value on the y-axis. if not supplied, this defaults to the value of scalex. scalez optional a multiplier for the scale value on the z-axis. if this value is anything other than 1, the resulting matrix will be 3d. originx optional an x-coordinate for the origin of the transformation. if no origin is supplied, this defaults to 0. originy optional a y-coordinate for the origin of the transformation. if no origin is supplied, this defaults to 0. originz optional a z-coordinate for the origin of the transformation. if no origin is supplied, this defaults to 0. if this value is anything other than 0, the resulting matrix will be 3d. return value returns a dommatrix containing a new matrix being the result of the matrix x and y dimensions being scaled by the given factor, centered o...
...dommatrix.scale(scale[, originx][, originy]) we'll show an example of how you can deal with the cross-browser support implications of this in the examples section, below. examples this svg contains three squares, one red, one blue, and one green, each positioned at the document origin: <svg width="250" height="250" viewbox="0 0 25 25"> <rect width="25" height="25" fill="red" /> <rect id="transformed" width="25" height="25" fill="blue" /> <rect id="transformedorigin" width="25" height="25" fill="green" /> </svg> this javascript first creates an identity matrix, then uses the scale() method to create a new matrix with a single parameter. we test if the browser supports a six parameter scale() method by creating a new matrix using three parameters and observing it's is2d property — if ...
...And 5 more matches

Geometry and reference spaces in WebXR - Web APIs
e two meters wide, two meters tall, and two meters deep. each of the three axes has a minimum value of -1.0 and a maximum of 1.0, with the center of the cube located at (0, 0, 0). this two cubic meter space encompasses the entire universe for the purposes of your code. everything you draw must have its coordinates mapped to fit into this space, either explicitly within your code, or by using a transform to adjust the coordinates of all vertices. the most efficient way, of course, is to design your objects and code to use the same coordinate system as webgl does. the webgl coordinates and lengths are transformed automatically at render time to the size of the viewport in which the scene is being rendered. angles angles are specified using radians. to convert degrees to radians, simply multiply...
...e to performance issues. this means that the time will usually step in 1/60th of a second intervals, assuming a 60 fps frame rate. doing the math, we find that this means that each frame will ideally be rendered 16.6667 milliseconds apart. geometry operations with matrices we offer a guide to matrix mathematics as it pertains to 3d geometry, including how matrices are used for the three primary transforms that need to be performed when rendering 3d scenes: translation is the use of a matrix to shift the position of a point through the virtual space. this motion can be along any of the object's axes, or any combination of them. rotation is the application of a matrix that rotates a point around the origin of the object's coordinate system. scaling is the use of a matrix to alter the size of a...
...g 3d scenes: translation is the use of a matrix to shift the position of a point through the virtual space. this motion can be along any of the object's axes, or any combination of them. rotation is the application of a matrix that rotates a point around the origin of the object's coordinate system. scaling is the use of a matrix to alter the size of an object. ...
...And 5 more matches

@supports - CSS: Cascading Style Sheets
or more name-value pairs combined by conjunctions (and), disjunctions (or), and/or negations (not). precedence of operators can be defined with parentheses. declaration syntax the most basic supports condition is a simple declaration (a property name followed by a value, separated by a colon). the declaration must be surrounded by parentheses. the following example returns true if the browser's transform-origin property considers 5% 5% valid: @supports (transform-origin: 5% 5%) {} function syntax the second basic supports condition is a supports function, the syntax for these is supported by all browsers, but the functions themselves are still being standardized. selector() tests if the browser supports the tested selector syntax. the following example returns true if the browser supports ...
...still being standardized. selector() tests if the browser supports the tested selector syntax. the following example returns true if the browser supports the child combinator: @supports selector(a > b) {} the not operator the not operator can precede any expression to create a new expression, resulting in the negation of the original one. ...
... selector syntax. the following example returns true if the browser supports the child combinator: @supports selector(a > b) {} the not operator the not operator can precede any expression to create a new expression, resulting in the negation of the original one. the following example returns true if the browser's transform-origin property doesn't consider 10em 10em 10em valid: @supports not (transform-origin: 10em 10em 10em) {} as with any operator, the not operator can be applied to a declaration of any complexity. the following examples are both valid: @supports not (not (transform-origin: 2px)) {} @supports (display: grid) and (not (display: inline-grid)) {} note: there is no need to enclose the not operator between two parentheses at the top level. to combine it with other operators, l...
...And 5 more matches

transition-duration - CSS: Cascading Style Sheets
crete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; ...
...color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { e...
...rval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blu...
...And 5 more matches

<feComposite> - SVG: Scalable Vector Graphics
" /> <path id="red100" d="m 0 0 l 0 100 l 100 0 z" fill="#ff00ff" /> <path id="blue50" d="m 0 125 l 100 125 l 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="red50" d="m 0 125 l 0 225 l 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(275,25)" xlink:href="#twobluetriangles"/> <use transform="translate(400,25)" xlink:href="#twobluetriangles"/> <use transform="translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:hre...
...rs that draw on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(with feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="275">in</text> ...
...5,25)"> <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#red100" filter="url(#outflood)" /> <use xlink:href="#red50" filter="url(#outflood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#red100" filter="url(#atopflood)" /> <use xlink:href="#red50" filter="url(#atopflood)" /> <text x="10" y="275">atop</text> ...
...And 5 more matches

<metadata> - SVG: Scalable Vector Graphics
</style> <!-- define symbols used in the svg --> <defs> <!-- hubplug 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="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g i...
...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="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" tra...
...And 5 more matches

Microsummary XML grammar reference - Archive of obsolete content
microsummary generators, describing each element and their attributes. for an introduction to how to create a microsummary, read the article creating a microsummary. ...
...ement and their attributes. for an introduction to how to create a microsummary, read the article creating a microsummary. ...
...mary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> namespace the namespace uri for microsummary generator xml documents is: http://www.mozilla.org/microsummaries/0.1 all elements in a microsummary generator document should be in this namespace except the descendants of the <template> element, which should be in the xslt namesp...
...And 4 more matches

UI pseudo-classes - Learn web development
r icon, but don't want it to be picked up by assistive technologies. ...
...y assistive technologies. ...
...having a purely visual indicator solves this problem. note:...
...And 4 more matches

Introducing a complete toolchain - Learn web development
previous overview: understanding client-side tools next in the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. we'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on netlify. in this article we'll introduce the case study, set up our development environment, and set up our code transformation tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to solidify what we've learnt so far by working through a complete toolchain case study. there really are unlimited combinations of tools and ways to use them, what you see...
...'ll need to connect your netlify account to your github repository to deploy this project; we'll see how to do that in the next chapter. three stages of tools as we talked about in chapter 1, the toolchain will be structured into the following phases: safety net: making the software development experience stable and more efficient. we might also refer to this as our development environment. transformation: tooling that allows us to use the latest features of a language (e.g. javascript) or another language entirely (e.g. jsx or typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers, modern and older. post development: tooling that comes into play after you are done with the body of development to ensure tha...
...rt's content and many companies and teams have published their own eslint configurations, which can sometimes be useful either to get inspiration or to simply select one that you feel suits your own standards. a forewarning though: eslint configuration is a very deep rabbit hole! that’s our dev environment setup complete at this point. now, finally we're (very nearly) ready to code. build and transformation tools for this project, as mentioned above, react is going to be used, which also means that jsx will be used in the source code. the project will also use the latest javascript features. an immediate issue is that no browser has native support for jsx; it is an intermediate language that is meant to be compiled into languages the browser understands in the production code. if the browser...
...And 4 more matches

Work with animations - Firefox Developer Tools
ct the element in the inspector. to the left of the selector is a "target" icon (). clicking this icon locks the highlighter on the element. animation details if you click one of the bars, you'll see details of all the properties that were changed in the animation. for example, try clicking on the bar for img#icon's animation: this is telling us that two properties were modified: filter and transform. each dot represents an entry for that property in the set of keyframes used for the animation. both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. if you hover over a dot, you'll see the value assigned to that property at that point in the timeline: this is essentially a visual representation of the animation's keyframes: ...
...ry for that property in the set of keyframes used for the animation. both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. ...
...ven a value at 250ms and transform at 500ms. if you hover over a dot, you'll see the value assigned to that property at that point in the timeline: this is essentially a visual representation of the animation's keyframes: var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)' }, { filter: 'grayscale(100%)', offset: 0.333 }, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)' } ]; application to the example applying all this to our example, we can see that: the animation involved two elements, span#note and img#icon. hovering over these selectors, we can see that those elements are, respectively, the browser name "firefox developer edit...
...And 4 more matches

EffectTiming.fill - Web APIs
both vertically and horizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript. first we'll define the two objects that describe the keyframes and the timing configuration to use, then we'll actually see the code that triggers and runs the animation when the "animatebutton" button is clicked. var boxrotationkeyframes = [ { transform: "rotate(-90deg)" }, { transform: "rotate(90deg)" } ]; the boxrotationkeyframes object is an array of keyframes, each describing the state of the affected element at a point in the animation process. in this case, we have just two keyframes; the first defines what affect is applied to the element immediately after the animation first begins to play, and the second defines the effect applied t...
...ng a keyframeeffect with an animation object. the keyframeeffect takes an object of timing properties, which is where we pass in fill. ...
...object. the keyframeeffect takes an object of timing properties, which is where we pass in fill. forwards makes the rabbit retain its last keyframe rather than reverting to its unanimated state: // create a set of keyframes to slide the rabbit down the hole--and keep him down with 'fill'! var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode feature of css animations. ...
...And 4 more matches

WebGL2RenderingContext - Web APIs
eletes a given webglsync object. webgl2renderingcontext.clientwaitsync() blocks and waits for a webglsync object to become signaled or a given timeout to be passed. webgl2renderingcontext.waitsync() returns immediately, but waits on the gl server until the given webglsync object is signaled. webgl2renderingcontext.getsyncparameter() returns parameter information of a webglsync object. ...
...ntext.clientwaitsync() blocks and waits for a webglsync object to become signaled or a given timeout to be passed. webgl2renderingcontext.waitsync() returns immediately, but waits on the gl server until the given webglsync object is signaled. webgl2renderingcontext.getsyncparameter() returns parameter information of a webglsync object. ...
...ebglsync object to become signaled or a given timeout to be passed. webgl2renderingcontext.waitsync() returns immediately, but waits on the gl server until the given webglsync object is signaled. webgl2renderingcontext.getsyncparameter() returns parameter information of a webglsync object. transform feedback webgl2renderingcontext.createtransformfeedback() creates and initializes webgltransformfeedback objects. ...
...And 4 more matches

Using the Web Animations API - Web APIs
hole that leads to wonderland (see the full code on codepen): notice that the background moves, alice spins, and her color changes at an offset from her spinning. we’re going to focus on just alice for this tutorial. here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely. in the @keyframes block we can see that 30% of the way through each loop (about .9 seconds in), alice’s co...
... 30% of the way through each loop (about .9 seconds in), alice’s color changes from black to a deep burgundy then back again by the end of the loop. moving it to javascript now let’s try creating the same animation with the web animations api. representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects. each object represents a key from the original css. however, unlike css, the web animations api doesn’t need to explicitly be told the percentages along the animation...
...mbling, alicetiming ) and boom: the animation starts playing (see the finished version on codepen). the animate() method can be called on any dom element that could be animated with css. and it can be written in several ways. ...
...And 4 more matches

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
er object relative to that one, you can call getoffsetreferencespace(), passing into it the position and orientation you want the second object to have relative to the position and orientation of the object on which you call getoffsetreferencespace(). ...
...these values are added to the position and orientation of the current reference space and then the result is used as the position and orientation of the newly created xrreferencespace. ...
... use getoffsetreferencespace(). teleporting or setting the position of the viewer upon first creating a scene, you may need to set the user's position within the 3d world. you can do that using getoffsetreferencespace(). xrsession.requestreferencespace("local") .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, {x:0, y:0, z:1.0, w: 1.0})); xrsession.requestanimationframe(drawframe); }); in this code, we obtain a local reference space, then use getoffsetreferencespace() to create a new space whose origin is adjusted to a position given by startposition and whose orientation is looking directly along the z azis. then the first animation frame is requested using xrsession's requestanimati...
...And 4 more matches

Box-shadow generator - CSS: Cascading Style Sheets
"></div> <div class="ui-slider" data-topic="left" data-min="-300" data-max="700" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> <div class="ui-slider-input" data-topic="left" data-unit="px"></div> </div> <div id="transform_rotate" class="slidergroup"> <div class="ui-slider-name"> rotate </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> <div class="ui-slider" data-topic="rotate" data-min="-360" data-max="360" data-step="1" data-value="0"> </div> ...
...s="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output" data-topic="after" data-name="element:after" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> ...
...; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer...
...And 4 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
property links to the new synax. old prefixed syntax is still supported in some browsers. webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-ma...
...property links to the new synax. old prefixed syntax is still supported in some browsers. webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-p...
...property links to the new synax. old prefixed syntax is still supported in some browsers. webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-posi...
...And 4 more matches

scale() - CSS: Cascading Style Sheets
when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. ...
... when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. ...
... when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. ...
...And 4 more matches

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
the methods ispointinfill() and ispointinstroke() are not implemented yet (bug 1325319). svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgel...
...ber> and <integer> implementation status unknown form feed (u+000c) in whitespace implementation status unknown svgelement.xmlbase, svgelement.xmllang and svgelement.xmlspace removed implementation status unknown svgviewspec removed implementation status unknown svgelement.style removed implementation status unknown svggraphicselement.gettransformtoelement() removed not removed yet svggraphicselement.getctm() on the outermost element implementation status unknown animval attribute alias of baseval implementation status unknown dataset attribute for svgelement implementation status unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svg...
... ...
...And 4 more matches

Paint Flashing Tool - Firefox Developer Tools
e paint flashing, click the "highlight painted area" icon in the toolbox again. example: css transitions one area where implementation choices can affect repaint efficiency is in css transitions. the example below shows two different ways to move an element using a css transition. ...
...tions. the example below shows two different ways to move an element using a css transition. the first way applies the transition to the element's margin-left, while the second way moves the element using the transform property. ...
...ws two different ways to move an element using a css transition. the first way applies the transition to the element's margin-left, while the second way moves the element using the transform property. ...
...And 3 more matches

CanvasRenderingContext2D - Web APIs
ything drawn after clip() is called appears inside the clipping path only. for an example, see clipping paths in the canvas tutorial. canvasrenderingcontext2d.ispointinpath() reports whether or not the specified point is contained in the current path. canvasrenderingcontext2d.ispointinstroke() reports whether or not the specified point is inside the area contained by the stroking of a path. transformations objects in the canvasrenderingcontext2d rendering context have a current transformation matrix and methods to manipulate it. the transformation matrix is applied when creating the current default path, painting text, shapes and path2d objects. the methods listed below remain for historical and compatibility reasons as svgmatrix objects are used in most parts of the api nowadays and will be...
...t have a current transformation matrix and methods to manipulate it. the transformation matrix is applied when creating the current default path, painting text, shapes and path2d objects. the methods listed below remain for historical and compatibility reasons as svgmatrix objects are used in most parts of the api nowadays and will be used in the future instead. canvasrenderingcontext2d.currenttransform current transformation matrix (svgmatrix object). canvasrenderingcontext2d.gettransform retrieves the current transformation matrix being applied to the context. canvasrenderingcontext2d.rotate() adds a rotation to the transformation matrix. the angle argument represents a clockwise rotation angle and is expressed in radians. ...
...rrenttransform current transformation matrix (svgmatrix object). canvasrenderingcontext2d.gettransform retrieves the current transformation matrix being applied to the context. canvasrenderingcontext2d.rotate() adds a rotation to the transformation matrix. the angle argument represents a clockwise rotation angle and is expressed in radians. canvasrenderingcontext2d.scale() adds a scaling transformation to the canvas units by x horizontally and by y vertically. canvasrenderingcontext2d.translate() adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. canvasrenderingcontext2d.transform() multiplies the current transformation matrix with the matrix described by its arguments. ...
...And 3 more matches

SVGSVGElement - Web APIs
spec defining the initial view (i.e., before magnification and panning) of the current innermost svg document fragment. ...
...ch the values for the corresponding dom attributes that are on svgsvgelement directly the values for transform and viewtarget within currentview will be null if the initial view was a link into a <view> element, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will correspond to the corresponding attributes for the given <view> element the values for transform and viewtarget within currentview will be null if the initial view was a link into another element (i.e., other than a <view>), then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly for the closest ancestor <svg> element the values for transform within currentview ...
...dom attributes currentscale and currenttranslate are equivalent to the...
...And 3 more matches

backface-visibility - CSS: Cascading Style Sheets
lement is visible when turned towards the user. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. an element's back face is a mirror image of its front face. ...
...ored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. an element's back face is a mirror image of its front face. though invisible in 2d, the back face can become visible when a transformation causes the element to be rotated in 3d space. (this property has no effect on 2d transforms, which have no perspective.) syntax /* keyword values */ backface-visibility: visible; backface-visibility: hidden; /* global values */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; the backface-visibility property is specified as one of the keywords listed below. values visible the back face is visible when turned towards the user. hidden the...
...ace-visibility: inherit; backface-visibility: initial; backface-visibility: unset; the backface-visibility property is specified as one of the keywords listed below. values visible the back face is visible when turned towards the user. hidden the back face is hidden, effectively making the element invisible when turned away from the user. formal definition initial valuevisibleapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax visible | hidden examples cube with transparent and opaque faces this example shows a cube with transparent faces, and one with opaque faces. html <table> <tr> <th><code>backface-visibility: visible;</code></th> <th><code>backface-visibility: hidden;</code></th> </tr> <tr> <td> <di...
...And 3 more matches

scale3d() - CSS: Cascading Style Sheets
the scale3d() css function defines a transformation that resizes an element in 3d space. because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation is characterized by a three-dimensional vector. its coordinates define how much scaling is done in each direction. if all three coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is out...
...d(sx, sy, sz) values sx is a <number> representing the abscissa of the scaling vector. sy is a <number> representing the ordinate of the scaling vector. sz is a <number> representing the z-component of the scaling vector. ...
... cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...And 3 more matches

translate() - CSS: Cascading Style Sheets
the translate() css function repositions an element in the horizontal and/or vertical directions. its result is a <transform-function> data type. this transformation is characterized by a two-dimensional vector. its coordinates define how much the element moves in each direction. syntax /* single <length-percentage> values */ transform: translate(200px); transform: translate(50%); /* double <length-percentage> values */ transform: translate(100px, 200px); transform: translate(100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%); values single <length-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector. the ordinate (vertical, y-coordinate) of the translating vector will be se...
...ate(30%, 50%); values single <length-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector. the ordinate (vertical, y-coordinate) of the translating vector will be set to 0. for example, translate(2) is equivalent to translate(2, 0). a percentage value refers to the width of the reference box defined by the transform-box property. double <length-percentage> values this value describes two <length> or <percentage> values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector. a percentage as first value refers to the width, as second part to the height of the reference box defined by the transform-box property. cartesian coordinates on ℝ2 homog...
...ate) and the ordinate (y-coordinate) of the translating vector. a percentage as first value refers to the width, as second part to the height of the reference box defined by the transform-box property. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. 10tx01ty001 10tx01ty001 100tx010ty00100001 [1 0 0 1 tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60p...
...And 3 more matches

translate3d() - CSS: Cascading Style Sheets
its coordinates define how much the element moves in each direction. syntax translate3d(tx, ty, tz) values tx is a <length> or <percentage> representing the abscissa of the translating vector. ty is a <length> or <percentage> representing the ordinate of the translating vector. ...
...its coordinates define how much the element moves in each direction. syntax translate3d(tx, ty, tz) values tx is a <length> or <percentage> representing the abscissa of the translating vector. ty is a <length> or <percentage> representing the ordinate of the translating vector. ...
...ment moves in each direction. syntax translate3d(tx, ty, tz) values tx is a <length> or <percentage> representing the abscissa of the translating vector. ty is a <length> or <percentage> representing the ordinate of the translating vector. tz is a <length> representing the z component of the translating vector. it can't be a <percentage> value; in that case the property containing the transform is considered invalid. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. a translation is not a linear transformation in ℝ3 and can't be represented using a cartesian-coordinate matrix. ...
...And 3 more matches

translateZ() - CSS: Cascading Style Sheets
the translatez() css function repositions an element along the z-axis in 3d space, i.e., closer to or farther away from the viewer. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this transformation is defined by a <length> which specifies how far inward or outward the element or elements move. in the above interactive examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube. note: translatez(tz) is equivalent to translate3d(0, 0, tz).
...ivalent to translate3d(0, 0, tz). syntax translatez(tz) values tz a <length> representing the z-component of the translating vector. a positive value moves the element towards the viewer, and a negative value farther away. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. a translation is not a linear transformation in ℝ3 and can't be represented using a cartesian-coordinate matrix. 10000100001t0001 examples in this example, two boxes are created. one is positioned normally on the page, without being translated at all. the second is altered by applying perspective to create a 3d...
... examples in this example, two boxes are created. one is positioned normally on the page, without being translated at all. the second is altered by applying perspective to create a 3d space, then moved towards the user. html <div>static</div> <div class="moved">moved</div> css div { position: relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does. first, the perspective() function positions the viewer relative to the plane that lies where z=0 (in essence, the surface of the screen). a value of 500px means the user is 500 pixels "in front of" the imagery located at z=0. then, the translatez(...
...And 3 more matches

gradientUnits - SVG: Scalable Vector Graphics
percentages represent values relativ...
... userspaceonuse this value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the current svg viewport. objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the bounding box for the object. wi...
...alues relative to the current svg viewport. objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the bounding box for the object. with this value and gradienttransform being the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). when the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradi...
...And 3 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
ts which can then be loaded on demand or in parallel. 82 codec glossary, webmechanics a codec (a blend word derived from "coder-decoder") is a program, algorithm, or device that encodes or decodes a data stream. a given codec knows how to handle a specific encoding or compression technology. 83 compile codingscripting, glossary compiling is the process of transforming a computer program written in a given language into an equivalent program of another language. a compiler is a software to execute this task. sometimes, this task is also referred to as "assembling" or "build", which typically indiciates more than just compilation is done, e.g. packaging it in a binary format. 84 compile time codingscripting, glossary, javascript the compi...
...n to traditional methods like frequency analysis and index of coincidence, cryptanalysis includes more recent methods, like linear cryptanalysis or differential cryptanalysis, that can break more advanced ciphers. 97 cryptographic hash function cryptography, glossary, security a cryptographic hash function, also sometimes called a digest function, is a cryptographic primitive transforming a message of arbitrary size into a message of fixed size, called a digest. cryptographic hash functions are used for authentication, digital signatures, and message authentication codes. 98 cryptography cryptography, glossary, privacy, security cryptography, or cryptology, is the science that studies how to encode and transmit messages securely. cryptography designs and st...
...that is generally used to indicate to humans how some code syntax works, or illustrate the design of an item of code architecture. it won't work if you try to run it as code. 346 public-key cryptography cryptography, glossary, public-key cryptography, security public-key cryptography — or asymmetric cryptography — is a cryptographic system in which keys come in pairs. the transformation performed by one of the keys can only be undone with the other key. one key (the private key) is kept secret while the other is made public. 347 python codingscripting, glossary, language, python, programming python is a high level general-purpose programming language. it uses a multi-paradigm approach, meaning it supports procedural, object-oriented, and some functional...
...And 2 more matches

Client-side tooling overview - Learn web development
to take notes. though your choice of code editor is certainly a tooling choice, this series of articles will go beyond that, focusing on developer tools that help you produce web code more efficiently. from a high-level perspective, you can put client-side tools into the following three broad categories of problems to solve: safety net — tools that are useful during your code development. transformation — tools that transform code in some way, e.g. turning an intermediate language into javascript that a browser can understand. post-development — tools that are useful after you have written your code, such as testing and deployment tools. let's look at each one of these in more detail. safety net these are tools that make the code you write a little better. this part of the tooling...
...de, making it as small as possible before it is uploaded to a server. parcel is a particularly clever tool that fits into this category — it can do the above tasks, but also helps to package assets like html, css, and image files into convenient bundles that you can then go on to deploy, and also adds dependencies for you automatically whenever you try to use them. ...
...l that fits into this category — it can do the above tasks, but also helps to package assets like html, css, and image files into convenient bundles that you can then go on to deploy, and also adds dependencies for you automatically whenever you try to use them. it can even handle some code transformation duties for you. webpack is another very popular packaging tool that does similar things. transformation this stage of your web app lifecycle typically allows you to code in either "future code" (such as the latest css or javascript features that might not have native support in browsers yet) or code using another language entirely, such as typescript. transformation tools will then generate browser-compatible code for you, to be used in production. generally web development is thought of as ...
...And 2 more matches

Index - Firefox Developer Tools
context: 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. 72 view background images in the rules view, you can see a preview of images specified using background-image. ...
... guide, inspector, tools the element that's currently selected in the page inspector can be referenced in the web console using the variable $0. 72 view background images in the rules view, you can see a preview of images specified using background-image. ...
...rrently selected in the page inspector can be referenced in the web console using the variable $0. 72 view background images in the rules view, you can see a preview of images specified using background-image. just hover over the rule: 73 visualize transforms guide, inspector, tools if you hover over a transform property in the rules view, you'll see the transformation overlaid in the page: 74 work with animations guide, inspector, tools this article covers three tools you can use to visualize and edit animations: 75 animation inspector (firefox 41 and 42) the animation inspector enables you to: 76 animation inspector example: css transitions example animation using css transitions. 77...
...And 2 more matches

Streams API concepts - Web APIs
m() constructor. these currently have very limited availability in browsers. pipe chains the streams api makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a pipe chain. there are two methods available in the spec to facilitate this: readablestream.pipethrough() — pipes the stream through a transform stream, which is a pair comprised of a writable stream that has data written to it, and a readable stream that then has the data read out of it — this acts as a kind of treadmill that constantly takes data in and transforms it to a new state. effectively the same stream is written to, and then the same values are read. a simple example is a text decoder, where raw bytes are written, and then st...
... readablestream.pipeto() — pipes to a writable stream that acts as the end point of the pipe chain. the start of the pipe chain is called the original source, and the end is called the ultimate sink. ...
...s for ideas, and this web sockets example. readablestream.pipeto() — pipes to a writable stream that acts as the end point of the pipe chain. the start of the pipe chain is called the original source, and the end is called the ultimate sink. note: this functionality isn't fully thought through yet, or available in many browsers. ...
...And 2 more matches

Using bounded reference spaces - Web APIs
then... xrsession.requestanimationframe(ondrawframe); } if you compare this code to the code used in examples using unbounded reference spaces, you'll confirm that, indeed, the biggest difference is the reference space type bounded-floor. the code begins by trying to get a bounded-floor reference space, but if that fails, it requests a local-floor space. in ...
...shifting the view upward by a fixed amount in order to ensure that the scene's contents render in the right place. keep in mind that by default, the viewer's position is placed immediately above the floor, like a camera lying on the ground. if you wish to simulate a human's perspective on the scene, you probably want to move the viewpoint upward by a distance that approximates human eye level by transforming it by providing an appropriate transform matrix to the xrreferencespace method requestoffsetreferencespace(). this would change the onrefspacecreated() method from the above snippet to: function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); let startposition = vec3.fromvalues(0, 1.5, 0); const startorientation = vec3.f...
...pace(). ...
...And 2 more matches

XRReferenceSpace - Web APIs
eferencespace interface describes the coordinate system for a specific tracked entity or object within the virtual world using a specified tracking behavior. the tracking behavior is defined by the selected reference space type. it expands upon the base class, xrspace, by adding support for several different tracking behaviors as well as to request a new reference space which describes the offset transform between the tracked object and another location in the world. all reference spaces—with the sole exception being bounded reference spaces—are described using the xrreferencespace type. bounded spaces are implemented as xrboundedreferencespace objects. these are special spaces which let you establish a perimeter within which it's "safe" for the viewer to move. for xr systems that allow the us...
...s parent interface, xrspace (there are none at this time), xrreferencespace inherits methods from eventtarget. xrreferencespace also provides the following methods. getoffsetreferencespace() creates and returns a new reference space object as the same type as the one on which you call the method (so, either xrreferencespace or xrboundedreferencespace). the new reference space can be used to transform a coordinate from the reference space of the object on which the method is called into a different coordinate space. this is useful for positioning objects while rendering, and to perform the needed transforms when changing the viewer's position and/or orientation in 3d space. events in addition to other events that may be sent to xrspace or eventtarget objects, the following also apply to xrr...
...e origin to reflect their movement and any orientation changes they make. to move or rotate the user's view of the world, you need to change the xrreferencespace used to represent that viewpoint. however, xrreferencespace is immutable, so you need to instead create a new reference space representing the changed viewpoint. this is easily done using the getoffsetreferencespace() method. ...
...And 2 more matches

Web APIs
ionsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimatecolorelement svganimateelement svganimatemotionelement svganimatetransformelement svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist svganimationelement svgcircleelement svgclippathelement svgcolorprofileelement svgcomponenttransferfunctionelement svgcursor...
...ement svgpreserveaspectratio svgradialgradientelement svgrect svgrectelement svgrenderingintent svgsvgelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstringlist svgstylable svgstyleelement svgswitchelement svgsymbolelement svgtrefelement svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtransform svgtransformlist svgtransformable svgurireference svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker serviceworkercontainer serviceworkerglobalscope serviceworkermessageevent serviceworkerregistration serviceworkerstate shadowro...
...estimate storageevent storagemanager storagequota stylepropertymap stylepropertymapreadonly stylesheet stylesheetlist submitevent subtlecrypto syncevent syncmanager t taskattributiontiming text textdecoder textencoder textmetrics textrange texttrack texttrackcue texttracklist timeevent timeranges touch touchevent touchlist trackdefault trackdefaultlist trackevent transferable transformstream transitionevent treewalker typeinfo u uievent ulongrange url urlsearchparams urlutilsreadonly usb usbalternateinterface usbconfiguration usbdevice usbendpoint usbintransferresult usbinterface usbisochronousintransferpacket usbisochronousintransferresult usbisochronousouttransferpacket usbisochronousouttransferresult usbouttransferresult usvstring userdatahandler use...
...And 2 more matches

perspective-origin - CSS: Cascading Style Sheets
e viewer is looking. it is used as the vanishing point by the perspective property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed. syntax /* one-value syntax */ perspective-origin: x-position; /* two-value syntax */ perspective-origin: x-position y-position; /* when both x-position and y-position are keywords, the following is also valid */ perspective-origin: y-position x-position; /* global values...
...alues: <length-percentage> indicating the position as an absolute length value or relative to the height of the element. the value may be negative. top, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. bottom, a keyword being a shortcut for the 100% percentage value. ...
...ight; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic 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: b...
...And 2 more matches

perspective - CSS: Cascading Style Sheets
itory. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied. <length> a <length> giving the distance from the user to the z=0 plane. it is used to apply a perspective transform to the element and its content. if the value is 0 or a negative number, no perspective transform is applied. description each 3d element with z>0 becomes larger; each 3d-element with z<0 becomes smaller. the strength of the effect is determined by the value of...
...t drawn. the vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property. using this property with a value different than 0 and none creates a new stacking context. also, in that case, the object will act as a containing block for position: fixed elements that it contains. formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valuethe absolute length or noneanimation typea lengthcreates stacking contextyes formal syntax none | <length> examples setting perspective this example shows a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below ...
...250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { 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: ...
...And 2 more matches

rotate - CSS: Cascading Style Sheets
syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis. equivalent to a rotate() (2d rotation) function. ...
...rotatez() (3d rotation) function. vector plus angle value three <number>s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an <angle> specifying the angle to rotate the element through. equivalent to a rotate3d() (3d rotation) function. none specifies that no rotation should be applied. ...
... representing an origin-centered vector that defines a line around which you want to rotate the element, plus an <angle> specifying the angle to rotate the element through. equivalent to a rotate3d() (3d rotation) function. none specifies that no rotation should be applied. ...
...And 2 more matches

scale - CSS: Cascading Style Sheets
syntax /* keyword values */ scale: none; /* single values */ /* values of more than 1 make the element grow */ scale: 2; /* values of less than 1 make the element shrink */ scale: 0.5; /* two values */ scale: 2 0.5; /* three values */ scale: 2 0.5 2; values single number value a <number> specifying a scale factor to make the affected element scale by the same factor along both the x and y axes. equivalent to a scale() (2d scaling) function with a single value specified. ...
...axis scaling values (respectively) of a 2d scale. equivalent to a scale() (2d scaling) function with two values specified. three length/percentage values three <number>s that specify the x, y, and z axis scaling values (respectively) of a 3d scale. equivalent to a scale3d() (3d scaling) function. none specifies that no scaling should be applied. ...
...2d scaling) function with two values specified. three length/percentage values three <number>s that specify the x, y, and z axis scaling values (respectively) of a 3d scale. equivalent to a scale3d() (3d scaling) function. none specifies that no scaling should be applied. ...
...And 2 more matches

matrix() - CSS: Cascading Style Sheets
tx ty are <number>s describing the translation to apply. ...
... tx ty are <number>s describing the translation to apply. ...
...rix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1). syntax the matrix() function is specified with six values. the constant values are implied and not passed as parameters; the other parameters are described in the column-major order. note: until firefox 16, gecko accepted a <length> value for tx and ty. matrix(a, b, c, d, tx, ty) values a b c d are <number>s describing the linear transformation. tx ty are <number>s describing the translation to apply. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scale...
...And 2 more matches

scaleX() - CSS: Cascading Style Sheets
note: scalex(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1). syntax scalex(s) values s is a <number> representing the scaling factor to apply on the abscissa of each point of the element. ...
... note: scalex(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1). syntax scalex(s) values s is a <number> representing the scaling factor to apply on the abscissa of each point of the element. ...
... note: scalex(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1). syntax scalex(s) values s is a <number> representing the scaling factor to apply on the abscissa of each point of the element. ...
...And 2 more matches

vector-effect - SVG: Scalable Vector Graphics
ified paint, then stroke the outline with a specified paint. non-scaling-stroke this value modifies the way an object is stroked. normally stroking involves calculating stroke outline of the shapeʼs path in current user coordinate system and filling that outline with the stroke paint (color or gradient). the resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level. non-scaling-size this value specifies a special user coordinate system used by the element and its descendants. the scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of rotation and ske...
...tation and skew. also, it does not specify the origin of the user coordinate system. since this value suppresses scaling of the user coordinate system, it also has the characteristics of non-scaling-stroke. non-rotation this value specifies a special user coordinate system used by the element and its descendants. the rotation and skew of that user coordinate system is suppressed in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of scaling. also, it does not specify the origin of user coordinate system. fixed-position this value specifies a special user coordinate system used by the element and its descendants. the position of user coordinate system is fixed in spite of any transformation changes from a host coordinate space. howeve...
...lso, it does not specify the origin of user coordinate system. fixed-position this value specifies a special user coordinate system used by the element and its descendants. the position of user coordinate system is fixed in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of rotation, skew and scaling. when this vector effect and the transform property are defined at the same time, that property is consumed for this effect. ...
...And 2 more matches

Index - Archive of obsolete content
within folders. in addition to being handy pointers to useful resources, bookmarks in mozilla can be used to make the address bar itself a power tool. searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks. 379 build this page was auto-generated because a user created a sub-page to this page. ...
...and usage patterns. 669 tracevis tracevis is a performance visualization system for tracemonkey. if tracemonkey is built with tracevis, and run with tracevis enabled, then tracemonkey will output a log of all its activity transitions. the log can be postprocessed into a visualization that can be used to rapidly diagnose many tracing-related performance issues. 670 transforming xml with xslt:mozilla xslt no summary! 671 transforming xml with xslt:the netscape xslt no summary! 672 treehydra treehydra try the gcc python plugin instead: https://fedorahosted.org/gcc-python-plugin/. 673 treehydra build instructions dehydra follow dehydra build instructions. this automatically builds treehydra for y...
...sions and the browser itself, not web sites) to locally save preferences on a per-site basis. this makes it possible to write an extension that lets the user customize the appearance of specific web sites (setting the font size larger on sites that use obnoxiously small fonts, for instance). 3432 visualizing an audio spectrum this example calculates and displays fast fourier transform (fft) spectrum data for the playing audio. the function handling the loadedmetadata event stores the metadata of the audio element in global variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas. 3433 working with bfcache cache, developing mozilla, guide q: what is the bfcache exactly? 3434 cert_override.tx...
... 3741 digital signatures security, tutorial encryption and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this document. but encryption and decryption, by themselves, do not address another problem: tampering. 3742 encryption and decryption security, tutorial encryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. decryption is the process of transforming encrypted information so that it is intelligible again. 3743 introduction to public-key cryptography security, tutorial public-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted e...

JXON - Archive of obsolete content
licts, the representation of nodes and attributes names is case insensitive (always rendered in lower case), so objects' local property names set using javascript must always have some kind of capitalization (that is, at least one capital letter somewhere in their names), as you can see below. the following algorithms are somewhat based on the parker convention, version 0.4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so, one can say that we follow a our convention). moreover, all algorithms are equally lossless for the contemplated nodes. we consider the third algorithm as the most representative and practical jxon parsing algorithm. ...
... be converted into text nodes), the process is unnecessarily costly. in fact, if your goal is to edit an xml document, it is strongly recommended to work on it rather than create new ones. the parker convention the functions listed above for the conversion of an xml document to json (often called "jxon algorithms") are more or less freely based on the parker convention (especially regarding the transformation of tags names into object properties names, the recognition of the typeof of all the collected text content of each tag and the absorption of solitary text and/or cdatasection nodes into primitive values). it is called “parker convention” in opposition to “badgerfish convention”, after the comic parker & badger by cuadrado. see also: badgerfish convention. the following is a transcr...
...he typeof of all the collected text content of each tag and the absorption of solitary text and/or cdatasection nodes into primitive values). it is called “parker convention” in opposition to “badgerfish convention”, after the comic parker & badger by cuadrado. see also: badgerfish convention. the following is a transcription of the parker convention paper (version 0.4), from the page “transformingrules” of the xml2json-xslt project site. this convention was written in order to regulate the conversion to json from xslt, so parts of it are futile for javascript. note: on october 29th, 2013, the world wide web consortium relased in a note on official algorithm for converting html5 microdata to json. however, html microdata is not html: microdata is a formatted subset of html. translat...
...sity utilised. as above, optional properties and methods (commented in the example) of the first algorithm (verbosity level: 3) are not included. the jxon.unbuild() method utilises our reverse algorithm. therefore, all code considerations remain the same. ...

Animating CSS properties - Firefox Developer Tools
a repaint. left max-width border-width margin-left font-size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color properties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine. an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform. the intention of this scenario isn't to convince yo...
...dea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play along, the demo website is here. it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint. there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording. you'll only need to record a few seconds...
...y is hurting performance here. in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints entirely. animating using transform now switch the radio button in the web page to "use transform", and make a new recording. it will look something like this: waterfall overview compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation. frame rate ...
...ersion that uses margin, this is looking pretty good. we're averaging nearly 60fps, and apart from one dip near the start, we're getting a consistently high frame rate. waterfall the timeline view shows the reason for the improved frame rate. compared with the version that uses margin, we're not spending any time time in layout or (more importantly in this case) in paint: in this case, using transform significantly improved the site's performance, and the performance tools were able to show how and why it did. ...

CanvasRenderingContext2D.scale() - Web APIs
for instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size. syntax void ctx.scale(x, y); parameters x scaling factor in the horizontal direction. a negative value flips pixels across the vertical axis. a value of 1 results in no horizontal scaling. ...
...ntal scaling. y scaling factor in the vertical direction. a negative value flips pixels across the horizontal axis. a value of 1 results in no vertical scaling. examples scaling a shape this example draws a scaled rectangle. a non-scaled rectangle is then drawn for comparison. html <canvas id="canvas"></canvas> javascript the rectangle has a specified width of 8 and a height of 20. the transformation matrix scales it by 9x horizontally and by 3x vertically. thus, its final size is a width of 72 and a height of 60. notice that its position on the canvas also changes. since its specified corner is (10, 10), its rendered corner becomes (90, 30). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red...
...x vertically. thus, its final size is a width of 72 and a height of 60. notice that its position on the canvas also changes. since its specified corner is (10, 10), its rendered corner becomes (90, 30). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(10, 10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle is gray. flipping things horizontally or vertically you can use scale(-1, 1) to flip the context horizontally and scale(1, -1) to flip it vertically. in this example, the words "...
...ll to filltext() specifies a negative x coordinate. this is to adjust for the negative scaling factor: -280 * -1 becomes 280, and text is drawn leftwards from that point. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification. living standard ...

Applying styles and colors - Web APIs
for even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels. while slightly painful when initially working with scalable 2d graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. a 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position. a linecap example the linecap property determines how the end points of every line are drawn. there are three possible values for this property and those are: butt, round and square. by default this property is set to butt. b...
...e placed from the inside connection point. if two lines exceed this value, a bevel join gets drawn instead. note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterlimit property (whose default value is 10.0 in the html <canvas>), so the miterlimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges. more exactly, the miter limit is the maximum allowed ratio of the extension length (in the html canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. it can equivalently be defined as the maximum allo...
...attern(img, 'repeat'); ctx.fillstyle = ptrn; ctx.fillrect(0, 0, 150, 150); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample shadows using shadows involves just four properties: shadowoffsetx = float indicates the horizontal distance the shadow should extend from the object. this value isn't affected by the transformation matrix. the default is 0. shadowoffsety = float indicates the vertical distance the shadow should extend from the object. this value isn't affected by the transformation matrix. the default is 0. shadowblur = float indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. the default value is 0...
...xels and is not affected by the current transformation matrix. the default value is 0. shadowcolor = color a standard css color value indicating the color of the shadow effect; by default, it is fully-transparent black. the properties shadowoffsetx and shadowoffsety indicate how far the shadow should extend from the object in the x and y directions; these values aren't affected by the current transformation matrix. use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. these are both 0 by default. the shadowblur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. the default value is 0. the shadowcol...

Optimizing canvas - Web APIs
i-layer { z-index: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style> use plain css for large background images if you have a static background image, you can draw it onto a plain <div> element using the css background property and position it under the canvas. this will negate the need to render the background to the canvas on every tick. ...
...x: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style> use plain css for large background images if you have a static background image, you can draw it onto a plain <div> element using the css background property and position it under the canvas. this will negate the need to render the background to the canvas on every tick. ...
...this information can be used internally by the browser to optimize rendering. ...
...they use the gpu. the best case is to not scale the canvas, or have a smaller canvas and scale up rather than a bigger canvas and scale down. var scalex = window.innerwidth / canvas.width; var scaley = 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 context with htmlcanvaselement.getcontext(). this information can be used internally by the browser to optimize rendering. var ctx = canvas.getcontext('2d', { alpha: false }); more tips batch canvas calls toge...

SVGMatrix - Web APIs
float representing the e component of the matrix. svgmatrix.f a float representing the f component of the matrix. methods svgmatrix.multiply() performs matrix multiplication. this matrix is post-multiplied by another matrix, returning the resulting new matrix as svgmatrix. svgmatrix.inverse() returns the inverse matrix as svgmatrix. svgmatrix.translate() post-multiplies a translation transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scale() post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scalenonuniform() post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotate() post-multiplies a ...
...the rotation angle is determined by taking (+/-) atan(y/x). ...
...rrent matrix and returns the resulting matrix as svgmatrix. svgmatrix.scalenonuniform() post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotate() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotatefromvector() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix. the rotation angle is determined by taking (+/-) atan(y/x). the direction of the vector (x, y) determines whether the positive or negative angle value is used. svgmatrix.flipx() post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as svgmatrix. svgmatrix.flipy() post-multiplies the transfor...
...king (+/-) atan(y/x). the direction of the vector (x, y) determines whether the positive or negative angle value is used. svgmatrix.flipx() post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as svgmatrix. svgmatrix.flipy() post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as svgmatrix. svgmatrix.skewx() post-multiplies a skewx transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.skewy() post-multiplies a skewy transformation on the current matrix and returns the resulting matrix as svgmatrix. exceptions a domexception with the code no_modification_allowed_err is raised when attempting updating a read-only attribute or when the object itself is read-only. specifications spe...

VRStageParameters - Web APIs
vrstageparameters.sizex read only returns the width of the play-area bounds in meters. ...
... vrstageparameters.sizex read only returns the width of the play-area bounds in meters. ...
... draft initial definition ...
... draft initial definition ...

XRPose - Web APIs
h has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs. see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. ...
...se frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs. see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. ...
... inputs. see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose relative to the base xrspace. xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). ...
...pose relative to the base xrspace. xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). if any component of the transform is computed or created artificially (such as by using mouse or keyboard controls to move through space), this value is instead true, indicating that the transform is in part emulated in software. example <<<--- todo: needs example --->>> specifications specification status comment webxr device apithe definition of 'xrpose' in that specification. working draft ...

Generating HTML - Web APIs
the <body> element of the article now contains html elements (a <b> and <u> tag, see figure 2). the xml document contains both html elements and xml elements, but only one namespace is needed, namely for the xml elements. since there is no html namespace, and using the xhtml namespace would force the xsl to create an xml document that would not behave like a html document, the xsl:output in the xsl stylesheet will make sure the resulting document will be handled as html. ...
...by using the xsl:output element. by setting the output to be html and not having a namespace on the resulting elements (colored in blue), those elements will be treated as html elements. figure 3 : xsl stylesheet with 2 namespaces (example2.xsl) xsl stylesheet (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html"/> ... </xsl:stylesheet version="1.0"> a template matching the root node of the xml document is created and used to create the basic structure of the html page. figure 4 : creating the basic html document xsl stylesheet (example2.xsl): ... <xsl:template match="/"> <html> ...
...ree more xsl:template's are needed to complete the example. the first xsl:template is used for the author nodes, while the second one processes the body node. the third template has a general matching rule which will match any node and any attribute. it is needed in order to preserve the html elements in the xml document, since it matches all of them and copies them out into the html document the transformation creates. figure 5 : final 3 templates xsl stylesheet(example2.xsl): ... <xsl:template match="myns:author"> -- <xsl:value-of select="." /> <xsl:if test="@company"> :: <b> <xsl:value-of select="@company" /> </b> </xsl:if> <br /> </xsl:template> <xsl:template match="myns:body"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy...
... </xsl:template> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> ... ...

Color picker tool - CSS: Cascading Style Sheets
elect: 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; tex...
...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; bo...
...picker-samples { width: 375px; height: 114px; max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-active='true'] { border-color: #999; } #picker-samples .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; ...
... line-height: inherit; } #color-palette .palette { width: 456px; height: 38px; margin: 3px; padding: 3px; display: table; background-color: #fff; } #color-palette .palette .sample { width: 30px; height: 30px; margin: 3px; position: relative; border: 1px solid #ddd; float: left; transition: all 0.2s; } #color-palette .palette .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #color-palette .controls { } #color-palette .controls > * { float: left; } #color-palette .controls > *:hover { cursor: pointer; } #color-palette .controls .lock { width: 24px; height: 24px; margin: 10px; padding: 3px; background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); background-repeat: no-repeat; background-position: bott...

position - CSS: Cascading Style Sheets
ue creates a new stacking context when the value of z-index is not auto. the margins of absolutely positioned boxes do not collapse with other margins. fixed the element is removed from the normal document flow, and no space is created for the element in the page layout. it is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in which case that ancestor behaves as the containing block. (note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) its final position is determined by the values of top, right, bottom, and left. this value always creates a new stacking c...
...ccessibility issues. as a user scrolls, the browser must repaint the sticky or fixed content in a new location. depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. one solution is to add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility. formal definition initial valuestaticapplies toall elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax static | relative | absolute | sticky | fixed examples relative positioning relatively...
...this can be used to create a "floating" element that stays in the same position regardless of scrolling. in the example below, box "one" is fixed at 80 pixels from the top of the page and 10 pixels from the left. even afte...
...this can be used to create a "floating" element that stays in the same position regardless of scrolling. in the example below, box "one" is fixed at 80 pixels from the top of the page and 10 pixels from the left. even after scrolling, it remains in the same place relative to the viewport. html <div class...

perspective() - CSS: Cascading Style Sheets
the perspective() css function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the perspective() transform function is part of the transform value applied on the element being transformed. this differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space. syntax the perspective distance used by perspective() is sp...
...everything appears in a 2-dimensional view, or the screen. a positive value makes the element appear closer to the user than the rest of the interface, a negative value farther. the greater the value, the further away the perspective of the user is. perspective(d) values d is a <length> representing the distance from the user to the z=0 plane. if it is 0 or a negative value, no perspective transform is applied. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. this transformation is not a linear transformation in ℝ3, and can't be represented using a cartesian-coordinate matrix. 100...
...v> <div class="face left">c</div> </div> <p>with perspective (4cm):</p> <div class="perspective-box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { back...
... margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-color: limegreen; transform: translate3d(0, 0, 50px); } result specifications specification status comment css transforms level 2the definition of 'perspective()' in that specification. editor's draft initial definition ...

rotate3d() - CSS: Cascading Style Sheets
the rotate3d() css function defines a transformation that rotates an element around a fixed axis in 3d space, without deforming it. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in 3d space, rotations have three degrees of liberty, which together describe a single axis of rotation. the axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin property). if, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the user agent will normalize it internally. a non-norm...
...-coordinate of the vector denoting the axis of rotation which could between 0 and 1. z is a <number> describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1. a is an <angle> representing the angle of the rotation. a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. cartesian coordinates on ℝ2 this transformation applies to the 3d space and can't be represented on the plane. homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 ...
......
... editor's draft initial definition ...

rotateX() - CSS: Cascading Style Sheets
note: rotatex(a) is equivalent to rotate3d(1, 0, 0, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. ...
... note: rotatex(a) is equivalent to rotate3d(1, 0, 0, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. ...
...will be clockwise; if negative, it will be counter-clockwise. rotatex(a) values a is an <angle> representing the angle of the rotation. a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. ...
...n coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatex(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification. editor's draft initial definition ...

rotateY() - CSS: Cascading Style Sheets
note: rotatey(a) is equivalent to rotate3d(0, 1, 0, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. ...
... note: rotatey(a) is equivalent to rotate3d(0, 1, 0, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. ...
...will be clockwise; if negative, it will be counter-clockwise. rotatey(a) values a is an <angle> representing the angle of the rotation. a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. ...
...n coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatey(60deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification. editor's draft initial definition ...

rotateZ() - CSS: Cascading Style Sheets
note: rotatez(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. ...
... note: rotatez(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. ...
...will be clockwise; if negative, it will be counter-clockwise. rotatez(a) values a is an <angle> representing the angle of the rotation. a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. ...
...inates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatez(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification. editor's draft initial definition ...

scaleZ() - CSS: Cascading Style Sheets
the scalez() css function defines a transformation that resizes an element along the z-axis. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scalez(-1) defines an axial symmetry, with the z-axis passing through the origin (as specified by the transform-origin property). in the above interactive examples, perspec...
... note: scalez(sz) is equivalent to to scale3d(1, 1, sz). ...
...pace), have been set on the cube. note: scalez(sz) is equivalent to to scale3d(1, 1, sz). syntax scalez(s) values s is a <number> representing the scaling factor to apply on the z-coordinate of each point of the element. ...
... this transformation applies to the 3d space and can't be represented on the plane. 10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'scalez()' in that specification. ...

skewX() - CSS: Cascading Style Sheets
the abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. ...
...the abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. ...
... working draft initial definition ...
... working draft initial definition ...

skewY() - CSS: Cascading Style Sheets
the ordinate coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. ...
...the ordinate coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. ...
... working draft initial definition ...
... working draft initial definition ...

translate - CSS: Cascading Style Sheets
syntax /* keyword values */ translate: none; /* single values */ translate: 100px; translate: 50%; /* two values */ translate: 100px 200px; translate: 50% 105px; /* three values */ translate: 50% 105px 5rem; values single <length-percentage> value a <length> or <percentage> that specifies a 2d translation, with the same translation along both the x and y axes. equivalent to a translate() (2d translation) function with a single value specified. ...
...n. equivalent to a translate() (2d translation) function with two values specified. three values two <length-percentage> and single <length> values that specify the x, y, and z axis translation values (respectively) of a 3d translation. equivalent to a translate3d() (3d translation) function. none specifies that no translation should be applied. ...
... axis translation values (respectively) of a 3d translation. equivalent to a translate3d() (3d translation) function. none specifies that no translation should be applied. ...
...html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification. editor's draft initial definition. initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes ...

will-change - CSS: Cascading Style Sheets
ncrease the responsiveness of a page by doing potentially expensive work before they are actually required. important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance problems. /* keyword values */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* example of <custom-ident> */ will-change: opacity; /* example of <custom-ident> */ will-change: left, top; /* example of two <animateable-feature> */ /* global values */ will-change: inherit; will-change: initial; will-change: unset; proper usage of this property can be a bit tricky: don't apply will-change to too many elements. the browser already tries as har...
... to animate or change the property with the given name on the element in the near future. if the property given is a shorthand, it indicates the expectation for all the longhands the shorthand expands to. it cannot be one of the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents. the spec doesn't define the behavior of particular value, but it is common for transform to be a compositing layer hint. chrome currently takes two actions, given particular css property idents: establish a new compositing layer or a new stacking context. via stylesheet it may be appropriate to include will-change in your style sheet for an application that does page flips on key presses like an album or a slide deck presentation where the pages are large and complex. this will le...
...or a slide deck presentation where the pages are large and complex. this will let browser prepare the transition ahead of time and allow for snappy transitions between the pages as soon as the key is pressed. but use caution with the will-change property directly in stylesheets. it may cause the browser to keep the optimization in memory for much longer than it is needed. ...
... which is probably what you should be doing in most cases. var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment css will change module level 1the definition of 'will-change' in that specification. candidate recommendation initial definition ...

Demos of open web technologies
n of open web technology, please add a link to the appropriate section here. ...
...priate section here. ...
...fects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" pa...
...opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope html5 web audio showcase (source code) html5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api slide my te...

<input type="range"> - HTML: Hypertext Markup Language
and right. when supported, we will be able to make the range vertical, to slide up and down with css by declaring a height value greater than the width value. this is not actually implemented yet by any of the major browsers. (see firefox bug 981916, chrome bug 341071). it also, perhaps, may still be under discussion. 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. consider this range control: <input type="range" id="volume" min="0" max="11" value="7" step="1"> screenshotlive sample this control is horizontal (at lea...
...ing to the specification, making it vertical requires adding css to change the dimensions of the control so that it's taller than it is wide, like this: css #volume { height: 150px; width: 50px; } html <input type="range" id="volume" min="0" max="11" value="7" step="1"> result screenshotlive sample unfortunately, no major browsers currently support vertical range controls directly. ...
...eight: 150px; width: 50px; } html <input type="range" id="volume" min="0" max="11" value="7" step="1"> result screenshotlive sample unfortunately, no major browsers currently support vertical range controls directly. transform: rotate(-90deg) you can, however, create a vertical range control by drawing a horizontal range control on its side. the easiest way is to use css: by applying a transform to rotate the element, you can make it vertical. let's take a look. html the html needs to be updated to wrap the <input> in a <div> to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page): <div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div> css now we need some css. first is...
...n essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things. .slider-wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; } then comes the style information for the <input> element within the reserved space: .slider-wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); } the size of the control is set to be 150 pixels long by 20 pixels tall. the margins are set to 0 and the transform-origin is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. offsetting the origin by 75px on each axis mean...

JSON.parse() - JavaScript
the json.parse() method parses a json string, constructing the javascript value or object described by the string. an optional reviver function can be provided to perform a transformation on the resulting object before it is returned. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax json.parse(text[, reviver]) parameters text the string to parse as json. see the json object for a description of json syntax. reviver optional if a function, this prescribes how the value originally produced by parsing is transformed, before being returned. return value the object, array, string, number, boolean, or null val...
...he "{" operator is subject to a syntactic ambiguity // in javascript: it can begin a block or an object literal. we wrap the text // in parens to eliminate the ambiguity. j = eval("(" + text + ")"); // in the optional fourth stage, we recursively walk the new structure, passing // each name/value pair to a reviver function for possible transformation. return (typeof reviver === "function") ? walk({ "": j }, "") : j; } // if the text is not json parseable, then a syntaxerror is thrown. throw new syntaxerror("json.parse"); }; } examples using json.parse() json.parse('{}'); // {} json.parse('true'); // tr...
...xerror is thrown. throw new syntaxerror("json.parse"); }; } examples using json.parse() json.parse('{}'); // {} json.parse('true'); // true json.parse('"foo"'); // "foo" json.parse('[1, 5, "false"]'); // [1, 5, "false"] json.parse('null'); // null using the reviver parameter if a reviver is specified, the value computed by parsing is transformed before being returned. specifically, the computed value and all its properties (beginning with the most nested properties and proceeding to the original value itself) are individually run through the reviver. then it is called, with the object containing the property being processed as this, and with the property name as a string, and the property value as arguments. if the reviver function ret...
... called, with the object containing the property being processed as this, and with the property name as a string, and the property value as arguments. if the reviver function returns undefined (or returns no value, for example, if execution falls off the end of the function), the property is deleted from the object. otherwise, the property is redefined to be the return value. if the reviver only transforms some values and not others, be certain to return all untransformed values as-is, otherwise, they will be deleted from the resulting object. json.parse('{"p": 5}', (key, value) => typeof value === 'number' ? value * 2 // return value * 2 for numbers : value // return everything else unchanged ); // { p: 10 } json.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value...

Animation performance and frame rate - Web Performance
a repaint. left max-width border-width margin-left font-size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color properties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine. an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform. the intention of this scenario isn't to convince yo...
...dea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play along, the demo website is here. it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint. there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording. you'll only need to record a few seconds...
...y is hurting performance here. in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints entirely. animating using transform now switch the radio button in the web page to "use transform", and make a new recording. it will look something like this: waterfall overview compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation. frame rate ...
...ersion that uses margin, this is looking pretty good. we're averaging nearly 60fps, and apart from one dip near the start, we're getting a consistently high frame rate. waterfall the timeline view shows the reason for the improved frame rate. compared with the version that uses margin, we're not spending any time time in layout or (more importantly in this case) in paint: in this case, using transform significantly improved the site's performance, and the performance tools were able to show how and why it did. ...

Performance fundamentals - Web Performance
s that need them. many applications use transitions or animations through "pages", or "panels". for example, the user taps a "settings" button to transition into an application configuration screen, or a settings menu "pops up". firefox is highly optimized to transition and animate scenes that: use pages/panels approximately the size of the device screen or smaller transition/animate the css transform and opacity properties transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently. memory and power usage improving memory and power usage is a similar problem to speeding up startup: don't do unneeded work or lazily load uncommonly-used ui resources. do use efficient data structures and ensure resources like images are o...
... in order to handle other tasks that need to be performed at set points in the animation process. you can easily trigger these animations with the :hover, :focus, or :target, or by dynamically adding and removing classes on parent elements. if you want to create animations on the fly or modify them in javascript, james long has written a simple library for that called css-animations.js. use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of your content. the reason is, once again, hardware acceleration. the browser can do these tasks on your gpu, letting the cpu handle other things. in addition, transforms give you capabilities you might not otherwise have. not only can y...
...paul irish has an in-depth analysis of the benefits of translate() from a performance point of view. in general, however, you have the same benefits you get from using css animations: you use the right tool for the job and leave the optimization to the browser. ...
...ts you get from using css animations: you use the right tool for the job and leave the optimization to the browser. you also use an easily extensible way of positioning elements — something that needs a lot of extra code if you simulate translation with top and left positioning. another bonus is that this is just like working in a canvas element. note: you may need to attach a translatez(0.1) transform if you wish to get hardware acceleration on your css animations, depending on platform. as noted above, this can improve performance, but can also have memory consumption issues. what you do in this regard is up to you — do some testing and find out what's best for your particular app. use requestanimationframe() instead of setinterval() calls to window.setinterval() run code at a presumed f...

SVG Attribute reference - SVG: Scalable Vector Graphics
gemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits m...
...gconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmetho...
...viation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlin...
...tation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, ...

<feColorMatrix> - SVG: Scalable Vector Graphics
| r' | | r1 r2 r3 r4 r5 | | r | | g' | | g1 g2 g3 g4 g5 | | g | | b' | = | b1 b2 b3 b4 b5 | * | b | | a' | | a1 a2 a3 a4 a5 | | a | | 1 | | 0 0 0 0 1 | | 1 | in simplified terms, below is how each color channel in the new pixel is calculated. the last row is ignored because its values are constant. ...
..."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)"...
...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" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha -...
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition...

<linearGradient> - SVG: Scalable Vector Graphics
an be applied to fill or stroke of graphical elements. don't be confused with css linear-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. ...
... value type: <url> ; default value: none; animatable: yes spreadmethod this attribute indicates how the gradient beha...
... /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system. value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of ...
...s global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status comment scalable vector graphics (svg) 2the definition of '<lineargradient>' in that spec...

SVG animation with SMIL - SVG: Scalable Vector Graphics
although chrome 45 deprecated smil in favor of css animations and web animations, the chrome developers have since suspended that deprecation. firefox 4 introduced support for animating svg using synchronized multimedia integration language (smil). smil allows you to: animate the numeric attributes of an element (x, y, ...) animate transform attributes (translation or rotation) animate color attributes follow a motion path this is done adding an svg element like <animate> inside the svg element to animate. below are examples for the four different ways. animating attributes of an element the following example animates the cx attribute of a circle. to do so, we add an <animate> element inside the <circle> element. the important attributes for <animate> are: attributename the...
...d more <animate> elements. <svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransform> element let you animate transform attributes. this new element is necessary because we are not animating a simple attribute like x which is just a number. rotation attributes look like this: rotation(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions. in the example below, we animate the center of the rotation and the angle. <...
...ransform attributes. this new element is necessary because we are not animating a simple attribute like x which is just a number. rotation attributes look like this: rotation(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions. in the example below, we animate the center of the rotation and the angle. ...
...a is the angle in degrees, and x and y are absolute positions. in the example below, we animate the center of the rotation and the angle. <svg width="300" height="100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetransform attributename="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 100 60" repeatcount="indefinite" /> </rect> </svg> animation following a path the <animatemotion> element lets you animate an element position and rotation according to a path. the path is defined the same way as in <path>. you can set the attribute to def...

The Implementation of the Application Object Model - Archive of obsolete content
l language in order to allow the markup language to reference local data and to indicate how and when it would like to be annotatable with local data. the case for the xul/rdf approach what is xul? xul (pronounced zool) used to be a ravening demon intent upon taking over the earth in ghost busters. in recent years, xul dropped the z from its name and replaced it with an x, and upon doing so, transformed into something far worse than a demon. it became a markup language. xul stands for "extensible user interface language". it is an xml-based language for describing the contents of windows and dialogs. xul has language constructs for all of the typical dialog controls, as well as for widgets like toolbars, trees, progress bars, and menus. where html describes the contents of a single document, x...
...s). in our current architecture, we have a set of content nodes obtained from any number of data sources. we've solved our aggregation of data problem, but we have no efficient way of taking the data and representing it in different ways, since we'd have to go back to the data sources to re-aggregate everything into a new tree. "aha!" some of you might be saying. "couldn't you just perform a tree transformation on whatever representation you have in memory?" the answer is "yes, provided there is one single common intermediate representation of the collected and aggregated data to use as the basis for the translation." "why?" you ask. well, let's take this problem to the natural extreme, and assume that there are n total possible representations for the same group of data. then without some common i...
... as the basis for the translation." "why?" you ask. well, let's take this problem to the natural extreme, and assume that there are n total possible representations for the same group of data. then without some common internal representation of the data, it would be necessary to implement n*n total translators in order to guarantee that for whatever content model you happen to have built that the transformation could be applied. if there is a common intermediate representation of the data in question, then we need only implement n translators, one for each content model representation that can hold our aggregate data. yet another example of this problem arises from the need to perform fast sorts on a potentially large number of content items. using the dom apis to walk the content nodes and reorder...

Explaining basic 3D theory - Game development
e information about individual vertices into primitives and setting their coordinates in the 3d space for the viewer to see. it's like taking a photo of the given scenery you have prepared — you have to place the objects first, configure the camera, and then take the shot. there are four stages to this processing: the first one involves arranging the objects in the world, and is called model transformation. then there's view transformation which takes care of positioning and setting the orientation of the camera in the 3d space. the camera has three parameters — location, direction, and orientation — which have to be defined for the newly created scene. projection transformation (also called perspective transformation) then defines the camera settings. it sets up what can be seen by the...
... rasterization rasterization converts primitives (which are connected vertices) to a set of fragments. ...
...has four basic types of lighting: diffuse: a distant directional light, like the sun. specular: a point of light, just like a light bulb in a room or a flash light. ambient: the constant light applied to everything on the scene. emissive: the light emitted directly by the object. output merging during the output manipulation stage all the fragments of the primitives from the 3d space are transformed into a 2d grid of pixels that are then printed out on the screen display. during output merging some processing is also applied to ignore information that is not needed — for example the parameters of objects that are outside of the screen or behind other objects, and thus not visible, are not calculated. conclusion now you know the basic theory behind 3d manipulation. if you want to ...

How CSS is structured - Learn web development
: a function consists of the function name, and parentheses to enclose the values for the function. in the case of the calc() example above, the values define the width of this box to be 90% of the containing block width, minus 30 pixels. the result of the calculation isn't something that can be computed in advance and entered as a static value. ...
...alues define the width of this box to be 90% of the containing block width, minus 30 pixels. the result of the calculation isn't something that can be computed in advance and entered as a static value. another example would be the various values for transform, such as rotate(). <div class="box"></div> .box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the output from the above code looks like this: look up different values of properties listed below. ...
...some @rules are simple with just a keyword and a value. ...

create fancy boxes - Learn web development
y">hi! i want to be fancy.</div> ok, that's a very small bit of html, what can we tweak on that element? all of the following: its box model properties: width, height, padding, border, etc. its background properties: background, background-color, background-image, background-position, background-size, etc. its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having negative padding and/or- margin by having border-radius larger than the actual size of the box. making circles <div class...
...it's possible to create optical illusions that can bring your boxes alive like in this example: <div class="fancy">hi! i want to be fancy.</div> let's create some partial drop shadow effect. ...
...also, fancy boxes themselves are quite useless if they are not part of a larger layout. ...

Handling common HTML and CSS problems - Learn web development
ow browser vendors to implement their own version of a css (or javascript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc. until the feature was finalized and such brows...
...e, at the time of writing, the main google logo had an id of hplogo. store a reference to this element in a variable, for example: const test = document.getelementbyid('hplogo'); now try to set a new value for the css property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the javascript console: test.style.transform = 'rotate(90deg)' test.style.webkittransform = 'rotate(90deg)' as you start to type the property name representation after the second dot (note that in javascript, css property names are written in lower camel case, not hyphenated), the javascript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far. this is useful for...
...mes are written in lower camel case, not hyphenated), the javascript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far. this is useful for finding out what versions of the property are implemented in that browser. at the time of writing, both firefox and chrome implemented -webkit- prefixed and non-prefixed versions of transform! once you've found out which prefixes you need to support, you should write them all out in your css, for example: -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); this ensures that all browsers that support any of the above forms of the property can make the feature work. it is worth putting the non-prefixed version last, because that will be the most ...

SVG Guidelines
e: none or stroke-width: 0 svg grouping style grouping group similarly styled shapes under one <g> tag; this avoids having to set the same class/styles on many shapes. avoid excessive grouping editors can sometimes do excessive grouping while exporting svgs. this is due to the way editors work. nested groups avoid multiple-level nesting of groups, these make the svg less readable. nested transforms some editors use <g> tags to do nested transforms, which is usually not needed. you can avoid this by doing basic algebra, for example: <g transform="translate(-62, -310)"><shape transform="translate(60, 308)"/></g> can be cut down to: <shape transform="translate(-2,-2)"/> because: -62+60 = -310+308 = -2 performance tips these rules are optional, but they help speeding up the svg. avoi...
... tools tools can help to clean svg files. note, however that some of the rules stated above can be hard to detect with automated tools since they require too much context-awareness. to this date, there doesn't seem to be a tool that handles all of the above. ...
... tools tools can help to clean svg files. note, however that some of the rules stated above can be hard to detect with automated tools since they require too much context-awareness. to this date, there doesn't seem to be a tool that handles all of the above. ...

Extras
5px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 ...
...pacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://...
...d> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderov...

JSS Provider Notes
pport specifying an external source of randomness. dsaprivatekey getx() is not supported because nss does not support extracting data from private keys. ...
... secretkeyfactory supported algorithms notes aes des desede (des3 ) pbahmacsha1 pbewithmd5anddes pbewithsha1anddes pbewithsha1anddesede (pbewithsha1anddes3 ) pbewithsha1and128rc4 rc4 generatesecret supports the following transformations: keyspec class key algorithm pbekeyspec org.mozilla.jss.crypto.pbekeygenparams using the appropriate pbe algorithm: des desede rc4 desedekeyspec desede ...
...es desede rc4 desedekeyspec desede deskeyspec des secretkeyspec aes des desede rc4 getkeyspec supports the following transformations: key algorithm keyspec class desede desedekeyspec des deskeyspec desede des aes rc4 secretkeyspec ...

Mozilla-JSS JCA Provider notes
nopadding pkcs5padding the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness. dsaprivatekey getx() is not supported because nss does not support extracting data from private keys. ...
... because nss does not support extracting data from private keys. getprivateexponent() is not supported because nss does not support extracting data from private keys. ...
...in this case, the key should be wrapped (encrypted with another key), and then the encrypt...

Tracing JIT
ion of lir is called a lins, short for "lir instruction". lins values are depicted in blue in the schematic diagram. in contrast, a single native instruction is called a nins, and is depicted in red in the schematic diagram. the recorder in jstracer inserts lins values into a lir buffer held in a page, itself contained within a logical fragment, and the nanojit compilation pipeline and assembler transform the lins values into nins values. nanojit/fragmento.* the nanojit/fragment.cpp and nanojit/fragmento.cpp files define the fragment and fragmento classes. a fragmento is a resource-management object that allocates and stores a set of fragments and pages, and manages their lifecycle. a fragmento owns its associated fragments. a fragment represents a single linear code sequence, typically termina...
...ructions (lins values) into the fragment, it allocates pages to store the lir code. later, when the fragment is assembled, it will allocate pages for the native code (nins values) produced by the assembler. when the fragment is destroyed, it returns its pages to the fragmento for reuse. nanojit/assembler.* the nanojit/assembler.cpp and nanojit/assembler.h files define the class assembler, which transforms lins values into nins values. in other words, an assembler transforms lir code into native code. an assembler is also able to modify existing fragments of native code, by rewriting native jump instructions to jump to new locations. in this way the assembler can "patch together" multiple fragments, so that program control can flow from one fragment into another, or back out of generated code and ...
...ents, so that program control can flow from one fragment into another, or back out of generated code and into the interpreter. an assembler is the only component of the tracing jit that reads or writes native code. therefore an assembler contains several machine-specific methods which are implemented in the accompanying nanojit/native*.* files. an assembler runs in a single pass over its input, transforming one lins value to zero or more nins values. it is important to keep in mind that this pass runs backwards from the last lins in the input lir code to the first, generating native code in reverse. running backwards sometimes makes the logic difficult to follow, but it is an essential factor in maintaining the assembler's high speed and small size. in the spidermonkey tracing jit there is only ...

CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcontext2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix. syntax void ctx.rotate(angle); parameters angle the rotation angle, clockwise in radians. you can use degree * math.pi / 180 to calculate a radian from a degree. the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape. ...
...ou will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('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 center of rotation is blue. th...
...ape is a rectangle with its corner at (80, 60), a width of 140, a height of 30. its horizontal center is at (80 + 140 / 2), or 150. its vertical center is at (60 + 30 / 2), or 75. thus, the center point is at (150, 75). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('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 'canvasrenderingcontext2d.rotate' in that specificatio...

DOMPoint - Web APIs
dompoint.w the perspective value of the dompoint. examples in the webxr device api, dompointreadonly values are used to represent positions and orientations. ...
... be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion. ...
...) during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion. ...

Document Object Model (DOM) - Web APIs
features such as tabs and windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. ...
...s svgpathsegarcrel svgpathseglinetohorizontalabs svgpathseglinetohorizontalrel svgpathseglinetoverticalabs svgpathseglinetoverticalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseglist svgpoint svgpointlist svgpreserveaspectratio svgrect svgstringlist svgtransform svgtransformlist animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeeven...
...reserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...

Element.animate() - Web APIs
you can also include a composite operation or iteration composite operation in your options list: composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be s...
...return value returns an animation. examples in the demo down the rabbit hole (with the web animation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. notice the array of objects passed as keyframes and also the timing options block. document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animatio...
... { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. specifications specification status comment web animations level 2the definition of 'keyframeanimationoptions.iterationcomposite' in that specification. draft added the iterationcomposite option. web animationsthe definition of 'animate()' in ...

GlobalEventHandlers.onwheel - Web APIs
a wheelevent object as its sole argument. examples this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
... living standard ...
... living standard ...

ReadableStream.pipeThrough() - Web APIs
the pipethrough() method of the readablestream interface provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair. piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it. syntax var transformedstream = readablestream.pipethrough(transformstream[, options]); parameters transformstream a transformstream (or an object with the structure {writable, readable}) consisting of a readable stream and a writable stream working together to transform some data from one form to another. data writen to the writable stream can be read in some transformed state by the readable stream. for example, a textdecoder, has bytes written to it and strings read from it, while a video decoder ...
... the source readable stream will no longer be canceled. in this case the method will return a promise rejected with an error indicating piping to a closed stream failed, or with any error that occurs during canceling the source. signal: if set to an abortsignal object, ongoing pipe operations can then be aborted via the corresponding abortcontroller. return value the readable side of the transformstream. exceptions typeerror the writable and/or readable property of transformstream are undefined. examples in the following example (see unpack chunks of a png for the full code running live, and png-transform-stream for the source code), an image is fetched and its body retrieved as a readablestream. next, we log the contents of the readable stream, use pipethrough() to send it to a ne...
...gh() to send it to a new function that creates a gray-scaled version of the stream, then log the new stream's contents too. // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(rs => logreadablestream('fetch response stream', rs)) // create a gray-scaled png stream out of the original .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) specifications specification status comment streamsthe definition of 'pipethrough()' in that specification. living standard initial definition. ...

getBBox() - Web APIs
s of the smallest rectangle in which the object fits. the coordinates returned are with respect to the current svg space (after the application of all geometry attributes on all the elements contained in the target element). note: getbbox() must return the actual bounding box at the time the method was called—even in case the element has not yet been rendered. it also does not account for any transformation applied to the element or its parents. getbbox returns different values than getboundingclientrect(), as the latter returns value relative to the viewport syntax let bboxrect = object.getbbox(); return value the returned value is a svgrect object, which defines the bounding box. this value is irrespective of any transformation attribute applied to it or the parent elements. example ...
...r returns value relative to the viewport syntax let bboxrect = object.getbbox(); return value the returned value is a svgrect object, which defines the bounding box. this value is irrespective of any transformation attribute applied to it or the parent elements. ...
...t.getbbox(); return value the returned value is a svgrect object, which defines the bounding box. this value is irrespective of any transformation attribute applied to it or the parent elements. ...

SVGGraphicsElement - Web APIs
methods this interface also inherits methods from its parent, svgelement. svggraphicselem...
...ace" 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. properties this interface also inherits properties from its parent, svgelement. svggraphicselement.transform read only an svganimatedtransformlist reflecting the computed value of the transform property and its corresponding transform attribute of the given element. methods this interface also inherits methods from its parent, svgelement. svggraphicselement.getbbox() returns a domrect representing the computed bounding box of the current element. svggraphicselement.getctm() returns a dommatri...
...sformlist reflecting the computed value of the transform property and its corresponding transform attribute of the given element. methods this interface also inherits methods from its parent, svgelement. svggraphicselement.getbbox() returns a domrect representing the computed bounding box of the current element. svggraphicselement.getctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to its svg viewport's coordinate system. svggraphicselement.getscreenctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to the coordinate system of the svg viewport for the svg document fragment. specifications specification status comment scalable vector graphics (svg)...

Using readable streams - Web APIs
eams are then read: function teestream() { const teedoff = stream.tee(); readstream(teedoff[0], list2); readstream(teedoff[1], list3); } pipe chains one very experimental feature of streams is the ability to pipe streams into one another (called a pipe chain). this involves two methods — readablestream.pipethrough(), which pipes a readable stream through a writer/reader pair to transform one data format into another, and readablestream.pipeto(), which pipes a readable stream to a writer acting as an end point for the pipe chain. this functionality is at a very experimental stage and is subject to change, so we have no explored it too deeply as of yet. we have created an example called unpack chunks of a png (see it live also) that fetches an image as a stream, then pipes it thr...
... another, and readablestream.pipeto(), which pipes a readable stream to a writer acting as an end point for the pipe chain. this functionality is at a very experimental stage and is subject to change, so we have no explored it too deeply as of yet. ...
... as a stream, then pipes it through to a custom png transform stream that retrieves png chunks out of a binary data stream. // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) // create a gray-scaled png stream out of the original .then(rs => logreadablestream('fetch response stream', rs)) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) summary that explains the basics of “default” readable streams. we’ll explain bytestreams in a separate future article, once they are available in browsers. ...

WebGLRenderingContext.getProgramParameter() - Web APIs
ful. gl.attached_shaders: returns a glint indicating the number of attached shaders to a program. gl.active_attributes: returns a glint indicating the number of active attribute variables to a program. gl.active_uniforms: returns a glint indicating the number of active uniform variables to a program. when using a webgl 2 context, the following values are available additionally: gl.transform_feedback_buffer_mode: returns a glenum indicating the buffer mode when transform feedback is active. may be gl.separate_attribs or gl.interleaved_attribs. gl.transform_feedback_varyings: returns a glint indicating the number of varying variables to capture in transform feedback mode. gl.active_uniform_blocks: returns a glint indicating the number of uniform blocks containing active unifor...
...s comment webgl 1.0the definition of 'getprogramparameter' in that specification. ...
...nition of 'getprogramparameter' in that specification. recommendation initial definition. ...

WebGL constants - Web APIs
unsigned_int_vec2 0x8dc6 unsigned_int_vec3 0x8dc7 unsigned_int_vec4 0x8dc8 unsigned_normalized 0x8c17 signed_normalized 0x8f9c vertex attributes constant name value description vertex_attrib_array_integer 0x88fd vertex_attrib_array_divisor 0x88fe transform feedback constant name value description transform_feedback_buffer_mode 0x8c7f max_transform_feedback_separate_components 0x8c80 transform_feedback_varyings 0x8c83 transform_feedback_buffer_start 0x8c84 transform_feedback_buffer_size 0x8c85 transform_feedback_primitives_written 0x8...
...nstant name value description transform_feedback_buffer_mode 0x8c7f max_transform_feedback_separate_components 0x8c80 transform_feedback_varyings 0x8c83 transform_feedback_buffer_start 0x8c84 transform_feedback_buffer_size 0x8c85 transform_feedback_primitives_written 0x8c88 max_transform_feedback_interleaved_components 0x8c8a max_transform_feedback_separate_attribs 0x8c8b interleaved_attribs 0x8c8c separate_attribs 0x8c8d transform_feedback_buffer 0x8c8e transform_feedback_buffer_binding 0x8c8f transform_feedback 0x8e22 transform_feedback_paused 0x8e23 ...
...ck_interleaved_components 0x8c8a max_transform_feedback_separate_attribs 0x8c8b interleaved_attribs 0x8c8c separate_attribs 0x8c8d transform_feedback_buffer 0x8c8e transform_feedback_buffer_binding 0x8c8f transform_feedback 0x8e22 transform_feedback_paused 0x8e23 transform_feedback_active 0x8e24 transform_feedback_binding 0x8e25 framebuffers and renderbuffers constant name value description framebuffer_attachment_color_encoding 0x8210 framebuffer_attachment_component_type 0x8211 framebuffer_attachment_red_size 0x8212 framebuffer_attachment_green_size 0...

Lighting in WebGL - Web APIs
gl.uniformmatrix4fv( programinfo.uniformlocations.normalmatrix, false, normalmatrix); update the shaders now that all the data the shaders n...
... varying highp vec3 vlighting; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; // apply lighting effect highp vec3 ambientlight = vec3(0.3, 0.3, 0.3); highp vec3 directionallightcolor = vec3(1, 1, 1); highp vec3 directionalvector = normalize(vec3(0.85, 0.8, 0.75)); highp vec4 transformednormal = unormalmatrix * vec4(avertexnormal, 1.0); highp float directional = max(dot(transformednormal.xyz, directionalvector), 0.0); vlighting = ambientlight + (directionallightcolor * directional); } `; once the position of the vertex is computed, and we pass the coordinates of the texel corresponding to the vertex to the fragment shader, we can work on computing the shadi...
..., 1.0); highp float directional = max(dot(transformednormal.xyz, directionalvector), 0.0); vlighting = ambientlight + (directionallightcolor * directional); } `; once the position of the vertex is computed, and we pass the coordinates of the texel corresponding to the vertex to the fragment shader, we can work on computing the shading for the vertex. the first thing we do is transform the normal based on the current orientation of the cube, by multiplying the vertex's normal by the normal matrix. we can then compute the amount of directional lighting that needs to be applied to the vertex by calculating the dot product of the transformed normal and the directional vector (that is, the direction from which the light is coming). if this value is less than zero, then we pin the v...

WebGL best practices - Web APIs
vertex shaders. any calculation that can be done on the vertices and then just interpolated among fragments (via varyings) is a performance boon. (the interpolation of varyings is very cheap, and is done automatically for you through the fixed functionality rasterization phase of the graphics pipeline) for example, a simple animation of a textured surface can be achieved through a time-dependent transformation of texture coordinates. (the simplest case being adding a uniform vector to the texture coordinates attribute vector) if visually acceptable, one can transform the texture coordinates in the vertex shader rather than in the fragment shader, to get better performance. one common trade-off is to some lighting calculations per-vertex instead of per-fragment (pixel). in some cases, especially w...
...e browser: ... useprogram(prog1) <pipeline flush> bindframebuffer(target) drawarrays() bindtexture(webgl_texture) -teximage2d(htmlvideoelement): +useprogram(_internal_tex_tranform_prog) <pipeline flush> +bindframebuffer(webgl_texture._internal_framebuffer) +bindtexture(htmlvideoelement._internal_video_tex) +drawarrays() // y-flip/colorspace-transform/alpha-(un)premultiply +bindtexture(webgl_texture) +bindframebuffer(target) +useprogram(prog1) <pipeline flush> drawarrays() ... prefer doing uploads before starting drawing, or at least between pipelines: in webgl: ... bindtexture(webgl_texture) teximage2d(htmlvideoelement) useprogram(prog1) <pipeline flush> bindframebuffer(target) drawa...
...() bindtexture(webgl_texture) drawarrays() ... behind the scenes in the browser: ... bindtexture(webgl_texture) -teximage2d(htmlvideoelement): +useprogram(_internal_tex_tranform_prog) <pipeline flush> +bindframebuffer(webgl_texture._internal_framebuffer) +bindtexture(htmlvideoelement._internal_video_tex) +drawarrays() // y-flip/colorspace-transform/alpha-(un)premultiply +bindtexture(webgl_texture) +bindframebuffer(target) useprogram(prog1) <pipeline flush> bindframebuffer(target) drawarrays() bindtexture(webgl_texture) drawarrays() ... webgl 2 use texstorage to create textures the teximage* api lets you define each mip level independently and at any size, even the mis-matching mips sizes are not a...

WebGL: 2D and 3D graphics for the web - Web APIs
webgl2renderingcontext interface. the <canvas> element is also used by the canvas api to do 2d graphics on web pages. ...
...se_context events webglcontextlost webglcontextrestored webglcontextcreationerror constants and types webgl constants webgl types webgl 2 webgl 2 is a major update to webgl which is provided through the webgl2renderingcontext interface. it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feedback objects, promoted extensions that are now core to webgl 2: vertex array objects, instancing, multiple render targets, fragment depth. see also the blog post "webgl 2 lands in firefox" and webglsamples.org/webgl2samples for a few demos. guides and tutorials below, you'll find an assortment of guides to help you learn webgl concepts and tutorials that offer step-by-step lessons and ex...
...according to topic and level of difficulty, covering the webgl rendering context, shader programming, textures, geometry, user interaction, and more. advanced tutorials webgl model view projection a detailed explanation of the three core matrices that are typically used to represent a 3d object view: the model, view and projection matrices. matrix math for the web a useful guide to how 3d transform matrices work, and can be used on the web — both for webgl calculations and in css3 transforms. resources raw webgl: an introduction to webgl a talk by nick desaulniers that introduces the basics of webgl. this is a great place to start if you've never done low-level graphics programming. khronos webgl site the main web site for webgl at the khronos group. webgl fundamentals a basic tuto...

Starting up and shutting down a WebXR session - Web APIs
this includes the xrsession itself, all of the data used to render the scene in...
... of the world. but most likely, that's not the case at all. if that's so, you call getoffsetreferencespace() on the initial reference space to create a new reference space which offsets the coordinate system so that (0, 0, 0) is located at the position of the viewer, with the orientation likewise shifted to face in the desired direction. the input value into getoffsetreferencespace() is an xrrigidtransform encapsulating the player's position and orientation as specified in the default world coordinates. with the new reference space in hand and stored into the worlddata object for safe-keeping, we call the session's requestanimationframe() method to schedule a callback to be executed when it's time to render the next frame of animation for the webxr session. the returned value is an id we can use l...
... their xr device or when a hiccup or glitch occurs in the flow of tracking data received from the xr hardware. these situations cause the native origin to jump abruptly by the distance and directional angle necessary to bring the native origin back into alignment with the user's position and facing direction. when this happens, a reset event is sent to the session's xrreferencespace. the event's transform property is an xrrigidtransform detailing the transform needed to realign the native origin. note that the reset event is fired at the xrreferencespace, not the xrsession! another common cause for reset events is when a bounded reference space (a reference space whose xrreferencespacetype is bounded-floor) has its geometry as specified by the xrboundedreferencespace's property boundsgeometry ...

XRSession: select event - Web APIs
event handler property onselect for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources. examples the following example uses addeventlistener() to set up a handler for the select event. ...
... tracked-pointer inputs and sends the pose's transform to a function called myhandleselectwithray(). ...
... working draft initial definition. ...

XRSession: squeeze event - Web APIs
property onsqueeze for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources. examples the following example uses addeventlistener() to set up a handler for the squeeze event. the handler fetches the pose representing the target ray for tracked-pointer inputs and sends the pose's transform to a function called myhandlesqueezewithray(). this code treats the squeeze as an instantaneous action that doesn't involve tracking an ongoing activity. if you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends. xrsession.addeventlistener("squeeze", event => { if (event.inputsource.target...
...isten for the squeezestart and squeezeend events to sense when the squeeze action begins and ends. ...
... working draft initial definition. ...

XSLTProcessor - Web APIs
an xsltprocessor applies an xslt stylesheet transformation to an xml document to produce a new xml document as output. it has methods to load the xslt stylesheet, to manipulate <xsl:param> parameter values, and to apply the transformation to documents. syntax the constructor has no parameters. new xsltprocessor() methods [throws] void xsltprocessor.importstylesheet(node stylesheet) imports the xslt stylesheet. if the given node is a document node, you can pass in a full xsl transform or a literal result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element. ...
...ents. syntax the constructor has no parameters. new xsltprocessor() methods [throws] void xsltprocessor.importstylesheet(node stylesheet) imports the xslt stylesheet. if the given node is a document node, you can pass in a full xsl transform or a literal result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element. [throws] documentfragment xsltprocessor.transformtofragment(node source, document owner) transforms the node source by applying the stylesheet imported using the xsltprocessor.importstylesheet() function. ...
...ement transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element. [throws] documentfragment xsltprocessor.transformtofragment(node source, document owner) transforms the node source by applying the stylesheet imported using the xsltprocessor.importstylesheet() function. the owner document of the resulting document fragment is the owner node. [throws] document xsltprocessor.transformtodocument(node source) transforms the node source applying the stylesheet given importing using the xsltprocessor.importstylesheet() function. the resultant object depends on the output method of the stylesheet: output method result type html htmldocument xml xmldocument text xmldocument with a single root element <trans...

Linear-gradient Generator - CSS: Cascading Style Sheets
-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-slider-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 { wi...
...elect: 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-radius: 3px; background: #eee; } .ui-slider-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 12px; height: 13px; margin: 0 0 0 -7px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-button { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-slider-button:hover { back...
...r px = math.cos(rad); var py = math.sin(rad); this.lsize = this.mw * math.abs(px) + this.mh * math.abs(py); this.angle = deg; this.updatecss(); axesmanager.updatecssgradient(); this.px = px; this.py = py; this.pmod = 1; }; /* ui methods - apply css */ gradientaxis.prototype.updatecss = function updatecss() { this.line.style.width = 2 * this.lsize + 'px'; this.axis.style.transform = 'rotate('+ -this.angle +'deg)'; this.axis.style.webkittransform = 'rotate('+ -this.angle +'deg)'; }; gradientaxis.prototype.updategradient = function updategradient() { var p = this.firstpoint; if (p === null) return; this.gradient = p.cssvalue; p = p.nextpoint; while(p) { this.gradient += ', ' + p.cssvalue; p = p.nextpoint; }; axesmanager.updatecssgradient(); }; ...

animation - CSS: Cascading Style Sheets
unt | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div cla...
...display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselector...
...rnate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

font-weight - CSS: Cascading Style Sheets
r/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let w...
... light), especially if the font has a low contrast color ratio. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements. ...
...ine.inheritedyescomputed valuethe keyword or the numerical value as specified, with bolder and lighter transformed to the real valueanimation typea font weight formal syntax <font-weight-absolute> | bolder | lighterwhere <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting font weights html <p> alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought alice "without pictures or conversations?" </p> ...

scaleY() - CSS: Cascading Style Sheets
the scaley() css function defines a transformation that resizes an element along the y-axis (vertically). its result is a <transform-function> data type. it modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scaley(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property). note: scaley(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1). transform: rotatex(180deg); === transform: scaley(-1); syntax scaley(s) values s is a <number> representing the scaling factor to apply on the ordinate of each point of the element. ca...
... working draft initial definition ...
... working draft initial definition ...

skew() - CSS: Cascading Style Sheets
the coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. ...
...the coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. ...
...ordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } result specifications specification status comment css transfo...

translateX() - CSS: Cascading Style Sheets
the translatex() css function repositions an element horizontally on the 2d plane. its result is a <transform-function> data type. note: translatex(tx) is equivalent to translate(tx, 0) or translate3d(tx, 0, 0). syntax /* <length-percentage> values */ transform: translatex(200px); transform: translatex(50%); values <length-percentage> is a <length> or <percentage> representing the abscissa of the translating vector. a percentage value refers to the width of the reference box defined by the transform-box property. ...
...length-percentage> is a <length> or <percentage> representing the abscissa of the translating vector. a percentage value refers to the width of the reference box defined by the transform-box property. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. ...
... linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. 10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatex()' in that specification. working draft initial definition ...

translateY() - CSS: Cascading Style Sheets
the translatey() css function repositions an element vertically on the 2d plane. its result is a <transform-function> data type. note: translatey(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0). syntax /* <length-percentage> values */ transform: translatey(200px); transform: translatey(50%); values <length-percentage> the value is a <length> or <percentage> representing the ordinate of the translating vector. a percentage value refers to the height of the reference box defined by the transform-box property. ...
...entage> the value is a <length> or <percentage> representing the ordinate of the translating vector. a percentage value refers to the height of the reference box defined by the transform-box property. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. ...
...linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. 10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(10px); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specification. working draft initial definition ...

Event developer guide - Developer guides
y piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers. the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d transforms. that is different, but similar, to the change in device vertical orientation. the window in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it. the process loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for disp...
... ...
...ts api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17. you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with 3d transformsthis article provides tips on how to use device orientation information in tandem with css 3d transforms. ...

Cache-Control - HTTP
e directives have an optional argument, which can be either a token or a quoted-string. (see spec for definitions) cache request directives standard cache-control directives that can be used by the client in an http request. ...
...seconds> cache-control: max-stale[=<seconds>] cache-control: min-fresh=<seconds> cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: only-if-cached cache response directives standard cache-control directives that can be used by the server in an http response. cache-control: must-revalidate cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: public cache-control: private cache-control: proxy-revalidate cache-control: max-age=<seconds> cache-control: s-maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document. check the compatibility table for their support; user-agents that don't recognize them should ignore them. cache-control: i...
...erefore the client should not send a conditional revalidation for it (e.g. if-none-match or if-modified-since) to check for updates, even when the user explicitly refreshes the page. clients that aren't aware of this extension must ignore them as per the http specification. in firefox, immutable is only honored on https:// transactions. for more information, see also this blog post. other no-transform an intermediate cache or proxy cannot edit the response body, content-encoding, content-range, or content-type. it therefore forbids a proxy or browser feature, such as google’s web light, from converting images to minimize data for a cache store or slow connection. only-if-cached set by the client to indicate "do not use the network" for the response. the cache should either respond using a...

Object.fromEntries() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.fromentries(iterable); parameters iterable an iterable such as array or map or other objects implementing the iterable protocol. return value a new object whose properties are given by the entries of the iterable. description the object.fromentries() method takes a list of key-value pairs and returns a new object whose properties are given by those entries. ...
...for more detai...
...for more details, refer to: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specifi...

fill - SVG: Scalable Vector Graphics
r animation it defines the final state of the animation. as a presentation attribute, it can be applied to any element but it only has an effect on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan>. for animation five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>. html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </def...
...emove (keep the state of the first animation frame) default value remove animatable no animatemotion for <animatemotion>, fill defines the final state of the animation. value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove animatable no animatetransform for <animatetransform>, fill defines the final state of the animation. value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove animatable no circle for <circle>, fill is a presentation attribute that defines the color of the circle. value <paint> defaul...
... can be used as a css property. tspan for <tspan>, fill is a presentation attribute that defines the color of the text. value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a css property. specifications specification status comment svg animations level 2the definition of 'transform' in that specification. editor's draft definition for animations scalable vector graphics (svg) 2the definition of 'fill' in that specification. candidate recommendation definition for shapes and texts. adds context-fill and context-stroke. scalable vector graphics (svg) 1.1 (second edition)the definition of 'fill' in that specification. recommendation init...

href - SVG: Scalable Vector Graphics
the href attribute defines a link to a resource as a reference url. the exact meaning of that link depends on the context of each element using it. note: specifications before svg 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute. fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference. ...
...eight: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference. value <url> default value none animatable yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a url referring to the element which is the target of this animation element and which therefore will be modified over time. the url must point to exactly one target element which is capable of being the target of the given animation element. if the url points to multiple target elements, if the given target el...
...alue <url> default value none animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'href for <a>' in that specification. candidate recommendation defines href for the <a> element. svg animations level 2the definition of 'href for <animate>, <animatemotion>, <animatetransform>, and <set>' in that specification. editor's draft defines href for animation elements. svg animations level 2the definition of 'href for <discard>' in that specification. editor's draft defines href for the <discard> element. filter effects module level 1the definition of 'href for <feimage>' in that specification. candidate recommendation defines href for the...

to - SVG: Scalable Vector Graphics
the to attribute indicates the final value of the attribute that will be modified during the animation. the value of the attribute will change between the from attribute value and this value. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation. value <value> default ...
... the exact value type for this attribute depend on the value of the attribute that will be animated. specifications specification status comment svg animations level 2the definition of 'to for <set>' in that specification. editor's draft no change svg animations level 2the definition of 'to for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'to for <set>' in that specification. recommendation initial definition for <set> scalable vector graphics (svg) 1.1 (second edition)the definition of 'to for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification. ...
... (second edition)the definition of 'to for <set>' in that specification. ...

type - SVG: Scalable Vector Graphics
for the <fecolormatrix> element, it indicates the type of matrix operation. the keyword matrix indicates that a full 5x4 matrix of values will be provided. the other keywords represent convenience shortcuts to allow commonly used color operations to be performed without specifying a complete matrix. for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements, it indicates the type of component transfer function. ...
...ed without specifying a complete matrix. for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements, it indicates the type of component transfer function. for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. for the <style> and <script> elements, it defines the content type of the element. ...
...e animatable yes normative document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content-type> animatable no normative document svg 1.1 (2nd edition) : script svg 1.1 (2nd edition) : style example elements the following elements can use the values attribute <animatetransform> <fecolormatrix> <fefunca> <fefuncb> <fefuncg> <fefuncr> <feturbulence> <script> <style> ...

values - SVG: Scalable Vector Graphics
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <fecolormatrix> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animation. if this attribute is specified, any from, to, and by attribute values set on the element are ignored. value <list-of-values> default valu...
... value (degrees). for type="luminancetoalpha", values is not applicable. specifications specification status comment filter effects module level 1the definition of 'values for <fecolormatrix>' in that specification. working draft no change svg animations level 2the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'values for <fecolormatrix>' in that specification. recommendation initial definition for <fecolormatrix> scalable vector graphics (svg) 1.1 (second edition)the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransfo...
...ion of 'values for <fecolormatrix>' in that specification. ...

xlink:href - SVG: Scalable Vector Graphics
the xlink:href attribute defines a reference to a resource as a reference iri. the exact meaning of that link depends on the context of each element using it. note: svg 2 removed the need for the xlink namespace, so instead of xlink:href you should use href. ...
...t. if the reference is to an <altglyphdef> element, then if an appropriate set of alternate glyphs is located from processing the <altglyphdef> element, then those alternate glyphs are rendered instead of the characters that are inside of the <altglyph> element. value <iri> default value none animatable no animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, xlink:href defines the reference to the element which is the target of this animation and which therefore will be modified over time. the target element must be part of the current svg document fragment. the value must point to exactly one target element which is capable of being the target of the given animati...
...that specification. recommendation defines href for the <a> element. scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <altglyph>' in that specification. recommendation defines href for the <altglyph> element. scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>' in that specification. recommendation defines href for animation elements. scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <color-profile>' in that specification. recommendation defines href for the <color-profile> element. scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <cursor>' in that spec...

Index - XPath
page tags and summary 1 xpath css selectors, dom, jxon, landing, path, xml, xpath, xslt xpath stands for xml path language. it uses a non-xml syntax to provide a flexible way of addressing (pointing to) different parts of an xml document. it can also be used to test addressed nodes within a document to determine whether they match a pattern or not. 2 axes transforming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference for further information on using xpath expressions, please see the for further reading section at the end of transforming xml with xslt document. also see the 'axes' section in the xpath spec. 3 ancestor axe, xpath no summary! 4 ancestor-or-self axe, xpath the ancestor-or-self axis indic...
... the self axis indicates the context node itself. it can be abbreviated as a single period (.). 16 comparison of css selectors and xpath css, draft, needscontent, reference, selectors, xpath this article seeks to document the difference between css selectors and xpath for web developers to be able to better choose the right tool for the right job. 17 functions transforming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference no summary! 18 boolean xslt, xslt_reference the boolean function evaluates an expression and returns true or false. 19 ceiling xslt, xslt_reference the ceiling function evaluates a decimal number and returns the smallest integer greater than or equal to the decimal number. 20 ...
... 54 unparsed-entity-url xslt, xslt_reference the unparsed-entity-url() function returns the uri of the unparsed entity with the given name. this is non-xml data referenced in the dtd of the source document. 55 index index, reference, xpath, xslt found 57 pages: 56 introduction to using xpath in javascript add-ons, dom, extensions, javascript, transforming_xml_with_xslt, web development, xml, xpath, xslt this document describes the interface for using xpath in javascript internally, in extensions, and from websites. mozilla implements a fair amount of the dom 3 xpath, which means that xpath expressions can be run against both html and xml documents. 57 xpath snippets example, snippets, xml, xpath, xslt this article pro...

Canvas code snippets - Archive of obsolete content
x = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; ...
... saving a canvas image to a file ...

Index of archived content - Archive of obsolete content
introduction kill the xul.mfl file for good locked config settings other mozilla customization pages protecting mozilla's registry.dat file automatically handle failed asserts in debug builds blackconnect blackwood bonsai bookmark keywords build building transformiix standalone chromeless compiling the npruntime sample plugin in visual studio creating a firefox sidebar extension creating a microsummary creating a mozilla extension adding the structure conclusion enabling the behavior - retrieving tinderbox status enabling the behavior -...
... releases tamarin-central rev 703:2cee46be9ce0 tamarin roadmap tamarin build documentation tamarin mercurial commit hook the download manager schema the life of an html http request the new nsstring class implementation (1999) tracevis transforming xml with xslt:mozilla xslt transforming xml with xslt:the netscape xslt treehydra treehydra build instructions treehydra manual tuning pageload urischeme uris and urls uriloader using addresses of stack variables with nspr threads on win16 using...

Microsummary topics - Archive of obsolete content
the generator. ...
...de snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'download-count\')"/> \ <text> fx downloads</text> \ </template> \ </transform> \ </template> \ <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '; var domparser = components.classes["@mo...

Security - Archive of obsolete content
te security articles is highly discouraged. doing so may put your systems at risk. digital signaturesencryption and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this document. ...
...n and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this document. but encryption and decryption, by themselves, do not address another problem: tampering.encryption and decryptionencryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. decryption is the process of transforming encrypted information so that it is intelligible again.introduction to public-key cryptographypublic-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications. this document introduces the basic concepts of public-key cryptography. for an overview of ssl...

Browser Feature Detection - Archive of obsolete content
left true true true padding true true true paddingtop true true true paddingright true true true paddingbottom true true true paddingleft true true true textalign true true true textdecoration true true true textindent true true true texttransform true true true verticalalign true true true whitespace true true true width true true true wordspacing true true true dom css 2 support for properties/methods in document.body.style</caption> name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 azimuth true false false bac...
...left', 'supported': false}, {name: 'padding', 'supported': false}, {name: 'paddingtop', 'supported': false}, {name: 'paddingright', 'supported': false}, {name: 'paddingbottom', 'supported': false}, {name: 'paddingleft', 'supported': false}, {name: 'textalign', 'supported': false}, {name: 'textdecoration', 'supported': false}, {name: 'textindent', 'supported': false}, {name: 'texttransform', 'supported': false}, {name: 'verticalalign', 'supported': false}, {name: 'whitespace', 'supported': false}, {name: 'width', 'supported': false}, {name: 'wordspacing', 'supported': false} ], 'domcss2': [ {name: 'azimuth', 'supported': false}, {name: 'backgroundposition', 'supported': false}, {name: 'bordercollapse', 'supported': false}, {name: 'borderspacing', 'supported': fa...

::-ms-browse - Archive of obsolete content
browser compatibility historically supported in internet explorer and edge before version 79. ...
... browser compatibility historically supported in internet explorer and edge before version 79. ...

::-ms-expand - Archive of obsolete content
...
... ...

::-ms-fill-lower - Archive of obsolete content
browser compatibility historically supported in internet explorer and edge before version 79. ...
... browser compatibility historically supported in internet explorer and edge before version 79. ...

::-ms-fill-upper - Archive of obsolete content
browser compatibility historically supported in internet explorer and edge before version 79. see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sli...
... browser compatibility historically supported in internet explorer and edge before version 79. see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

::-ms-reveal - Archive of obsolete content
...
... ...

::-ms-thumb - Archive of obsolete content
see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...
... see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

::-ms-value - Archive of obsolete content
...
... ...

The Business Benefits of Web Standards - Archive of obsolete content
attern and habari, the site theme is a complete and discrete entity in its own right. improved user experience: less bandwidth and fast loads html code is often much more compact (therefore easier to read and maintain) when used in conjunction with css. according to various reports, case studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to transform table-based layouts into css-based layouts. typically this reduces page size by 25 to 50%. this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load. the style sheet only needs to load once and then it is cached. the payload might be slightly higher for the first page. but for a...
... without any additional costs in the future. extensibility using strict html and separating structure from content paves the way to xhtml, an xml-compatible version of html. using xhtml will enable web authors to leverage tools from the xml world, such as xslt, to easily manipulate xml data. using xhtml is a way to enter a set of standards composed of xml-based technologies, such as xml, xslt (transforming data), svg (animated graphics), mathml (describing mathematic expressions)... such technologies have been designed to be interoperable, are the base of web services. this goes much further than just web authoring. reduce costs of maintenance and site operations what is maintenance anyway? one of the most important features of a successful site is constantly evolving relevant content which in...

Bounding volume collision detection with THREE.js - Game development
ed, you need to manually call geometry.computeboundingbox beforehand. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); knot.geometry.computeboundingbox(); var knotbbox = new box3( knot.geometry.boundingbox.min, knot.geometry.boundingbox.max); note: the boundingbox property takes the geometry itself as reference, and not the mesh. so any transformations such as scale, position, etc. applied to the mesh will be ignored while computing the calculating box. a more simple alternative that fixes the previous issue is to set those boundaries later on with box3.setfromobject, which will compute the dimensions taking into account a 3d entity's transformations and any child meshes as well. var knot = new three.mesh( new three.torusknotgeometry...
...provide the sphere's center and radius, which can be added to the boundingsphere property available in geometry. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); var knotbsphere = new sphere( knot.position, knot.geometry.boundingsphere.radius); unfortunately, there is no equivalent of box3.setfromobject for sphere instances. so if we apply transformations or change the position of the mesh, we need to manually update the bounding sphere. for instance: knot.scale.set(2, 2, 2); knotbsphere.radius = knot.geometry.radius * 2; intersection tests point vs. box3 / sphere both box3 and sphere have a containspoint method to do this test. var point = new three.vector3(2, 4, 7); knotbbox.containspoint(point); box3 vs. box3 the box3.intersectsbo...

GLSL Shaders - Game development
fragment shaders compute the renderings of a shape's colors and other attributes. glsl is not as intuitive as javascript. glsl is strongly typed and there is a lot of math involving vectors and matrices. it can get very complicated — very quickly. ...
...e code below inside the body's first <script> tag: void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } the resulting gl_position is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case. note: you can learn more about model, view, and projection transformations from the vertex processing paragraph, and you can also check out the links at the end of this article to learn more about it. both projectionmatrix and modelviewmatrix are provided by three.js and the vector is passed with the new 3d position, which results in the original cube moving 10 units along the x axis and 5 units along the z axis, translated via a shader. we can ignore the fourth...

Efficient animation for web games - Game development
gnals at the beginning and end of animations that allow you to attach javascript callbacks and form a rudimentary form of synchronisation (though there are no guarantees on how promptly these callbacks will happen). speaking of the assumptions that the browser can make, you should avoid causing it to have to re-layout during animations. ...
...nimations. in this vein, it is worth trying to stick to animating only transform and opacity properties. though some browsers make some effort for other properties to be animated quickly, these are pretty much the only ones semi-guaranteed to be fast across all browsers. something to be careful of is that overflow may end up causing re-layout, or other expensive calculations. if you are setting a transform on something that would overlap its container’s bounds, you may want to set overflow: hidden on that container for the duration of the animation. use requestanimationframe when you are animating <canvas> content, or when your dom animations absolutely must synchronise with canvas content animations, do make sure to use window.requestanimationframe, and not older methods such as window.settime...

Compile - MDN Web Docs Glossary: Definitions of Web-related terms
some compilers which translate between similar level languages are called transpilers or cross-compilers, for instance to compile from typescript to javascript. those are considered productivity tools. ...
...some compilers which translate between similar level languages are called transpilers or cross-compilers, for instance to compile from typescript to javascript. those are considered productivity tools. ...

Styling web forms - Learn web development
be positioned relative to the <body>.) the <legend> element is very important for accessibility — it will be spoken by assistive technologies as part of the label of each form element inside the fieldset — but using a technique like the one above is fine. the legend contents will still be spoken in the same way; it is just the visual position that has changed. note: you could also use the transform property to help you with positioning your <legend>. however, when you position it with for example a transform: translatey();, it moves but leaves an ugly gap in the <fieldset> border, which is not easy to get rid of. a specific styling example let's look at a concrete example of how to style an html form. we will build a fancy-looking "postcard" contact form; see here for the finished versio...
...your form should now look like this: note: if your example does not work quite like you expected and you want to check it against our version, you can find it on github — see it running live (also s...

Adding vector graphics to the Web - Learn web development
. it's basically markup, like html, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. svg is for marking up graphics, not content. at the simplest end of the spectrum, you've got elements for creating simple shapes, like <circle> and <rect>. ...
...like html, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. svg is for marking up graphics, not content. at the simplest end of the spectrum, you've got elements for creating simple shapes, like <circle> and <rect>. ...

Index - Learn web development
urther in your learning, plus some other useful tips. 301 working with svelte stores beginner, frameworks, javascript, learn, stores, svelte, client-side in this article we added two new features: an alert component and persisting todos to web storage. 302 understanding client-side web development tools beginner, css, deployment, html, javascript, learn, tools, transformation, client-side, linting client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. we finish up by providing a complete toolchain example showing you how to get productive...
...d it useful. while there is a long way to go before you can consider yourself a client-side tooling wizard, we are hoping that this module has given you that first important step towards understanding client-side tooling, and the confidence to learn more and try out new things. 306 introducing a complete toolchain beginner, complete toolchain, development environment, learn, tools, transformation, case study we've come a long way in this chapter, building up a rather nice local development environment to create an application in. 307 package management basics beginner, learn, tools, dependency, npm, package manager, package repository, yarn this brings us to the end of our tour of package managers. our next move is to build up a sample toolchain, putting al...

Graceful asynchronous programming with Promises - Learn web development
st modern web apis use them for functions that perform potentially lengthy tasks. to use modern web technologies you'll need to use promises. later on in the chapter, we'll look at how to write your own promise, but for now, we'll look at some simple examples that you'll encounter in web apis. in the first example, we'll use the fetch() method to fetch an image from the web, the blob() method to transform the fetch response's raw body contents into a blob object, and then display that blob inside an <img> element. this is very similar to the example we looked at in the first article of the series, but we'll do it a bit differently as we get you building your own promise-based code. note: the following example will not work if you just run it directly from the file (i.e. via a file:// url). you n...
...tener to an object using addeventlistener(). it doesn't run until an event occurs (when the promise fulfills). the most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times. we immediately run the blob() method on this response to ensure that the response body is fully downloaded, and when it is available transform it into a blob object that we can do something with. the result of this is returned like so: response => response.blob() which is shorthand for function(response) { return response.blob(); } unfortunately, we need to do slightly more than this. fetch promises do not fail on 404 or 500 errors — only on something catasrophic like a network failure. instead, they succeed, but with th...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
hen the value is divided by 360) so the circle animation can continue uninterrupted, at a sensible, low value. note that this isn't strictly necessary, but it is easier to work with values of 0–359 degrees than values like "128000 degrees". if (rotatecount > 359) { rotatecount %= 360; } next, below the previous block add the following line to actually rotate the spinner: spinner.style.transform = `rotate(${rotatecount}deg)`; at the very bottom inside the draw() function, insert the following line. this is the key to the whole operation — you are setting the variable defined earlier to an active requestanimation() call, which takes the draw() function as its parameter. this starts the animation off, constantly running the draw() function at a rate as near 60 fps as possible. r...
... math.floor(math.random()*(max-min)) + min; return num; } next add the draw() function, which animates the spinner. this is very similar to the version from the simple spinner example, earlier: function draw(timestamp) { if(!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; if(rotatecount > 359) { rotatecount %= 360; } spinner.style.transform = 'rotate(' + rotatecount + 'deg)'; raf = requestanimationframe(draw); } now it is time to set up the initial state of the app when the page first loads. add the following two lines, which simply hide the results paragraph and spinner container using display: none;. result.style.display = 'none'; spinnercontainer.style.display = 'none'; next, define a reset() function, which sets...

What is JavaScript? - Learn web development
t you can achieve with a few lines of javascript code.) the three layers build on top of one another nicely. let's take a simple text label as an example. ...
...note: this is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them. interpreted versus compiled code you might hear the terms interpreted and compiled in the context of programming. in interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. you don't have to transform the code into a different form before the browser runs it. the code is received in its programmer-friendly text form and processed directly from that. compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. for example, c/c++ are compiled into machine code that is then run by the computer. the program is executed from a binary format...

CSS performance optimization - Learn web development
styles.css, is much smaller, reducing the time that rendering is blocked. animating on the gpu browsers are optimized to handle css animations, and handle animating properties that do not trigger a reflow (and therefore also a repaint) very well. to improve performance, the node being animated can be moved off the main thread and onto the gpu. properties that will lead to compositing include 3d transforms (transform: translatez(), rotate3d(), etc.), animating transform and opacity, position: fixed, will-change, and filter. some elements, including <video>, <canvas> and <iframe>, are also on their own layer. when an element is promoted as a layer, also known as composited, animating transform properties is done in the gpu, resulting in improved performance, especially on mobile. will-change prope...
...form properties is done in the gpu, resulting in improved performance, especially on mobile. will-change property the css will-change property tells browsers which properties of an element are expected to change enabling browsers to set up optimizations before the element is actually changed, improving performance by doing potentially expensive work before it is required. will-change: opacity, transform; the font-display property applied to the @font-face rule, the font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fallback font while a font loads, or fails to load. this improves performance by making the text visible instead of having a blank screen, with a trade-off being a flash of unstyled text. @font-face { font-family: ...

Ember resources and troubleshooting - Learn web development
re structural rather than having them filled with bespoke logic. see also: reactiveconf 2017: secrets of the glimmer vm what is the state of the mut helper? mut was not covered in this tutorial and is really baggage from a transitional time when ember was moving from two-way bound data to the more common and easier-to-reason-about one-way bound data flow. it could be thought of as a build-time transform that wraps its argument with a setter function. more concretely, using mut allows for template-only settings functions to be declared: <checkbox @value={{this.somedata}} @ontoggle={{fn (mut this.somedata) (not this.somedata)}} /> whereas, without mut, a component class would be needed: import component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action...
...ing mut, it may be desireable to reach for it. however, mut has unnatural semantics and has caused much confusion over the term of its existence. there have been a coupleof new ideas put together into the form of addons that use the public apis, ember-set-helper and ember-box. both of these try to solve the problems of mut by introducing more obvious / "less magic" concepts, avoiding build-time transforms and implicit glimmer vm behavior. with ember-set-helper: <checkbox @value={{this.somedata}} @ontoggle={{set this "somedata" (not this.somedata)}} /> with ember-box: {{#let (box this.somedata) as |somedata|}} <checkbox @value={{unwrap somedata}} @ontoggle={{update somedata (not this.somedata)}} /> {{/let}} note that none of these solutions are particularly common among membe...

Beginning our React todo list - Learn web development
: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; j...
... summary now our todo list app actually looks a bit more like a real app! the problem is: it doesn’...

Starting our Svelte Todo list app - Learn web development
1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color:...
...tion: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } with our markup styled, everything now looks better: the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like th...

Getting started with Svelte - Learn web development
e starter template. you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created. variables declared (or imported) at the top level are 'visible' from the component's markup. top-level variables is the way svelte handles the comp...
... these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively. the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element. what will happen other components with <h1> elements in them? in svelte, css inside a component's <style> block will be scoped only to that component. this works by adding a class to selected elements, which is...

Getting started with Vue - Learn web development
ere, but you can find more information on the cli in the vue docs. project structure if everything went successfully, the cli should have created a series of files and directories for your project. the most significant ones are as follows: .eslintrc.js: this is a config file for eslint. you can use this to manage your linting rules. babel.config.js: this is the config file for babel, which transforms modern javascript features being used in development code into older syntax that is more cross-browser compatible in production code. you can register additional babel plugins in this file. .browserslistrc: this is a config for browserslist. you can use this to control which browsers your tooling optimizes for. public: this directory contains static assets that are published, but not processed...
...tml through this tutorial, but it is worth knowing that this is possible. <script> contains all of the non-display logic of your component. most importantly, your <script> tag needs to have a default exported js object. this object is where you locally register components, define component inputs (props), handle local state, define methods, and more. your build step will process this object and transform it (with your template) into a vue component with a render() function. in the case of app.vue, our default export sets the name of the component to app and registers the helloworld component by adding it into the components property. when you register a component in this way, you're registering it locally. locally registered components can only be used inside the components that register them, s...

Styling Vue components with CSS - Learn web development
present in the file. let's remove those and replace them with the styles below. these styles do a few things — adding some styling to buttons and inputs, and customizing the #app element and its children. ...
...bsolute; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid currentcolor; background: transparent; } .custom-checkbox > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .custom-checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .custom-checkbox > input[type="checkbox"]:checked + label::after { opacity: 1; } @media only screen and (min-width: 40rem) { label, input, .custom-checkbox { font-size: 19px; font-size: 1.9rem; line-height: 1.31579; } } now we need to ad...

Handling common JavaScript problems - Learn web development
the following: if("geolocation" in navigator) { navigator.geolocation.getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } you could also write such a test for a css feature, for example by testing for the existence of element.style.property (e.g. paragraph.style.transform !== undefined). but for both css and javascript, it is probably better to use an established feature detection library rather than writing your own all the time. modernizr is the industry standard for feature detection tests. as a last point, don't confuse feature detection with browser sniffing (detecting what specific browser is accessing the site) — this is a terrible practice that should b...
...t 6/ecmascript 2015 features to a version that will work in older browsers. note: this is called "transpiling" — you are not compiling code into a lower level to be run on a computer (like you would say with c code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of javascript into another). so for example, we talked about arrow functions (see arrow-function.html live, and see the source code) earlier in the article, which only work in the newest browsers: () => { ... } we could transpile this across to a traditional old-fashioned anonymous function, so it would work in older browsers: function() { ... } the recommended tool for javasc...

Command line crash course - Learn web development
before you go any further, open your terminal program! nav...
...for that, we'll add awk to the mix (which is a programming language akin to javascript or ruby or python, just a lot older!). try running this: curl /docs/web/api/fetch -l -i | grep location | awk '{ print "https://developer.mozilla.org" $2 }' your final output should look som...

Adding a new CSS property
parser_function. you must take the latter approach for properties that are part of shorthands if you want the shorthand parser to be able to reuse the longhand parser. (note that when the longhand property css_property_parse_value_list, the shorthand property parser would be assumed to be reusing the longhand parser once per item, not for a whole list, as for properties like background-image or transform-timing-function.) if the property takes a list of keywords other than inherit/initial/etc., auto, none, or normal (which can be expressed using the variant_* flags), you should use variant_keyword and add a keyword table to the nscssprops class. the name of this keyword table needs to go in the nscssproplist entry; otherwise that keyword table should be null. if you need a keyword table, you s...
... union, use nsstylecoord. but don't use nsstylecoord if you only need a single type that nsstylecoord provides. the default constructor must initialize the variable to match the initial value of the property, as described in the "initial value:" line in the specification's definition of the property. you then need to add code to nsrulenode::compute*data (where the * is for the style struct) to transform a specified value of the property into a computed value of the property. this needs to match the specification's definition of the "computed value" (and, for the 'initial' value, it's definition of "initial value"). for examples of how to write this computation code, see other examples in nsrulenode.cpp. in any case where the computation you do might vary between elements that match the same l...

Reference Manual
ce(abarptr, &rv) ); // or foo = do_queryinterface(abarptr, &rv); nscomptr<t> = dont_addref( t* ), nscomptr<t> = getter_addrefs( t* ) sometimes, you happen to have a pointer lying around that's already addrefed, but you want to put it into an nscomptr. this often happens with getters that return the addrefed pointer as their result (rather than an nsresult); or in the efficiency transformations. dont_addref is the perfect remedy to situations like this. nsifoo* temp; nsresult rv = getfoo(&temp); nscomptr<nsifoo> foo( dont_addref(temp) ); // |temp| has already been |addref|ed, but we want to manage it with an // |nscomptr|. nscomptr<nsifoo> foo( getter_addrefs(createafoo()) ); // |getter_addrefs| is a synonym for |dont_addref| that may look better t...
...with |nscomptr|... nscomptr<nsidomnode> p = ...; while ( p ) { // ... // introduce a temporary so we // don't stomp on |p| nscomptr<nsidomnode> temp = p; temp->getnext(getter_addrefs(p)); } although the nscomptr parallel is easy to understand, it suffers from doing one extra addref and one extra release compared to the raw pointer scheme. a slight transformation makes the code uglier, but (possibly negligibly) more efficient. // safe, efficient, iterating with |nscomptr|... nscomptr<nsidomnode> p = ...; while ( p ) { // ... nsidomnode* next; p->getnext(&next); p = dont_addref(next); } // look! it's our friend, the `raw pointer, call getter, assign // |dont_addref|' pattern. writin...

Use a source map - Firefox Developer Tools
the javascript sources executed by the browser are often transformed in some way from the original sources created by a developer. for example: sources are often combined and minified to make delivering them from the server more efficient. javascript running in a page is often machine-generated, as when compiled from a language like coffeescript or typescript. in these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. a source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. to enable the debugger to work with a source map, you must: generate the source map incl...
...the comment's syntax is like this: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map in the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. this page loads a source called "main.js" that was originally written in coffeescript and compiled to javascript. ...

Animation.pause() - Web APIs
nity. ...
...is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink me." var stopplayingali...

AudioWorkletProcessor.process - Web APIs
output. the method should return false as soon as it's known that it will no longer produce an output. for example, take the audiobuffersourcenode — the processor behind such a node should return true from the process method while the buffer is playing, and start returning false when the buffer playing has ended (there's no way to call play on the same audiobuffersourcenode again). a node that transforms its input. a processor implementing such a node should return false from the process method to allow the presence of active input nodes and references to the node to determine whether it can be garbage-collected. an example of a node with this behaviour is the gainnode. as soon as there are no inputs connected and references retained, gain can no longer be applied to anything, so it can be safel...
...ing such a node should return false from the process method to allow the presence of active input nodes and references to the node to determine whether it can be garbage-collected. an example of a node with this behaviour is the gainnode. as soon as there are no inputs connected and references retained, gain can no longer be applied to anything, so it can be safely garbage-collected. a node that transforms its input, but has a so-called tail-time — this means that it will produce an output for some time even after its inputs are disconnected or are inactive (producing zero-channels). a processor implementing such a node should return true from the process method for the period of the tail-time, beginning as soon as inputs are found that contain zero-channels. an example of such a node is the del...

BaseAudioContext.createPeriodicWave() - Web APIs
contains only a fundamental tone is by definition a sine wave here, we create a periodicwave with two values. the first value is the dc offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. ...
...cillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value. here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to get a time domain buffer for the frequency of the oscillator. here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave. the coefficients of the fourier transform should be given in ascending order (i.e. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} etc.) and can be positive or negative. a si...

CSSStyleValue.parse() - Web APIs
ied values and returns the first value as a cssstylevalue object. syntax cssstylevalue.parse(property, csstext) parameters property a css property to set. csstext a comma-separated string containing one or more values to apply to the provided property. return value a cssstylevalue object containing the first supplied value. ...
...a-separated string containing one or more values to apply to the provided property. return value a cssstylevalue object containing the first supplied value. example the code below parses a set of declarations for the transform property. the second code block shows the structure of the returned object as it would be rendered in a developer tools console. const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification. working draft initial definition. ...

CanvasRenderingContext2D.translate() - Web APIs
parameters x distance to move in the horizontal direction. positive values are to the right, and negative to the left. y distance to move in the vertical direction. positive values are down, and negative are up. examples moving a shape this example draws a square that is moved from its default position by the translate() method. ...
... <canvas id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and 30 vertically. the first square is shifted by those amounts from its default position. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('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 'canvasrenderingcontext2d.translate' in that specification. living standard ...

DOMMatrix() - Web APIs
the dommatrix constructor creates a new dommatrix object which represents 4x4 matrices, suitable for 2d and 3d operations.. syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). ...
...this example creates a dommatrix to use as an argument for calling point.matrixtransform(). var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry interfaces module level 1the definition of 'dommatrix' in that specification. candidate recommendation initial definition. ...

DOMMatrix - Web APIs
s. returns itself. dommatrix.rotateaxisangleself() modifies the matrix by rotating it by the specified angle around the given vector. returns itself. dommatrix.rotatefromvectorself() modifies the matrix by rotating it by the angle between the specified vector and (1, 0). returns itself. dommatrix.setmatrixvalue() replaces the contents of the matrix with the matrix described by the specified transform or transforms. returns itself. dommatrix.skewxself() modifies the matrix by applying the specified skew transformation along the x-axis. returns itself. dommatrix.skewyself() modifies the matrix by applying the specified skew transformation along the y-axis. returns itself. static methods this interface inherits methods from dommatrixreadonly. fromfloat32array() creates a new mutable d...
...on is thrown. frommatrix() creates a new mutable dommatrix object given an existing matrix or a dommatrixinit dictionary which provides the values for its properties. usage notes the matrix defined by the dommatrix interface is comprised of four rows of four columns each. while it's beyond the scope of this article to explain the mathematics involved, this 4×4 size is enough to describe any transformation you might apply to either 2d or 3d geometries. [m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ] the positions of the 16 elements (m11 through m44) which comprise the 4×4 abstract matrix. the dom...

DOMMatrixReadOnly.translate() - Web APIs
sult of the matrix being translated by the given vector. the original matrix is not modified. if a translation is applied about the z-axis, the resulting matrix will be a 4x4 3d matrix. ...
... and one blue, each positioned at the document origin: <svg width="250" height="250" viewbox="0 0 50 50"> <rect width="25" height="25" fill="red" /> <rect id="transformed" width="25" height="25" fill="blue" /> </svg> the following javascript first creates an identity matrix, then uses the translate() method to create a new, translated matrix — which is then applied to the blue square as a transform. the red square is left in place. const matrix = new dommatrixreadonly().translate(25, 25); document.queryselector('#transformed').setattribute('transform', matrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.translate()' in that specification. candidate recomm...

DOMMatrixReadOnly - Web APIs
uniform() returns a new dommatrix created by applying the specified scaling on the x, y, and z axes, centered at the given origin. by default, the y and z axes' scaling factors are both 1, but the scaling factor for x must be specified. the default origin is (0, 0, 0). the original matrix is not changed. dommatrixreadonly.skewx() returns a new dommatrix created by applying the specified skew transformation to the source matrix along its x-axis. the original matrix is not modified. dommatrixreadonly.skewy() returns a new dommatrix created by applying the specified skew transformation to the source matrix along its y-axis. the original matrix is not modified. dommatrixreadonly.tofloat32array() returns a new float32array containing all 16 elements (m11, m12, m13, m14, m21, m22, m23, m24, m31,...
...form matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44). see the css matrix3d() function for details on the 3d notation's syntax. throws an invalidstateerror exception if any of the elements in the matrix are non-finite (even if, in the case of a 2d matrix, the non-finite values are in elements not used by the 2d matrix representation). dommatrixreadonly.transformpoint() transforms the specified point using the matrix, returning a new dompoint object containing the transformed point. neither the matrix nor the original point are altered. dommatrixreadonly.translate() returns a new dommatrix containing a matrix calculated by translating the source matrix using the specified vector. by default, the vector is (0, 0, 0). the original matrix is not changed. ...

DOMPointInit - Web APIs
properties dompointinit.x an unrestricted floating-point value indicating the x-coordinate of the point in space. this is generally the horizontal coordinate, with positive values being to the right and negative values to the left. the default value is 0. dompointinit.y an unrestricted floating-point number providing the point's y-coordinate. ...
...the default value is 0. ...

How to create a DOM tree - Web APIs
...
...ed to a web server (via xmlhttprequest), transformed using xslt, xlink, converted to a javascript object through a jxon algorithm, etc. you can use dom trees to model data which isn't well-suited for rdf (or perhaps you just don't like rdf). another application is that, since xul is xml, the ui of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily. ...

EffectTiming.easing - Web APIs
ies the point at which the change of values occur within the interval. if the second parameter is omitted, it is given the value end. step-start equivalent to steps(1, start) step-end equivalent to steps(1, end). ...
...of values occur within the interval. if the second parameter is omitted, it is given the value end. step-start equivalent to steps(1, start) step-end equivalent to steps(1, end). ...

Element: wheel event - Web APIs
...
... working draft ...

GlobalEventHandlers.oncontextmenu - Web APIs
enu typically appears upon a right click. html <p>try opening the context menu. is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. ...
...ick. html <p>try opening the context menu. is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. ...

GlobalEventHandlers.onmouseup - Web APIs
ves a mouseevent object as its sole argument. example in this example, a piece of "toast" hides when you click down with the mouse, and reappears when you release. it uses the onmousedown and onmouseup event handlers. ...
...llo world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = re...

HTMLElement: transitioncancel event - Web APIs
in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for...
...in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for the transition end event to fire, stay hovered over the transition until the transition ends. co...

HTMLElement: transitionend event - Web APIs
in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for...
...in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for the transition end event to fire, stay hovered over the transition until the transition ends. co...

HTMLElement: transitionrun event - Web APIs
const el = document.queryselector('.transition'); const message = document.queryselector('.message'); el.addeventlistener('transitionrun', funct...
... const el = document.queryselector('.transition'); const message = document.queryselector('.message'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', ...

HTMLElement: transitionstart event - Web APIs
const transition = document.queryselector('.transition'); const message = document.queryselector('.message'); transition.addeventlistener('trans...
... const transition = document.queryselector('.transition'); const message = document.queryselector('.message'); transition.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); transition.addeventlist...

HTMLOrForeignElement.dataset - Web APIs
y ascii capital letters (a to z). in javascript, the name of a custom data attribute is the name of the same html attribute, but in camelcase and with no dashes, dots, etc. in addition to the information below, you'll find a how-to guide for using html data attributes in our article using data attributes. name conversion dash-style to camelcase conversion a custom data attribute name is transformed to a key for the domstringmap entry with the following rules the prefix data- is removed (including the dash); for any dash (u+002d) followed by an ascii lowercase letter a to z, the dash is removed, and the letter is transformed into its uppercase counterpart; other characters (including other dashes) are left unchanged. camelcase to dash-style conversion the opposite transfor...
...uding the dash); for any dash (u+002d) followed by an ascii lowercase letter a to z, the dash is removed, and the letter is transformed into its uppercase counterpart; other characters (including other dashes) are left unchanged. camelcase to dash-style conversion the opposite transformation, which maps a key to an attribute name, uses the following rules: restriction: before the transformation, a dash must not be immediately followed by an ascii lowercase letter a to z; the prefix data- is added; any ascii uppercase letter a to z is transformed into a dash, followed by its lowercase counterpart; other characters are left unchanged. the restriction in the rules above ensures that the two transformations are the inverse one of the other. for example, the attribute named...

KeyboardEvent.code - Web APIs
ngle * (math.pi/180); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform. ...
...0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform. function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle. window.addeventlistener("keydown", function(event) {...

Using the MediaStream Recording API - Web APIs
ute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } las...
...we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back. we'll declare some variables for the record and stop buttons, and the <article> that will contain the generated audio players: cons...

Path2D.addPath() - Web APIs
(technically a dommatrixinit object). examples adding a path to an existing path this example adds one path to another. html <canvas id="canvas"></canvas> javascript first, we create two separate path2d objects, each of which contains a rectangle made using the rect() method. we then create a matrix using document.createelementns() and createsvgmatrix(). ...
...to move the second path to the right. finally, we draw the first path (which now contains both rectangles) using fill(). ...

PeriodicWave - Web APIs
contains only a fundamental tone is by definition a sine wave here, we create a periodicwave with two values. the first value is the dc offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. ...
...cillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value. here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to get a time domain buffer for the frequency of the oscillator. here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave. the coefficients of the fourier transform should be given in ascending order (i.e. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} etc.) and can be positive or negative. a si...

Point - Web APIs
point is an interface, which existed only briefly in the css transforms level 1 specification, which represents a point in 2-dimensional space. it is non-standard, not broadly compatible, and should not be used. although it is not directly related to this defunct interface, you are probably looking for dompoint, which is part of the geometry interfaces module level 1 specification. properties x a floating-point value specifying the point's position with respect to the x (horizontal) axis. y a floating-point value specifying the point's position with respect to the y (vertical) axis. specifications this class was specified in the defunct 20 march 2009 working draft of css 2d transforms module level 3. ...
...tion. properties x a floating-point value specifying the point's position with respect to the x (horizontal) axis. y a floating-point value specifying the point's position with respect to the y (vertical) axis. specifications this class was specified in the defunct 20 march 2009 working draft of css 2d transforms module level 3. it is not present in the current working draft of the css transforms level 1 specification. ...

SVGPatternElement - Web APIs
only an svganimatedenumeration corresponding to the patternunits attribute of the given <pattern> element. takes one of the constants defined in svgunittypes. svgpatternelement.patterncontentunits read only an svganimatedenumeration corresponding to the patterncontentunits attribute of the given <pattern> element. takes one of the constants defined in svgunittypes. svgpatternelement.patterntransform read only an svganimatedtransformlist corresponding to the patterntransform attribute of the given <pattern> element. svgpatternelement.x read only an svganimatedenumeration corresponding to the x attribute of the given <pattern> element. svgpatternelement.y read only an svganimatedenumeration corresponding to the y attribute of the given <pattern> element. svgpatternelement.width read o...
...s parent interface, svgelement and implements the ones from svgfittoviewbox and svgurireference. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgpatternelement' in that specification. candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpatternelement' in that specification. recommendation initial definition ...

Visual Viewport API - Web APIs
s translate() method. you invoke this function by passing it to both event calls. one thing that may not be clear in this example is the use of the pendingupdate flag and the call to requestanimationframe(). the pendingupdate flag serves to prevent multiple invocations of the transfrom that can occur when onresize and onscroll fire at the same time. using requestanimationframe() ensures that the transform ocurrs before the next render. let pendingupdate = false; function viewporthandler(event) { if (pendingupdate) return; pendingupdate = true; requestanimationframe(() => { pendingupdate = false; var layoutviewport = document.getelementbyid('layoutviewport'); // since the bar is position: fixed we need to offset it by the // visual viewport's offset from the layout viewpor...
...// visual viewport's offset from the layout viewport origin. var viewport = event.target; var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. ...

WebGL2RenderingContext.bindBufferRange() - Web APIs
the webgl2renderingcontext.bindbufferrange() method of the webgl 2 api binds a range of a given webglbuffer to a given binding point (target) at a given index. syntax void gl.bindbufferrange(target, index, buffer, offset, size); parameters target a glenum specifying the target for the bind operation. possible values: gl.transform_feedback_buffer gl.uniform_buffer index a gluint specifying the index of the target. ...
... editor's draft initial definition for webgl. opengl es 3.0the definition of 'glbindbufferrange' in that specification. ...

WebGL2RenderingContext.getBufferSubData() - Web APIs
g the binding point (target). possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. srcbyteoffset a glintptr specifying the byte offset from which to start reading from the buffer. dstdata an arraybuffer or sharedarrayb...
...pecifying the element index offset where to start reading the buffer. length optional a gluint defaulting to 0. return value none. exceptions an invalid_value error is generated if: offset + returneddata.bytelength would extend beyond the end of the buffer returneddata is null offset is less than zero. an invalid_operation error is generated if: zero is bound to target target is transform_feedback_buffer, and any transform feedback object is currently active. examples var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array(vertices), gl.static_draw); var arrbuffer = new arraybuffer(vertices.length * float32array.bytes_per_element); gl.getbuffersubdata(gl.array_buffer, 0, arrbuffer); specifications spec...

WebGL2RenderingContext.getIndexedParameter() - Web APIs
the webgl2renderingcontext.getindexedparameter() method of the webgl 2 api returns indexed information about a given target. syntax any gl.getindexedparameter(target, index); parameters target a glenum specifying the target for which to return information. possible values: gl.transform_feedback_buffer_binding: returns a webglbuffer. gl.transform_feedback_buffer_size: returns a glsizeiptr. gl.transform_feedback_buffer_start: returns a glintptr. gl.uniform_buffer_binding: returns a webglbuffer. gl.uniform_buffer_size: returns a glsizeiptr. gl.uniform_buffer_start: returns a glintptr. index a gluint specifying the index of the target that is queried. return value depends on the requested information (as specified with target). examples var binding = gl.getind...
...form_feedback_buffer_start: returns a glintptr. gl.uniform_buffer_binding: returns a webglbuffer. gl.uniform_buffer_size: returns a glsizeiptr. gl.uniform_buffer_start: returns a glintptr. index a gluint specifying the index of the target that is queried. return value depends on the requested information (as specified with target). examples var binding = gl.getindexedparameter(gl.transform_feedback_buffer_binding, 0); specifications specification status comment webgl 2.0the definition of 'getindexedparameter' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glget' in that specification. standard man page of the (similar) opengl api. ...

WebGLRenderingContext.bindBuffer() - Web APIs
x attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. buffer a webglbuffer to bind. return value none. exceptions only one target can be bound to a given webglbuffer. an att...
...mendation initial definition for webgl. opengl es 2.0the definition of 'glbindbuffer' in that specification. standard man page of the (similar) opengl es 2 api. webgl 2.0the definition of 'bindbuffer' in that specification. editor's draft updated definition for webgl 2. adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer opengl es 3.0the definition of 'glbindbuffer' in that specification. standard man page of the (similar) opengl es 3 api. ...

WebGLRenderingContext.bufferData() - Web APIs
ertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. size a glsizeiptr setting the size in bytes of the buffer object's data store. srcdata optional an arraybuffer, sharedarraybuf...
...specification. recommendation initial definition. opengl es 2.0the definition of 'glbufferdata' in that specification. standard man page of the opengl api. opengl es 3.0the definition of 'glbufferdata' in that specification. standard man page of the (similar) opengl es 3 api. adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy. ...

WebGLRenderingContext.bufferSubData() - Web APIs
x attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. dstbyteoffset a glintptr specifying an offset in bytes where the data replacement will start. srcdata optional an arraybuf...
...dation initial definition for webgl. opengl es 2.0the definition of 'glbuffersubdata' in that specification. standard man page of the opengl es 2 api. opengl es 3.0the definition of 'glbuffersubdata' in that specification. standard man page of the (similar) opengl es 3 api. adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer. ...

WebGLRenderingContext.getBufferParameter() - Web APIs
x attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. pname a glenum specifying information to query. possible values: gl.buffer_size: returns a glint indicating the size of ...
...f the (similar) opengl es 2 api. webgl 2.0the definition of 'getbufferparameter' in that specification. editor's draft updated definition for webgl. opengl es 3.0the definition of 'glgetbufferparameter' in that specification. standard man page of the (similar) opengl es 3 api. adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy. ...

WebGLRenderingContext.getParameter() - Web APIs
x_elements_vertices glint gl.max_fragment_input_components glint gl.max_fragment_uniform_blocks glint gl.max_fragment_uniform_components glint gl.max_program_texel_offset glint gl.max_samples glint gl.max_server_wait_timeout glint64 gl.max_texture_lod_bias glfloat gl.max_transform_feedback_interleaved_components glint gl.max_transform_feedback_separate_attribs glint gl.max_transform_feedback_separate_components glint gl.max_uniform_block_size glint64 gl.max_uniform_buffer_bindings glint gl.max_varying_components glint gl.max_vertex_output_components glint gl.max_...
...inding to the default framebuffer. see also bindframebuffer. gl.sample_alpha_to_coverage glboolean gl.sample_coverage glboolean gl.sampler_binding webglsampler or null see bindsampler. gl.texture_binding_2d_array webgltexture or null see bindtexture. gl.texture_binding_3d webgltexture or null see bindtexture. gl.transform_feedback_active glboolean gl.transform_feedback_binding webgltransformfeedback or null see bindtransformfeedback. gl.transform_feedback_buffer_binding webglbuffer or null see bindbuffer. gl.transform_feedback_paused glboolean gl.uniform_buffer_binding webglbuffer or null see bindbuffer. gl.uniform_buffer_offset_alignment...

A basic 2D WebGL animation example - Web APIs
n, which is the position of the vertex in whatever coordinate system it's using. we need to convert these values so that both components of the position are in the range -1.0 to 1.0. this can be done easily enough by multiplying by a scaling factor that's based on the context's aspect ratio. we'll see that computation shortly. we're also rotating the shape, and we can do that here, by applying a transform. we'll do that first. the rotated position of the vertex is computed by applying the rotation vector, found in the uniform urotationvector, that's been computed by the javascript code. then the final position is computed by multiplying the rotated position by the scaling vector provided by the javascript code in uscalingfactor. the values of z and w are fixed at 0.0 and 1.0, respectively, since ...
...ng the rotation vector, found in the uniform urotationvector, that's been computed by the javascript code. then the final position is computed by multiplying the rotated position by the scaling vector provided by the javascript code in uscalingfactor. the values of z and w are fixed at 0.0 and 1.0, respectively, since we're drawing in 2d. the standard webgl global gl_position is then set to the transformed and rotated vertex's position. fragment shader next comes the fragment shader. its role is to return the color of each pixel in the shape being rendered. since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor;...

Adding 2D content to a WebGL context - Web APIs
sl and pass the text of the code into webgl to be compiled for execution on the gpu. together, a set of vertex and fragment shaders is called a shader program. let's take a quick look at the two types of shader, with the example in mind of drawing a 2d shape into the webgl context. vertex shader each time a shape is rendered, the vertex shader is run for each vertex in the shape. ...
...bgl context. vertex shader each time a shape is rendered, the vertex shader is run for each vertex in the shape. its job is to transform the input vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual size, or any other factors. the vertex shader must perform the needed transforms on the vertex's position, make any other adjustments or calculations it needs to make on a per-vertex basis, then return the transformed vertex by saving it in a special variable provided by glsl, called gl_position. the vertex shader can, as needed, also do things like determine the coordinates within the face's texture of the texel to apply to the vertex, apply the normals to determine the li...

Rendering and the WebXR frame animation callback - Web APIs
time it needs a framebuffer to render your scene. this is done by calling the xrsession method requestanimationframe(). ...
... then the first animation frame is scheduled by calling the xrsession method requestanimationframe(), providing a callback function, mydrawframe(), whose job is to render the frame. ...

WebXR Device API - Web APIs
of the view relative to the camera, in order to allow for creating stereographic effects. xrviewport describes a viewport. a viewport is a rectangular portion of a graphic surface. in webxr, a viewport represents the area of a drawing surface corresponding to a particular xrview, such as the portion of the webgl framebuffer used to render one of the two eyes' perspectives on the scene. xrrigidtransform a transform defined using a position and orientation in the virtual space's coordinate system as described by the xrspace. xrpose describes a position and orientation in space relative to an xrspace. xrviewerpose based on xrpose, xrviewerpose specifies the state of a viewer of the webxr scene as indicated by the xr device. included is an array of xrview objects, each representing one perspec...
...oncepts. foundations and basics fundamentals of webxr before diving into the details of how to create content using webxr, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way. matrix math for the web a guide covering how matrices can be used on the web, including both for css transforms and for webgl purposes, as well as to handle the positioning and orientation of objects in webxr contexts. webxr application life cycle an overview of the overall life cycle of a webxr application, from startup to shutdown. this article serves as an introduction to the basics of what's involved in creating a webxr experience without diving into the code in detail. it's a good way to prepare f...

XRInputSourceEvent.frame - Web APIs
r's current point of view; the results of calling getviewerpose() will be an xrviewerpose with an empty views list. examples this code shows a handler for the selectstart event which gets the target ray's pose from the frame, mapping the pose representing the ray (event.inputsource.targetrayspace) to the overall reference space myrefspace. ...
...f the result isn't null, the target ray pose's transform is passed into a function called mycheckandhandlehit() to see if the ray was pointing at anything when the select was triggered. xrsession.onselectstart = event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { checkandhandlehit(targetraypose.transform); } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.frame' in that specification. working draft initial definition. ...

XRReferenceSpaceEvent - Web APIs
w xrreferencespaceevent with the specified type and configured using the values in the given xrreferencespaceeventinit dictionary. properties in addition to inheriting the properties available on the parent interface, event, xrreferencespaceevent objects include the following properties: referencespace read only an xrreferencespace indicating the reference space that generated the event. transform read only an xrrigidtransform object indicating the position and orientation of the specified referencespace's native origin after the event, defined relative to the coordinate system before the event. methods while xrreferencespaceevent does not define any methods, it inherits the methods of its parent interface, event. event types reset the reset event is sent to a reference space whe...
... defined relative to the coordinate system before the event. methods while xrreferencespaceevent does not define any methods, it inherits the methods of its parent interface, event. event types reset the reset event is sent to a reference space when its native origin is changed due to a discontinuity, recalibration, or device reset. this is an opportunity for your app to update any stored transforms, position/orientation information, or the like—or to dump any cached values based on the reference's space's origin so you can recompute them as needed. specifications specification status comment webxr device apithe definition of 'xrreferencespaceevent' in that specification. working draft initial definition. ...

XRReferenceSpaceEventInit - Web APIs
t dictionary is used when calling the xrreferencespaceevent() constructor to provide the values for its properties. since the properties are read-only, this is the only opportunity available to set their values. you will not usually need to use this, since these events are created by the webxr infrastructure. properties referencespace the xrreferencespace from which the event originated. transform an xrrigidtransform which maps the old coordinate system (from before the changes indicated by this event) to the new coordiante system. usage notes all of this dictionary's properties must have valid values set on them before calling the xrreferencespaceevent() constructor. examples this simple snippet calls the constructor to create a new reference space event of type reset. let refspace...
...ndicated by this event) to the new coordiante system. usage notes all of this dictionary's properties must have valid values set on them before calling the xrreferencespaceevent() constructor. examples this simple snippet calls the constructor to create a new reference space event of type reset. let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit' in that specification. working draft initial definition. ...

XRSession.onsqueeze - Web APIs
exapnds somewhat on the previous example by demonstrating a way to implement the ability for the user to drop an object that was previously picked up by the user.. this is just a snippet of code, but should establish the general idea. after checking that the event occurred on the user's dominant hand, the pose's target ray is obtained. then we pass the currently held object and the target ray's transform matrix into a function we call dropobjectusingray() to drop the object, using the target ray to determine the surface upon which the object should be placed. this also clears the value of heldobject so we know that there's no longer an object in hand. xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputs...
...ject should be placed. this also clears the value of heldobject so we know that there's no longer an object in hand. xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (user.heldobject && targetraypose) { dropobjectusingray(user.heldobject, targetraypose.transform.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling related to this approach. specifications specification status comment webxr device apithe definition of 'xrsession.onsqueeze' in that specification. working draft initial definition. ...

XRSession: selectend event - Web APIs
e(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from do...
... called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetra...

XRSession: selectstart event - Web APIs
e(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from do...
... called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetra...

XRSession: squeezeend event - Web APIs
(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from d...
...called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspac...

XRSession: squeezestart event - Web APIs
(). if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object representing the object the user has begun to drag. upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from d...
...called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspac...

XSLT Basic Example - Web APIs
the example will take an xml document that contains information (title, list of authors and body text) about an article and present it in an human readable form. figure 1 shows the source of the basic xslt example. the xml document (example.xml) contains the information about the article. using the ?xml-stylesheet? processing instruction, it links to the xslt stylesheet (example.xsl) via its href attribute. an xslt stylesheet starts with the xsl:stylesheet element, which contains all the templates used to create the final output. ...
...l document (example.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> <article> <title>my article</title> <authors> <author>mr. foo</author> <author>mr. bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="text"/> <xsl:template match="/"> article - <xsl:value-of select="/article/title"/> authors: <xsl:apply-templates select="/article/authors/author"/> </xsl:template> <xsl:template match="author"> - <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet> browser output : article - my article authors: - mr. foo - mr. bar ...

Introduction - Web APIs
he first ways proposed by the w3c. css is a simple way to apply style rules to a web document. these style rules define how the document (the content) should be laid out. however, it has several limitations, such as lack of programming structures and ability to create complex layout models. css also has limited support for changing the position of an element. xsl (extensible stylesheet language) transformations are composed of two parts: xsl elements, which allow the transformation of an xml tree into another markup tree and xpath, a selection language for trees. xslt takes an xml document (the content) and creates a brand new document based on the rules in the xsl stylesheet. this allows xslt to add, remove and reorganize elements from the original xml document and thus allows more fine-grain con...
...each template matches (using xpath) a certain fragment of the input xml document and then applies the substitution part on that fragment to create the new resulting document. ...

::first-line (:first-line) - CSS: Cascading Style Sheets
syntax /* css3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph. after that, all text will be styled like normal. see what i mean?</p> <span>the first line of this text w...
...rtical-align. syntax /* css3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph. after that, all text will be styled like normal. see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification. working draft defines more strictly where ::first-letter can occur...

@keyframes - CSS: Cascading Style Sheets
this must match the identifier production in css syntax. ...
...this must match the identifier production in css syntax. ...

prefers-reduced-motion - CSS: Cascading Style Sheets
near infinite both; } /* tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. ...
...down the animation to avoid vestibular motion triggers like scaling or panning large objects. */ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that specification. editor's draft ...

Detecting CSS animation support - CSS: Cascading Style Sheets
hyphen-ation. animating using the correct syntax for different browsers now that you know if css animation is supported or not, we can animate. ...
...ow that you know if css animation is supported or not, we can animate. ...

Border-image generator - CSS: Cascading Style Sheets
elect: 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; tex...
...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; } /*************************************************************************************/ /*********************************************...

Border-radius generator - CSS: Cascading Style Sheets
e; user-select: none; } .ui-input-slider-container * { 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; tex...
...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; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helveti...

Layout and the containing block - CSS: Cascading Style Sheets
static (fixed, absolute, relative, or sticky). if the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media). if the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following: a transform or perspective value other than none a will-change value of transform or perspective a filter value other than none or a will-change value of filter (only works on firefox). a contain value of paint (e.g. contain: paint;) note: the containing block in which the root element (<html>) resides is a rectangle called the initial containing block. it has the dimensions of the viewport...
...0vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: 5%; /* == (5vw - (width of vertical scrollbar)) */ padding: 5%; /* == (5vw - (width of vertical scrollbar)) */ background: cyan; } example 5 in this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a transform property that isn't none. <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { transform: rotate(0deg); width: 400px; height: 160px; background: lightgray; } p { position: absolute; left: 80px; top: 30px; width: 50%; /* == 200px */ height: 25%; /* == 40px */ margin: 5%; /* == 20px */ padding: 5%; /* == 2...

image-orientation - CSS: Cascading Style Sheets
warning: this property is deprecated in the specification. its functionality may be moved into properties on the <img> and/or <picture> elements, with the possible exception of from-image. the flip and <angle> values were made obsolete in firefox 63. ...
...after the rotation given by the <angle> value is applied. if no <angle> is given, 0deg is used. description this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. it should not be used for arbitrary rotations. for any purpose other than correcting an image's orientation due to how it was shot or scanned, use a transform property with the rotate keyword to specify rotation. this includes any user-directed changes to the orientation of the image, or changes required for printing in portrait versus landscape orientation. if used in conjunction with other css properties, such as a <transform-function>, any image-orientation rotation is applied before any other transformations. formal definition initial value0dega...

offset-anchor - CSS: Cascading Style Sheets
<position> a <position> defines an x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. for more specifics, see the <position> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <p...
...osition> a <position> defines an x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. for more specifics, see the <position> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...

offset-path - CSS: Cascading Style Sheets
operty. each shape or path must define an initial position for the computed value of 0 for offset-distance and an initial direction which specifies the rotation of the object to the initial position. early versions of the spec called this property motion-path. it was changed to offset-path because the property describes static positions, not motion. ...
...0 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate...

offset-rotate - CSS: Cascading Style Sheets
h direction but facing the opposite direction of `auto` */ offset-rotate: reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis. this is the default value. ...
...wise rotation transformation applied to it by the specified rotation angle. auto <angle> if auto is followed by an <angle>, the computed value of the angle is added to the computed value of auto. reverse the element is rotated similar to auto, except it faces the opposite direction. it is the same as specifying a value of auto 180deg. ...

Using Promises - JavaScript
result3) */ timing to avoid surprises, functions passed to then() will never be called synchronously, even with an already...
...result3) */ timing to avoid surprises, functions passed to then() will never be called synchronously, even with an already-resolved promise: promise.resolve().then(() => console.log(2)); c...

Object.setPrototypeOf() - JavaScript
controversial object.prototype.__proto__ property. appending prototype chains a combination of object.getprototypeof() and object.prototype.__proto__ permits appending a whole prototype chain to a new prototype object: /** *** object.appendchain(@object, @prototype) * * appends the first non-native prototype of a chain to a new prototype. * returns @object (if it was a primitive value it will transformed into an object). * *** object.appendchain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body") *** object.appendchain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body") * * appends the first non-native prototype of a chain to the native function.prototype object, then appends a * new function(["@arg"(s)], "@function_body") to that chain. * r...
...; } function mammalspecies(smammalspecies) { this.species = smammalspecies; } mammalspecies.prototype = new mammal(); mammalspecies.prototype.constructor = mammalspecies; var ocat = new mammalspecies('felis'); console.log(ocat.ismammal); // 'yes' function animal() { this.breathing = 'yes'; } object.appendchain(ocat, new animal()); console.log(ocat.breathing); // 'yes' second example: transforming a primitive value into an instance of its constructor and append its chain to a prototype function mysymbol() { this.issymbol = 'yes'; } var nprime = 17; console.log(typeof nprime); // 'number' var oprime = object.appendchain(nprime, new mysymbol()); console.log(oprime); // '17' console.log(oprime.issymbol); // 'yes' console.log(typeof oprime); // 'object' third example: appending a c...

Set - JavaScript
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([...ne...
...intersection(seta, setc) // => set [3, 4] symmetricdifference(seta, setc) // => set [1, 2, 5, 6] difference(seta, setc) // => set [1, 2] relation with array objects let myarray = ['value1', 'value2', 'value3'] // use the regular set constructor to transform an array into a set let myset = new set(myarray) myset.has('value1') // returns true // use the spread operator to transform a set into an array. 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'...

String.prototype.replace() - JavaScript
modifies the matched characters in this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. the important thing here is that additional operations are needed on the matched item before it is given back as a replacement. ...
...this forces the evaluation of the match prior to the tolowercase() method. if we had tried to do this using the match without a function, the tolowercase() would have no effect. ...

Lexical grammar - JavaScript
automatic semicolon insertion (asi): empty statement let, const, variable statement import, export, module declaration expression statement debugger continue, break, throw return the ecmascript specification mentions three rules of semicolon insertion. 1. a semicolon is inserted before, when a line terminator or "}" is encountered that is not allowed by the grammar. { 1 2 } 3 // is transformed by asi into { 1 2 ;} 3; 2. a semicolon is inserted at the end, when the end of the input stream of tokens is detected and the parser is unable to parse the single input stream as a complete program. here ++ is not treated as a postfix operator applying to variable b, because a line terminator occurs between b and ++. a = b ++c // is transformend by asi into a = b; ++c; 3. a semicolon is...
...use a line terminator occurs between b and ++. a = b ++c // is transformend by asi into a = b; ++c; 3. a semicolon is inserted at the end, when a statement with restricted productions in the grammar is followed by a line terminator. these statements with "no lineterminator here" rules are: postfixexpressions (++ and --) continue break return yield, yield* module return a + b // is transformed by asi into return; a + b; specifications specification ecmascript (ecma-262)the definition of 'lexical grammar' in that specification. ...

CSS and JavaScript animation performance - Web Performance
on to enter the config screen. in the search bar, search for the layers.acceleration.draw-fps preference. double-click the entry to set the value to true. now you will be able to see three little purple boxes at the upper left corner of the firefox window. the first box represents fps. running the performance test initially in the test seen below, a total of 1000 <div> elements are transformed by css animation. the animation can be switched to requestanimationframe() by clicking the toggle button. try running them both now, comparing the fps for each (the first purple box.) you should see that the performance of css animations and requestanimationframe() are very close. off main thread animation even given the test results above, we'd argue that css animations are the better c...
...nd requestanimationframe() are very close. off main thread animation even given the test results above, we'd argue that css animations are the better choice. but how? the key is that as long as the properties we want to animate do not trigger reflow/repaint (read css triggers for more information), we can move those sampling operations out of the main thread. the most common property is the css transform. if an element is promoted as a layer, animating transform properties can be done in the gpu, meaning better performance/efficiency, especially on mobile. find out more details in offmainthreadcompositing. to enable the omta (off main thread animation) in firefox, you can go to about:config and search for the layers.offmainthreadcomposition.async-animations. toggle its value to true. after e...

SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; animatable: yes baseline-shift it allows repositioning ...
...rtical alignment a string of text. value: start|middle|end|inherit; animatable: yes text-decoration sets the appearance of decorative lines on text. value: none|underline|overline|line-through|blink|inherit; animatable: yes text-rendering hints about what tradeoffs to make as the browser renders text. value: auto|optimizespeed|optimizelegibility|geometricprecision|inherit; animatable: yes transform defines a list of transform definitions that are applied to an element and the element's children. value: <transform-list>; animatable: yes unicode-bidi - value:; animatable: - vector-effect specifies the vector effect to use when drawing an object. value: default|non-scaling-stroke|inherit|<uri>; animatable: yes visibility lets you control the visibility of graphical elements. value: ...

requiredFeatures - SVG: Scalable Vector Graphics
he <switch> element. if requiredfeatures is used in other situations, it represents a simple switch on the given element whether to render the element or not. to detect availability of an svg feature from script, there is the (also deprecated) domimplementation.hasfeature() method. ...
.../svg11/feature#externalresourcesrequired the browser supports the externalresourcesrequired attribute http://www.w3.org/tr/svg11/feature#view the browser supports the <view> element http://www.w3.org/tr/svg11/feature#script the browser supports the <script> element http://www.w3.org/tr/svg11/feature#animation the browser supports the <animate>, <set>, <animatemotion>, <animatetransform>, <animatecolor> and <mpath> elements http://www.w3.org/tr/svg11/feature#font the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face-src>, <font-face-uri>, <font-face-format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face...

rotate - SVG: Scalable Vector Graphics
45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> ...
... <g transform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications...

stdDeviation - SVG: Scalable Vector Graphics
the second ...
...the second value represents a standard deviation along the y-axis. if one number is provided, then that value is use...

stitchTiles - SVG: Scalable Vector Graphics
0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height...
...="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this...

<defs> - SVG: Scalable Vector Graphics
t promotes understandability of the svg content and is beneficial to the overall accessibility of the document. ...
...document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility 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>,...

<ellipse> - SVG: Scalable Vector Graphics
the <ellipse> element is an svg basic shape, used to create ellipses based on a center coordinate, and both their x and y radius. note: ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y position of the ellipse. value type: <length>|<percentage> ; default value: 0; animatable: yes rx the radius of the ellipse on the x axis. value type: auto|<length>|<percentag...
...tributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...

<g> - SVG: Scalable Vector Graphics
it can also group multiple elements to be referenced later with the <use> element. ...
...tributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...

<pattern> - SVG: Scalable Vector Graphics
t values for the <pattern> attributes. value type: <url>; default value: none; animatable: yes patterncontentunits this attribute defines the coordinate system for the contents of the <pattern>. value type: userspaceonuse|objectboundingbox; default value: userspaceonuse; animatable: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern> element. patterntransform this attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system. value type: <transform-list>; default value: none; animatable: yes patternunits this attribute defines the coordinate system for attributes x, y, width , and height. value type: userspaceonuse|objectboundingbox; default value: objectboundingbox...
... attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title 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>, <ma...

<radialGradient> - SVG: Scalable Vector Graphics
; default value: same as cx; animatable: yes fy this attribute defines the y coordinate of the start circle of the radial gradient. value type: <length> ; default value: same as cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system. value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; animatable: yes r this attribute defines the radius of the end circle of th...
...s global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status comment scalable vector graphics (svg) 2the definition of '<radialgradient>' in that spec...

SVG element reference - SVG: Scalable Vector Graphics
« svg / svg attribute reference » svg drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams. here you'll find reference documentation for each of the svg elements. ...
...hgradient> <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>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuse...

Gradients in SVG - SVG: Scalable Vector Graphics
> </svg> screenshotlive sample if the focal point is moved outside the circle described earlier, it's impossible for the gradient to be rendered correctly, so the spot will be assumed to be within the edge of the circle. if the focal point isn't given at all, it's assumed to be at the same place as the center point. both linear and radial gradients also take a few other attributes to describe transformations they may undergo. the only other one i want to mention here is the spreadmethod attribute. this attribute controls what happens when the gradient reaches its end, but the object isn't filled yet. it can take on one of three values, "pad", "reflect", or "repeat". "pad" is what you have seen so far. when the gradient reaches its end, the final offset color is used to fill the rest of the obje...
...zero to one, and they're scaled to the size of your object automatically for you. userspaceonuse essentially takes in absolute units. so you have to know where your object is, and place the gradient at the same place. the radialgradient above would be rewritten: <radialgradient id="gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientunits="userspaceonuse"> you can also then apply another transformation to the gradient by using the gradienttransform attribute, but since we haven't introduced transforms yet, i'll leave that for later. there are some other caveats for dealing with gradientunits="objectboundingbox" when the object bounding box isn't square, but they're fairly complex and will have to wait for someone more in-the-know to explain them. « previousnext » ...

places/bookmarks - Archive of obsolete content
`"php"`. // we then pass `results` into the remove function to mark // all items to be removed, which returns the new modified `array` // of items, which is passed into save. save(remove(results)).on("end", function (results) { // items tagged with `"php"` are now removed! }); }) parameters items : bookmark|group|separator|array a bookmark item, or array of bookmark items to be transformed to set their remove property to true. returns array : an array of the transformed bookmark items. search(queries, options) queries can be performed on bookmark items by passing in one or more query objects, each of which is given one or more properties. within each query object, the properties are and'd together: so only objects matching all properties are retrieved. across query objects, ...

XML-related code snippets - Archive of obsolete content
e4x ...

Handling Preferences - Archive of obsolete content
o document what they do. the preferences file you need to create should be defaults/preferences/yourextensionname.js, under your extension root. the naming of the js file is not compulsory, but it is the standard most extensions use. note: the purpose of the defaults directory is to hold non-code files your extension needs. in the past we have used this directory to store xslt files for xml transformations and local storage template files (more on this later). it's the best place to put miscellaneous files your extension needs. download this sample hello world using preferences. there are a couple of additions in the makefiles, to include the preference file xulschoolhello.js. the contents of the file are fairly simple: // amount of messages shown to the user. pref("extensions.xulschool...

XPCOM Objects - Archive of obsolete content
it back, because after that we only need to get and set preferences, and those methods are in nsiprefbranch. trying to access methods or attributes without having the right interface set will result in an exception being thrown. passing parameters passing parameters to xpcom methods is no different from other js objects, with some exceptions. in general, you can rely on javascript's ability to transform values to the correct type, but it's usually best to pass the right type in the first place. this section is a quick guide on how to read xpcom documentation, which basically amounts to understanding the syntax of xpidl, the language used to specify xpcom interfaces. at mdc, you'll see stuff like this: void setcharpref(in string aprefname, in string avalue); one of the most important detai...

Search Extension Tutorial (Draft) - Archive of obsolete content
tbranch(""); // get the root default preference branch. var defaultprefs = services.prefs.getdefaultbranch(""); // save the original values. var savedprefs = {} // change the default value of the preference *name* to *value*. // a default for this preference must exist, and it must be a // character preference. function setpref(name, value, localized) { // if this is a localized preference, transform the value into an // appropriate data: url. if (localized) value = "data:text/plain," + encodeuricomponent(name + "=" + value.replace(/ /g, "\\u0020")); // save the original and new values. savedprefs[name] = [defaultprefs.getcharpref(name), value]; // change the default defaultprefs.setcharpref(name, value); // clear the user value if this is the first run,...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
ased rpc mechanism or using interfaces like xmlhttprequest (currently offered in netscape 7 and internet explorer 6). data bind: mutation in the current document this step takes care of applying the changes into the current document, based on the data loaded, and uses dom interfaces. the mechanism can be as simple as copying new content to the current document, or as complex as performing dynamic transformations on the data source before applying the changes into the current document. for example, if a given web site's framework uses xslt to format xml contents as html, would be appropriate to reuse xslt to format new data that is about to be part of the current document. the next section illustrates a case of implementation using javascript, iframes and dom. inner-browsing with iframes and javascr...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
ng-long -pedantic -pthread -pipe c++ gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -fno-rtti -fno-exceptions -wall -wconversion -wpointer-arith -wcast-align -woverloaded-virtual -wsynth -wno-ctor-dtor-privacy -wno-non-virtual-dtor -wno-long-long -pedantic -fshort-wchar -pthread -pipe -i/usr/x11r6/include configure arguments --disable-mailnews --enable-extensions=cookie,xml-rpc,xmlextras,pref,transformiix,universalchardet,webservices,inspector,gnomevfs,negotiateauth --enable-crypto --disable-composer --enable-single-profile --disable-profilesharing --with-system-jpeg --with-system-zlib --with-system-png --with-pthreads --disable-tests --disable-jsd --disable-installer '--enable-optimize=-os -g -pipe -m32 -march=i386 -mtune=pentium4' --enable-xft --enable-xinerama --enable-default-toolkit=gtk2 -...

Source code directories overview - Archive of obsolete content
ser functions (e.g. forward, back, history). the [#seamonkey-webshell webshell] code wraps these interfaces according to the particular platform and way (e.g. activex) that is being supported. extensions contains c interfaces, c code, xul and javascript code for various add-ins that are related to browsing. these include: cookies, irc, wallet, dom inspector, p3p, schema validation, spellchecker, transformiix, typeaheadfind, javascript debugger, xforms, etc. gfx contains c interfaces and code for platform independent drawing and imaging. it can be used to draw rectangles, lines, images, etc. essentially, it is a a set of interfaces for a platform-independent device (drawing) context. it does not handle widgets or specific drawing routines; it just provides the primitive operations for drawing. in...

Visualizing an audio spectrum - Archive of obsolete content
the function handling the loadedmetadata event stores the metadata of the audio element in global variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas. note: you can use the audionode called analysernode to perform real-time fft analysis on an audio stream, rather than the code shown below. ...

Fast Graphics Performance With HTML - Archive of obsolete content
instead of <div><div style="position:fixed">simple</div>lots of text...</div> make the content of scrollable sub frames opaque e.g. use <div style="overflow:scroll><div style="background:white"><p>this is some text</p><p>and some more</p></div></div> instead of <div style="overflow:scroll><p>this is some text</p><p>and some more</p></div> animating 'transform' and 'opacity' properties can be done with the compositor which makes them efficient to animate ...

JavaScript Client API - Archive of obsolete content
lient api is defined in files in the services/sync/ directory of mozilla-central or similar repository. terminology syncengine the main sync client object. it's what starts all the magic. engine governs the synchronizing of a specific set of information. e.g. there is an engine for bookmarks, tabs, history, preferences, etc. record piece of information that gets synchronized. records are transformed to wbo's, uploaded to a collection in a sync server and eventually downloaded by other sync clients. tracker entity that tracks changes to data. each engine has a corresponding tracker which listens for changes to data or events it is interested in. when something of interest occurs, it interacts with the engine to let it know something has happened and it might want to take action store en...

Priority Content - Archive of obsolete content
at has not been migrated at all appears there. book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb richardson in progress: transforming xml: netscape and xslt 1.0 original: transforming xml: netscape and xslt 1.0 wiki location: transforming xml with xslt migrators: serge k. keller in progress: rapid application development with mozilla original: author's page and planned host, ben's temporary host wiki location: toc and links page still under construction. migrators: nigel mcfarlane and ben karel shorter works mo...

Frequently Asked Questions - Archive of obsolete content
mentation compare to adobe's? mozilla's native implementation is less complete than adobe svg viewer's in general. there are major features such as filters and smil based animation that have still to be implemented in mozilla. however, mozilla's implementation already supports some things that adobe's lacks, particularly parts of the xml and svg doms. for example we support svg exceptions and svgtransform objects. how do you install adobe's svg viewer in mozilla? the svg project is about mozilla's native implementation of svg, not adobe/corel/whoever's plug-in. however, we might as well answer this question to save you searching for this information elsewhere. see these install instructions on mozdev.org. it's also useful to know that you can check whether mozilla has recognised your plug-ins by...

Space Manager Detailed Design - Archive of obsolete content
last band rect to the right edge of the band). algorithm 2: addrectregion clients call into this method to notify the space manager that a new frame is occupying some space. first, try to get frame info for the frame. if it is found, return an error since the frame is already associated with a region in the spacemanager. next, create a rect from the occupied space passed in by the caller,transforming it first to world-coordinates by adding the space manager's offset to the occupied space rect passed in. create a new frame info instance for the frame and rect, returning an error if allocation fails. check if the occupied space rect (adjusted) is empty, if so, return an error (note: this could be done earlier, or prevented by the caller) allocate a new bandrect instance with the rect and ...

Anonymous Content - Archive of obsolete content
ly creating new insertion points, or for removing insertion points? perhaps on elementxbl?] event flow and targeting flow and targeting across scopes dom events can fire on anonymous targets just as they can on explicit targets. as long as the event flows within the same scope, it is no different from the behavior outlined in the dom level 2 events specification. events flow through the final transformed content model after all elements have been repositioned through the usage of children tags. whenever events flow from an anonymous element in a bound element's scope to the bound element itself, one of two actions occurs. either the event is retargeted so that the bound element becomes the target, or the event is stopped and flow proceeds to the next phase. whenever an event is retargeted, the...

Example Sticky Notes - Archive of obsolete content
style the bound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element. the position of the original content is indicated by <children/> tag. --> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommended. this way you protect yourselve from < and...

Menus - Archive of obsolete content
bar tag. usually, the main window for an application will have a menubar across the top of the window. on the macintosh, the menubar is placed along the top of the screen. you do not have to do anything to handle this difference. the first menubar encountered when parsing the xul window will be used as the main menu bar for the window, and on the macintosh, will be hidden from the main window and transformed into a native menu bar at the top of the screen. for this reason, a window should only have one menu bar, however, each window can have a different menu bar. the menubar should have menu elements within it, one for each menu. the example below shows a menubar with three menus. <menubar id="sample-menubar"> <menu id="file-menu" label="file"> ... </menu> <menu id="tools-menu" label="t...

XUL Structure - Archive of obsolete content
usnext » we'll begin by looking at how the xul is handled in mozilla. how xul is handled in mozilla, xul is handled in much the same way as html or other types of content are handled. when you type the url of an html page into the browser's address field, the browser locates the web site and downloads the content. the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree. the tree is then converted into a set of objects that can be displayed on the screen. style sheets (css), images, and other technologies are used to control the presentation. xul functions in much the same way. in fact, in mozilla, all document types, whether they are html or xul, or even svg, are all handled by the same underlying code. this means that the same css pro...

XUL Questions and Answers - Archive of obsolete content
ver. by getting data (e.g. json string) from the server, parsing it on client, and building the menupopup using dom methods (such as document.createelementns). by getting data as xml from the server. (server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript? to set the background color you need to set the property for the cell/row and not for the item. an example of this is: var tree = document.getelementbyid('treeid'); selectedtreeitem = tree.view.getitematindex(tree.currentindex); selectedtreeitem.firstchild.setattribute('style', 'background: #ff0000'); what is an ex...

nsIContentPolicy - Archive of obsolete content
in. type_dtd 13 indicates a dtd loaded by an xml document. type_font 14 indicates a font loaded via @font-face rule. type_media 15 indicates a video or audio load. type_websocket 16 indicates a websocket load. type_csp_report 17 indicates a content security policy report. type_xslt 18 indicates a style sheet transformation. type_beacon 19 indicates a beacon post. type_fetch 20 indicates a load initiated by the globalfetch.fetch() method, which is available as a global in both window and worker contexts. type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>. type_web_manifest 22 indicates a request to load a web ...

Archived Mozilla and build documentation - Archive of obsolete content
web surfer has bookmarks, of course, and power surfers usually have hundreds stuffed into folders within folders. in addition to being handy pointers to useful resources, bookmarks in mozilla can be used to make the address bar itself a power tool. searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks. building transformiix standalone calicalendarview an object implementing calicalendarview is generally intended to serve as a way of manipulating a set of dom nodes corresonding to a visual representation of calievent and calitodo objects. because of this close association between methods and attributes on the one hand, and content on the other, calicalendarview implement...

Proposal - Archive of obsolete content
add latitude and longitude info to an item. spec exists itunes rss itunes extension modules used for ipradio/podcasting. spec exists media rss rss extension module used for iptv and ipradio/podcasting. spec exists newsgator feed extension created to make rss feeds work better with newsgator software. lets you specify an image, up to 277x78 pixels. and lets you specifies a specific rendering transform (xslt) to be used when rendering the feed in newsgator for outlook. the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically. spec exists rss disposition hinting a proposal to make it so iptv and ipradio/podcasting works better with rss. uses an http "content-type" parameter to hint at an rss feeds disposition type -- to hi...

Encryption and Decryption - Archive of obsolete content
a cryptographic algorithm, also called a cipher, is a mathematical function used for encryption or decryption. in most cases, two related functions are employed, one for encryption and the other for decryption. with most modern cryptography, the ability to keep encrypted information secret is based not on the cryptographic algorithm, which is widely known, but on a number called a key that must be used with the algorithm to produce an encrypted result or to decrypt previously encrypted information. decryption with the correct key is simple. ...

Threats - Archive of obsolete content
ations offline or steal their data by flooding websites and networks with spurious traffic. original document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc. link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original document information author(s): joint task force transformation initiative title: national institute of standards and technology (nist) special publication 800-30 revision 1, guide for conducting risk assessments last updated date: september 2012 copyright information: this document is not subject to copyright. original document information author(s): karen scarfone, wayne jansen, and miles tracy title: national institute of standards and tech...

Browser Detection and Cross Browser Support - Archive of obsolete content
rowsers. this can be accomplished through server side browser detection either as part of a scripted solution or as part of the web server's native ability to serve different content to different user agents. this approach does not necessarily require you to author separate pages for downlevel and modern browsers. a common solution is to author content in a neutral format such as xml and use xslt transformations to generate the necessary html for each class of browser. whether a particular browser should be provided with downlevel content depends to an extent on what features of css or javascript are being used in the advanced content. netscape navigator 4 and internet explorer 4 should both be considered downlevel browsers for most pages due to their limited support for css and the more recent do...

::-ms-check - Archive of obsolete content
p-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, 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-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the butt...

::-ms-clear - Archive of obsolete content
p-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, 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=te...

::-ms-fill - Archive of obsolete content
mation-name background-clip, background-color, background-image, background-origin, background-repeat, and background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill { background-color: orange; } result a progress bar using this style might look something like this: ...

::-ms-ticks-after - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...

::-ms-ticks-before - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...

::-ms-track - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
ify life for us developers? full circle if you were part of the early web's big bang in the mid-1990s you might recall that being able to use javascript both client-side and server-side was core to netscape's original vision for web apps. netscape livewire was the first server-side javascript engine. now more than 10 years later, with netscape's technology group having been transformed into the mozilla foundation, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web developers reinvigorated by the fact that today's cpus can process javascript more than 10x faster than the cpus of the mid-90's ever could. and just like before, it's the mozilla team that's at the core of this latest evolution of the web. in fact, the next javascript ...

Windows Media in Netscape - Archive of obsolete content
are similar // caveat emptor: look out for the case of methods and properties -- ie uses // capital letters where gecko uses lowercase other popular uses of microsoft's msxml objects are for in-memory manipulation of xml documents via xslt, perhaps to construct dynamic data for the windows media player. netscape gecko based browsers such as netscape 7.1 provide comparable implementations of xslt transformations in memory via javascript. use of html behaviors in conjunction with windows media player the only ie emulation that netscape 7.1 does in terms of html usage is with respect to the object element usage with clsid and script for="" event="" syntax. dhtml behaviors can be used in internet explorer to perform activex control detection. for example, the following uses dhtml behaviors to associat...

Index - Game development
n you are getting started working with 3d. 23 glsl shaders beginner, glsl, opengl, shader, texture shader, three.js, vertex shader shaders use glsl (opengl shading language), a special opengl shading language with syntax similar to c. glsl is executed directly by the graphics pipeline. there are two types of shaders: vertex shaders and fragment (pixel) shaders. vertex shaders transform shape positions into 3d drawing coordinates. fragment shaders compute the renderings of a shape's colors and other attributes. 25 async scripts for asm.js games, javascript, asm.js, async every medium or large game should compile asm.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process. in gecko, async compilation ...

3D games on the Web - Game development
t — like shaders, collision detection, or the latest hot topic: virtual reality on the web. shaders it's worth mentioning shaders, which are a separate story on their own. shaders use glsl, a special opengl shading language, with syntax similar to c, that is executed directly by the graphics pipeline. they can be split into vertex shaders and fragment shaders (or pixel shaders) — the former transforms shape positions to real 3d drawing coordinates, while the latter computes rendering colors and other attributes. you should definitely check out glsl shaders article to learn more about them. collision detection it's hard to imagine a game without collision detection — we always need to work out when something is hitting something else. we have information available for you to learn from: ...

Implementing controls using the Gamepad API - Game development
the theme for the competition was "change", so they submitted a game where you have to feed the hungry fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) a countdown changes the type of food the fridge wants to eat every few seconds, so you have to be careful and act quickly. the second, hidden "change" implementation is the ability to transform the static fridge into a full-blown moving, shooting and eating machine. when you connect the controller, the game significantly changes (hungry fridge turns into the super turbo hungry fridge) and you're able to control the armored fridge using the gamepad api. you have to shoot down the food, but once again you also have to find the type of food the fridge wants to eat at each point, or else yo...

Tiles and tilemaps overview - Game development
lling games, we need a translation between world coordinates (the position where sprites or other elements are located in the level or game world) and screen coordinates (the actual position where those elements are rendered on the screen). the world coordinates can be expressed in terms of tile position (row and column of the map) or in pixels across the map, depending on the game. to be able to transform world coordinates into screen coordinates, we need the coordinates of the camera, since they determine which section of the world is being displayed. here are examples showing how to translate from world coordinates to screen coordinates and back again: // these functions assume that the camera points to the top left corner function worldtoscreen(x, y) { return {x: x - camera.x, y: y - camer...

Gecko FAQ - Gecko Redirect 1
on the screen. it paints the browser's content area, which is the blank area inside the browser window's chrome. formally, a layout engine defines the placement policy for a document and places content on a page. gecko's core is a very fast layout engine. gecko also offers the ability to parse various document types (html, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for embedded javascript and plugins. gecko is so fast and so powerful that it's being used to create the user interface of some applications ("chrome") as well. in other words, gecko will not only be displaying the document's content, but it will also be painting the scrollbars, toolbars, and menus on the screen as well. for more information see xul. how is a layout engine li...

Cryptographic hash function - MDN Web Docs Glossary: Definitions of Web-related terms
cryptographic hash functions are used for authentication, digital signatures, and message authentication codes. ...

Decryption - MDN Web Docs Glossary: Definitions of Web-related terms
like encryption, decryption in modern ciphers is performed using a specific algorithm and a secret, called the key. since the algorithm is often public, the key must stay secret if the encryption stays secure. decryption is the reverse of encryption and if the key stays secret, decryption without knowing the specific secret, decryption is mathematically hard to perform. ...

Encryption - MDN Web Docs Glossary: Definitions of Web-related terms
encryption in modern ciphers is performed using a specific algorithm and a secret, called the key. since the algorithm is often public, the key must stay secret if the encryption stays secure. ...

IDL - MDN Web Docs Glossary: Definitions of Web-related terms
when the expected value should be an integer. for example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setattribute("maxlength", "42") on that element. the idl attribute is also known as a javascript property. these are the attributes you can read or set using javascript properties like element.foo. the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. in other words, the idl attributes, in essence, reflect the content attributes. most of the time, idl attributes will return their values as they are really used. for example, the default type for <input> elements is "text", so if you set input.type="foobar...

JSON - MDN Web Docs Glossary: Definitions of Web-related terms
s of values), and objects (string-value mappings) made up of these values (or of other arrays and objects). json does not natively represent more complex data types like functions, regular expressions, dates, and so on. (date objects by default serialize to a string containing the date in iso format, so the information isn't completely lost.) if you need json to represent additional data types, transform values as they are serialized or before they are deserialized. much like xml, json has the ability to store hierarchical data unlike the more traditional csv format. many tools provide translation between these formats such as this online json to csv converter or this alternative json to csv converter. learn more general knowledge json on wikipedia technical reference json on mdn ...

Parser - MDN Web Docs Glossary: Definitions of Web-related terms
a parser is the module of a compiler or interpreter that parses a source code file. more generally, it's a piece of software that parses text and transforms its content to another representation. learn more general knowledge parser on wikipedia ...

Public-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
one key (the private key) is kept secret while the other is made public. when used for digital signatures, the private key is used to sign and the public key to verify. this means that anyone can verify a signature, but only the owner of the corresponding private key could have generated it. when used for encryption, the public key is used to encrypt and the private key is used to decrypt. ...

Quaternion - MDN Web Docs Glossary: Definitions of Web-related terms
more involved than this, the unit quaternions (or rotational quaternions) used to represent rotation while using webgl or webxr, for example, are represented using the same syntax as a 3d point. as such, the type dompoint (or dompointreadonly) is used to store quaternions. learn more general knowledge quaternions and spatial rotation on wikipedia quaternion on wikipedia related xrrigidtransform.orientation in the webxr device api reference ...

Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
symmetric-key cryptography is a term used for cryptographic algorithms that use the same key for encryption and for decryption. the key is usually called a "symmetric key" or a "secret key". this is usually contrasted with public-key cryptography, in which keys are generated in pairs and the transformation made by one key can only be reversed using the other key. symmetric-key algorithms should be secure when used properly and are highly efficient, so they can be used to encrypt large amounts of data without having a negative effect on performance. most symmetric-key algorithms currently in use are block ciphers: this means that they encrypt data one block at a time. the size of each block is fixed and determined by the algorithm: for example aes uses 16-byte blocks. block ciphers are al...

UTF-8 - MDN Web Docs Glossary: Definitions of Web-related terms
each character is represented by one to four bytes. utf-8 is backward-compatible with ascii and can represent any standard unicode character. the first 128 utf-8 characters precisely match the first 128 ascii characters (numbered 0-127), meaning that existing ascii text is already valid utf-8. all other characters use two to four bytes. each byte has some bits reserved for encoding purposes. since non-ascii characters require more than one byte for storage, they run the risk of being corrupted if the bytes are separated and not recombined. ...

XSLT - MDN Web Docs Glossary: Definitions of Web-related terms
xslt has its own processor that accepts xml input, or any format convertible to an xquery and xpath data model. the xslt processor produces a new document based on the xml document and an xslt stylesheet, making no changes to the original files in the process. ...

JPEG - MDN Web Docs Glossary: Definitions of Web-related terms
jpeg (joint photographic experts group) is a commonly used method of lossy compression for digital images. jpeg compression is composed of three compression techniques applied in successive layers, including chrominance subsampling, discrete cosine transformation and quantization, and run-length delta & huffman encoding. chroma subsampling involves implementing less resolution for chroma information than for luma information, taking advantage of the human visual system's lower acuity for color differences than for luminance. a discrete cosine transform expresses a finite sequence of data points in terms of a sum of cosine functions oscillating at different frequencies. learn more general knowledge jpeg on wikipedia ...

Positioning - Learn web development
this means that you can create useful ui items that are fixed in place, like persisting navigation menus that are always visible no matter how much the page scrolls. let's put together a simple example to show what we mean. first of all, delete the existing p:nth-of-type(1) and .positioned rules from your css. now, update the body rule to remove the position:...

CSS FAQ - Learn web development
when implementing experimental features, instead implementing those features only on nightly browser versions or similar. if you need to use prefixes in your work, you are advised to write your code in a way that uses the prefixed versions first, but then includes a non-prefixed standard version afterwards so it can automatically override the prefixed versions where supported. for example: -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); note: for more information on dealing with prefixed properties, see handling common html and css problems — handling css prefixes from our cross-browser testing module. note: see the mozilla css extensions page for more information on the mozilla-prefixed css properties. how does z-index relate to positioning? t...

How to build custom form controls - Learn web development
a class to handle when the list of options is hidden. this is necessary in order to manage the differences between the active state and the open state that do not exactly match. .select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width. beautification so now that we have the basic functionality in place, the fun can start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see what you can come up with. .select { /* the computations are made assumin...

Choosing the right approach - Learn web development
if you need to run your animation at a slower framerate, you'll need to use setinterval() or recursive settimeout(). browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for andro...

Drawing graphics - Learn web development
d when you want to save settings you've updated on the canvas before continuing, which is useful for more advanced applications. draw the graphics you are animating. restore the settings you saved in step 2, using restore() call requestanimationframe() to schedule drawing of the next frame of the animation. note: we won't cover save() and restore() here, but they are explained nicely in our transformations tutorial (and the ones that follow it). a simple character animation now let's create our own simple animation — we'll get a character from a certain rather awesome retro computer game to walk across the screen. make another fresh copy of our canvas template (1_canvas_template.html) and open it in your code editor. make a copy of walk-right.png in the same directory. at the...

Framework main features - Learn web development
unlike html, these languages know how to read data variables, and this data can be used to streamline the process of writing your ui. angular apps often make heavy use of typescript. typescript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla javascript. dsls can't be read by the browser directly; they must be transformed into javascript or html first. transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. while it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from...

Componentizing our React app - Learn web development
as props.tasks. you can console.log() it to check, if you’d like. note: all_caps constant names have no special meaning in javascript; they’re a convention that tells other developers "this data will never change after being defined here”. rendering with iteration to render our array of objects, we have to turn each one into a <todo /> component. javascript gives us an array method for transforming data into something else: array.prototype.map(). above the return statement of app(), make a new const called tasklist and use map() to transform it. let's start by turning our tasks array into something simple: the name of each task: const tasklist = props.tasks.map(task => task.name); let’s try replacing all the children of the <ul> with tasklist: <ul role="list" classname="todo-li...

TypeScript support in Svelte - Learn web development
typescript telling us to define the type of the update() function's updatedtodo variable. this can be a little tricky because updatedtodo contains only the attributes of the todo that have been updated. that means it's not a complete todo — it only has a subset of a todo's properties. for these kinds of cases, typescript provides several utility types to make it easier to apply these common transformations. what we need right now is the partial<t> utility, which allows us to represent all subsets of a given type. the partial utility returns a new type based on the type t, where every property of t is optional. we'll use it in the update() function — update yours like so: function update(updatedtodo: partial<todotype>) { todo = { ...todo, ...updatedtodo } // applies modifications ...

Implementing feature detection - Learn web development
te) — this is a terrible practice that should be discouraged at all costs. see using bad browser sniffing code for more details. writing your own feature detection tests in this section, we'll look at implementing your own feature detection tests, in both css and javascript. css you can write tests for css features by testing for the existence of element.style.property (e.g. paragraph.style.transform) in javascript. a classic example might be to test for flexbox support in a browser; for browsers that support the newest flexbox spec, we could use a flexible and robust flex layout. for browsers that don't, we could use a floated layout that works ok, although it is slightly more brittle and hacky, and not as cool-looking. let's implement something that demonstrates this, although we'll keep ...

Understanding client-side web development tools - Learn web development
we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more. 4. introducing a complete toolchain in the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. we'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on netlify. in this article we'll introduce the case study, set up our development environment, and set up our code transformation tools. 5. deploying our app in the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. we push the code to github, deplo...

Learn web development
. web performance — making websites fast and responsive web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a user's bandwidth, screen size, network, or device capabilities. tools and testing this topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks. server-side website programming even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work. this topic provides a general introduction to how the server-side works and detailed tutorials showing how to build up a server-side a...

Frequently Asked Questions for Lightweight themes
linux, windows, and android platforms. what can lightweight themes do? lightweight themes change the header area of your browser, including the tab text color and the background tab colors. you can easily preview a design and install it without needing to restart. installing lightweight themes how do i add lightweight themes to my firefox? in just a few seconds, you can install a theme and transform the look of your firefox web browser. preview any theme by clicking "tap to preview"; the design appears in your browser header so you can "try it on." when you're ready, just click the blue install theme button. once a theme is installed, it is saved in the add-ons manager, where you can enable or disable them as you wish. simply go to the tools > add-ons menu and click on the appearance tab. a...

Eclipse CDT
e assistance note: indexing, by its very nature, is specific to a given compiler configuration. be aware that when eclipse gives results for any of the actions that follow, it will not include results for sections of the code that are ifdef'ed out by the configuration used to create your object directory. for example, if you are using a mac and you search for callers of nsdisplaylistbuilder::isintransform, the results will not include the caller in nsobjectframe.cpp because that caller is wrapped in "#ifndef xp_macosx". just something to keep in mind. ;-) to jump to the definition of a symbol (or the declaration of a symbol if already at the definition), hover over the symbol, hold down the ctrl/cmd key, move the mouse slightly to linkify the symbol, then click on it. (having to move the mouse sl...

Localization content best practices
the letter to better match your locale. this key shortcut definition matches the electron key shortcut definition. create localizable ui css issues some css text/font properties may cause problems with text legibility when applied to certain language texts. avoid using italic for cjkt. this acronym stands for: chinese (simplified and traditional), japanese, korean, and taiwanese. the text-transform property is not reliable for some locales; for example, text-transform: uppercase won't work properly with languages such as irish/gaelic. for example, app size in english may be capitalized via text-transform: uppercase to app size but in gaelic this would change meud na h-aplacaid to meud na h-aplacaid which violates the locales orthographic rules, as it ought to be meud na haplacaid. in genera...

Writing localizable code
". an example of a well used composite string is firefox's setting for visited pages: the translator can (implicitly) position the text field as he sees fit. don't use preprocessor macros the use of #if #else #endif or #expand is strongly discouraged. there are few exceptions to this rule, but in general, the localized file should comply with standards and should not require build tools to be transformed. if you want to add build processing to localized files, be sure to request feedback from l10n@. in most cases, you can just as well put the processing into the content code and reference different key-value pairs in l10n. use a good source directory structure be sure to put the localizable files in the right place. the addition of new top-level directories is a compromise between module ow...

Fonts for Mozilla 2.0's MathML engine
t glyphs do not in general have unicode assignments, and so font-specific support is required for some characters. mozilla has general support for the common delimiters and arrows that have the necessary unicode assignments. for other characters, mozilla has font-specific support. in general, if the necessary glyphs are not available on the system then mozilla tries to stretch symbols using scale transforms, but that may result in a less pleasant rendering. to see mathml as intended, you need sufficient font support, which may mean installing some fonts. note that some web sites may provide the required mathematical fonts as web fonts. in that case, you will see the correct rendering on these pages if you use gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) or greater. recommended font...

Mozilla Web Developer FAQ
ensures the widest browser and search engine support. there is a fad of serving text/html to ie but serving the same markup with no added value as application/xhtml+xml to gecko. this is usually done without a mechanism that would ensure the well-formedness of the served documents. mechanisms that ensure well-formed output include serializing from a document tree object model (eg. dom) and xslt transformations that do not disable output escaping. when xhtml output has been retrofitted to a content management system that was not designed for xml from the ground up, the system usually ends up discriminating gecko users by serving tag soup labeled as xml to gecko (leading to a parse error) and serving the same soup labeled as text/html to ie (not leading to a parse error). how is the treatment of a...

BloatView
total total 1754408 432556 179828 404184 2770976 nsstr 20 6261600 3781900 1120920 1791340 12955760 222760 48760 13280 76160 360960 nshashkey 8 610568 1842400 2457872 1134592 6045432 32000 536 568 1216 34320 nstexttransformer 548 8220 469088 1414936 1532756 3425000 0 0 0 0 0 nsstylecontextdata 736 259808 325312 489440 338560 1413120 141312 220800 -11040 94944 446016 nslinelayout 1100 2200 225500 402600 562100 1192400 0 0 0 0 0 nslocalfile 424 558832 199...

Profiling with the Firefox Profiler
s" section of cleopatra (you may need to a sub-range of samples to make individual composites large enough to be clicked). this will activate the "layertree" tab: in this screenshot, composite #143 has been selected. the layer tree structure can be seen in the left panel. it contains, for each layer, the type of the layer, and various metrics about the layer, such as the visible region and any transforms. in the right panel, a visualization of the layer tree (based entirely on the aforementioned metrics) is shown. hovering over a layer in the left panel highlights the layer in the right panel. this is useful for identifying what content each layer corresponds to. here, i'm hovering over the last layer in the layer tree (a paintedlayercomposite), and a strip at the top of the right panel is highl...

Scroll-linked effects
le updating a positioning property with the aim of producing a parallax scrolling effect. this article discusses scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques. scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases. these effects work well in browsers where the scrolling is done synchronously on the browser's main thread. however, most browsers now support some sort of asynchronous scrolling in order to provide a consistent 60 frames per second experience to the user. in the asynchronous scrolling model, the visual scroll posit...

Localization Use Cases
it's easy to imagine how developers might forget to pluralize some strings that in other languages might require pluralization (or other grammatical features that the framework supports). solution l20n isolates each language so that grammatical requirements of one don't affect others. this takes the responsibility away from the developers and puts it in the hands of localizers, at the same time transforming it from a burden into an opportunity. in l20n, the english string could be as simple as: <availablesize "{{ $size }} {{ $unit }} available"> on the other hand, the italian translation would make use of proper pluralization rules: <plural($n) { $n == 1 ? "one" : "other" }> <availablesize[plural($size)] { one: "{{ $size }} {{ $unit }} disponibile", other: "{{ $size }} {{ $...

Installing Pork
if you don't do this, mcpp will get the wrong set of automatic definitions and you'll end up with an unpleasant hybrid x86-64/i686 build system. $ export path=/builds/gcc-3.4.6-installed/bin:$path $ export cppflags=-m32 $ cc=gcc34 cxx=g++34 cppflags=-m32 ldflags=-m32 ../src/configure --enable-replace-cpp --prefix=/builds/gcc-3.4.6-installed --target=i686-pc-linux $ make $ make install program_transform_name= ...

Rhino overview
most people who have used javascript before have done so by adding scripts to their html web pages. however, rhino is an implementation of the core language only and doesn't contain objects or methods for manipulating html documents. rhino contains all the features of javascript 1.7 allows direct scripting of java a javascript shell for executing javascript scripts a javascript compiler to transform javascript source files into java class files a javascript debugger for scripts executed with rhino language the javascript language itself is standardized by standard ecma-262 ecmascript: a general purpose, cross-platform programming language. rhino 1.3 and greater conform to edition 3 of the standard. rhino 1.6 and greater implement ecma-357 ecmascript for xml (e4x). see the specification ...

JIT Optimization Strategies
function. in these cases, an access of the form arguments[i] can be directly translated into a direct reference to the corresponding argument value in the inlined call. consider the following: function foo(arg) { return bar(arg, 3); } function bar() { return arguments[0] + arguments[1]; } in the above case, if foo is compiled with ion, and the call to bar is inlined, then this optimization can transform the entire procedure to the following pseudo-code: compiled foo(arg): // inlined call to bar(arg, 3) { return arg + 3; // } getelem_inlinecache this is the worst-case scenario for an element access optimization. this strategy is used when all the others fail. the engine simply inserts an inline cache at the property write site. inline caches start off as a jump to a separate piec...

JS_THREADSAFE
to periodically call js_yieldrequest from an operation callback. sharing data among threads "data can be marshaled across the process boundary through a process known as smuggling." --mr. bunny's guide to activex even in js_threadsafe builds, threads cannot safely share objects or strings. instead, data must be copied when it is sent from one thread to another. use js_writestructuredclone to transform data into a flat array of bytes that can be safely written to disk, sent to another process or even another machine, or just passed to another thread. then use js_readstructuredclone on the other side to turn the serialized data back into javascript objects, strings, and so on. sharing native functions and private data among threads in a js_threadsafe build, spidermonkey's internal data structu...

XPCOM Stream Guide
teract with the user. mozilla's use of streams is more complex. on the one hand, we don't interact with the user through streams. on the other hand, we use streams to access files within a zip archive, to store and provide data coming from websites, even to talk to other programs on the same computer through "pipes" (more on that later). we even have streams that take input from other streams and transform the data within them to something more useful. primitive streams there are streams for several different types of data storage. each of these implements nsiinputstream. primitive input streams type native class contract id interface how to bind to a data source generic nsstorageinputstream n/a nsiinputstream, nsiseekablestream storagestream.

Index
to create an instance, use: 1107 nsixsltprocessorobsolete use nsixsltprocessor instead. 1108 nsixulappinfo interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference in xulrunner applications nsixulappinfo obtains app-specific information from application.ini. 1109 nsixulbrowserwindow interfaces...

Introduction to XPCOM for the DOM
works. interface implementation let's take a closer look at how interfaces are implemented. we already know that an interface has to be implemented by a concrete c++ class. this class can implement multiple interfaces, directly or through inheritance (see the next section for a discussion of inheritance). we also saw that an interface defined in xpidl contains methods and attributes, which are transformed into c++ functions by the xpidl compiler. the class that implements the interface has to explicitly implement each method and implement the setter and the getter of each attribute defined on the interface. if the attribute is read-only, only a getter is necessary, of course. i have chosen to implement nsidomfabian in the nshtmldocument class, which is defined in nshtmldocument.h. there are thr...

imgIContainer
in gfxcontext acontext, in gfxgraphicsfilter afilter, [const] in gfxmatrix auserspacetoimagespace, [const] in gfxrect afill, [const] in nsintrect asubimage, [const] in nsintsize aviewportsize, in pruint32 aflags ); parameters acontext the thebes context to draw the image to. afilter the filter to be used if we're scaling the image. auserspacetoimagespace the transformation from user space (for example, appunits) to image space. afill the area in the context to draw pixels to. when aflags includes flag_clamp, the image will be extended to this area by clamping image sample coordinates. otherwise, the image will be automatically tiled as necessary. asubimage the area of the image, in pixels, that we are allowed to sample from. aviewportsize ...

nsIContentView
e(in float xscale, in float yscale); attributes attribute type description contentheight float read only. contentwidth float dimensions of scrolled content in chrome-document css pixels. read only. id nscontentviewid id that can be used in conjunction with nsidomwindowutils to change the actual document, instead of just how it is transformed; this is a 64-bit unsigned integer. read only. scrollx float horizontal scroll offset in chrome-document css pixels. when this view is active (that is it is being painted because it's in the visible region of the screen), this value is at first lined up with the content's scroll offset. note: when this view becomes inactive, the new content view will have scroll val...

nsIDirIndexListener
netwerk/streamconv/public/nsidirindexlistener.idlscriptable this interface is used to receive contents of directory index listings from a protocol. they can then be transformed into an output format (such as rdf, html and so on) inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void onindexavailable(in nsirequest arequest, in nsisupports actxt, in nsidirindex aindex); void oninformationavailable(in nsirequest arequest, in nsisupports actxt, in astring ainfo); methods onindexavailable() called for each directory entry. void onindexavailable( in nsirequest arequest, in nsisupports actxt, in nsidirindex aindex ); parameters arequest the request. actxt opaque parameter aindex new index to add. oninformat...

nsIFeedResult
bit when a feed triggers a fatal error during xml parsing. there may still be feed metadata and entries that were parsed before the error occurred. doc nsifeedcontainer the parsed feed or entry. null if a non-feed was processed. headers nsiproperties the http response headers that accompanied the feed. stylesheet nsiuri an xslt stylesheet available to transform the source of the feed. some feeds include this information in a processing instruction. it's generally intended for use by clients designed to work with specific feeds. uri nsiuri the address from which the feed was fetched. version astring the version of the feed; null if a non-feed is processed. this value will be one of the following: atom, rss2, rss09, rss091, r...

nsIProtocolHandler
the uri string in utf-8 encoding. depending on the protocol's implementation, unicode character sequences may or may not be %xx escaped. aorigincharset the character set of the document from which this uri string originated. this corresponds to the character set that should be used when communicating this uri to an origin server. if this is null, then utf-8 encoding is assumed and no character transformation is not performed. abaseuri if null, aspec must specify an absolute uri. otherwise, aspec may be resolved relative to abaseuri, depending on the protocol. if the protocol has no concept of relative uris, this parameter is ignored. return value the new uri object suitable for loading using the protocol. see also nsiproxiedprotocolhandler adding a new protocol to mozilla writing a fi...

nsIStandardURL
removed from the canonical form of the url. aspec url string. aorigincharset the charset from which this uri string originated. this corresponds to the charset that should be used when communicating this uri to an origin server, for example. if null, then provide abaseuri implements this interface, the origin charset of abaseuri will be assumed, otherwise defaulting to utf-8 (that is, no charset transformation from aspec). abaseuri if null, aspec must specify an absolute uri. otherwise, aspec will be resolved relative to abaseuri. see also nsiurl ...

XSLT 2.0
on of liveconnect (handled by java 1.6v12+ instead of mozilla-specific code) to connect with the java-based saxon-b library, and adds support for having xslt performed automatically when visiting a page with the appropriate xslt processing instruction (and which isn't processed by firefox's own xslt 1.0 processor). for developers saxon-ce a javascript api is provided for initiating an xslt 2.0 transform from a web page. error and diagnostics output from saxon-ce can be reviewed in the firefox developer console or in firebug. saxon-b the extension demonstrates how one can use liveconnect code to communicate with the saxon-b library, but one might find the javascript code module approach used inside the extension xquseme as a more reusable approach. the code does not currently work on the mac (...

Demo Addon
rts are shown, it's recommended that you download the add-on and have a look at its files. the basics the interesting parts covered in this article are in the content folder. the toolbar button and its functionality are defined in overlay.xul and overlay.js. we make use of fixiterator(). it is a handy library that keeps your code cleaner and simpler. it lets you iterate over any collection and transforms your collection elements in the given objects, to use fixiterator, you have to import it with cu.import("resource:///modules/iteratorutils.jsm");. demo 1 - iterate over all the accounts this demo is implemented in demo1.html in the content folder. it lists all your email accounts with their account type - either pop3 or imap - and the associated email addresses. let data = []; for each (let a...

Source map errors - Firefox Developer Tools
you can sometimes encounter problems working with source maps. this page explains the most common problems and how to fix them. note: if you're new to source maps, you can learn more about them in how to use a source map. general source map error reporting if you do see a problem, a message will appear in the webconsole. this message will show an error message, the resource url, and the source map url: here, the resource url tells us that bundle.js mentions a source map, and the source map url tells us where to find the source map data (in this case, relative to the resource). ...

Animation inspector example: CSS transitions - Firefox Developer Tools
g src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javas...

Animation inspector example: Web Animations API - Firefox Developer Tools
dow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var note...

How to - Firefox Developer Tools
ayoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...

Page Inspector - Firefox Developer Tools
k tour of the ui. you can split the rules view out into its own pane, separate from the other tabs on the css pane — this is called 3-pane mode. ...

Waterfall - Firefox Developer Tools
n any javascript. not all css property changes cause a reflow. changing properties that can alter an object's geometry and position, such as width, display, font-size, or top, will cause a reflow. however, changing properties that don't alter geometry or position, such as color or opacity, will not. not all css property changes cause a repaint. in particular, if you animate an element using the transform property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of the element is handled in composition. the animating css properties article shows how animating different css properties can give different performance outcomes, and how the waterfall can help signal that. blocking javascript by default, ...

Web Audio Editor - Firefox Developer Tools
notice: this tool has been deprecated and will soon be removed from firefox. for details, see deprecated tools. with the web audio api, developers create an audio context. within that context they then construct a number of audio nodes, including: nodes providing the audio source, such as an oscillator or a data buffer source nodes performing transformations such as delay and gain nodes representing the destination of the audio stream, such as the speakers each node has zero or more audioparam properties that configure its operation. for example, the gainnode has a single gain property, while the oscillatornode has frequency and detune properties. the developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream. the web audio editor examin...

AnalyserNode.fftSize - Web APIs
syntax var curvalue = analysernode.fftsize; analysernode.fftsize = newvalue; value an unsigned integer, representing the window size of the fft, given in number of samples. a higher value will result in more details in the frequency domain but fewer details in the time domain. must be a power of 2 between 252^5 and 2152^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768. defaults to 2048. ...

AnalyserNode.frequencyBinCount - Web APIs
tsize. this generally equates to the number of data values you will have to play with for the visualization. syntax var arraylength = analysernode.frequencybincount; value an unsigned integer, equal to the number of values that analysernode.getbytefrequencydata() and analysernode.getfloatfrequencydata() copy into the provided typedarray. for technical reasons related to how the fast fourier transform is defined, it is always half the value of analysernode.fftsize. therefore, it will be one of 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, and 16384. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. ...

AnalyserNode - Web APIs
l="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object. properties inherits properties from its parent, audionode. analysernode.fftsize is an unsigned long value representing the size of the fft (fast fourier transform) to be used to determine the frequency domain. analysernode.frequencybincount read only is an unsigned long value half that of the fft size. this generally equates to the number of data values you will have to play with for the visualization. analysernode.mindecibels is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsig...

Animation.commitStyles() - Web APIs
after that animation has been removed. it will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute. syntax animation.commitstyles(); parameters none. return value none. examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification. working draft ...

Animation.onremove - Web APIs
andler = animation.onremove; animation.onremove = removehandler; value a function to be called to handle the remove event, or null if no remove event handler is set. examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves. the event handler sets up an an...

Animation.persist() - Web APIs
otherwise be removed due to the browser's automatically removing filling animations behavior. syntax animation.persist(); parameters none. return value none. examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves. the event handler sets up an an...

Animation.play() - Web APIs
ne. return value undefined example in the growing/shrinking alice game example, clicking or tapping the cake causes alice's growing animation (alicechange) to play forward, causing her to get bigger, as well as triggering the cake's animation. two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately. nommingcake.pause(); // this function will play when ever a user clicks or taps var growalice = function() { // play alice's animation. alicechange.play(); // pl...

Animation.replaceState - Web APIs
nimations behavior. persisted: the animation has been explicitly persisted by invoking animation.persist() on it. removed: the animation has been explicitly removed. examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves. the event handler sets up an an...

Blob.stream() - Web APIs
blestreamdefaultreader interface's read() method. call the returned stream's pipeto() method to pipe the blob's data to a writable stream. call the returned stream's tee() method to tee the readable stream. this returns an array containing two new readablestream objects, each of which returns the contents of the blob. call the returned stream's pipethrough() method to pipe the stream through a transformstream or any other readable and writable pair. specifications specification status comment file apithe definition of 'blob.stream()' in that specification. working draft ...

CSS.supports() - Web APIs
to check. the second syntax takes one parameter matching the condition of @supports: supportcondition a domstring containing the condition to check. return value true if the browser supports the rule, otherwise false. examples result = css.supports("text-decoration-style", "blink"); result = css.supports("display: flex"); result = css.supports("(--foo: red)"); result = css.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`); // result is true or false specification specification status comment css conditional rules module level 3the definition of 'css: supports()' in that specification. candidate recommendation initial definition. ...

CSSStyleValue - Web APIs
the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api. an instance of this class may be used anywhere a string is expected. interfaces based on cssstylevalue below is a list of interfaces based on the cssstylevalue interface. cssimagevalue csskeywordvalue cssnumericvalue csspositionvalue csstransformvalue cssunparsedvalue methods cssstylevalue.parse() sets a specific css property to the specified values and returns the first value as a cssstylevalue object. cssstylevalue.parseall() sets all occurences of a specific css property to the specified valueand returns an array of cssstylevalue objects, each containing one of the supplied values. specifications specification status c...

Determining the dimensions of elements - Web APIs
ght properties. how much room does it use up? if you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the htmlelement.offsetwidth and htmlelement.offsetheight properties. most of the time these are the same as width and height of element.getboundingclientrect(), when there aren't any transforms applied to the element. in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height. as an example, if the element has width: 100px; and transform: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100. what's the size of the displaye...

CSS Object Model (CSSOM) - Web APIs
lement, range, mouseevent, and svgelement. css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era). managing screen orientation spe...

CSS Typed Object Model API - Web APIs
true if all the values are the exact same type and value, in the same order. otherwise, false cssnumericvalue.to - converts value into another one with the specified unit. cssnumericvalue.tosum cssnumericvalue.type cssnumericvalue.parse - returns a number parsed from a css string csspositionvalue represents values for properties that take a position, for example object-position. csstransformvalue an interface representing a list of transform list values. they "contain" one or more csstransformcomponents, which represent individual transform function values. cssunparsedvalue represents property values that reference custom properties. it consists of a list of string fragments and variable references. specifications specification status comment css typ...

CanvasPattern - Web APIs
the canvaspattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the canvasrenderingcontext2d.createpattern() method. it can be used as a fillstyle or strokestyle. properties as an opaque object, this has no exposed property. methods there are no inherited method. canvaspattern.settransform() applies an svgmatrix or dommatrix representing a linear transform to the pattern. specifications specification status comment html living standardthe definition of 'canvaspattern' in that specification. living standard added settransform() method in v5. ...

CanvasRenderingContext2D.drawWindow() - Web APIs
other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background. with this method, it is possible to fill a hidden iframe with arbitrary content (e.g., css-styled html text, or svg) and draw it into a canvas. it will be scaled, rotated and so on according to the current transformation. ted mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference. specifications not part of any current specification or draft. this is a non-standard and internal only api. ...

CanvasRenderingContext2D.getImageData() - Web APIs
if the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned imagedata object. note: image data can be painted onto a canvas using the putimagedata() method. ...

CanvasRenderingContext2D.isPointInPath() - Web APIs
the canvasrenderingcontext2d.ispointinpath() method of the canvas 2d api reports whether or not the specified point is contained in the current path. syntax ctx.ispointinpath(x, y [, fillrule]); ctx.ispointinpath(path, x, y [, fillrule]); parameters x the x-axis coordinate of the point to check, unaffected by the current transformation of the context. y the y-axis coordinate of the point to check, unaffected by the current transformation of the context. fillrule the algorithm by which to determine if a point is inside or outside the path. possible values: "nonzero": the non-zero winding rule. default rule. "evenodd": the even-odd winding rule. path a path2d path to check against. if unspecified, the current path is used. return value boolean a boolean, which is true ...

CanvasRenderingContext2D.putImageData() - Web APIs
note: image data can be retrieved from a canvas using the getimagedata() method. you can find more information about putimagedata() and general manipulation of canvas contents in the article pixel manipulation with canvas. ...

CanvasRenderingContext2D.save() - Web APIs
the current clipping region. the current dash list. ...

CanvasRenderingContext2D.shadowBlur - Web APIs
is set to a non-transparent value. one of the shadowblur, shadowoffsetx, or shadowoffsety properties must be non-zero, as well. syntax ctx.shadowblur = level; level a non-negative float specifying the level of shadow blur, where 0 represents no blur and larger numbers represent increasingly more blur. this value doesn't correspond to a number of pixels, and is not affected by the current transformation matrix. the default value is 0. negative, infinity, and nan values are ignored. examples adding a shadow to a shape this example adds a blurred shadow to a rectangle. the shadowcolor property sets its color, and shadowblur sets its level of bluriness. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ...

Basic animations - Web APIs
running on. basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. the easiest way to do this is using the clearrect() method. save the canvas state if you're changing any setting (such as styles, transformations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state. draw animated shapes the step where you do the actual frame rendering. restore the canvas state if you've saved the state, restore it before drawing a new frame. controlling an animation shapes are drawn to the canvas by using the...

Drawing shapes with canvas - Web APIs
; // copy from another path2d object new path2d(d); // path from svg path data all path methods like moveto, rect, arc or quadraticcurveto, etc., which we got to know above, are available on path2d objects. the path2d api also adds a way to combine paths using the addpath method. this can be useful when you want to build objects from several components, for example. path2d.addpath(path [, transform]) adds a path to the current path with an optional transformation matrix. path2d example in this example, we are creating a rectangle and a circle. both are stored as a path2d object, so that they are available for later usage. with the new path2d api, several methods got updated to optionally accept a path2d object to use instead of the current path. here, stroke and fill are used with a pat...

Canvas tutorial - Web APIs
ersions of all major browsers. the default size of the canvas is 300 pixels × 150 pixels (width × height). ...

console - Web APIs
th the %c syntax are as follows (at least, in firefox — they may differ in other browsers): background and its longhand equivalents. border and its longhand equivalents border-radius box-decoration-break box-shadow clear and float color cursor display font and its longhand equivalents line-height margin outline and its longhand equivalents padding text-* properties such as text-transform white-space word-spacing and word-break writing-mode note: the console message behaves like an inline element by default. to see the effects of padding, margin, etc. you should set it to for example display: inline-block. using groups in the console you can use nested groups to help organize your output by visually combining related material. to create a new nested block, call console.gr...

DOMMatrixReadOnly.flipX() - Web APIs
l 50 0 l 50 100 z" /> </svg> this javascript first creates an identity matrix, then uses the `flipx()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis. the red triangle is left in place. const flipped = document.getelementbyid('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.flipx(); flipped.setattribute('transform', flippedmatrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.flipx()' in that specification. candidate recommendation initial definition ...

DOMPoint.x - Web APIs
syntax var xpos = dompoint.x; value a double-precision floating-point value indicating the x coordinate's value for the point. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). ...

DOMPoint.y - Web APIs
syntax var ypos = dompoint.y; value a double-precision floating-point value indicating the y coordinate's value for the point. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). ...

DOMPoint.z - Web APIs
syntax var zpos = dompoint.z; value a double-precision floating-point value indicating the z coordinate's value for the point. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). ...

DOMPointInit.x - Web APIs
syntax var dompointinit = { x: xpos }; dompointinit.x = xpos; var xpos = dompointinit.x; value a double-precision floating-point value indicating the point's x coordinate. ...

DOMPointInit.y - Web APIs
the dompointinit dictionary's y property is used to specify the y-coordinate of a point in 2d or 3d space when either creating or serializing to json a dompoint or dompointreadonly object. in general, the value of y increases to the right and decreases to the left, becoming negative to the left of the origin. this may change if transforms have been applied causing the axes' orientation to change. syntax var dompointinit = { y: ypos }; dompointinit.y = ypos; var ypos = dompointinit.y; value a double-precision floating-point value indicating the point's y-coordinate. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). if this property is missing when the dompointinit object is passed into frompoint(), the value is ...

DOMPointInit.z - Web APIs
nt in 2d or 3d space when either creating or serializing to json a dompoint or dompointreadonly object. typically, a z value of 0 represents the plane of the screen. as the value increases, the point moves outward from the screen toward the user. as the value decreases, the point moves farther from the user, with negative values being behind the screen, receding into the distance. of course, if transforms have been applied, the axes may have changed orientation. syntax var dompointinit = { z: zpos }; dompointinit.z = zpos; var zpos = dompointinit.z; value a double-precision floating-point value indicating the point's z-coordinate. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). there are two methods which use...

DOMPointReadOnly.x - Web APIs
the dompointreadonly interface's x property holds the horizontal coordinate, x, for a read-only point in space. this property cannot be changed by javascript code in this read-only version of the dompoint object. in general, positive values x mean to the right, and negative values of x means to the left, assuming no transforms have resulted in a reversal. syntax const xpos = somedompointreadonly.x; value a double-precision floating-point value indicating the x coordinate's value for the point. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). specifications specification status comment geometry interfaces module level 1the definition of 'x' in that specification. candidate recommenda...

DOMPointReadOnly.y - Web APIs
the dompointreadonly interface's y property holds the vertical coordinate, y, for a read-only point in space. if your script needs to be able to change the value of this property, you should instead use the dompoint object. in general, positive values of y mean downward, and negative values of y mean upward, assuming no transforms have resulted in a reversal. syntax const ypos = somedompointreadonly.y; value a double-precision floating-point value indicating the y coordinate's value for the point. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). specifications specification status comment geometry interfaces module level 1the definition of 'y' in that specification. candidate recomm...

DOMPointReadOnly.z - Web APIs
the dompointreadonly interface's z property holds the depth coordinate, z, for a read-only point in space. if your script needs to be able to change the value of this property, you should instead use the dompoint object. in general, positive values of z mean toward the user (out from the screen), and negative values of z mean away from the user (into the screen), assuming no transforms have resulted in a reversal. syntax const zpos = somedompointreadonly.z; value a double-precision floating-point value indicating the z coordinate's value for the point. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). specifications specification status comment geometry interfaces module level 1the defi...

DOMPointReadOnly - Web APIs
x. dompointreadonly.y read only the point's vertical coordinate, y. dompointreadonly.z read only the point's depth coordinate, z. dompointreadonly.w read only the point's perspective value, w. static methods dompointreadonly.frompoint() a static method that creates a new dompointreadonly object given the coordinates provided in the specified dompointinit object. methods matrixtransform() applies a matrix transform specified as a dommatrixinit object to the dompointreadonly object. tojson() returns a json representation of the dompointreadonly object. specifications specification status comment geometry interfaces module level 1the definition of 'dompoint' in that specification. candidate recommendation latest spec version is an ed. ...

DOMQuad - Web APIs
it has a handy bounds attribute returning a domrectreadonly for those cases where you just want an axis-aligned bounding rectangle. constructor domquad.domquad() creates a new domquad object. properties p1,p2,p3,p4 read only are dompoint objects for each of the domquad object's four corners. ...

Document.lastModified - Web APIs
the lastmodified property of the document interface returns a string containing the date and time on which the current document was last modified. syntax var string = document.lastmodified; examples simple usage this example alerts the value of lastmodified. alert(document.lastmodified); // returns: tuesday, december 16, 2017 11:09:42 transforming lastmodified into a date object this example transforms lastmodified into a date object. let olastmodif = new date(document.lastmodified); transforming lastmodified into milliseconds this example transforms lastmodified into the number of milliseconds since january 1, 1970, 00:00:00, local time. let nlastmodif = date.parse(document.lastmodified); notes note that as a string, lastmodified cannot easily be used for comparing the modificat...

Document: wheel event - Web APIs
lign-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: document.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specificat...

EffectTiming.direction - Web APIs
animation playback starts by going from the end of the animation sequence toward the beginning the first iteration, then goes forward during the second, and so forth. examples in the forgotten key example, alice waves her arm up and down by passing her an alternate value for her direction property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'direction' in that specification. working draft editor's draft. ...

EffectTiming.iterations - Web APIs
typeerror an attempt was made to set the value of this property to a negative number or nan. the property's value is left unchanged. examples in the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification. working draft editor's draft. ...

Element: dblclick event - Web APIs
s example toggles the size of a card when you double click on it. javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'dblclick' in that specification. obsolete ...

Element.getClientRects() - Web APIs
er box, in pixels, with the top-left relative to the top-left of the viewport. for tables with captions, the caption is included even though it's outside the border box of the table. when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any). originally, microsoft intended this method to return a textrectangle object for each line of text. however, the cssom working draft specifies that it returns a domrect for each border box. for an inline element, the two definitions are the same. but for a block element, mozilla will return only a single rectangle. firefox 3.5 note fire...

Element: paste event - Web APIs
(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. a handler for this event can access the clipboard contents by calling getdata() on the event's clipboarddata property. to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually. it's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents. examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="targ...

Element.releasePointerCapture() - Web APIs
recommendation non-stable version. pointer eventsth...

Element.setPointerCapture() - Web APIs
recommendation non-stable version. pointer eventsth...

File - Web APIs
returns the size of the file in bytes. file.prototype.type read only returns the mime type of the file. instance methods the file interface doesn't define any methods, but inherits methods from the blob interface: blob.prototype.slice([start[, end[, contenttype]]]) returns a new blob object containing the data in the specified range of bytes of the source blob. blob.prototype.stream() transforms the file into a readablestream that can be used to read the file contents. blob.prototype.text() transforms the file into a stream and reads it to completion. it returns a promise that resolves with a usvstring (text). blob.prototype.arraybuffer() transforms the file into a stream and reads it to completion. it returns a promise that resolves with an arraybuffer. specifications s...

GlobalEventHandlers.ontransitioncancel - Web APIs
d causes the box to rotate, while the mouse cursor hovers over it. .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends. let b...

GlobalEventHandlers.ontransitionend - Web APIs
size change, and causes the box to rotate, while the mouse cursor hovers over it. .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends. let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.on...

HTMLElement: animationcancel event - Web APIs
button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...

HTMLElement: animationiteration event - Web APIs
button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...

HTMLElement: animationstart event - Web APIs
button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...

HTMLElement.innerText - Web APIs
t itself is not being rendered (e.g detached from the document or is hidden from view), the returned value is the same as the node.textcontent property. example this example compares innertext with node.textcontent. note how innertext is aware of things like <br> elements, and ignores hidden elements. ...

KeyframeEffect.KeyframeEffect() - Web APIs
object instance. its parameter is as follows: sourcekeyframes a keyframeeffect object that you want to clone. examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification. draft added the iterationcomposite option. web ...

KeyframeEffect.setKeyframes() - Web APIs
posite values, the corresponding list will be repeated as needed. implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. attributes keyframes may specify property-value pairs for any of the animatable css properties. the property names are specified using camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as ...

KeyframeEffect.target - Web APIs
); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null. examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id=​"rabbit">​click the rabbit's ears!​</div>​ rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification. working draft editor's draft. ...

KeyframeEffect - Web APIs
t of keyframes that make up this effect. animationeffect.updatetiming() updates the specified timing properties. examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification. working draft initial definition ...

KeyframeEffectOptions - Web APIs
tion from keyframe to keyframe, and how to behave when the animation begins and ends. properties composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be ...

NodeIterator.detach() - Web APIs
obsolete initial definition. ...

OscillatorNode.setPeriodicWave() - Web APIs
tains only a fundamental tone is by definition a sine wave. here, we create a periodicwave with two values. the first value is the dc offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value. here, with createperiodicwave(), you specify the frequencies, and the browser performs a an inverse fourier transform to get a time domain buffer for the frequency of the oscillator. here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave. specifications specification status ...

ReadableStream.pipeTo() - Web APIs
lue a promise that resolves when the piping process has completed. exceptions typeerror the writablestream and/or readablestream objects are not a writable stream/readable stream, or one or both of the streams are locked. examples // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => rs.pipeto(new finaldestinationstream())) specifications specification status comment streamsthe definition of 'pipeto()' in that specification. living standard initial definition. ...

ReadableStream - Web APIs
async iterator instance and locks the stream to it. while the stream is locked, no other reader can be acquired until this one is released. readablestream.getreader() creates a reader and locks the stream to it. while the stream is locked, no other reader can be acquired until this one is released. readablestream.pipethrough() provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair. readablestream.pipeto() pipes the current readablestream to a given writablestream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered. readablestream.tee() the tee method tees this readable stream, returning a two-element array containing the two resulting branches as new rea...

RequestDestination - Web APIs
object. "paintworklet" the target is a paint worklet. "report" the target is a report. "script" the target is a script. "serviceworker" the target is a service worker. "sharedworker" the target is a shared worker. "style" the target is a style "track" the target is an html <track>. "video" the target is video data. "worker" the target is a worker. "xslt" the target is an xlst transform. specifications specification status comment fetchthe definition of 'requestdestination' in that specification. living standard initial definition ...

SVGAElement - Web APIs
linkref.target = "_self"; } else { console.log("sorry! ...

SVGAnimationElement - Web APIs
the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimatecolorelement, svganimatemotionelement and svganimatetransformelement. <div id="interfacediagram" style="display: inline-block; 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-b...

SVGCircleElement - Web APIs
alue + change, 10), 250); circle.setattribute("r", newvalue); } click on the circle. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement' in that specification. candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircleelement' in that specification. recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send u...

SVGClipPathElement - Web APIs
thods this interface doesn't implement any specific methods, but inherits methods from its parent, svgelement. specifications specification status comment css masking module level 1the definition of 'svgclippathelement' in that specification. candidate recommendation removed the inheritance from svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svgtransformable, and svgunittypes scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgclippathelement' in that specification. recommendation initial definition ...

SVGDefsElement - Web APIs
t implement any specific methods, but inherits properties from its parent, svggraphicselement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgdefselement' in that specification. candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgdefselement' in that specification. recommendation initial definition ...

SVGForeignObjectElement - Web APIs
ds from its parent, svggraphicselement and implements methods from svgurireference. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgforeignobjectelement' in that specification. candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement and svgurireference scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgforeignobjectelement' in that specification. recommendation initial definition ...

SVGGElement - Web APIs
arent interface, svggraphicselement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggelement' in that specification. candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svggelement' in that specification. recommendation initial definition ...

SVGGradientElement - Web APIs
peat 3 corresponds to value repeat. properties this interface also inherits properties from its parent, svgelement, and implements those of svgurireference. svggradientelement.gradientunits read only returns an svganimatedenumeration corresponding to the gradientunits attribute on the given element. takes one of the constants defined in svgunittypes. svggradientelement.gradienttransform read only returns an svganimatedtransformlist corresponding to attribute gradienttransform on the given element. svggradientelement.spreadmethod read only returns an svganimatedenumeration corresponding to attribute spreadmethod on the given element. one of the spread method types defined on this interface. methods this interface does not provide any specific methods, but implements those...

SVGGraphicsElement: paste event - Web APIs
(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. a handler for this event can access the clipboard contents by calling getdata() on the event's clipboarddata property. to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually. it's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents. example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org...

SVGImageElement - Web APIs
he image data is ready to be used. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgimageelement' in that specification. candidate recommendation changed the inheritance from svgelement to svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable and added the crossorigin property. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgimageelement' in that specification. recommendation initial definition ...

SVGLineElement - Web APIs
nt interface, svggeometryelement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svglineelement' in that specification. candidate recommendation changed the inheritance from svgelement to svggeometryelement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svglineelement' in that specification. recommendation initial definition ...

SVGMaskElement - Web APIs
rface doesn't implement any specific methods, but inherits methods from its parent interface, svgelement. specifications specification status comment css masking module level 1the definition of 'svgmaskelement' in that specification. candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgmaskelement' in that specification. recommendation initial definition ...

SVGPolygonElement - Web APIs
t implement any specific methods, but inherits methods from its parent, svggeometryelement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgpolygonelement' in that specification. candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolygonelement' in that specification. recommendation initial definition ...

SVGPolylineElement - Web APIs
implement any specific methods, but inherits methods from its parent, svggeometryelement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgpolylineelement' in that specification. candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolylineelement' in that specification. recommendation initial definition ...

SVGRectElement - Web APIs
) * 255); myrect.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')'; } click the rect. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgrectelement' in that specification. candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgrectelement' in that specification. recommendation initial definition ...

SVGSwitchElement - Web APIs
interface, svggraphicselement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgswitchelement' in that specification. candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgswitchelement' in that specification. recommendation initial definition ...

SVGTextElement - Web APIs
ace, svgtextpositioningelement. methods this interface doesn't implement any specific methods, but inherits methods from its parent interface, svgtextpositioningelement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgtextelement' in that specification. candidate recommendation removed the implemented interface svgtransformable. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtextelement' in that specification. recommendation initial definition ...

Streams API - Web APIs
hen read them back out again. simple tee example: this example extends the simple random stream example, showing how a stream can be teed and both resulting streams can be read independently. simple writer: this example shows how to to write to a writable stream, then decode the stream and write the contents to the ui. unpack chunks of a png: this example shows how pipethrough() can be used to transform a readablestream into a stream of other data types by transforming a data of a png file into a stream of png chunks. examples from other developers: progress indicators with streams, service workers, & fetch. specifications specification status comment streams living standard initial definition. ...

SubtleCrypto.digest() - Web APIs
ction to use. supported values are: sha-1 (but don't use this in cryptographic applications) sha-256 sha-384 sha-512. data is an arraybuffer or arraybufferview containing the data to be digested. return value digest is a promise that fulfills with an arraybuffer containing the digest. supported algorithms digest algorithms, also known as cryptographic hash functions, transform an arbitrarily large block of data into a fixed-size output, usually much shorter than the input. they have a variety of applications in cryptography. sha-1 this algorithm is specified in fips 180-4, section 6.1, and produces an output 160 bits long. warning: this algorithm is now considered vulnerable and should not be used for cryptographic applications. sha-256 this algorithm is specifi...

Touch.radiusX - Web APIs
...

VisualViewport - Web APIs
position: fixed we need to offset it by the visual // viewport's offset from the layout viewport origin. var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. ...

WebGL2RenderingContext.beginQuery() - Web APIs
get, query); parameters target a glenum specifying the target of the query. possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers. query a webglquery object for which to start the querying. return value none. examples var query = gl.createquery(); gl.beginquery(gl.any_samples_passed, query); // ... specifications specification status comment webgl 2.0the definition of 'beginquery' in that s...

WebGL2RenderingContext.bindBufferBase() - Web APIs
the webgl2renderingcontext.bindbufferbase() method of the webgl 2 api binds a given webglbuffer to a given binding point (target) at a given index. syntax void gl.bindbufferbase(target, index, buffer); parameters target a glenum specifying the target for the bind operation. possible values: gl.transform_feedback_buffer gl.uniform_buffer index a gluint specifying the index of the target. buffer a webglbuffer which to bind to the binding point (target). return value none. examples gl.bindbufferbase(gl.transform_feedback_buffer, 0, buffer); specifications specification status comment webgl 2.0the definition of 'bindbufferbase' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of...

WebGL2RenderingContext.copyBufferSubData() - Web APIs
rtex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. gl.copy_read_buffer: buffer for copying from one buffer object to another (provided specifically for copy operations). gl.copy_write_buffer: buffer for copying from one buffer object to another (provided specifically for copy operations). gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. readoffset writeoffset a glintptr specifying the byte offset from which to start reading from or writing to the buffer. size a glsizei...

WebGL2RenderingContext.endQuery() - Web APIs
ery(target); parameters target a glenum specifying the target of the query. possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers. return value none. examples var query = gl.createquery(); gl.beginquery(gl.any_samples_passed, query); // ... gl.endquery(gl.any_samples_passed); specifications specification status comment webgl 2.0the definition of 'endquery' in that specification. editor's ...

WebGL2RenderingContext.getQuery() - Web APIs
get, pname); parameters target a glenum specifying the target of the query. possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers. pname a glenum specifying the query object target. must be gl.current_query. return value a webglquery object. examples var currentquery = gl.getquery(gl.any_samples_passed, gl.current_query); specifications specification status comment webgl 2.0the definition of...

WebGLActiveInfo - Web APIs
) methods. properties webglactiveinfo.name the read-only name of the requested variable. webglactiveinfo.size the read-only size of the requested variable. webglactiveinfo.type the read-only type of the requested variable. examples a webglactiveinfo object is returned by: webglrenderingcontext.getactiveattrib() webglrenderingcontext.getactiveuniform() or webgl2renderingcontext.gettransformfeedbackvarying() webglactiveinfo? getactiveattrib(webglprogram? program, gluint index); webglactiveinfo? getactiveuniform(webglprogram? program, gluint index); webglactiveinfo? gettransformfeedbackvarying(webglprogram? program, gluint index) specifications specification status comment webgl 1.0the definition of 'webglactiveinfo' in that specification. recommendatio...

WebGLRenderingContext.disable() - Web APIs
encil_test deactivates stencil testing and updates to the stencil buffer. see webglrenderingcontext.stencilfunc(). when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard deactivates that primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. gl.clear() commands are ignored. return value none. examples gl.disable(gl.dither); to check if a capability is disabled, use the webglrenderingcontext.isenabled() method: gl.isenabled(gl.dither); // false specifications specification status comment webgl 1.0the definition of 'disable' in that specification. recommendation initia...

WebGLRenderingContext.enable() - Web APIs
. gl.stencil_test activates stencil testing and updates to the stencil buffer. see webglrenderingcontext.stencilfunc(). when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. gl.clear() commands are ignored. return value none. examples gl.enable(gl.dither); to check if a capability is enabled, use the webglrenderingcontext.isenabled() method: gl.isenabled(gl.dither); // true specifications specification status comment webgl 1.0the definition of 'enable' in that specification. recommendation initial de...

WebGLRenderingContext.isEnabled() - Web APIs
.scissor(). gl.stencil_test stencil testing and updates to the stencil buffer. see webglrenderingcontext.stencilfunc(). when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. gl.clear() commands are ignored. return value a glboolean indicating if the capability cap is enabled (true), or not (false). examples gl.isenabled(gl.stencil_test); // false to activate or deactivate a specific capability, use the webglrenderingcontext.enable() and webglrenderingcontext.disable() methods: gl.enable(gl.stencil_test); gl.disable(gl.stencil_test)...

WebGLRenderingContext.viewport() - Web APIs
syntax void gl.viewport(x, y, width, height); parameters x a glint specifying the horizontal coordinate for the lower left corner of the viewport origin. default value: 0. y a glint specifying the vertical coordinate for the lower left corner of the viewport origin. default value: 0. width a non-negative glsizei specifying the width of the viewport. default value: width of the canvas. height a non-negative glsizei specifying the height of the viewport. default value: height of the canvas. ...

Raining rectangles - Web APIs
-= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation. so we reschedule // the timeout to call drawanimation again in 17ms. // otherwise we won't get any animation. timer = settimeout(drawanimation, 17); } function playerclick (evt) { // we need to transform the position of the click event from // window coordinates to relative position inside the canvas. // in addition we need to remember that vertical position in // webgl increases from bottom to top, unlike in the browser // window. var position = [ evt.pagex - evt.target.offsetleft, gl.drawingbufferheight - (evt.pagey - evt.target.offsettop), ]; // if the click falls ins...

Data in WebGL - Web APIs
shader to the fragment shader. this is commonly used to share a vertex's normal vector after it has been computed by the vertex shader. <<how to use>> uniforms uniforms are set by the javascript code and are available to both the vertex and fragment shaders. they're used to provide values that will be the same for everything drawn in the frame, such as lighting positions and magnitudes, global transformation and perspective details, and so forth. <<add details>> buffers <<add information>> textures <<add information>> ...

Keyframe Formats - Web APIs
posite values, the corresponding list will be repeated as needed. implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. attributes keyframes may specify property-value pairs for any of the animatable css properties. the property names are specified using camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as ...

Visualizations with Web Audio API - Web APIs
mple: source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioctx.destination); note: you don't need to connect the analyser's output to another node for it to work, as long as the input is connected to the source, either directly or via another node. the analyser node will then capture audio data using a fast fourier transform (fft) in a certain frequency domain, depending on what you specify as the analysernode.fftsize property value (if no value is specified, the default is 2048.) note: you can also specify a minimum and maximum power value for the fft data scaling range, using analysernode.mindecibels and analysernode.maxdecibels, and different data averaging constants using analysernode.smoothingtimeconstant. rea...

Window.convertPointFromNodeToPage() - Web APIs
the node in whose coordinate system the point specified by nodepoint is described. nodepoint a point object describing a point in node's coordinate system; this point will be converted to the page's coordinate system. return value a point object specifying a point in the page's coordinate system. specifications this method was specified in the defunct 20 march 2009 working draft of css 2d transforms module level 3. it is not present in the current css transforms module level 1 working draft. ...

Window.convertPointFromPageToNode - Web APIs
de into whose coordinate system the point is to be converted. pagepoint a point object specifying a point in the coordinate system of the page, which is to be converted into the node's coordinate system. return value a point object describing the specified location in the node's coordinate system. specifications this method was specified in the defunct 20 march 2009 working draft of css 2d transforms module level 3. it is not present in the current css transforms module level 1 working draft. ...

Window.requestAnimationFrame() - Web APIs
sed. the element's final position is 200px (0.1 * 2000) to the right of its initial position. const element = document.getelementbyid('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; // `math.min()` is used here to make sure that the element stops at exactly 200px. element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not reliably fire requestanimationframe before the paint cycle. specification specification status comment htm...

WritableStream - Web APIs
...

Using XMLHttpRequest - Web APIs
a is in the same format the form's submit() method uses to send data, if the form's encoding type were set to "multipart/form-data". formdata objects can be utilized in a number of ways with an xmlhttprequest. for examples, and explanations of how one can utilize formdata with xmlhttprequests, see the using formdata objects page. for didactic purposes here is a translation of the previous example transformed to use the formdata api. note the brevity of the code: <!doctype html> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <title>sending forms with formdata &ndash; mdn</title> <script> "use strict"; function ajaxsuccess () { console.log(this.responsetext); } function ajaxsubmit (oformelement) { if (!oformelement.action) { return; } var oreq = new xmlhttprequest(); ore...

XRHandedness - Web APIs
odically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null. if a gripspace is present, that means the input source is a hand-held device of some sort, so it should be rendered visibly if possible. if gripspace is non-null, the function proceeds to get the pose for the gripspace transformed into the current reference space. assuming that's then valid, a function called myrenderhandobject() is called with the grip's pose and the value of handedness. with these values in hand (no pun intended), myrenderhandobject() can draw the appropriate model positioned and formed for the correct hand. specifications specification status comment webxr device apithe defin...

XRInputSource.gripSpace - Web APIs
th the x and z axes). examples in tis example, taken from the frame rendering callback, the gripspace is used to render a mesh that represents the position and orieintation of the controller in the virtual environment. for (let source in xrsession.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, xrrefspace); if (grippose) { mydrawmeshusingtransform(controllermesh, grippose.transform.matrix); } } } for each input source which has a value for gripspace, this loop obtains the xrpose representing the position and orientation that are described by gripspace. if a valid pose is returned, a method mydrawmeshusingtransform() is called to draw the controller's mesh transformed using the grip pose's transform matrix. specifications ...

XRInputSource.handedness - Web APIs
odically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null. if a gripspace is present, that means the input source is a hand-held device of some sort, so it should be rendered visibly if possible. if gripspace is non-null, the function proceeds to get the pose for the gripspace transformed into the current reference space. assuming that's then valid, a function called myrenderhandobject() is called with the grip's pose and the value of handedness. with these values in hand (no pun intended), myrenderhandobject() can draw the appropriate model positioned and formed for the correct hand. specifications specification status comment webxr device apithe defin...

XRInputSource.targetRaySpace - Web APIs
t to allow for future enhancements to the api. the target ray space reported by tracked pointer inputs (targetraymode of tracked-pointer) is actually based upon the true spatial position and orientation of the input device. to determine the position and orientation of the target ray while rendering a frame, pass it into the xrframe method getpose() method, then use the returned xrpose object's transform to gather the spatial information you need. example this fragment of code shows part of a function to be called once every frame. it looks for inputs which have a non-null targetrayspace. inputs which have a value for this property represent inputs that project a target ray outward from the user. for each such input, this example looks for inputs whose targetraymode is tracked-pointer, indicat...

XRInputSourceEvent() - Web APIs
queeze, or grip the controller. examples the code below sets up handlers for primary action events in order to determine when the user clicks on (shoots at/pokes at/whatever) objects in the scene. xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification. working draft initial definition. ...

XRInputSourceEvent - Web APIs
queeze, or grip the controller. examples the code below sets up handlers for primary action events in order to determine when the user clicks on (shoots at/pokes at/whatever) objects in the scene. xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification. working draft initial definition. ...

XRPose.emulatedPosition - Web APIs
syntax let emulated = xrpose.emulatedposition; value a boolean which is true if the pose's position is computed based on estimates or is derived from sources other than direct sensor data. if the position is precisely gbased on direct sensor inputs, the value is false. usage notes there are two basic categories of xr tracking systems. ...

XRReferenceSpace: reset event - Web APIs
animation frames which make use of the new origin are executed. bubbles yes cancelable no interface xrreferencespaceevent event handler property onreset usage notes the reset event indicates that the coordinate system has been reset or reconfigured by changing the reference space's origin, moving and rotating it as indicated by the event's transform property. the event is sent before any animation frame callbacks are executed to render the pending frame, to ensure that those callbacks have the updated coordinate system available. there are a number of reasons why a reset might occur. most common among them are the following: the user has manually reset the coordinate system, such as by requesting that the headset recalibrate itself to en...

XRReferenceSpaceEvent() - Web APIs
referencespaceevent(type, eventinitdict); parameters type a domstring indicating the event type which has occurred. currently, this is always reset. eventinitdict an object based on the xrreferencespaceeventinit dictionary, containing data used to initialize the new event object. the properties of this object are: referencespace the xrreferencespace from which the event originated. transform an xrrigidtransform which maps the old coordinate system (from before the changes indicated by this event) to the new coordiante system. return value a new xrreferencespaceevent object, initialized as defined by the input parameters. specifications specification status comment webxr device apithe definition of 'xrreferencespaceevent()' in that specification. wo...

XRReferenceSpaceEventInit.referenceSpace - Web APIs
the xrreferencespaceeventinit property referencespace is used to establish the value of a newly-constructed xrreferencespaceevent object when calling the xrreferencespaceevent() constructor. syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrreferencespace indicating the source of the event. examples this simple snippet calls the constructor to create a new reference space event of type reset. let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.referencespace' in that specification. working draft initial definition. ...

XRSession.onsqueezestart - Web APIs
is pointing at. this object is then stored in a heldobject variable in the user object we're using to represent user information. xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification. working draft initial definition. ...

XRViewerPose - Web APIs
user's head, one would iterate over the views in the views array, rendering them one after another. by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface. also, when rendering the scene for spectators or other players in a multiplayer game, the transform of the xrviewerpose can be used to determine both placement and facing direction of the other players in the game, so that they can be drawn in the correct place with the correct facing. the viewer's pose for the animation frame represented by xrframe can be obtained by calling the frame's getviewerpose() method, specifying the reference space in which the origin's position should be computed. t...

Resources - Web APIs
resources transforming xml: netscape and xslt what kind of language is xslt? at ibm developerworks xslt tutorial at zvon.org xpath tutorial at zvon.org using the mozilla javascript interface to do xsl transformations at mozilla.org mozilla.org's xslt project page, which includes a frequently encountered issues section. ...

::before (:before) - CSS: Cascading Style Sheets
note that there are no icons used, and the check-mark is actually the ::before that has been styled in css. go ahead and get s...

::first-letter (:first-letter) - CSS: Cascading Style Sheets
round-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap e...

font-weight - CSS: Cascading Style Sheets
@font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-weight: 400; } specifications ...

grid - CSS: Cascading Style Sheets
representing whether or not the ouput device is grid-based. examples html <p class="unknown">i don't know if you're using a grid device. :-(</p> <p class="bitmap">you are using a bitmap device.</p> <p class="grid">you are using a grid device! neato!</p> css :not(.unknown) { color: lightgray; } @media (grid: 0) { .unknown { color: lightgray; } .bitmap { color: red; text-transform: uppercase; } } @media (grid: 1) { .unknown { color: lightgray; } .grid { color: black; text-transform: uppercase; } } result specifications specification status comment media queries level 4the definition of 'grid' in that specification. candidate recommendation no change. media queriesthe definition of 'grid' in that specif...

update - CSS: Cascading Style Sheets
ers or severely underpowered devices. fast the layout may change dynamically according to the usual rules of css, and the output device is not unusually constrained in speed, so regularly-updating things like css animations can be used. example: computer screens. examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment media queries level 4the definition of 'update' in that specification. candidate recommendation initial definition. ...

Coordinate systems - CSS: Cascading Style Sheets
ith positive y-coordinate values being above the origin. when drawing 3d graphics, or using a third dimension to layer objects from front to back, the z-coordinate is also used. this specifies the distance away from the viewer if positive and toward the viewer if negative. it's actually possible to change the definitions and orientations of these coordinate systems using css properties such as transform. however, we'll only talk about the standard coordinate system for now. standard cssom coordinate systems there are four standard coordinate systems used by the css object model, as described below. offset coordinates specified using the "offset" model use the top-left corner of the element being examined, or on which an event has occurred. for example, when a mouse event occurs, the positi...

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
next live example the child elements have been floated, and then their container has had display: flex added. if you remove display: flex, you should see that the .box element collapses as we have no clearing applied. this demonstrates that the float is happening. re-apply display: flex and the collapsing does not happen. this is because the items no longer have a float applied, as they have been transformed into flex items. flexbox and grid layout css grid layout and flexbox generally act in the same way with regards to overwriting other methods. you might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. this approach works very well. if a flex item becomes a grid item, then the flex properties that may have been assigned to t...

The stacking context - CSS: Cascading Style Sheets
p). element that is a child of a flex (flexbox) container, with z-index value other than auto. element that is a child of a grid (grid) container, with z-index value other than auto. element with a opacity value less than 1 (see the specification for opacity). element with a mix-blend-mode value other than normal. element with any of the following properties with value other than none: transform filter perspective clip-path mask / mask-image / mask-border element with a isolation value isolate. element with a -webkit-overflow-scrolling value touch. element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post). element with a contain value of layout, or paint, or a composite value that includes eithe...

CSS Properties Reference - CSS: Cascading Style Sheets
padding-top paddingtop page-break-after pagebreakafter page-break-before pagebreakbefore position position stroke-dasharray strokedasharray stroke-dashoffset strokedashoffset stroke-width strokewidth text-align textalign text-decoration textdecoration text-indent textindent text-transform texttransform top top vertical-align verticalalign visibility visibility width width z-index zindex ...

CSS Text - CSS: Cascading Style Sheets
css text is a module of css that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation. reference properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing specifications specification status comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text. css text module level 3 working draft css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...

CSS Text Decoration - CSS: Cascading Style Sheets
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 clas...

CSS data types - CSS: Cascading Style Sheets
see also css units and values introduction to css: values and units ...

Animatable CSS properties - CSS: Cascading Style Sheets
scroll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top transform transform-origin translate vertical-align visibility width word-spacing z-index zoom ...

Grid wrapper - CSS: Cascading Style Sheets
accessibility concerns although grid enables us to position items anwhere (within reason), it is important when placing items using css grid that your underlying markup follows a logical order (see css grid layout and accessibility for more d...

Mozilla CSS extensions - CSS: Cascading Style Sheets
[prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-tran...

Pseudo-elements - CSS: Cascading Style Sheets
a css pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). for example, ::first-line can be used to change the font of the first line of a paragraph. /* the first line of every <p> element. */ p::first-line { color: blue; text-transform: uppercase; } note: in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state. syntax selector::pseudo-element { property: value; } you can use only one pseudo-element in a selector. it must appear after the simple selectors in the statement. note: as a rule, double colons (::) should be used instead of a single colon (:). this distinguishes pseudo-classes from pseudo-elements. however, since this distinction was not present in older versions of the w3c...

CSS reference - CSS: Cascading Style Sheets
ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()...

CSS Tutorials - CSS: Cascading Style Sheets
s and pages is an easy task in css. learn to use counter-reset, counter-increment, counters(), and counter(). css animations css3 animations allow you to define configurations of style, as keyframes, and to transition between them defining an animation. css transitions css3 transitions allow you to define an animation between several styles and to control the way this transition happens. css transforms transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2d or 3d spaces. css gradients gradients are images that transition smoothly from one color to another. there are several types of gradients allowed in css: linear or radial, repeating or not. this tutorial describes how to use them. adv...

Value definition syntax - CSS: Cascading Style Sheets
aring the same name of a property. these data types are very close to the basic data types. they only differ from the basic data types in the physical location of their definition. in this case, the definition is usually physically very close to the definition of the property using them. component value combinators brackets brackets enclose several entities, combinators, and multipliers, then transform them as a single component. they are used to group components to bypass the precedence rules. bold [ thin && <length> ] this example matches the following values: bold thin 2vh bold 0 thin bold thin 3.5em but not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it. juxtaposition placing several keywords, literals or data types,...

Actual value - CSS: Cascading Style Sheets
erty's actual (final) value: first, the specified value is determined based on the result of cascading, inheritance, or using the initial value. next, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). then, layout is calculated, resulting in the used value. finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value. specifications specification status comment css level 2 (revision 1)the definition of 'actual value' in that specification. recommendation initial definition. ...

<angle> - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the <angle> data type consists of a <number> followed by one of the units listed below. as with all dimensions, there is no space between the unit literal and the number. the angle unit is optional after the number 0. ...

animation-timing-function - CSS: Cascading Style Sheets
puted valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

background-position - CSS: Cascading Style Sheets
umbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446). firefox's new parallel css engine (also known as quantum css or stylo, planned for release in firefox 57) fixes this. see also background-position-x background-position-y background-position-inline background-position-block using multiple backgrounds transform-origin ...

element() - CSS: Cascading Style Sheets
as part of the background. <div style="width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">this text is part of the background. cool, huh?</p> </div> </div> the <div> element with the id "mybackground1" is used as the background for the content including the paragraph "this box uses the element with the #mybackground1 id as its background!". a somewhat more bizarre example this example uses a hidden <button> element in a repeat...

font-language-override - CSS: Cascading Style Sheets
ers to display glyphs designed specifically for that language. for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-override property lets you override the typeface behavior for a specific language. this is useful, for example, when the typeface you're using lacks proper support for the language. for instance, if a typeface doesn't have proper rules for the azeri language, you can force the font to use turkish glyphs, which follow similar rules. syntax the ...

font-variation-settings - CSS: Cascading Style Sheets
s need the latest linux freetype version, and macos prior to 10.13 does not support variable fonts. if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea transform formal syntax normal | [ <string> <number> ]# examples you can find a number of other variable fonts examples at our variable fonts guide, v-fonts.com, and axis-praxis.org. weight (wght) the following live example's css can be edited to allow you to play with font weight values. slant (slnt) the following live example's css can be edited to allow you to play with font slant/oblique valu...

font - CSS: Cascading Style Sheets
o ::first-letter and ::first-line.inheritedyespercentagesas each of the properties of the shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcomputed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as specifiedfont-family: as specifiedanimation typeas each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont...

image() - CSS: Cascading Style Sheets
t list items — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is. list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set. the text will also be displayed left-to-right. displaying a section of the background image <div class="box">hover over me. what cursor do you see?</div> .box:hover { cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16"); } when the user hovers over the box, the cursor will change to display the 16x16 px section of the sprite imag...

mix-blend-mode - CSS: Cascading Style Sheets
4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate(210deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { mix-blend-mode: multiply; } .screen .item { mix-...

offset-distance - CSS: Cascading Style Sheets
0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length positioned along the path */ offset-distance: 40px; <length-percentage> a length that specifies how far the element is along the path (defined with offset-path). 100% represents the total length of the path (when the offset-path is defined as a basic shape or path()). ...

offset-position - CSS: Cascading Style Sheets
he first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). for more explanation of these value types, see background-position. ...

offset - CSS: Cascading Style Sheets
set: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the abs...

Guide to scroll anchoring - CSS: Cascading Style Sheets
o details some suppression triggers, which will disable scroll anchoring in places where it might be problematic. if any of the triggers happen on the anchor node, or an ancestor of it, anchoring is suppressed. these suppression triggers are changes to the computed value of any of the following properties: top, left, right, or bottom margin or padding any width or height-related properties transform additionally, position changes anywhere inside the scrolling box also disable scroll anchoring. in bug 1584285 the layout.css.scroll-anchoring.suppressions.enabled flag was added to firefox nightly in order to allow the disabling of these triggers further reading explainer document on the wicg site scroll anchoring for web developers on the chromium blog implement a pin-to-bottom scrol...

radial-gradient() - CSS: Cascading Style Sheets
o the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%) values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin. if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword ...

repeating-radial-gradient() - CSS: Cascading Style Sheets
if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword ...

scroll-margin-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...

scroll-margin-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...

scroll-margin-block - CSS: Cascading Style Sheets
lock: 1em .5em ; /* global values */ scroll-margin-block: inherit; scroll-margin-block: initial; scroll-margin-block: unset; values <length> an outset from the corresponding edge of the scroll container. description the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} specifications specification status comment css scroll snap mo...

scroll-margin-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

scroll-margin-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...

scroll-margin-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...

scroll-margin-inline - CSS: Cascading Style Sheets
e: 1em .5em ; /* global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container. description the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the inter...

scroll-margin-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

scroll-margin-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

scroll-margin-top - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

scroll-margin - CSS: Cascading Style Sheets
in by scrolling to a point partway between two of the "pages" of the example's content. the value specified for scroll-margin determines how much of the page that's primarily outside the snapport should remain visible. thus, the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the inter...

scroll-snap-coordinate - CSS: Cascading Style Sheets
r each respective axis. /* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50px 50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed. syntax values none specifies that the element does not contribute to a snap point. <position> specifies the offset of the snap coordinates from the start edge of the element’s border box. for each pairing, the first value gives the x coordinate of the snap coordinate, the...

text-decoration - CSS: Cascading Style Sheets
you use.</p> specifications specification status comment css text decoration module level 4 working draft adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified. css text decoration module level 3the definition of 'text-decoration' in that specification. candidate recommendation transformed into a shorthand property. added support for the value of text-decoration-style. css level 2 (revision 1)the definition of 'text-decoration' in that specification. recommendation no significant changes. css level 1the definition of 'text-decoration' in that specification. recommendation initial definition. ...

text-underline-position - CSS: Cascading Style Sheets
olutpat quis. nam eget sodales quam. aliquam accumsan tellus ac erat posuere.</p> <p class="vertical">lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam consectetur ac turpis vel laoreet. nullam volutpat pharetra lorem, sit amet feugiat tortor volutpat quis. nam eget sodales quam. aliquam accumsan tellus ac erat posuere.</p> our css looks like this: p { font-size: 1.5rem; text-transform: capitalize; text-decoration: underline; text-decoration-thickness: 2px; } .horizontal { text-underline-position: under; } .vertical { writing-mode: vertical-rl; text-underline-position: left; } in this example we set both the paragraphs to have a thick underline. in the horizontal text we use text-underline-position: under; to put the underline below all the descenders. in the text...

transition-timing-function - CSS: Cascading Style Sheets
puted valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

transition - CSS: Cascading Style Sheets
| <timing-function> | <time>where <single-transition-property> = all | <custom-ident><timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

zoom - CSS: Cascading Style Sheets
/* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size. reset do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing ctrl-- or ctrl++ keyboard shortcuts) to the document. ...

EXSLT
tion.strings (str)the exslt strings package provides functions that allow the manipulation of strings. exslt modules to use an exslt function, you need to declare the namespace the function is in, and then use the appropriate prefix when calling the function. for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ... <xsl:value-of select="regexp:replace(/root/@value, 'before', 'gi', 'after')"/> ... </xsl:template> </xsl:stylesheet> common the exslt common package provides basic functions that expand upon the capabilities of xslt. the namespace for the common package is http://exslt.org/comm...

Making content editable - Developer guides
this article provides some information about this functionality. note: in firefox 63 beta/dev edition, some of the rich-text editing features have been disabled by default, for better cross-browser compatibility. these are object resizing on <img>, <table>, and absolutely-positioned elements; inline table editing to add or remove rows and columns; and the grabber that allows moving of absolutely-positioned elements. see bug 1449564 and firefox-specific html editing ui has been deprecated for additional details. ...

Constraint validation - Developer guides
for both of these input types, if the multiple attribute is set, several values can be set, as a comma-separated list, for this input. if any of these do not satisfy the condition described here, the type mismatch constraint violation is triggered. note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. validation-related attributes in addition to the type attribute described above, the following attributes are used to describe basic constraints: attribute input types supporting the attribute possible values constraint description associated violation pattern text, search, url, tel, email, password a javascript ...

HTML5 - Developer guides
ynamic content, varying according to the time and user actions. this is the technology behind ajax. jit-compiling javascript engines the new generation of javascript engines is much more powerful, leading to greater performance. history api allows the manipulation of the browser history. this is especially useful for pages loading interactively new information. the contenteditable attribute: transform your website to a wiki! html5 has standardized the contenteditable attribute. learn more about this feature. drag and drop the html5 drag and drop api allows support for dragging and dropping items within and between web sites. this also provides a simpler api for use by extensions and mozilla-based applications. focus management in html the new html5 activeelement and hasfocus attributes ar...

Index - Developer guides
25 touch events (mozilla experimental) dom the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17. you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12. 26 using device orientation with 3d transforms advanced, css, dom, needsupdate, orientation, transforms this article provides tips on how to use device orientation information in tandem with css 3d transforms. 27 graphics on the web 2d, 3d, canvas, graphics, html5, svg, web, webgl, webrtc websites and applications often need to present graphics, such as images.these articles provide insight into how you can acc...

HTML attribute reference - HTML: Hypertext Markup Language
when the expected value should be an integer. for example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setattribute("maxlength", "42") on that element. the idl attribute is also known as a javascript property. these are the attributes you can read or set using javascript properties like element.foo. the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. in other words, the idl attributes, in essence, reflect the content attributes. most of the time, idl attributes will return their values as they are really used. for example, the default type for <input> elements is "text", so if you set input.type="foobar...

Warning - HTTP
ed, due to an inability to reach the server. 112 disconnected operation the cache is disconnected from the rest of the network. 113 heuristic expiration sent if a cache heuristically chose a freshness lifetime greater than 24 hours and the response's age is greater than 24 hours. 199 miscellaneous warning arbitrary, non-specific warning 214 transformation applied added by a proxy if it applies any transformation to the representation, such as changing the content-coding, media-type or the like. 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...

X-Content-Type-Options - HTTP
header is a marker used by the server to indicate that the mime types advertised in the content-type headers should not be changed and be followed. this is a way to opt out of mime type sniffing, or, in other words, to say that the mime types are deliberately configured. this header was introduced by microsoft in ie 8 as a way for webmasters to block content sniffing that was happening and could transform non-executable mime types into executable mime types. since then, other browsers have introduced it, even if their mime sniffing algorithms were less aggressive. starting with firefox 72, the opting out of mime sniffing is also applied to top-level documents if a content-type is provided. this can cause html web pages to be downloaded instead of being rendered when they are served with a mime ty...

HTTP Index - HTTP
cessing the request. it is intended for cases where another process or server handles the request, or for batch processing. 224 203 non-authoritative information http, http status code, reference, status code, successful response the http 203 non-authoritative information response status indicates that the request was successful but the enclosed payload has been modified by a transforming proxy from that of the origin server's 200 (ok) response . 225 204 no content http, reference, status code, success the http 204 no content success status response code indicates that the request has succeeded, but that the client doesn't need to go away from its current page. a 204 response is cacheable by default. an etag header is included in such a response. 226...

203 Non-Authoritative Information - HTTP
the http 203 non-authoritative information response status indicates that the request was successful but the enclosed payload has been modified by a transforming proxy from that of the origin server's 200 (ok) response . the 203 response is similar to the value 214, meaning transformation applied, of the warning header code, which has the additional advantage of being applicable to responses with any status code. status 203 non-authoritative information specifications specification title rfc 7231, section 6.3.4: 203 non-authoritative information hypertext transfer protocol (http/1.1): semantics and content ...

Function.name - JavaScript
s a pull request. property attributes of function.name writable no enumerable no configurable yes note that in non-standard, pre-es2015 implementations the configurable attribute was false as well. javascript compressors and minifiers warning: be careful when using function.name and source code transformations, such as those carried out by javascript compressors (minifiers) or obfuscators. these tools are often used as part of a javascript build pipeline to reduce the size of a program prior to deploying it to production. such transformations often change a function's name at build-time. source code such as: function foo() {}; let foo = new foo(); if (foo.constructor.name === 'foo') { conso...

JSON.stringify() - JavaScript
eens.push({ 'name': 'screend', 'width': 250, 'height': 60 }); session.screens.push({ 'name': 'screene', 'width': 390, 'height': 120 }); session.screens.push({ 'name': 'screenf', 'width': 1240, 'height': 650 }); // converting the json string with json.stringify() // then saving with localstorage in the name of session localstorage.setitem('session', json.stringify(session)); // example of how to transform the string generated through // json.stringify() and saved in localstorage in json object again var restoredsession = json.parse(localstorage.getitem('session')); // now restoredsession variable contains the object that was saved // in localstorage console.log(restoredsession); well-formed json.stringify() engines implementing the well-formed json.stringify specification will stringify lone s...

JSON - JavaScript
in a jsonnumber (numbers must contain no whitespace) or jsonstring (where it is interpreted as the corresponding character in the string, or would cause an error). the tab character (u+0009), carriage return (u+000d), line feed (u+000a), and space (u+0020) characters are the only valid whitespace characters. static methods json.parse(text[, reviver]) parse the string text as json, optionally transform the produced value and its properties, and return the value. any violations of the json syntax, including those pertaining to the differences between javascript and json, cause a syntaxerror to be thrown. the reviver option allows for interpreting what the replacer has used to stand in for other datatypes. json.stringify(value[, replacer[, space]]) return a json string corresponding to the spec...

Map - JavaScript
[key, value] of mymap.entries()) { console.log(key + ' = ' + value) } // 0 = zero // 1 = one iterating map with foreach() maps can be iterated using the foreach() method: mymap.foreach(function(value, key) { console.log(key + ' = ' + value) }) // 0 = zero // 1 = one relation with array objects let kvarray = [['key1', 'value1'], ['key2', 'value2']] // use the regular map constructor to transform a 2d key-value array into a map let mymap = new map(kvarray) mymap.get('key1') // returns "value1" // use array.from() to transform a map into a 2d key-value array console.log(array.from(mymap)) // will show you exactly the same array as kvarray // a succinct way to do the same, using the spread syntax console.log([...mymap]) // or use the keys() or values() iterators, and convert them to an ...

Math - JavaScript
the tangent of x. math.tanh(x) returns the hyperbolic tangent of x. math.trunc(x) returns the integer portion of x, removing any fractional digits. examples converting between degrees and radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in radians. ...

String.prototype.toLocaleUpperCase() - JavaScript
es not affect the value of the string itself. in most cases, this will produce the same result as touppercase(), but for some locales, such as turkish, whose case mappings do not follow the default case mappings in unicode, there may be a different result. also notice that conversion is not necessarily a 1:1 character mapping, as some characters might result in two (or even more) characters when transformed to upper-case. therefore the length of the result string can differ from the input length. this also implies that the conversion is not stable, so i.e. the following can return false: x.tolocalelowercase() === x.tolocaleuppercase().tolocalelowercase() examples using tolocaleuppercase() 'alphabet'.tolocaleuppercase(); // 'alphabet' 'gesäß'.tolocaleuppercase(); // 'gesÄss' 'i\u0307'.tolo...

return - JavaScript
equal 9 if the value is omitted, undefined is returned instead. the following return statements all break the function execution: return; return true; return false; return x; return x + y / 3; automatic semicolon insertion the return statement is affected by automatic semicolon insertion (asi). no line terminator is allowed between the return keyword and the expression. return a + b; is transformed by asi into: return; a + b; the console will warn "unreachable code after return statement". starting with firefox 40, a warning is shown in the console if unreachable code is found after a return statement. to avoid this problem (to prevent asi), you could use parentheses: return ( a + b ); examples interrupt a function a function immediately stops at the point where return is call...

Strict mode - JavaScript
d: 'use strict'; var f = function() { return arguments.callee; }; f(); // throws a typeerror "securing" javascript strict mode makes it easier to write "secure" javascript. some websites now provide ways for users to write javascript which will be run by the website on behalf of other users. javascript in browsers can access the user's private information, so such javascript must be partially transformed before it is run, to censor access to forbidden functionality. javascript's flexibility makes it effectively impossible to do this without many runtime checks. certain language functions are so pervasive that performing runtime checks has a considerable performance cost. a few strict mode tweaks, plus requiring that user-submitted javascript be strict mode code and that it be invoked in a certa...

Digital audio concepts - Web media technologies
majority of human vocalizations lie (yellow). the large differences among these ranges gives us room to lose details in audio data without significantly impacting the ability of the human ear to notice any real change in audio quality. these facts can be taken advantage of when compressing audio. on top of simplifying the sound through psychoacoustic analysis, codecs use other algorithms and transforms to further simplify and reduce the size of the audio. if you'd like to learn more about the way compression works on audio, take a look at audio data compression on wikipedia. importantly, codecs do all the hard work for you. it's why so much engineering and scientific study goes into the creation of new algorithms and codecs. all you need to do is consider the options and your use case, then c...

Image file type and format guide - Web media technologies
of which is 8 bits. indexed color n/a jpeg does not offer an indexed color mode. greyscale with alpha n/a jpeg does not support an alpha channel. true color with alpha n/a jpeg does not support an alpha channel. compression lossy; based on the discrete cosine transform licensing as of october 27, 2006, all united states patents have expired. png (portable network graphics) the png (pronounced "ping") image format uses lossless or lossy compression to provide more efficient compression, and supports higher color depths than gif, as well as full alpha transparency support. png is widely supported, with all major browsers offering full support...

Web video codec guide - Web media technologies
ects and the background. the effect can be similar in appearance to ringing. the photo above shows mosquito noise in a number of places, including in the sky surrounding the bridge. in the upper-right corner, an inset shows a close-up of a portion of the image that exhibits mosquito noise. mosquito noise artifacts are most commonly found in mpeg video, but can occur whenever a discrete cosine transform (dct) algorithm is used; this includes, for example, jpeg still images. motion compensation block boundary artifacts compression of video generally works by comparing two frames and recording the differences between them, one frame after another, until the end of the video. this technique works well when the camera is fixed in place, or the objects in the frame are relatively stationary, but if...

Populating the page: how browsers work - Web Performance
rs. if this occurs, then compositing is necessary. painting can break the elements in the layout tree into layers. promoting content into layers on the gpu (instead of the main thread on the cpu) improves paint and repaint performance. there are specific properties and elements that instantiate a layer, including <video> and <canvas>, and any element which has the css properties of opacity, a 3d transform, will-change, and a few others. these nodes will be painted onto their own layer, along with their descendants, unless a descendant necessitates its own layer for one (or more) of the above reasons. layers do improve performance, but are expensive when it comes to memory management, so should not be overused as part of web performance optimization strategies. compositing when sections of the d...

Progressive web apps (PWAs)
trol of how a web browser handles its network requests and asset caching. with service workers, web developers can create reliably fast web pages and offline experiences. manifest file a json file that controls how your app appears to the user and ensures that progressive web apps are discoverable. it describes the name of the app, the start url, icons, and all of the other details necessary to transform the website into an app-like format. pwa advantages pwas should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. to find out more about what these mean, read progressive web app advantages. to find out how to implement pwas, read through our pwa developer guide. documentation <-- the temporary automatic list below will be replace...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
especially in elements that get scrolled or animated. 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. for example, if your css is in a file named default.css, it can look like this: .target { clip-path: url(resources.svg#c1); } the svg is then ...

accumulate - SVG: Scalable Vector Graphics
attribute controls whether or not an animation is cumulative. it is frequently useful for repeated animations to build upon the previous results, accumulating with each iteration. this attribute said to the animation if the value is added to the previous animated attribute's value on each iteration. four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value none | sum default value none animatable no sum specifies that each repeat iteration after the first builds upon the last value of the previous iteration. none specifies that repeat iterations are not cumulative. this attribute is ignored if the target attribute value does not support addition, or if the animation element does...

additive - SVG: Scalable Vector Graphics
the additive attribute controls whether or not an animation is additive. it is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values. four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value replace | sum default value replace animatable no sum specifies that the animation will add to the underlying value of the attribute and other lower priority animations. replace specifies that the animation will override the underlying value of the attribute and other lower priority animations. this is the default, however the behavior is also affected by the animation value attributes by and to, as described in smil animation: how...

attributeName - SVG: Scalable Vector Graphics
the attributename attribute indicates the name of the css property or attribute of the target element that is going to be changed during an animation. four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the css property or attribute of the target element to be animated. specifications specification status comment...

attributeType - SVG: Scalable Vector Graphics
the attributetype attribute specifies the namespace in which the target attribute and its associated values are defined. four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable. xml this value specifies that the value of attributename is the name of an ...