Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
on versions of xml content. built from the ground up utilizing a wide variety of xml technologies, firefox incorporates within itself all of the mechanisms needed to process both original xml documents and the specialized stylesheets used to style and lay them out for html display, reducing server load with client-side processing. at present, gecko (the layout engine behind firefox) supports two forms of xml stylesheets. for basic control of appearance — fonts, colors, position, and so forth — gecko uses css. css1 and css2 are well supported and support for the emerging css3 standard is under development. for further information about css, see eric meyer's css pages. our focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet. xslt stands for extensible st...
...or basic control of appearance — fonts, colors, position, and so forth — gecko uses css. css1 and css2 are well supported and support for the emerging css3 standard is under development. for further information about css, see eric meyer's css pages. our focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet. xslt stands for extensible stylesheet language/transform and the name is apt. 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 (and in the case of firefox, the focus is on converting it on the fly into html which can then be displayed by the browser). xslt/xpath ref...
...irefox, the focus is on converting it on the fly into html which can then be displayed by the browser). ...
...And 4 more matches

Intl.RelativeTimeFormat.prototype.format() - JavaScript
the intl.relativetimeformat.prototype.format() method formats a value and unit according to the locale and formatting options of this relativetimeformat object. 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 relativetimeformat.format(value, unit) parameters value numeric value to use in the internationalized relative time message. unit unit to use in the relative time internationalized message. possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. ...
...nd us a pull request. syntax relativetimeformat.format(value, unit) parameters value numeric value to use in the internationalized relative time message. unit unit to use in the relative time internationalized message. possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. description the function returned by the format getter formats a value and a unit into a string according to the locale and formatting options of this intl.relativetimeformat object. examples basic format usage the following example shows how to create a relative time formatter using the english language. ...
...hour", "minute", "second". plural forms are also permitted. description the function returned by the format getter formats a value and a unit into a string according to the locale and formatting options of this intl.relativetimeformat object. examples basic format usage the following example shows how to create a relative time formatter using the english language. // create a relative time formatter in your locale // with default values explicitly passed in. const rtf = new intl.relativetimeformat("en", { localematcher: "best fit", // other values: "lookup" numeric: "always", // other values: "auto" style: "long", // other values: "short" or "narrow" }); // format relative time using negative value (-1). ...
...And 3 more matches

CSS and JavaScript animation performance - Web Performance
css transitions and animations both css transitions and animations can be used to write animation. ...
...nd, allow developers to make animations between a set of starting property values and a final set rather than between two states. css animations consist of two components: a style describing the css animation, and a set of key frames that indicate the start and end states of the animation's style, as well as possible intermediate points. see using css animations for more details. in terms of performance, there is no difference between implementing an animation with css transitions or animations. both of them are classified under the same css-based umbrella in this article. requestanimationframe the requestanimationframe() api provides an efficient way to make animations in javascript. the callback function of the method is called by the browser before the next repaint on each frame. compar...
...me() is much more efficient. developers can create an animation by simply changing an element's style each time the loop is called (or updating the canvas draw, or whatever.) note: like css transitions and animations, requestanimationframe() pauses when the current tab is pushed into the background. for more details read animating with javascript from setinterval to requestanimationframe. performance comparison: transitions vs. requestanimationframe the fact is that, in most cases, the performance of css-based animations is almost the same as javascripted animations — in firefox at least. some javascript-based animation libraries, like gsap and velocity.js, even claim that they are able to achieve better performance than native css transitions/animations. this can occur because css tr...
...And 3 more matches

<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
decimal-separator specifies the decimal point character. the default is (.). ...
... decimal-separator specifies the decimal point character. the default is (.). ...
... decimal-separator specifies the decimal point character. the default is (.). ...
...And 2 more matches

Intl​.ListFormat.prototype​.format() - JavaScript
the format() method returns a string with a language-specific representation of the list. syntax listformat.format([list]); parameters list an iterable object, such as an array return value a language-specific formatted string representing the elements of the list description the format() method returns a string that has been formatted based on parameters provided in the intl.listformat object. the locales and options parameters customize the behavior of format() and let applications specify the language conventions that should be used to format the list. examples using format the following example shows how to create a list formatter using the english language. ...
...n parameters provided in the intl.listformat object. the locales and options parameters customize the behavior of format() and let applications specify the language conventions that should be used to format the list. examples using format the following example shows how to create a list formatter using the english language. ...
... locales and options parameters customize the behavior of format() and let applications specify the language conventions that should be used to format the list. examples using format the following example shows how to create a list formatter using the english language. ...
...let applications specify the language conventions that should be used to format the list. examples using format the following example shows how to create a list formatter using the english language. const list = ['motorcycle', 'bus', 'car']; console.log(new intl.listformat('en-gb', { style: 'long', type: 'conjunction' }).format(list)); // > motorcycle, bus and car console.log(new intl.listformat('en-gb', { style: 'short', type: 'disjunction' }).format(list)); // > motorcycle, bus or car console.log(new intl.listformat('en-gb', { style: 'narrow', type: 'unit' }).format(list)); // > motorcycle bus car specifications specification intl.listformatthe definition of 'format()' in that specification. ...

Intl.NumberFormat.prototype.format() - JavaScript
the intl.numberformat.prototype.format() method formats a number according to the locale and formatting options of this numberformat object. 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 numberformat.format(number) parameters number a number or bigint to format. description the format getter function formats a number into a string according to the locale and formatting options of this numberformat object. ...
...'d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax numberformat.format(number) parameters number a number or bigint to format. description the format getter function formats a number into a string according to the locale and formatting options of this numberformat object. examples using format use the format getter function for formatting a single currency value, here for russia: var options = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(654321.987)); // → "654 321,99 руб." using format with map use the format getter function for formatting all numbers in an array. note that the function ...
...ter function for formatting a single currency value, here for russia: var options = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(654321.987)); // → "654 321,99 руб." using format with map use the format getter function for formatting all numbers in an array. note that the function is bound to the numberformat from which it was obtained, so it can be passed directly to array.prototype.map. this is considered a historical artefact, as part of a convention which is no longer followed for new features, but is preserved to maintain compatibility with existing programs. ...
...ing all numbers in an array. note that the function is bound to the numberformat from which it was obtained, so it can be passed directly to array.prototype.map. this is considered a historical artefact, as part of a convention which is no longer followed for new features, but is preserved to maintain compatibility with existing programs. var a = [123456.789, 987654.321, 456789.123]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "123.456,789; 987.654,321; 456.789,123" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.format' in that specification. ...

SyntaxError: Malformed formal parameter - JavaScript
the last argument is the source code for the new function you're creating. all the rest make up your new function's argument list. the argument list is invalid somehow. perhaps you accidentally picked a keyword like if or var as an argument name, or perhaps there's some stray punctuation in your argument list. or maybe you accidentally passed an invalid value, like a number or object. ok, that fixed my problem. ...
...the argument list is invalid somehow. perhaps you accidentally picked a keyword like if or var as an argument name, or perhaps there's some stray punctuation in your argument list. or maybe you accidentally passed an invalid value, like a number or object. ok, that fixed my problem. but why didn't you say that in the first place? admittedly the wording in the error message is slightly strange. "formal parameter" is a fancy way of saying "function argument". and we use the word "malformed" because all firefox engineers are huge fans of 19th-century gothic horror novels. examples invalid cases var f = function('x y', 'return x + y;'); // syntaxerror (missing a comma) var f = function('x,', 'return x;'); // syntaxerror (extraneous comma) var f = function(37, "alert('ok')"); // syntaxerror ...

Recommended Web Performance Timings: How long is too long? - Web Performance
r downloading a cat video on a five-year-old device over an edge network in northern siberia would likely find a 20-second download speedy. if you wait three or four seconds without communicating to the user that a load is happening and showing some progress, the typical site will lose potential visitors, and those visitors will take a long time to come back if they ever do. in optimizing for performance, do set an ambitious first load goal, such as 5 seconds over the mobile 3g network and 1.5 seconds on an office t1 line, with even more ambitious page load goals for subsequent page loads, leveraging service workers and caching. there are different suggested times for initially loading the page versus loading additional assets, responding to user interaction, and ensuring smooth animations: ...
... a hover or button press, but that doesn't mean the completed response should be instantaneous. while a slower than 100ms reaction may create a disconnect between the user interaction and the response, a 100 to 200ms transition for a response may help the user notice the response their interaction initiated, such as a menu opening. if a response takes longer than 100ms to complete, provide some form of feedback to inform the user the interaction has occurred. ...

Optimizing startup performance - Web Performance
an often overlooked aspect of app software development—even among those focusing on performance optimization—is startup performance. how long does your app take to start up? does it seem to lock up the device or the user's browser while the app loads? that makes users worry that your app is crashed, or that something else is wrong. it's always a good idea to take the time to ensure that your app starts up nicely. this article offers tips and suggestions to help you achieve that goal, both when writing a new app and when porting an app from another platform to the web. starting up nicely regardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be focusing on it too much here. instead, we're going to look at a mo...
... notification. you should present some kind of interface, such as a progress bar, so that the user knows how much longer they'll need to wait while your app starts up. where there's a will... if you're starting your project from scratch, it's usually pretty easy to just write everything the "right way," making appropriate bits of the code asynchronous. all pure startup calculations should be performed in background threads, while you keep the run-time of main thread events as short as possible. include a progress indicator so the user knows what's going on and how long they'll be waiting. in theory, anyway, it should be pretty easy to design your new app to start up nicely. on the other hand, however, it can get tricky when you're porting an existing app to the web. a desktop application do...

<xsl:transform> - XSLT: Extensible Stylesheet Language Transformations
gecko support supported. ...

Client-side form validation - Learn web development
previous overview: forms next before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. this is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. this article leads you through basic concepts and examples of client-side form validation. prerequisites: computer literacy, a reasonable understanding of html, css, and javascript. objective: to understand what client-side form validation is, why it's important, and how to apply various techniques to implement it. client-side validation is an initial check and an important feature of good user experience; by catching invalid data on the client-side, the us...
...re of good user experience; by catching invalid data on the client-side, the user can fix it straight away. if it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data. however, client-side validation should not be considered an exhaustive security measure! your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server. read website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind. what is for...
...side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server. read website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind. what is form validation? go to any popular site with a registration form, and you will notice that they provide feedback when you don't enter your data in the format they are expecting. you'll get messages such as: "this field is required" (you can't leave this field blank). "please enter your phone number in the format xxx-xxxx" (a specific data format is required for it to be considered valid). "please enter a valid email address" (the data you entered is not i...
...And 73 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the <input> element is one of the most powerful and complex in all of html due to the sheer number of combinations of input types and attributes. 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. ...
... <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type="range" name="range" min="0" max="25"/> html5 reset a button that resets the contents of the form to default values. not recommended. <input type="reset" name="reset"/> search a single-line text field for entering search strings. line-breaks are automatically removed from the input value. may include a delete icon in supporting browsers that can be used to clear the field. displays a search icon instead of enter key on some devices with dynamic keypads. <i...
... search a single-line text field for entering search strings. line-breaks are automatically removed from the input value. may include a delete icon in supporting browsers that can be used to clear the field. displays a search icon instead of enter key on some devices with dynamic keypads. <input type="search" name="search"/> html5 submit a button that submits the form. <input type="submit" name="submit"/> tel a control for entering a telephone number. displays a telephone keypad in some devices with dynamic keypads. <input type="tel" name="tel"/> html5 text the default value. a single-line text field. line-breaks are automatically removed from the input value. <input type="text" name="text"/> ...
...And 63 more matches

Your first form - Learn web development
overview: forms next the first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right html form controls and other html elements, adding some very simple styling via css, and describing how data is sent to a server. we'll expand on each of these subtopics in more detail later on in the module. prerequisites: basic computer literacy, and a basic understanding of html. objective: to gain familiarity with what web forms are, what they are used for, how to think about designing them, and the basic html elements you'll need for simple cases. ...
...w data is sent to a server. we'll expand on each of these subtopics in more detail later on in the module. prerequisites: basic computer literacy, and a basic understanding of html. objective: to gain familiarity with what web forms are, what they are used for, how to think about designing them, and the basic html elements you'll need for simple cases. what are web forms? web forms are one of the main points of interaction between a user and a web site or application. forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a ui feature). a we...
... web forms are one of the main points of interaction between a user and a web site or application. forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a ui feature). a web form's html is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as html forms. the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about ...
...And 49 more matches

Sending forms through JavaScript - Learn web development
html forms can send an http request declaratively. but forms can also prepare an http request to send via javascript, for example via xmlhttprequest. this article explores such approaches. a form is not always a form with progressive web apps, single page apps, and framework based apps, it's common to use html forms to send data without loading a new document when response data is received. let's first talk about why this requires a different approach. gaining control of the global interface standard html form submission, as described in the previous article, loads the url where the data was sent, which means the browser window navigates with a full page load. avoiding a full page load can provide a smoother experience by avoiding network lag, and possible visual issues like flickering. ...
...when the user tries to send the data, the application takes control and transmits the data asynchronously in the background, updating only the parts of the ui that require changes. ...
...ously in the background, updating only the parts of the ui that require changes. sending arbitrary data asynchronously is generally called ajax, which stands for "asynchronous javascript and xml". how is it different? the xmlhttprequest (xhr) dom object can build http requests, send them, and retrieve their results. historically, xmlhttprequest was designed to fetch and send xml as an exchange format, which has since been superceded by json. but neither xml nor json fit into form data request encoding. form data (application/x-www-form-urlencoded) is made of url-encoded lists of key/value pairs. for transmitting binary data, the http request is reshaped into multipart/form-data. note: the fetch api is often used in place of xhr these days — it is a modern, updated version of xhr, which ...
...And 43 more matches

XForms Custom Controls - Archive of obsolete content
since firefox 4, xbl and xul are disabled by default for all pages not loaded from a chrome:// url. this also includes content loaded from file:// urls. it is possible to re-enable this by following the steps on using remote xul. this is required for all examples here to run! purpose you are in the right place if you would like to create your own custom renderings of the xforms controls like input, output, trigger, etc. we will also show you how to create custom controls that work with the xforms model and are automatically updated just like xforms controls. the purpose of this article is to give you enough background information so that you'll be able to get a good start. to really grasp the following information, a good understanding of xforms, xbl, javascript and css is needed. xpco...
...o get a good start. to really grasp the following information, a good understanding of xforms, xbl, javascript and css is needed. xpcom knowledge will certainly not hurt. but even if you are only comfortable with a couple of these technologies, we hope that the possibilities outlined below will inspire you to learn more where you need to. implementation status the framework we use in the mozilla xforms processor is very much a "work in progress". please keep in mind that just about everything we mention here may change to some degree as we continue to work on it. ...
...ble with a couple of these technologies, we hope that the possibilities outlined below will inspire you to learn more where you need to. implementation status the framework we use in the mozilla xforms processor is very much a "work in progress". please keep in mind that just about everything we mention here may change to some degree as we continue to work on it. work has just started in the w3c xforms working group to investigate the custom control issue, so eventually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors. ...
...And 42 more matches

Web Performance
the longer it takes for a site to respond, the more users will abandon the site. ...
... the longer it takes for a site to respond, the more users will abandon the site. ...
... the longer it takes for a site to respond, the more users will abandon the site. ...
...And 42 more matches

How to structure a web form - Learn web development
previous overview: forms next with the basics out of the way, we'll now look in more detail at the elements used to provide structure and meaning to the different parts of a form. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand how to structure html forms and give them semantics so they are usable and accessible. the flexibility of forms makes them one of the most complex structures in html; you can build any kind of basic form using dedicated form elements and attributes. using correct structure when building an html form will help ensure that the form is both usable and accessible. the <form> element the <form> element formally defines a form and attributes that determine the form's behavior. each...
...es them one of the most complex structures in html; you can build any kind of basic form using dedicated form elements and attributes. using correct structure when building an html form will help ensure that the form is both usable and accessible. the <form> element the <form> element formally defines a form and attributes that determine the form's behavior. each time you want to create an html form, you must start it by using this element, nesting all the contents inside. many assistive technologies and browser plugins can discover <form> elements and implement special hooks to make them easier to use. we already met this in the previous article. ...
...s a form and attributes that determine the form's behavior. each time you want to create an html form, you must start it by using this element, nesting all the contents inside. many assistive technologies and browser plugins can discover <form> elements and implement special hooks to make them easier to use. we already met this in the previous article. warning: it's strictly forbidden to nest a form inside another form. nesting can cause forms to behave in an unpredictable manner, so it is a bad idea. it's always possible to use a form control outside of a <form> element. if you do so, by default that control has nothing to do with any form unless you associate it with a form using the form attribute. ...
...And 41 more matches

Media container formats (file types) - Web media technologies
the format of audio and video media files is defined in two parts (three if a file has both audio and video in it, of course): the audio and/or video codecs used and the media container format (or file type) used. in this guide, we'll look at the container formats used most commonly on the web, covering basics about their specifications as well as their benefits, limitations, and ideal use cases. webrtc does not use a container at all. instead, it streams the encoded audio and video tracks directly from one peer to another using mediastreamtrack objects to represent each track. see codecs used by webrtc for information about codecs commonly used for making webrtc calls, as well as browser compatibility information around codec support in webrtc. ...
...ns, and ideal use cases. webrtc does not use a container at all. instead, it streams the encoded audio and video tracks directly from one peer to another using mediastreamtrack objects to represent each track. see codecs used by webrtc for information about codecs commonly used for making webrtc calls, as well as browser compatibility information around codec support in webrtc. common container formats while there are a vast number of media container formats, the ones listed below are the ones you are most likely to encounter. some support only audio while others support both audio and video. the mime types and extensions for each are listed.the most commonly used containers for media on the web are probably mpeg-4 (mp4), quicktime movie (mov), and the wavefile audio file format (wav). howe...
...ts, the ones listed below are the ones you are most likely to encounter. some support only audio while others support both audio and video. the mime types and extensions for each are listed.the most commonly used containers for media on the web are probably mpeg-4 (mp4), quicktime movie (mov), and the wavefile audio file format (wav). however, you may also encounter mp3, ogg, webm, avi, and other formats. not all of these are broadly supported by browsers, however; some combinations of container and codec are sometimes given their own file extensions and mime types as a matter of convenience, or because of their ubiquity. for example, an ogg file with only an opus audio track is sometimes referred to as an opus file, and might even have the extension .opus. but it's still actually just an ogg ...
...And 41 more matches

Styling web forms - Learn web development
previous overview: forms next in the previous few articles we looked at all the html you'll need to create and structure your web forms. in this article we will move on to looking at how to use css to style your form controls. this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is getting easier as old browsers are retired and modern browsers give us more features to use. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you. ...
...hey are to customize with css — but it is getting easier as old browsers are retired and modern browsers give us more features to use. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you. ...
...ss — but it is getting easier as old browsers are retired and modern browsers give us more features to use. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you. ...
...And 40 more matches

Sending form data - Learn web development
previous overview: forms once the form data has been validated on the client-side, it is okay to submit the form. and, since we covered validation in the previous article, we're ready to submit! this article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? we also look at some of the security concerns associated with sending form data. prerequisites: basic computer literacy, an understanding of html, and basic knowledge of http and server-side programming. objective: to understand what happens when form data is submitted, including getting a basic idea of how data is processed on the server first we'll discuss what happens to the data when a form is submitted. client/server a...
...hat happens to the data when a form is submitted. client/server architecture at it's most basic, the web uses a client/server architecture that can be summarized as follows. a client (usually a web browser) sends a request to a server (most of the time a web server like apache, nginx, iis, tomcat, etc.), using the http protocol. the server answers the request using the same protocol. an html form on a web page is nothing more than a convenient user-friendly way to configure an http request to send data to a server. this enables the user to provide information to be delivered in the http request. note: to get a better idea of how client-server architectures work, read our server-side website programming first steps module. ...
...all of its attributes are designed to let you configure the request to be sent when a user hits a submit button. the two most important attributes are action and method. the action attribute the action attribute defines where the data gets sent. its value must be a valid relative or absolute url. ...
...And 39 more matches

Using FormData Objects - Web APIs
the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest. it is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. the transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data. ...
... the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest. it is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. the transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data. ...
... of key/value pairs to send using xmlhttprequest. it is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. the transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data. ...
...And 38 more matches

Image file type and format guide - Web media technologies
in this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery. common image file types there are many image file formats in the world. however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content. ...
... will help you select the most appropriate formats to use for your site's imagery. common image file types there are many image file formats in the world. however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content. ...
...d usually be avoided for web content. ...
...And 36 more matches

HTMLFormElement - Web APIs
the htmlformelement interface represents a <form> element in the dom. it allows access to—and, in some cases, modification of—aspects of the form, as well as access to its component elements. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/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</...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interf...
..." fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement. htmlformelement.elements read only a htmlformcontrolscollection holding all form controls belonging to this form element. ...
...And 34 more matches

Advanced form styling - Learn web development
previous overview: forms next in this article, we will see what can be done with css to style the types of form control that are more difficult to style — the "bad" and "ugly" categories. as we saw in the previous article, text fields and buttons are perfectly easy to style; now we will dig into styling the bits that are more problematic. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search...
...ptgroup> and <datalist>. <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable. appearance: controlling os-level styling in the previous article we said that historically, styling of web form controls was largely taken from the underlying operating system, which is part of the problem with customizing the look of these controls. the appearance property was created as a way to control what os- or system-level styling was applied to web form controls. unfortunately, the behavior of this property's original implementations was very different across browsers, making it not very usable. n...
...ity. if you look at the reference page you'll see a lot of different possible values listed for -webkit-appearance, however by far the most helpful value, and probably the only one you'll use, is none. this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css. ...
...And 32 more matches

Using Performance Timeline - Web APIs
the following example show the usage of these methods getentries(), getentriesbyname() and getentriesbytype(). ...
...the following example show the usage of these methods getentries(), getentriesbyname() and getentriesbytype(). ...
...the following example show the usage of these methods getentries(), getentriesbyname() and getentriesbytype(). ...
...And 31 more matches

Basic native form controls - Learn web development
previous overview: forms next in the previous article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices. next we will look at the functionality of the different form controls, or widgets, in detail — studying all the different options available to collect different types of data. in this particular article we will look at the original set of form controls, available in all browsers since the early days of the web. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html. you've a...
...le we will look at the original set of form controls, available in all browsers since the early days of the web. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html. you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>. this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text. some of the attributes that are common to all form controls. ...
...e form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>. this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text. some of the attributes that are common to all form controls. note: the features discussed in this article are supported in all browsers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two articles. if you want a more advanced reference, you should consult our html forms element reference, and in particular our extensive <input> types reference. text input fields text <input> fields are the most basic form widgets. they are a very convenient way to let the user enter any kind of data, and we've already seen a ...
...And 30 more matches

Adding a new todo form: Vue events, methods, and models - Learn web development
. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn about handling forms in vue, and by association, events, models, and methods. creating a new to-do form we now have an app that displays a list of to-do items. however, we can't update our list of items without manually changing our code! let's fix that. let's create a new component that will allow us to add a new to-do item. in your components folder, create a new file called todoform.vue. add a...
...tems. however, we can't update our list of items without manually changing our code! ...
...ode! ...
...And 29 more matches

SVGTransformList - Web APIs
svg transform list interface the svgtransformlist defines a list of svgtransform objects. an svgtransformlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
... svg transform list interface the svgtransformlist defines a list of svgtransform objects. an svgtransformlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
... of svgtransform objects. an svgtransformlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...And 27 more matches

Navigation and resource timings - Web Performance
navigation events. resource timings are detailed network timing measurements regarding the loading of an application's resources. both provide the same read-only properties, but navigation timing measures the main document's timings whereas the resource timing provides the times for all the assets or resources called in by that main document and the resources' requested resources. ...
... measurements regarding the loading of an application's resources. both provide the same read-only properties, but navigation timing measures the main document's timings whereas the resource timing provides the times for all the assets or resources called in by that main document and the resources' requested resources. ...
...s the resource timing provides the times for all the assets or resources called in by that main document and the resources' requested resources. the general performance timings below have been deprecated in favor of the performance entry api, which provides for marking and measuring times along the navigation and resource loading process. while deprecated, they are supported in all browsers. performance timings the performancetiming api, a javascript api for measuring the loading performance of the requested page, is deprecated but supported in all browsers. it has been replaced with the performancenavigationtiming api. the performance timing api provided read only times, in milliseconds(ms), describing at what time each point in the page loading process was reached. as displayed in the im...
...And 25 more matches

Intl.NumberFormat() constructor - JavaScript
the following unicode extension key is allowed: nu the numbering system to be used. ...
...the following unicode extension key is allowed: nu the numbering system to be used. ...
...the following unicode extension key is allowed: nu the numbering system to be used. ...
...And 24 more matches

XForms Accessibility
intoduction this article provides a quick guide to how accessibility is handled in gecko for xforms.. assistive technologies api for xforms is supported starting from firefox 3 (gecko 1.9). implementation of accessible objects for xforms elements is based on top of the existing object hierarchy introduced in the mozilla accessibility module. xforms elements behavior is implemented in accordance with accessible toolkit checklist. in general, when elements are similar to html elements, they are exposed to msaa/atk in a similar way. get build subsections below explain how you can obtain accessible xforms-enabled build. these are either downloading latest build of firefox or building it yourself. downloading builds notion: xforms is no longer distributed with firefox build. you must build i...
...milar way. get build subsections below explain how you can obtain accessible xforms-enabled build. these are either downloading latest build of firefox or building it yourself. downloading builds notion: xforms is no longer distributed with firefox build. you must build it yourself. see section below. for firefox, you may directly download the nighly "trunk" build of firefox and install the xforms extension which lives in 'xpi' directory of the build. note, xforms accessibility is implemented only on trunk. trunk builds are not considered stable and should not be installed on top of the firefox used for daily browsing. ...
...ust build it yourself. see section below. for firefox, you may directly download the nighly "trunk" build of firefox and install the xforms extension which lives in 'xpi' directory of the build. note, xforms accessibility is implemented only on trunk. trunk builds are not considered stable and should not be installed on top of the firefox used for daily browsing. currently we have verified that xforms accessibility is working on the windows platform, and linux testing has not yet been done, although everything should work and is ready to be tested. you will find trunk builds of firefox at ftp.mozilla.org, trunk builds of xforms extension (windows) at ftp.mozilla.org or trunk builds of xforms extension (linux) ftp.mozilla.org. build it yourself if you would like to build firefox/seamonkey yo...
...And 23 more matches

Performance best practices for Firefox front-end engineers
always keep in mind the side effects your changes may have, from blocking other tasks, to interfering with other user interface elements. avoid the main thread where possible the main thread is where we process user events and do painting. it's also important to note that most of our javascript runs on the main thread, so it's easy for script to cause delays in event processing or painting. ...
...allows you to put all of your dom writes (most importantly, anything that could change the size or position of things in the dom) just before the style and layout steps of the pipeline, combining all the style and layout calculations into a single batch so it all happens once, in a single frame tick, instead of across multiple frames. see detecting and avoiding synchronous reflow below for more information. this also means that requestanimationframe() is not a good place to put queries for layout or style information. detecting and avoiding synchronous style flushes what are style flushes? when css is applied to a document (html or xul, it doesn’t matter), the browser does calculations to figure out which css styles will apply to each element. this happens the first time the page loads a...
...hes) to occur synchronously during the javascript part of the 16 ms window. the more of them there are, the more likely they'll exceed the 16ms frame budget. if that happens, some of them will be postponed until the next frame (or possibly multiple frames, if necessary), this skipping of frames is called jank. ...
...And 22 more matches

PerformanceTiming - Web APIs
these properties each describe the time at which a particular point in the page loading process was reached. ...
... these properties each describe the time at which a particular point in the page loading process was reached. ...
... these properties each describe the time at which a particular point in the page loading process was reached. ...
...And 21 more matches

SVGTransform - Web APIs
svg transform interface svgtransform is the interface for one of the component transformations within an svgtransformlist; thus, an svgtransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute. an svgtransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. interface overview also implement none methods void setmatrix(in svgmatrix matrix) void settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned ...
...oid settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit type is not one of predefined unit types.
... svg_transform_skewx = 5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit type is not one of predefined unit types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. ...
...And 21 more matches

transform-origin - CSS: Cascading Style Sheets
the transform-origin css property sets the origin for an element's transformations. 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 transformation origin is the point around which a transformation is applied. for example, the transformation origin of the rotate() function is the center of rotation. this property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value. ...
...a pull request. the transformation origin is the point around which a transformation is applied. for example, the transformation origin of the rotate() function is the center of rotation. this property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
...perty, then applying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
...And 21 more matches

Using microformats - Archive of obsolete content
microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself. firefox 3 implements a global microformats object that provides access to microformats. this object and its api make finding and reading microformats easy to do. loading the microformats api the microformats object is created using the new javascript script loader added to firefox 3. ...
...itself. firefox 3 implements a global microformats object that provides access to microformats. this object and its api make finding and reading microformats easy to do. loading the microformats api the microformats object is created using the new javascript script loader added to firefox 3. to use the api, you need to first load the object: components.utils.import("resource://gre/modules/microformats.js"); once you've loaded the microformats api, you can manage microformats using the methods listed here; for information about parsing microformats, see parsing microformats in javascript. predefined microformats firefox 3 provides definitions implementing several common microformats: adr represents an address (such as a street or mailing address). geo represents a geographical loca...
...age microformats using the methods listed here; for information about parsing microformats, see parsing microformats in javascript. predefined microformats firefox 3 provides definitions implementing several common microformats: adr represents an address (such as a street or mailing address). geo represents a geographical location using latitude and longitude. hcard represents contact information for a person. hcalendar represents a calendar appointment entry. tag used to add tags to other microformats. methods add() adds a new microformat to the microformat module. note: if a microformat by the specified name already exists, it is replaced by the new one. add(name, definition); parameters name the name of the microformat to add to the microformat module. definition ...
...And 20 more matches

Other form controls - Learn web development
multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element. ...
... multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element. ...
... multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element. ...
...And 20 more matches

Measuring performance - Learn web development
previous overview: performance next meauring performance provides an important metric to help you asses the success of your app, site, or web service. for example, you can use performance metrics to determine how your app performs in comparison to a competitor or you can compare your app's performance across releases. the metrics you choose to measure should be relevant to your users, site, and business goals. they should be collected and measured in a consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders. this article introduces web perfomrance metrics that you can use to measure and optimize your site's performance. prerequisites: basic computer literacy, basic software installed, and basic knowledg...
...consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders. this article introduces web perfomrance metrics that you can use to measure and optimize your site's performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to provide information about web performance metrics that you can collect through various web performance apis and tools that you can use to visualize that data. performance apis when writing code for the web, there are a large number of web apis available that allow you to create your own performance measuring tools. ...
...o provide information about web performance metrics that you can collect through various web performance apis and tools that you can use to visualize that data. performance apis when writing code for the web, there are a large number of web apis available that allow you to create your own performance measuring tools. you can use the navigation timing api to measure client-side web performance; including the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and more. you can use the api for metrics related to all of the navigation events displayed in the didagram below. ...
...And 20 more matches

text-transform - CSS: Cascading Style Sheets
the text-transform css property specifies how to capitalize an element's text. it can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. it also can help improve legibility for ruby. 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 text-transform property takes into account language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i. in german (de), the ß be...
...ccount language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i. in german (de), the ß becomes ss in uppercase. in dutch (nl), the ij digraph becomes ij, even with text-transform: capitalize, which only puts the first letter of a word in uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ). in greek (el), the lowercase sigma character has two forms: σ and ς. ...
... in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ). in greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. when applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context. in irish (ga), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example text-transform: uppercase will change ar aon tslí to ar aon tslÍ and not, as one might expect, ar aon tslÍ (firefox only). in some cases, a hyphen is also removed upon up...
...And 20 more matches

HTML forms in legacy browsers - Learn web development
er resources that can be amazingly helpful: browser vendor documentation mozilla: you're in the right place, just browse mdn microsoft: internet explorer standards support documentation webkit: because there are several different editions of this engine, things are a little trickier. the webkit blog and planet webkit aggregate the best articles by webkit core developers. chrome platform status site is also important. as well as the apple web site. make things simple because html forms involves complex interaction, there is one rule of thumb: keep it simple, also known as the "kiss principal". there are so many cases where we want forms that are "nicer" or "with advanced functionality", but building efficient html forms is not a question of design or technology. rather...
... graceful degradation is web developer's best friend graceful degradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time. ...
...ty on ux for the masses, explains it well. graceful degradation is web developer's best friend graceful degradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time. when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation. let's see some examples related to html forms. html input types the input types added in html5 are all useable, even in ancient browsers, because the way they degrade is highly predictable. if a browser does not know the value of the type attribute of an <input> element, it will fall back as if the value were text. <label for="mycolor"> pick a color <input type="c...
...And 19 more matches

<form> - HTML: Hypertext Markup Language
the html <form> element represents a document section containing interactive controls for submitting information. 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. it is possible to use the :valid and :invalid css pseudo-classes to style a <form> element based on whether or not the elements inside the form are valid. content categories flow content, palpable content permitted content flow content, but not containing <form> elements tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content implici...
... accept comma-separated content types the server accepts. this attribute was removed in html5 and should not be used. ...
... accept comma-separated content types the server accepts. this attribute was removed in html5 and should not be used. ...
...And 19 more matches

What is web performance? - Learn web development
previous overview: performance next web performance is all about making web sites fast, including making slow processes seem fast. does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if something is taking time to load (e.g. a loading spinner)? are scrolling and animations smooth? ...
...rformance next web performance is all about making web sites fast, including making slow processes seem fast. does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if something is taking time to load (e.g. a loading spinner)? are scrolling and animations smooth? ...
...tions smooth? this article provides a brief introduction to objective, measureable web performance*, looking at what technologies, techniques, and tools are involved in web optimization. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to gain basic familiarity of what is involved with web performance. * versus subjective, perceived performance, covered in the next article what is web performance? web performance is the objective measurement and perceived user experience of a web site or application. this includes the following major areas: reducing overall load time: how long does it take the files required to render the web site to download on to the user's computer? this ten...
...And 18 more matches

transform - CSS: Cascading Style Sheets
the transform css property lets you rotate, scale, skew, or translate an element. it modifies the coordinate space of the css visual formatting model. 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. if the property has a value different than none, a stacking context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. only transformable elements can be transformed. that is, all elements whose layout is governed by the css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. ...
...context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. only transformable elements can be transformed. that is, all elements whose layout is governed by the css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. ...
...he element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. only transformable elements can be transformed. that is, all elements whose layout is governed by the css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. ...
...And 18 more matches

Perceived performance - Learn web development
previous overview: performance next perceived performance is how fast a website seems to the user. how a user perceives your performance is as important, or perhaps more important, than any objective statistic, but it's subjective, and not as readily measurable. perceived performance is user perspective, not a metric. this article provides a brief introduction to perceived performance, looking at user perceptions, and what objective tools can be used to measure that which is subjective. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to gain basic familiarity of user perception of web performance. performance is about user perception. how fast a website feels like it's l...
... the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you think might be appropriate). such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up. perceived performance the perception of how fast your site loads and how responsive feels to user interaction is vitally important; even more important that actual download time but difficult to quantify. there are areas of your site that you may not be able to make faster, but you can make it feel faster even if the metrics discussed in the othser sections can't be improved. there is no unicorn metric that can ...
...aningful paint, or fmp, is the when content appears on the screen that is actually meaningful; which is a better metric for user-perceived loading experience, but still not ideal. largest contentful paint (lcp) metric, definited in the largest contentful paint api, reports the render time of the largest content element visible in the viewport. speed index is also used to approximate perceived performance: it measures the average time for pixels on the visible screen to be painted. it doesn't account for jitter, nor does it weight which content important to a user more highly, so it's not a perfect metric. these metrics have to do with initial load and render. it is also important to ensure the site feels fast once the user begins interacting with it. for this, time to interactive, is a good ...
...And 17 more matches

The "why" of web performance - Learn web development
overview: performance next web performance is all about making websites fast, including making slow processes seem fast. this article provides an introduction into why web performance is important to site visitors and for your business goals. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to gain basic familiarity of why web performance is important for good user experience. web performance refers to how quickly site content loads and renders in a web browser, and how well it responds to user interaction. bad performing sites are slow to display and slow to respond to input. bad performing sites increase site abandonment. ...
...ologies. objective: to gain basic familiarity of why web performance is important for good user experience. web performance refers to how quickly site content loads and renders in a web browser, and how well it responds to user interaction. bad performing sites are slow to display and slow to respond to input. bad performing sites increase site abandonment. at its worst, bad performance causes content to be completely inaccessible. a good goal for web performance is for users to not notice performance. while an individual's perception of site performance performance is subjective, loading and rendering can be measured. ...
...tion. bad performing sites are slow to display and slow to respond to input. bad performing sites increase site abandonment. at its worst, bad performance causes content to be completely inaccessible. a good goal for web performance is for users to not notice performance. while an individual's perception of site performance performance is subjective, loading and rendering can be measured. good performance may not be obvious to most site visitors, but most will immediately recognize a sluggish site. that is why we care. why care about performance? ...
...And 17 more matches

Web performance - Learn web development
building websites requires html, css, and javascript. to build websites and applications people want to use, which attract and retain users, you need to create a good user experience. part of good user experience is ensuring the content is quick to load and responsive to user interaction. this is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites. ...
... which attract and retain users, you need to create a good user experience. part of good user experience is ensuring the content is quick to load and responsive to user interaction. this is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites. the rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them. learning pathway while knowing html, css, and javascript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance. ...
...end that before you work through this module, you at least get a basic idea of web development by working through our getting started with the web module. ...
...And 17 more matches

<transform-function> - CSS: Cascading Style Sheets
perspective perspective() sets the distance between the user and the z=0 plane. rotation rotate() rotates an element around a fixed point on the 2d plane. ...
... perspective perspective() sets the distance between the user and the z=0 plane. rotation rotate() rotates an element around a fixed point on the 2d plane. ...
... perspective perspective() sets the distance between the user and the z=0 plane. rotation rotate() rotates an element around a fixed point on the 2d plane. ...
...And 17 more matches

Document.forms - Web APIs
the forms read-only property of the document interface returns an htmlcollection listing all the <form> elements contained in the document. note: similarly, you can access a list of a form's component user input elements using the htmlformelement.elements property. syntax collection = document.forms; value an htmlcollection object listing all of the document's forms. each item in the collection is a htmlformelement representing a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
...ss a list of a form's component user input elements using the htmlformelement.elements property. syntax collection = document.forms; value an htmlcollection object listing all of the document's forms. each item in the collection is a htmlformelement representing a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
...st of a form's component user input elements using the htmlformelement.elements property. syntax collection = document.forms; value an htmlcollection object listing all of the document's forms. each item in the collection is a htmlformelement representing a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
...And 16 more matches

PerformanceNavigationTiming - Web APIs
the performancenavigationtiming interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. for example, this interface can be used to determine how much time it takes to load or unload a document. ...
...termine how much time it takes to load or unload a document. ...
...n: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andal...
...And 16 more matches

ARIA: form role - Accessibility
the form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form. <div role="form" id="contact-info" aria-label="contact information"> <!-- form content --> </div> this is a form that collects and saves a user's contact information. important: use an html <form> element to contain your form controls, rather than the aria form role, unless you have a very good reason. the html <form> element is sufficient to tell assistive technologies that there is a form. description a form landmark identifies a region of content that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g. main or search). ...
...aria-labelledby, aria-label or title). ...
...the html <form> element is sufficient to tell assistive technologies that there is a form. description a form landmark identifies a region of content that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g. main or search). using the <form> element will automatically communicate a section of content as a form landmark, if it is provided an accessible name. developers should always prefer using the correct semantic html element over using aria. use the html <form> element if possible. the <form> element defines a form landmark when it has an accessible name (e.g. aria-labelledby, aria-label or title). ...
...And 16 more matches

transform - SVG: Scalable Vector Graphics
however, be aware that there are some difference in syntax between the css property and the attribute. ...
...however, be aware that there are some difference in syntax between the css property and the attribute. ...
...00/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property. however, be aware that there are some difference in syntax between the css property and the attribute. see the documentation for the css property transform for the specific syntax to use in that case. ...
...And 16 more matches

The business case for web performance - Learn web development
previous overview: performance we've discussed the importance of web performance. you've learned what you need to do to optimize for web performance. but how do you convince your clients and/or management to prioritize and invest in performance? in this section, we discuss creating a clear business-case to convince decision-makers to make the investment. prerequisites: basic computer literacy, basic knowledge of client-side web technologies, and a basic understanding of web performance optimization. objective: to gain confidence in working with clients and management to get them to make web performance a priority. making performance a business priority we've discussed how prioritizing performance can improve user experience and therefore revenue. w...
...f client-side web technologies, and a basic understanding of web performance optimization. objective: to gain confidence in working with clients and management to get them to make web performance a priority. making performance a business priority we've discussed how prioritizing performance can improve user experience and therefore revenue. we know that not prioritizing web performance can result in a loss of business revenue. this article discusses how certain business metrics directly relate to a user's web performance experience and how to apply service design to boost the user's experiences of web performance. ...
.... we know that not prioritizing web performance can result in a loss of business revenue. this article discusses how certain business metrics directly relate to a user's web performance experience and how to apply service design to boost the user's experiences of web performance. it highlights the importance of understanding how cumulative experiences impact conversion and retention rates. performance budgets setting a web performance budget can help you make sure the team stays on track in keeping the site and help prevent regressions. a performance budget is a set of limits that are set to specify limits, such as maximum number of http requests allowed, the maximum total size of all the assets combined, the minimum allowable fps on a specific device, etc, that must be maintained. the b...
...And 15 more matches

PerformanceResourceTiming - Web APIs
the performanceresourcetiming interface enables retrieval and analysis of detailed network timing data regarding the loading of an application's resources. an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script. the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc.. additionally, the interface extends performanceentry with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch. <div id="interfacediagram" style="displ...
...ce as well as the type of resource that initiated the fetch. ...
...n: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale ...
...And 15 more matches

Microformats - HTML: Hypertext Markup Language
summary microformats (sometimes abbreviated μf) are standards used to embed semantics & structured data in html, and provide an api to be used by search engines, aggregators, and other tools. these minimal patterns of html are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations, events, and locations. microformats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties. the properties are carried in class attributes that can be added to any html element, while the data values re-use html element content and semantic attributes. ...
...that range from fundamental to domain-specific information, such as people, organizations, events, and locations. microformats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties. the properties are carried in class attributes that can be added to any html element, while the data values re-use html element content and semantic attributes. microformats2 is an update to microformats that provides a simpler way of annotating html structured syntax & vocabularies than previous approaches of using rdfa and microdata which require learning new attributes. microformats are supported by all major search engines. ...
... to add a property to an object, the p-*, u-*, dt-*, e-* class names are used on one of the object's descendants. ...
...And 15 more matches

Intl.DateTimeFormat - JavaScript
the intl.datetimeformat object is a constructor for objects that enable language-sensitive date and time formatting. 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. constructor intl.datetimeformat() creates a new datetimeformat object. static methods intl.datetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.datetimeformat.prototype.format() getter function that formats a date according to the locale and formatting options of this datetimeformat object. intl.
...t object. static methods intl.datetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.datetimeformat.prototype.format() getter function that formats a date according to the locale and formatting options of this datetimeformat object. intl.datetimeformat.prototype.formattoparts() returns an array of objects representing the date string in parts that can be used for custom locale-aware formatting. intl.datetimeformat.prototype.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. ...
...g options of this datetimeformat object. intl.datetimeformat.prototype.formattoparts() returns an array of objects representing the date string in parts that can be used for custom locale-aware formatting. intl.datetimeformat.prototype.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. intl.datetimeformat.prototype.formatrange() this method receives two dates and formats the date range in the most concise way based on the locale and options provided when instantiating datetimeformat. intl.datetimeformat.prototype.formatrangetoparts() this method receives two dates and returns an array of objects containing the locale-specific tokens representing each part of the formatted date range. exampl...
...And 15 more matches

CSS performance optimization - Learn web development
for this reason, css is render blocking, unless the browser knows the css is not currently needed. the browser can paint the page once it has downloaded the css and built the css object model. browsers follow a specific rendering path: paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the dom and the cssom trees. to optimize the cssom construction, remove unnecessary styles, minify, compress and cache it, and split css not required at page load into additional files to reduce css render blocking. ...
...ads the stylesheet, but doesn't render block. by separating out the css into multiple files, the main render-blocking file, in this case 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...
...an 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 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, tran...
...And 14 more matches

JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance. this article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing javascript for web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the effects of javascript on performance optimization, and how a javascript file size is not the only impact on web performance. similar to images and video, the best way to improve performance is to omit what is not, in fact, necessary. but not all bytes downloaded h...
...we'll cover tips and tricks to minimize that impact on download. but javascript can also consume the main thread, the cpu, and the battery. it can make the ui feel unresponsive or janky. we'll introduce concepts for handling that as well. download impact web applications include a lot of javascript. ...
...epts for handling that as well. download impact web applications include a lot of javascript. many applications are built with a javascrpit framework, or multiple, with several additional dependencies. often times third party scripts and apis are added, including a/b testing, tracking pixels, and features like maps and support features. all of this javascript must be downloaded. eventually. performance optimizatins should include: reducing the amount of javascript that is needed. some features requiring complex javascript can be done with a few lines of javascript. requiring a library for other features may improve developer experience, but is all that javascript required? is there a lighter weight or home spun solutions? some features may not be necessary, and though they may add some ...
...And 14 more matches

JS_AddArgumentFormatter
obsolete since jsapi 18this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. add or remove a format string handler for js_convertarguments, js_pusharguments, js_convertargumentsva, and js_pushargumentsva. ...
... obsolete since jsapi 18this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. add or remove a format string handler for js_convertarguments, js_pusharguments, js_convertargumentsva, and js_pushargumentsva. ...
... obsolete since jsapi 18this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. add or remove a format string handler for js_convertarguments, js_pusharguments, js_convertargumentsva, and js_pushargumentsva. ...
...And 14 more matches

XForms Alert Element - Archive of obsolete content
type restrictions the alert element can be bound to any simple content. ...
...st in instance data, in a remote document, or as inline text. if more than one source of message is specified in this element, the order of precedence is: single node binding attributes, linking attributes, inline text. attributes single-node binding linking src - url of a document whose contents will be retrieved by the alert element and used to provide the alert message for the containing form control. type restrictions the alert element can be bound to any simple content. representations can be represented in two ways: modeless window that contains the alert element's message (default representation). the alert element's message can also be displayed immediately after the containing form control element in the xforms document's layout. this representation is used if the aler...
... be bound to any simple content. representations can be represented in two ways: modeless window that contains the alert element's message (default representation). the alert element's message can also be displayed immediately after the containing form control element in the xforms document's layout. this representation is used if the alert element has an inline display style. ...
...And 13 more matches

Images, media, and form elements - Learn web development
understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know. ...
...that replaced elements, when they become part of a grid or flex layout, have different default behaviors, essentially to avoid them being stretched strangely by the layout. to force the image to stretch to fill the grid cell it is in, you'd have to do something like following: img { width: 100%; height: 100%; } this would however stretch the image, so probably isn't what you'd want to do. ...
...lements, when they become part of a grid or flex layout, have different default behaviors, essentially to avoid them being stretched strangely by the layout. to force the image to stretch to fill the grid cell it is in, you'd have to do something like following: img { width: 100%; height: 100%; } this would however stretch the image, so probably isn't what you'd want to do. ...
...And 13 more matches

Web forms — Working with user data - Learn web development
this module provides a series of articles that will help you master the essentials of web forms. web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. however, for historical and technical reasons it's not always obvious how to use them to their full potential. in the articles listed below, we'll cover all the essential aspects of web forms including marking up their html structure, styling form controls, validating form data, and submitting data to the server. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, y...
... looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should at least work through our introduction to html. at this point you should find the introductory guides easy to understand, and also be able to make use of our basic native form controls guide. mastering forms however requires more than just html knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls. therefore, before you look at the other sections listed below we'd recommend that you go away and learn some css and javascript first.
...just html knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls. therefore, before you look at the other sections listed below we'd recommend that you go away and learn some css and javascript first. the above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the html, css, and javascript topic areas — form elements are more complex than most other html elements, and they also require a close marriage of related css and javascript techniques to get the most out of them. note: if you are working on a computer/tablet/other device where you don't have the ability to create you...
...And 13 more matches

Performance API - Web APIs
the high resolution time standard defines a performance interface that supports client-side latency measurements within applications. the performance interfaces are considered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). the interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource). since a platform's system clock is subject to various skews (such as ntp adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. as such, the performance api defines a domhighrestimestamp type rather than using the date.now() interface. domhighrestimestamp the domhighrestimestamp type, as ...
...the value could be a discrete point in time or the difference in time between two discrete points in time. the unit of domhighrestimestamp is milliseconds and should be accurate to 5 µs (microseconds). ...
...e in time between two discrete points in time. the unit of domhighrestimestamp is milliseconds and should be accurate to 5 µs (microseconds). however, if the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond. ...
...And 13 more matches

Index - XSLT: Extensible Stylesheet Language Transformations
2 common xslt errors xslt your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml. ...
... 2 common xslt errors xslt your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml. ...
... 2 common xslt errors xslt your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml. ...
...And 13 more matches

Understanding WebAssembly text format - WebAssembly
to enable webassembly to be read and edited by humans, there is a textual representation of the wasm binary format. this is an intermediate form designed to be exposed in text editors, browser developer tools, etc. this article explains how that text format works, in terms of the raw syntax, and how it is related to the underlying bytecode it represents — and the wrapper objects representing wasm in javascript. note: this is potentially overkill if you are a web developer who just wants to load a wasm module into a page and use it in your code (see using the webassembly javascript api), but it is more useful if for example, you want to write wasm modules to optimize the performance of your javascript library, or build your own webassembly compiler. s-expressions in both the binary and ...
...ript. note: this is potentially overkill if you are a web developer who just wants to load a wasm module into a page and use it in your code (see using the webassembly javascript api), but it is more useful if for example, you want to write wasm modules to optimize the performance of your javascript library, or build your own webassembly compiler. s-expressions in both the binary and textual formats, the fundamental unit of code in webassembly is a module. in the text format, a module is represented as one big s-expression. s-expressions are a very old and very simple textual format for representing trees, and thus we can think of a module as a tree of nodes that describe the module’s structure and its code. unlike the abstract syntax tree of a programming language, though, webassemb...
...s a tree with the root node “module” and two child nodes, a "memory" node with the attribute "1" and a "func" node. we’ll see shortly what these nodes actually mean. the simplest module let's start with the simplest, shortest possible wasm module. (module) this module is totally empty, but is still a valid module. if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some executable code to this module. all code in a webassembly module is grouped into functions, which have the followin...
...And 13 more matches

Mozilla XForms User Interface - Archive of obsolete content
introduction this article is a quick reference of the xforms user interface elements. mainly this is aimed to document how xforms elements will be presented in mozilla since the xforms specifications give only a hint of how controls might be rendered. currently xforms can be hosted by xhtml and xul in seamonkey and firefox. later we have plans to support xforms hosted by svg. the xforms specs define two kinds of xforms ui elements, called 'form controls' and 'xforms user interface'. elements from the "form controls" group allows users to interact with instance data. ...
...pecifications give only a hint of how controls might be rendered. currently xforms can be hosted by xhtml and xul in seamonkey and firefox. later we have plans to support xforms hosted by svg. the xforms specs define two kinds of xforms ui elements, called 'form controls' and 'xforms user interface'. elements from the "form controls" group allows users to interact with instance data. the set of "xforms user interface" elements exist to aid form authors in combining host language markup and xforms markup together in order to build user interfaces. some of the 'form controls' can have multiple appearances and thus may be rendered in multiple ways. ...
...ments from the "form controls" group allows users to interact with instance data. the set of "xforms user interface" elements exist to aid form authors in combining host language markup and xforms markup together in order to build user interfaces. some of the 'form controls' can have multiple appearances and thus may be rendered in multiple ways. we use the data type of the instance node that the form control is bound to as a clue when making a rendering decision. the form author can also use the 'appearance' attribute on the form control to give us another clue. for example, a xforms input control may appear as a text field or as a datepicker depending on whether it is bound to a xsd:string type or a xsd:date type. when a xf:output binds to a node that has a type of xsd:date, we output the da...
...And 12 more matches

Describing microformats in JavaScript - Archive of obsolete content
microformats are described in javascript by using a standardized structure format that has several standard members that describe the object. microformat definition format the microformat definition must contain the following entries: mfversion specifies the version number of the microformat api to which the definition was written. for firefox 3, this should be set to 0.8. mfobject the javascript object that implements the microformat. classname a string specifying the name of the microformat's class as referenced in html (class="classname"). required an array indicating the names of any properties that must be specified. this may be left out if all properties are optional. properties a structure describing the properties of the microformat. property specifications ea...
...fault value. subproperties it's possible for a property to itself include more properties; to do so, include them in a subproperties structure within the property. datatype the type of data contained by the property. ...
...ubproperties it's possible for a property to itself include more properties; to do so, include them in a subproperties structure within the property. datatype the type of data contained by the property. ...
...And 12 more matches

Parsing microformats in JavaScript - Archive of obsolete content
firefox 3 introduces a new api for managing and parsing microformats. this article examines the generic microformat parsing api, which handles the heavy lifting of pulling data out of a microformat. this api is primarily intended to be used when implementing new microformats. methods datetimegetter() specifically retrieves a date from a microformat node. after getting the text, it is normalized into an iso 8601 date. normalizeddate = microformats.parser.datetimegetter(propnode, parentnode); parameters propnode the dom node to check. parentnode the property's parent node. if it is a subproperty, this is the parent property node. otherwise this is the microformat node. ...
...ized into an iso 8601 date. normalizeddate = microformats.parser.datetimegetter(propnode, parentnode); parameters propnode the dom node to check. parentnode the property's parent node. if it is a subproperty, this is the parent property node. otherwise this is the microformat node. return value a string containing the normalized date. defaultgetter() uses the microformat patterns to decide what the correct text for a given microformat property is. this includes looking at thing such as abbr, img and alt, area and alt, and value excerpting. propertyvalue = microformats.parser.defaultgetter(propnode, parentnode, datatype); parameters propnode the dom node to check. parentnode the property's parent node. if it is a subproperty, this...
...icroformat property is. this includes looking at thing such as abbr, img and alt, area and alt, and value excerpting. propertyvalue = microformats.parser.defaultgetter(propnode, parentnode, datatype); parameters propnode the dom node to check. parentnode the property's parent node. if it is a subproperty, this is the parent property node. otherwise this is the microformat node. datatype "html" if the search should be done using innerhtml(), or "text" to use innertext(). the default is "text". return value a string containing the property's value. emailgetter() specifically retrieves an email address from a microformat node. this removes the subject if one is specified, as well as the mailto: prefix. ...
...And 12 more matches

CSS property compatibility table for form controls - Learn web development
however, they will give you good insight into what can and can't be done, which will help you learn how to do things. how to read the tables values for each property, there are four possible values: yes there's reasonably consistent support for the property across browsers. you may still face strange side effects in certain edge cases. partial while the property works, you may frequently face strange side effects or inconsistencies. ...
...iors are common to many browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers. be careful when you use them. line-height this property is supported inconsistently across browsers and you should avoid it. text-decoration this property is not supported by opera on form widgets. text-overflow opera, safari, and ie9 do not support this property on form widgets. text-shadow opera does not support text-shadow on form widgets and ie9 does not support it at all. text fields see the text, search, and password input types. property n t note css box model width yes yes height partial[1][2] yes ...
... 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...
...And 12 more matches

Transformations - Web APIs
« previousnext » earlier in this tutorial we've learned about the canvas grid and the coordinate space. until now, we only used the default grid and changed the size of the overall canvas for our needs. with transformations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it. saving and restoring state 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. save() saves the entire state of the canvas. restore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. a drawing state consists...
...n methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings. save() saves the entire state of the canvas. restore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. a drawing state consists of the transformations that have been applied (i.e. translate, rotate and scale – see below). the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled. the current clipping path, wh...
...ly in order to return to the previous state. this would be easy for two properties, but if we have more than that, our code would become very long, very fast. when the second restore() statement is called, the original state (the one we set up before the first call to save) is restored and the last rectangle is once again drawn in black. screenshotlive sample translating the first of the transformation methods we'll look at is translate(). this method is used to move the canvas and its origin to a different point in the grid. translate(x, y) moves the canvas and its origin on the grid. x indicates the horizontal distance to move, and y indicates how far to move the grid vertically. it's a good idea to save the canvas state before doing any transformations. in most cases, it is just e...
...And 12 more matches

GlobalEventHandlers.onformdata - Web APIs
the onformdata property of the globaleventhandlers mixin is the eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed. this happens when the form is submitted, but can also be triggered by the invocation of a formdata() constructor. onformdata is available on htmlformelement. syntax target.onformdata = functionref; value functionref is a function name or a function expression. the function receives a formdataevent object as its sole argument. ...
...ng the form's data is constructed. this happens when the form is submitted, but can also be triggered by the invocation of a formdata() constructor. onformdata is available on htmlformelement. syntax target.onformdata = functionref; value functionref is a function name or a function expression. the function receives a formdataevent object as its sole argument. ...
...s data is constructed. this happens when the form is submitted, but can also be triggered by the invocation of a formdata() constructor. onformdata is available on htmlformelement. syntax target.onformdata = functionref; value functionref is a function name or a function expression. the function receives a formdataevent object as its sole argument. ...
...And 12 more matches

Visual formatting model - CSS: Cascading Style Sheets
in css the visual formatting model describes how user agents take the document tree, and process and display it for visual media. this includes continuous media such as a computer screen and paged media such as a book or document printed by browser print functions. most of the information applies equally to continuous and paged media. in the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. the layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree. external information (e.g., viewport size, intrinsic dimensions of images, etc.). ...
...when reading specifications you will often find references to the model as defined in css2, so an understanding of the model and the terms used to describe it in css2 is valuable when reading other layout specifications. ...
...ent in the document tree generates zero or more boxes according to the box model. the layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree. external information (e.g., viewport size, intrinsic dimensions of images, etc.). much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have added to this information. when reading specifications you will often find references to the model as defined in css2, so an understanding of the model and the terms used to describe it in css2 is valuable when reading other layout specifications. in this document we define the model and introduce some of the related te...
...And 12 more matches

Populating the page: how browsers work - Web Performance
users want web experiences with content that is fast to load and smooth to interact with. therefore, a developer should strive to achieve these two goals. to understand how to improve performance and perceived performance, it helps to understand how the browser works. overview fast sites provide better user experiences. users want and expect web experiences with content that is fast to load and smooth to interact with. ...
... load and smooth to interact with. therefore, a developer should strive to achieve these two goals. to understand how to improve performance and perceived performance, it helps to understand how the browser works. overview fast sites provide better user experiences. users want and expect web experiences with content that is fast to load and smooth to interact with. two major issues in web performance are understanding issues having to do with latency and issues having to do with the fact that for the most part, browsers are single threaded. latency is our main threat to overcome to ensure a fast load. to be fast to load, the developers’ goals include sending requested information as fast as possible, or at least seem super fast. network latency is the time it takes to transmit bytes ov...
...ving to do with latency and issues having to do with the fact that for the most part, browsers are single threaded. latency is our main threat to overcome to ensure a fast load. to be fast to load, the developers’ goals include sending requested information as fast as possible, or at least seem super fast. network latency is the time it takes to transmit bytes over-the-air to computers. web performance is what we have to do to make the page load happen as quickly as possible. for the most part, browsers are considered single threaded. for smooth interactions, the developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch. render time is key, with ensuring the main thread can complete all the work we throw at it and still always be availab...
...And 12 more matches

How to build custom form controls - Learn web development
in this article, we will discuss how to build a custom control. to that end, we will work with an example: rebuilding the <select> element. we will also discuss how, when, and whether building your own control makes sense, and what to consider when building a control is a requirement. ...
...t device companies can't do. it is best not to invent new user interactions. for any interaction you do add, it is vital to spend time in the design stage; if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. if you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to perform user tests. this process is called ux design. if you want to learn more about this topic, you should check out the following helpful resources: uxmatters.com uxdesign.com the ux design section of smashingmagazine note: also, in most systems there is a way to open the <select> element with the keyboard to look at all the available choices (this is the same as clicking the <select> element ...
... to display the current value of the control --> <span class="value">cherry</span> <!-- this container will contain all the options available for our control. because it's a list, it makes sense to use the ul element. --> <ul class="optlist"> <!-- each option only contains the value to be displayed, we'll see later how to handle the real value that will be sent with the form data --> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> note the use of class names; these identify each relevant part regardless of the actual underlying html elements used. this is important to make sure that we don't bind our css and javascript to a...
...And 11 more matches

FormDataEvent - Web APIs
the formdataevent interface represents a formdata event — such an event is fired on an htmlformelement object after the entry list representing the form's data is constructed. this happens when the form is submitted, but can also be triggered by the invocation of a formdata() constructor. this allows a formdata object to be quickly obtained in response to a formdata event firing, rather than needing to put it together yourself when you wish to submit form data via a method like xmlhttprequest (see using formdata objects). constructor formdataevent() creates a new formdataevent object instance. properties inherits properties from its parent interface, event. formdataevent.formdata contains the formdata object representing the data contained in the form when the event was fired. ...
...est (see using formdata objects). constructor formdataevent() creates a new formdataevent object instance. properties inherits properties from its parent interface, event. formdataevent.formdata contains the formdata object representing the data contained in the form when the event was fired. methods inherits methods from its parent interface, event. ...
...ng formdata objects). constructor formdataevent() creates a new formdataevent object instance. properties inherits properties from its parent interface, event. formdataevent.formdata contains the formdata object representing the data contained in the form when the event was fired. methods inherits methods from its parent interface, event. ...
...And 11 more matches

PerformanceEntry.duration - Web APIs
"resource" - returns the difference between the resource's responseend timestamp and its starttime timestamp. ...
... "resource" - returns the difference between the resource's responseend timestamp and its starttime timestamp. ...
...e in web workers. the value returned by this property depends on the performance entry's type: "frame" - returns a timestamp indicating the difference between the starttimes of two successive frames. "mark" - returns "0" (a mark has no duration). "measure" - returns the timestamp that is the duration of the measure. "navigation" - returns the timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties, respectively. "resource" - returns the difference between the resource's responseend timestamp and its starttime timestamp. this property is read only . syntax entry.duration; return value a domhighrestimestamp representing the duration of the performance entry. if the duration concept doesn't apply for a particula...
...And 11 more matches

Performance Timeline - Web APIs
the performance timeline api defines extensions to the performance interface to support client-side latency measurements within applications. the extensions provide interfaces to retrieve performance entry metrics based on specific filter criteria. the standard also includes interfaces that allow an application to define performance observer callbacks that are notified when specific performance events are added to the browser's performance timeline. this document provides an overview of the standard's interfaces. for more details about the interfaces, see the reference pages and using performance timeline. ...
... on specific filter criteria. the standard also includes interfaces that allow an application to define performance observer callbacks that are notified when specific performance events are added to the browser's performance timeline. this document provides an overview of the standard's interfaces. for more details about the interfaces, see the reference pages and using performance timeline. performance extensions the performance timeline api extends the performance interface with three methods that provide different mechanisms to get a set of performance records (metrics), depending on the specified filter criteria. ...
...'s interfaces. for more details about the interfaces, see the reference pages and using performance timeline. performance extensions the performance timeline api extends the performance interface with three methods that provide different mechanisms to get a set of performance records (metrics), depending on the specified filter criteria. the methods are: getentries() returns all recorded performance entries or, optionally, the entries based on the specified name, performance type and/or the initiatortype (such as an html element). getentriesbyname() returns the recorded performance entries based on the specified name and optionally the performance type. ...
...And 11 more matches

WebGLRenderingContext.getUniformLocation() - Web APIs
part of the webgl api, the webglrenderingcontext method getuniformlocation() returns the location of a specific uniform variable which is part of a given webglprogram. the uniform variable is returned as a webgluniformlocation object, which is an opaque identifier used to specify where in the gpu's memory that uniform variable is located. once you have the uniform's location, you can access the uniform itself using one of the other uniform access methods, passing in the uniform location as one of the inputs: getuniform() returns the value of the uniform at the given location. ...
...returned as a webgluniformlocation object, which is an opaque identifier used to specify where in the gpu's memory that uniform variable is located. once you have the uniform's location, you can access the uniform itself using one of the other uniform access methods, passing in the uniform location as one of the inputs: getuniform() returns the value of the uniform at the given location. uniform[1234][fi][v]() sets the uniform's value to the specified value, which may be a single floating point or integer number, or a 2-4 component vector specified either as a list of values or as a float32array or int32array. uniformmatrix[234][fv]() sets the uniform's value to the specified matrix, possibly with transposition. the value is represented as a sequence of glfloat values or as a float32a...
... sets the uniform's value to the specified value, which may be a single floating point or integer number, or a 2-4 component vector specified either as a list of values or as a float32array or int32array. uniformmatrix[234][fv]() sets the uniform's value to the specified matrix, possibly with transposition. the value is represented as a sequence of glfloat values or as a float32array. the uniform itself is declared in the shader program using glsl. syntax webgluniformlocation = webglrenderingcontext.getuniformlocation(program, name); parameters program the webglprogram in which to locate the specified uniform variable. name a domstring specifying the name of the uniform variable whose location is to be returned. the name can't have any whitespace in it, and you can't use this fu...
...And 11 more matches

XRRigidTransform.inverse - Web APIs
in other words, its position and orientation both return to their prior configurations. ...
...in other words, its position and orientation both return to their prior configurations. ...
...in other words, its position and orientation both return to their prior configurations. ...
...And 11 more matches

transform-box - CSS: Cascading Style Sheets
values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. border-box the border box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. ...
... values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. border-box the border box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. ...
... values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. border-box the border box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. ...
...And 11 more matches

transform-style - CSS: Cascading Style Sheets
the transform-style css property sets whether children of an element are positioned in the 3d space or are flattened in the plane of the element. 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. if flattened, the element's children will not exist on their own in the 3d-space. as this property is not inherited, it must be set for all non-leaf descendants of the element. ...
...e 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. if flattened, the element's children will not exist on their own in the 3d-space. as this property is not inherited, it must be set for all non-leaf descendants of the element. ...
... 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. if flattened, the element's children will not exist on their own in the 3d-space. as this property is not inherited, it must be set for all non-leaf descendants of the element. ...
...And 11 more matches

FormData() - Web APIs
the formdata() constructor creates a new formdata object. note: this feature is available in web workers. syntax var formdata = new formdata(form) parameters form optional an html <form> element — when specified, the formdata object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. it will also encode file input content. ...
... available in web workers. syntax var formdata = new formdata(form) parameters form optional an html <form> element — when specified, the formdata object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. it will also encode file input content. ...
...ers. syntax var formdata = new formdata(form) parameters form optional an html <form> element — when specified, the formdata object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. it will also encode file input content. ...
...And 10 more matches

performance.getEntriesByName() - Web APIs
the getentriesbyname() method returns a list of performanceentry objects for the given name and type. the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time. note: this feature is available in web workers. syntax entries = window.performance.getentriesbyname(name, type); arguments name the name of the entry to retrieve. type optional the type of entry to retrieve such as "mark". the valid entry types are listed in performanceentry.entrytype. return value entries a list of performanceentry objects that have the specified name and type. if the type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order bas...
...rformanceentry.entrytype. return value entries a list of performanceentry objects that have the specified name and type. if the type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order based on the entries' starttime. if no objects meet the specified criteria, an empty list is returned. example function use_performanceentry_methods() { log("performanceentry tests ..."); if (performance.mark === undefined) { log("... ...
... type. if the type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order based on the entries' starttime. if no objects meet the specified criteria, an empty list is returned. example function use_performanceentry_methods() { log("performanceentry tests ..."); if (performance.mark === undefined) { log("... ...
...And 10 more matches

performance.getEntriesByType() - Web APIs
the getentriesbytype() method returns a list of performanceentry objects for a given type. the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time. note: this feature is available in web workers. syntax entries = window.performance.getentriesbytype(type); arguments type the type of entry to retrieve such as "mark". the valid entry types are listed in performanceentry.entrytype. return value entries a list of performanceentry objects that have the specified type. the items will be in chronological order based on the entries' starttime. if no objects have the specified type, or no argument is provided, an empty list is returned. ...
... the type of entry to retrieve such as "mark". the valid entry types are listed in performanceentry.entrytype. return value entries a list of performanceentry objects that have the specified type. the items will be in chronological order based on the entries' starttime. if no objects have the specified type, or no argument is provided, an empty list is returned. example function useperformanceentrymethods() { log("performanceentry tests ..."); if (performance.mark === undefined) { log("... ...
... value entries a list of performanceentry objects that have the specified type. the items will be in chronological order based on the entries' starttime. if no objects have the specified type, or no argument is provided, an empty list is returned. example function useperformanceentrymethods() { log("performanceentry tests ..."); if (performance.mark === undefined) { log("... ...
...And 10 more matches

WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the webgl2renderingcontext.uniform[1234][uif][v]() methods of the webgl api specify values of uniform variables. ui stands for unsigned integer, i for integer, f for float, and v for vector. not all combinations are valid: u cannot be combined with f. see the syntax table below. ...
... the webgl2renderingcontext.uniform[1234][uif][v]() methods of the webgl api specify values of uniform variables. ui stands for unsigned integer, i for integer, f for float, and v for vector. not all combinations are valid: u cannot be combined with f. see the syntax table below. ...
... the webgl2renderingcontext.uniform[1234][uif][v]() methods of the webgl api specify values of uniform variables. ui stands for unsigned integer, i for integer, f for float, and v for vector. not all combinations are valid: u cannot be combined with f. see the syntax table below. ...
...And 10 more matches

WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
the webglrenderingcontext.uniform[1234][fi][v]() methods of the webgl api specify values of uniform variables. all active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. they retain the values assigned to them by a call to this method until the next successful link operation occurs on the program object, when they are once again initialized to 0. many of the functions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uniform[1234][uif][v](). ...
... to 0 when the program object is linked successfully. they retain the values assigned to them by a call to this method until the next successful link operation occurs on the program object, when they are once again initialized to 0. many of the functions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uniform[1234][uif][v](). ...
...linked successfully. they retain the values assigned to them by a call to this method until the next successful link operation occurs on the program object, when they are once again initialized to 0. many of the functions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uniform[1234][uif][v](). ...
...And 10 more matches

Basic form hints - Accessibility
when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control. when a screen reader user navigates a page, the screen reader will describe form controls. without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...reader user navigates a page, the screen reader will describe form controls. without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...wai-aria, the accessible rich internet applications specification from the w3c's web accessibility initiative, provides the aria-labelledby attribute for these cases. the example below shows a radio button group ...
...And 10 more matches

XForms - Archive of obsolete content
obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. note: support for xforms was removed from firefox in firefox 19. see the html forms guide for approaches to creating forms in html5. xforms essentials an online book giving you a guided tour of xforms. xforms were envisioned as the future of online forms as envisioned by the w3c. ...
...moved at any time. try to avoid using it. note: support for xforms was removed from firefox in firefox 19. see the html forms guide for approaches to creating forms in html5. xforms essentials an online book giving you a guided tour of xforms. xforms were envisioned as the future of online forms as envisioned by the w3c. drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model. however, xforms never gained traction and is now considered obsolete. ...
...ml5. xforms essentials an online book giving you a guided tour of xforms. xforms were envisioned as the future of online forms as envisioned by the w3c. drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model. however, xforms never gained traction and is now considered obsolete. other strengths that xforms brings to the table is the separation of data from presentation, strong data typing, the ability to submit xml data to servers instead of name/value pairs, and a descriptive way to author forms so that they can be displayed by a wide variety of devices. xforms is a w3c specification. xforms tutorial and cookbook xforms in wikibook format - over 50 examples tested with firefox. ...
...And 9 more matches

Advanced text formatting - Learn web development
previous overview: introduction to html next there are many other elements in html for formatting text, which we didn't get to in the html text fundamentals article. the elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to use lesser-known html elements to mark up advanced semantic features. description lists in html text fundamentals, we walked t...
...elings and in the process relaying them to the audience (but not to other characters.) monologue in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. aside in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought or piece of additional background information description lists use a different wrapper than the other list types — <dl>; in addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element. let's finish marking up our example: <dl> <dt>soliloquy</dt> <dd>in drama, where a character speaks to themselves, representing their inner thoughts or feelings a...
...e audience (but not to other characters.)</dd> <dt>monologue</dt> <dd>in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> <dt>aside</dt> <dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought, or piece of additional background information.</dd> </dl> the browser default styles will display description lists with the descriptions indented somewhat from the terms. note that it is permitted to have a single term with multiple descriptions, for example: <dl> <dt>aside</dt> <dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought, or piec...
...And 9 more matches

HTMLFormElement.elements - Web APIs
the htmlformelement property elements returns an htmlformcontrolscollection listing all the form controls contained in the <form> element. independently, you can obtain just the number of form controls using the length property. you can access a particular form control in the returned collection by using either an index or the element's name or id. prior to html 5, the returned object was an htmlcollection, on which htmlformcontrolscollection is based. note: similarly, you can get a list of all of the forms contained within a given document using the document's forms property. syntax nodelist = htmlformelement.elements value an htmlformcontrolscollection containing all non-image controls in the form. ...
.... prior to html 5, the returned object was an htmlcollection, on which htmlformcontrolscollection is based. note: similarly, you can get a list of all of the forms contained within a given document using the document's forms property. syntax nodelist = htmlformelement.elements value an htmlformcontrolscollection containing all non-image controls in the form. this is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change. the form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. this is called tree order. ...
... containing all non-image controls in the form. this is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change. the form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. this is called tree order. the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. example quick...
...And 9 more matches

Performance - Web APIs
the performance interface provides access to performance-related information for the current page. it's part of the high resolution time api, but is enhanced by the performance timeline api, the navigation timing api, the user timing api, and the resource timing api. an object of this type can be obtained by calling the window.performance read-only attribute. note: this interface and its members are available in web workers, except where indicated below. also, note that performance markers and measures are per context. if you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa. properties the performance interface doesn't inherit any properties. ...
...the window.performance read-only attribute. note: this interface and its members are available in web workers, except where indicated below. also, note that performance markers and measures are per context. if you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa. properties the performance interface doesn't inherit any properties. performance.navigation read only a legacy performancenavigation object that provides useful context about the operations included in the times listed in timing, including whether the page was a load or a refresh, how many redirections occurred, and so forth. not available in workers. ...
... worker thread, and vice versa. properties the performance interface doesn't inherit any properties. performance.navigation read only a legacy performancenavigation object that provides useful context about the operations included in the times listed in timing, including whether the page was a load or a refresh, how many redirections occurred, and so forth. not available in workers. performance.timing read only a legacy performancetiming object containing latency-related performance information. not available in workers. performance.memory read only a non-standard extension added in chrome, this property provides an object with basic memory usage information. you should not use this non-standard api. ...
...And 9 more matches

PerformanceEntry.name - Web APIs
the name property of the performanceentry interface returns a value that further specifies the value returned by the performanceentry.entrytype property. this property is read only. note: this feature is available in web workers. syntax var name = entry.name; return value the return value depends on the subtype of the performanceentry object and the value of performanceentry.entrytype, as shown by the table below. value subtype entrytype values description url performanceframetiming, performancenavigationtiming frame, navigation the document's address. url performanceresourcetiming resource the resolved url of the requested resource. this value doesn't change even if the request is redirected. ...
..., as shown by the table below. value subtype entrytype values description url performanceframetiming, performancenavigationtiming frame, navigation the document's address. url performanceresourcetiming resource the resolved url of the requested resource. this value doesn't change even if the request is redirected. domstring performancemark mark the name used when the mark was created by calling performance.mark(). domstring performancemeasure measure name used when the measure was created by calling performance.measure(). domstring performancepainttiming paint either 'first-paint' or 'first-contentful-paint'. example the following example shows the use of the name property. ...
... the name used when the mark was created by calling performance.mark(). domstring performancemeasure measure name used when the measure was created by calling performance.measure(). domstring performancepainttiming paint either 'first-paint' or 'first-contentful-paint'. example the following example shows the use of the name property. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... ...
...And 9 more matches

PerformanceEntry.startTime - Web APIs
the starttime property returns the first recorded timestamp of the performance entry. note: this feature is available in web workers. the value returned by this property depends on the performance entry's type: "frame" - returns the timestamp when the frame was started. "mark" - returns the timestamp when the mark was created by a call to performance.mark(). "measure" - returns the timestamp when the measure was created by a call to performance.measure(). "navigation" - returns the timestamp with a value of "0". "resource" - returns the timestamp immediately before the browser starts fetching the resource. this property is read only . syntax entry.starttime; return value a domhighrestimestamp representing the first timestamp when the performance entry was created. note: if the...
...the measure was created by a call to performance.measure(). "navigation" - returns the timestamp with a value of "0". "resource" - returns the timestamp immediately before the browser starts fetching the resource. this property is read only . syntax entry.starttime; return value a domhighrestimestamp representing the first timestamp when the performance entry was created. note: if the performance entry has an entrytype of "resource" (i.e. the entry is a performanceresourcetiming object), this property returns the performanceentry.fetchstart timestamp. example the following example shows the use of the starttime property. ...
...ntry.starttime; return value a domhighrestimestamp representing the first timestamp when the performance entry was created. note: if the performance entry has an entrytype of "resource" (i.e. the entry is a performanceresourcetiming object), this property returns the performanceentry.fetchstart timestamp. example the following example shows the use of the starttime property. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... ...
...And 9 more matches

PerformancePaintTiming - Web APIs
the performancepainttiming interface of the paint timing provides timing information about "paint" (also called "render") operations during web page construction. "paint" refers to conversion of the render tree to on-screen pixels. an application can register a performanceobserver for "paint" performance entry types and the observer can retrieve the times that paint events occur. use this information to help identify areas that take too long to provide a good user experience. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:hre...
... areas that take too long to provide a good user experience. ...
...n: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mon...
...And 9 more matches

Compressed texture formats - Web APIs
the webgl api provides methods to use compressed texture formats. these are useful to increase texture detail while limiting the additional video memory necessary. by default, no compressed formats are available: a corresponding compressed texture format extension must first be enabled. usage unless otherwise specified, this article applies to both webgl 1 and 2 contexts. if supported, textures can be stored in a compressed format in video memory. this allows for additional detail while limiting the added video memory necessary. textures are uncompressed on the fly when being accessed by a shader. ...
...led. usage unless otherwise specified, this article applies to both webgl 1 and 2 contexts. if supported, textures can be stored in a compressed format in video memory. this allows for additional detail while limiting the added video memory necessary. textures are uncompressed on the fly when being accessed by a shader. note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png and jpg. ...
...onal detail while limiting the added video memory necessary. textures are uncompressed on the fly when being accessed by a shader. note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png and jpg. as compressed textures require hardware support, therefore no specific formats are required by webgl; instead, a context can make different formats available, depending on hardware support. this site shows which formats are supported in the used browser. ...
...And 9 more matches

Intl.DateTimeFormat() constructor - JavaScript
the intl.datetimeformat() constructor for objects that enable language-sensitive date and time formatting. 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 new intl.datetimeformat([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. to use the browser's default locale, omit this argument or pass undefined. unicode extension are supported (for example "en-us-u-ca-buddhist"). for the general form and interpretation of the locales argument, see the intl page. the following unicode extension keys are allowed: nu numbering system. possibl...
...a", "tamldec", "telu", "thai", "tibt". ca calendar. possible values include: "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc". hc hour cycle. possible values include: "h11", "h12", "h23", "h24". options optional an object with some or all of the following properties: datestyle the date formatting style to use when calling format(). possible values include: "full" "long" "medium" "short" timestyle the time formatting style to use when calling format(). possible values include: "full" "long" "medium" "short" fractionalseconddigits the number of fractional seconds to apply when calling format(). valid values are 0-3. calendar calend...
..." long". numberingsystem numbering system. possible values include: "arab", "arabext", " bali", "beng", "deva", "fullwide", " gujr", "guru", "hanidec", "khmr", " knda", "laoo", "latn", "limb", "mlym", " mong", "mymr", "orya", "tamldec", " telu", "thai", "tibt". localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". for information about this option, see the intl page. timezone the time zone to use. the only value implementations must recognize is "utc"; the default is the runtime's default time zone. implementations may also recognize the time zone names of the iana time zone database, such as "asia/shanghai", "asia/kolkata", "america/new_york". hour12 whether to use 12-hour time (as opposed to 24-hour time). ...
...And 9 more matches

Intl.NumberFormat - JavaScript
the intl.numberformat object is a constructor for objects that enable language sensitive number formatting. 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. constructor intl.numberformat() creates a new numberformat object. static methods intl.numberformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.numberformat.prototype.format() getter function that formats a number according to the locale and formatting options of this numberformat object. ...
...rformat object. static methods intl.numberformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.numberformat.prototype.format() getter function that formats a number according to the locale and formatting options of this numberformat object. intl.numberformat.prototype.formattoparts() returns an array of objects representing the number string in parts that can be used for custom locale-aware formatting. intl.numberformat.prototype.resolvedoptions() returns a new object with properties reflecting the locale and collation options computed during initialization of the object. ...
...rformat.prototype.formattoparts() returns an array of objects representing the number string in parts that can be used for custom locale-aware formatting. intl.numberformat.prototype.resolvedoptions() returns a new object with properties reflecting the locale and collation options computed during initialization of the object. examples basic usage in basic use without specifying a locale, a formatted string in the default locale and with default options is returned. var number = 3500; console.log(new intl.numberformat().format(number)); // → '3,500' if in us english locale using locales this example shows some of the variations in localized number formats. ...
...And 9 more matches

Media type and format guide: image, audio, and video content - Web media technologies
since nearly its beginning, the web has included support for some form of visual media presentation. originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. the modern web has powerful features to support the presentation and manipulation of media, with several media-related apis supporting various types of content. generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer. this guide provides an overview of the media file types, codecs, and algorithms that may comprise media used on the web. ...
...n and manipulation of media, with several media-related apis supporting various types of content. generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer. this guide provides an overview of the media file types, codecs, and algorithms that may comprise media used on the web. it also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content. ...
...can complicate the work of a web developer. this guide provides an overview of the media file types, codecs, and algorithms that may comprise media used on the web. it also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content. ...
...And 9 more matches

Mozilla XForms Specials - Archive of obsolete content
this covers both limitations in the extension, and custom extensions. limitations repeat using attributes the specifications mentions "creating repeating structures via attributes", this is partially supported. (limitation tracked in bug 280368) mixing repeat and table or ul it is not possible to mix repeats with either table or ul. that means that it is not possible to do: <table> <xf:repeat ...> <tr> ... </tr> </xf:repeat> </table> or <ul> <xf:repeat ...> <li> ... </li> </xf:repeat> </ul> section 9.3.2 states that mixing with table will probably never work. ...
...either table or ul. that means that it is not possible to do: <table> <xf:repeat ...> <tr> ... </tr> </xf:repeat> </table> or <ul> <xf:repeat ...> <li> ... </li> </xf:repeat> </ul> section 9.3.2 states that mixing with table will probably never work. mixing with ul might suffer from the same limitation. pseudo-class support we currently support all the css pseudo-classes in xforms (:enabled, :disabled, etc. ), except for :read-only and :read-write, because of non-specified behaviour of these for (x)html. instead you have to use :-moz-read-only and :-moz-read-write for now. (limitation tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ). instead you will have to use the following normal clas...
...nly and :-moz-read-write for now. (limitation tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ). instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to target the value element of an input control use: @namespace xf url("http://www.w3.org/2002/xforms"); xf|input .xf-value { ... } the pseudo elements are defined in the css3 basic user interface specification . (limitation tracked in bug 271724) optional parameters in xpath functions optional parameters in xpath functions are not supported, you will have to specify all parameters when calling a function. this affects functions like hmac() or digest(). instead of using digest('abc', 'sha-1'...
...And 8 more matches

Displaying Places information using views
an nsinavhistoryresult instance provides the data for a view. the view is responsible for expanding the root nsinavhistorycontainerresultnode of this instance and displaying the nsinavhistoryresultnode objects contained therein. ...
... of the view, you might specify the place attribute directly in the xul. for more complicated queries or queries whose uris you plan on changing, you will want to set the view's place property dynamically using javascript. note that in the latter case it is not sufficient to call setattribute on the element; use the element's place property instead. see querying places and places query uris for information on query uris. the following example uses the built-in tree view to display bookmarks whose titles or urls contain "mozilla". remember that, because xul is xml, any ampersands in query uris must be written as entity reference &amp; and not simply &. <tree type="places" place="place:terms=mozilla&amp;onlybookmarked=1&amp;querytype=1"> <treecols> <treecol id="title" label="my bookmarks...
...w by setting the type attribute to "places" on a tree element. the treechildren element should be empty: <tree type="places"> <treecols> <treecol id="title" flex="1" primary="true" /> <treecol id="url" flex="1" /> </treecols> <treechildren /> </tree> the tree view is implemented in browser/components/places/content/tree.xml. see the tree reference and trees tutorial for general information about trees. if you would like your tree view to be styled in the same manner that firefox styles its uses of the view, you should include the following stylesheet. note that this stylesheet is different from the one given above, which must be included if you use a built-in places view. the following stylesheet is optional and only applies styles and icons to the built-in tree view: <?xml-...
...And 8 more matches

FormData.set() - Web APIs
value the field's value. ...
... value the field's value. ...
... value the field's value. ...
...And 8 more matches

PerformanceEntry.entryType - Web APIs
the entrytype property returns a domstring representing the type of performance metric such as, for example, "mark". this property is read only. note: this feature is available in web workers. syntax var type = entry.entrytype; return value the return value depends on the subtype of the performanceentry object and affects the value of the performanceentry.name property as shown by the table below. performance entry type names value subtype type of name property description of name property frame, navigation performanceframetiming, performancenavigationtiming url the document's address. resource performanceresourcetiming url the resolved url of the requested resource. this value doesn't change even if the request is redirected. ...
...ry type names value subtype type of name property description of name property frame, navigation performanceframetiming, performancenavigationtiming url the document's address. resource performanceresourcetiming url the resolved url of the requested resource. this value doesn't change even if the request is redirected. mark performancemark domstring the name used when the mark was created by calling performance.mark(). measure performancemeasure domstring name used when the measure was created by calling performance.measure(). ...
...eresourcetiming url the resolved url of the requested resource. this value doesn't change even if the request is redirected. mark performancemark domstring the name used when the mark was created by calling performance.mark(). measure performancemeasure domstring name used when the measure was created by calling performance.measure(). paint performancepainttiming domstring either 'first-paint' or 'first-contentful-paint'. ...
...And 8 more matches

PerformanceEntry - Web APIs
the performanceentry object encapsulates a single performance metric that is part of the performance timeline. a performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. performance entries are also created in indirect ways such as loading a resource (such as an image). performanceentry instances will always be one of the following subtypes: performancemark performancemeasure performanceframetiming performancenavigationtiming performanceresourcetiming performancepainttiming note: this feature is available in web workers. properties performanceentry.name read only a value that further specifies the value returned by the performanceentry.entrytype property. the value of b...
... performancemeasure performanceframetiming performancenavigationtiming performanceresourcetiming performancepainttiming note: this feature is available in web workers. properties performanceentry.name read only a value that further specifies the value returned by the performanceentry.entrytype property. the value of both depends on the subtype. see property page for valid values. performanceentry.entrytype read only a domstring representing the type of performance metric such as, for example, "mark". see property page for valid values. performanceentry.starttime read only a domhighrestimestamp representing the starting time for the performance metric. ...
...rformanceentry.entrytype property. the value of both depends on the subtype. see property page for valid values. performanceentry.entrytype read only a domstring representing the type of performance metric such as, for example, "mark". see property page for valid values. performanceentry.starttime read only a domhighrestimestamp representing the starting time for the performance metric. performanceentry.duration read only a domhighrestimestamp representing the time value of the duration of the performance event. methods performanceentry.tojson() returns a json representation of the performanceentry object. example the following example checks all performanceentry properties to see if the browser supports them and if so, write their values to the console. function print_perfo...
...And 8 more matches

Using the Performance API - Web APIs
a fundamental requirement of web performance is a precise and consistent definition of time. the domhighrestimestamp type (a double) is used by all performance interfaces to hold such time values. additionally, there must be a way to create a timestamp for a specific point in time; this is done with the now() method. web performance interfaces are defined in a suite of standards. the base interface for these standards is the performance interface and its methods and properties are extended by different standards. this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. other web performance guides (listed in the see also section) describe how to use additional methods and properties of the performance interface. high precision timing ...
...for time values. the unit is milliseconds and should be accurate to 5 µs (microseconds). however, if the browser is unable to provide a time value accurate to 5 microseconds (because of hardware or software constraints, for example), the browser can represent the value as a time in milliseconds accurate to a millisecond. ...
...rate to a millisecond. the following code example shows the use of domhighrestimestamp and the performance.now() method. the now() method returns a timestamp (of type domhighrestimestamp) that is a discrete point in time. by calling this method before and after a task, the time it takes to do the task can be measured. function calculate_time() { var starttime; var endtime; starttime = performance.now(); do_task(); endtime = performance.now(); return (endtime - starttime); } serializing the performance object json serialization of the performance object is done via the tojson() method. in the following example, json serialization for the performance, performance.timing and performance.navigation objects is printed in the object element. function print_json() { var json; ...
...And 8 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. ...
...t media stylesheets. note that firefox will override your xslt stylesheet if your xml is detected as an rss or atom feed. a known 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,...
... 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 8 more matches

Intl.ListFormat - JavaScript
the intl.listformat object is a constructor for objects that enable language-sensitive list formatting. 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. constructor intl.listformat() creates a new listformat object. static methods intl.listformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.listformat.prototype.format() returns a language-specific formatted string representing the elements of the list. ...
...intl.listformat() creates a new listformat object. static methods intl.listformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.listformat.prototype.format() returns a language-specific formatted string representing the elements of the list. intl.listformat.prototype.formattoparts() returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fashion. examples using format the following example shows how to create a list formatter using the english language. ...
...esenting the elements of the list. intl.listformat.prototype.formattoparts() returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fashion. examples using format the following example shows how to create a list formatter using the english language. ...
...And 8 more matches

Privacy, permissions, and information security
as users use the web for more and more of their daily tasks, more of their private or personally-identifying information they share, ideally only with sites they trust. cooperation among web content, the web browser, and the web server is needed to achieve as much privacy and information security as possible. in this article, we examine how to create web content that minimizes the risk of users' personal information or imagery being obtained unexpectedly by third parties. security and privacy defined before we go into any depth about the various security and privacy features available to users on the web, let's define some important terms. ...
...as such, pii extends beyond the web to all aspects of life. ...
...as such, pii extends beyond the web to all aspects of life. ...
...And 8 more matches

How to turn off form autocompletion - Web security
this article explains how a website can disable autocomplete for form fields. by default, browsers remember information that the user submits through <input> fields on websites. this enables the browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load). these features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. however, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). as website author, you might prefer that the browser not remember the val...
... contain sensitive information (for example, a unique government identifier or credit card security code). as website author, you might prefer that the browser not remember the values for such fields, even if the browser's autocomplete feature is enabled. note that the wcag 2.1 success criterion 1.3.5: identify input purpose does not require that autocomplete/autofill actually work - merely that form fields that relate to specific personal user information are programmatically identified. this means that the criterion can be passed (by adding the relevant autocomplete attributes to individual form fields) even when autocompletion for the form itself has been turned off. ...
... require that autocomplete/autofill actually work - merely that form fields that relate to specific personal user information are programmatically identified. this means that the criterion can be passed (by adding the relevant autocomplete attributes to individual form fields) even when autocompletion for the form itself has been turned off. ...
...And 8 more matches

Web performance resources - Learn web development
use a cdn for resources which can reduce load times significantly. compress your resources using gzip, brotli, and zopfli. ...
... use a cdn for resources which can reduce load times significantly. compress your resources using gzip, brotli, and zopfli. ...
... use a cdn for resources which can reduce load times significantly. compress your resources using gzip, brotli, and zopfli. ...
...And 7 more matches

FormData.append() - Web APIs
value the field's value. ...
... value the field's value. ...
... value the field's value. ...
...And 7 more matches

performance.getEntries() - Web APIs
the getentries() method returns a list of all performanceentry objects for the page. the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time. if you are only interested in performance entries of certain types or that have certain names, see getentriesbytype() and getentriesbyname(). note: this feature is available in web workers. syntax general syntax: entries = window.performance.getentries(); return value entries an array of performanceentry objects. the items will be in chronological order based on the entries' starttime. example function use_performanceentry_methods() { console.log("performanceentry tests ..."); if (performance.mark === undefined) { console.log("... perf...
...dow.performance.getentries(); return value entries an array of performanceentry objects. the items will be in chronological order based on the entries' starttime. example function use_performanceentry_methods() { console.log("performanceentry tests ..."); if (performance.mark === undefined) { console.log("... ...
... entries an array of performanceentry objects. the items will be in chronological order based on the entries' starttime. example function use_performanceentry_methods() { console.log("performanceentry tests ..."); if (performance.mark === undefined) { console.log("... ...
...And 7 more matches

Introduction to formatting contexts - CSS: Cascading Style Sheets
this article introduces the concept of formatting contexts, of which there are several types, including block formatting contexts, inline formatting contexts, and flex formatting contexts. the basics of how they behave and how you can make use of these behaviors are also introduced. everything on a page is part of a formatting context, or an area which has been defined to lay out content in a particular way. a block formatting context (bfc) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc. each formatting context has specific rules about how layout behaves when in that context. ...
...this means that every element inside the <html> element's block is laid out according to normal flow following the rules for block and inline layout. ...
...cular way. a block formatting context (bfc) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc. each formatting context has specific rules about how layout behaves when in that context. block formatting contexts the outermost element in a document that uses block layout rules establishes the first, or initial block formatting context. this means that every element inside the <html> element's block is laid out according to normal flow following the rules for block and inline layout. elements participating in a bfc use the rules outlined by the css box model, which defines how an element's margins, borders, and padding interact with other blocks in the same context. ...
...And 7 more matches

Text formatting - JavaScript
icode scalar values are greater than u+ffff (such as some rare chinese/japanese/korean/vietnamese characters and some emoji) are stored in utf-16 with two surrogate code units each. for example, a string containing the single character u+1f600 "emoji grinning face" will have length 2. accessing the individual code units in such a string using brackets may have undesirable consequences such as the formation of strings with unmatched surrogate code units, in violation of the unicode standard. (examples should be added to this page after mdn bug 857438 is fixed.) see also string.fromcodepoint() or string.prototype.codepointat(). a string object has a variety of methods: for example those that return a variation on the string itself, such as substring and touppercase. the following table summari...
...ubstring, substr return the specified subset of the string, either by specifying the start and end indexes or the start index and a length. match, matchall, replace, replaceall, search work with regular expressions. tolowercase, touppercase return the string in all lowercase or all uppercase, respectively. normalize returns the unicode normalization form of the calling string value. repeat returns a string consisting of the elements of the object repeated the given times. trim trims whitespace from the beginning and end of the string. multi-line template literals template literals are string literals allowing embedded expressions. you can use multi-line strings and string interpolation features with them. template...
...5; const ten = 10; console.log('fifteen is ' + (five + ten) + ' and not ' + (2 * five + ten) + '.'); // "fifteen is 15 and not 20." now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable: const five = 5; const ten = 10; console.log(`fifteen is ${five + ten} and not ${2 * five + ten}.`); // "fifteen is 15 and not 20." for more information, read about template literals in the javascript reference. internationalization the intl object is the namespace for the ecmascript internationalization api, which provides language sensitive string comparison, number formatting, and date and time formatting. the constructors for collator, numberformat, and datetimeformat objects are properties of the intl object. date and time formatting...
...And 7 more matches

Critical rendering path - Web Performance
the document object model is created as the html is parsed. the html may request javascript, which may, in turn, alter the dom. the html includes or makes requests for styles, which in turn builds the css object model. ...
...ne combines the two to create the render tree. layout determines the size and location of everything on the page. once layout is determined, pixels are painted to the screen. optimizing the critical rendering path improves the time to first render. understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank. understanding crp web performance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen. a request for a web page or app starts with an html request. the server returns the html - response headers and data. the browser then begins parsing the html, converting the received bytes to the...
...e, layout occurs, defining the location and size of all the render tree elements. once complete, the page is rendered, or 'painted' on the screen. document object model dom construction is incremental. the html response turns into tokens which turns into nodes which turn into the dom tree. a single dom node starts with a starttag token and ends with an endtag token. nodes contain all relevant information about the html element. the information is described using tokens. nodes are connected into a dom tree based on token hierarchy. if another set of starttag and endtag tokens come between a set of starttag and endtags, you have a node inside a node, which is how we define the hierarchy of the dom tree. the greater the number of nodes, the longer the following events in the critical rendering...
...And 7 more matches

Basic Transformations - SVG: Scalable Vector Graphics
« previousnext » now we're ready to start 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 ...
...form 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. ...
...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 7 more matches

platform/xpcom - Archive of obsolete content
you can just use require("chrome") to get direct access to the components object, and access xpcom objects from there. implementing xpcom interfaces this module exports a class called unknown which implements the fundamental xpcom interface nsisupports. ...
... either using standard javascript inheritance or using the sdk's heritage module, you can provide your own implementations of xpcom interfaces. "unknown" is named after the "iunknown" interface in com. for example, the add-on below implements the nsiobserver interface to listen for and log all topic notifications: var { class } = require('sdk/core/heritage'); var { unknown } = require('sdk/platform/xpcom'); var { cc, ci } = require('chrome') var observerservice = cc['@mozilla.org/observer-service;1']. getservice(ci.nsiobserverservice); var starobserver = class({ extends: unknown, interfaces: [ 'nsiobserver' ], topic: '*', register: function register() { observerservice.addobserver(this, this.topic, false); }, unregister: function() { observerser...
...helloworld constructor, we enable xpcom clients to access the helloworld component, given its contract id. in this example the helloworld component is available to javascript only, so we use the technique documented under the "using wrappedjsobject" section of how to build an xpcom component in javascript. ...
...And 6 more matches

Porting NSPR to Unix Platforms - Archive of obsolete content
porting instructions you can use different threading packages to implement nspr threads. ...
... porting instructions you can use different threading packages to implement nspr threads. ...
... porting instructions you can use different threading packages to implement nspr threads. ...
...And 6 more matches

Running Tamarin performance tests - Archive of obsolete content
set the builtinabc environment variable to the path of the builtin.abc. (in the tamarin-redux/generated directory) set the shellabc environment variable to the path of the shell_toplevel.abc. (in tamarin-redux/generated directory) set the asc environment variable to the path of the asc.jar compiler. you may download the latest asc.jar from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. ...
...able to the path of the shell_toplevel.abc. (in tamarin-redux/generated directory) set the asc environment variable to the path of the asc.jar compiler. you may download the latest asc.jar from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk. (optional) you may compare the performance of the avmshell to another avmshell. for example you may download or build the latest checked in avmshell to compare against a local change. to compare a build against another build set the avm2 environment variable to the other avmshell or use the "-s --avm2" options. results from the two shells will be shown side to side and the percent speedup will be shown. $ cd tamarin-redux/test/perfor...
...fied by selecting ./runtests.py -c [misc,scimark,jsbench]. also for better accuracy tests may be run multiple times. specifying ./runtests.py -i 10 will run each tests 10 time and use the fastest result. if more than 2 repetitions are specified the 95% percentile confidence rating is calculated. the confidence rating measures the percentage of the mean 95% of the results were within the range. ...
...And 6 more matches

HTML performance features - Learn web development
previous overview: performance next html is by default fast and accessible. it is our job, as developers, to ensure that we preserve these two properties when creating or editing html code. complications can occur when, for example, the file size of a <video> embed is too large, or when a webpage is not optimized for mobile devices. this module intends to walk you through the key html performance features that can drastically improve the quality of your webpage. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the impact of html elements and attributes on web performance optimization. ...
...to walk you through the key html performance features that can drastically improve the quality of your webpage. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the impact of html elements and attributes on web performance optimization. ...
...tes on web performance optimization. elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? ...
...And 6 more matches

Performance
the articles linked to from here will help you improve performance, whether you're developing core mozilla code or an add-on. documentation reporting a performance problem a user friendly guide to reporting a performance problem. a development environment is not required. benchmarking tips on generating valid performance metrics. performance best practices in extensions a performance "best practices" guide for extension developers. measuring add-on startup performance a guide for add-on developers on how to set up a performance testing environment. ...
...formance problem. a development environment is not required. benchmarking tips on generating valid performance metrics. performance best practices in extensions a performance "best practices" guide for extension developers. measuring add-on startup performance a guide for add-on developers on how to set up a performance testing environment. xul school: add-on performance tips for add-on developers to help them avoid impairing application performance. gpu performance tips for profiling and improving performance when using a gpu. scroll-linked effects information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques. ...
...testing environment. xul school: add-on performance tips for add-on developers to help them avoid impairing application performance. gpu performance tips for profiling and improving performance when using a gpu. scroll-linked effects information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques. automated performance testing and sheriffing information on automated performance testing and sheriffing at mozilla. best practices for front-end engineers tips for reducing impacts on browser performance in front-end code. memory profiling and leak detection tools the developer tools "memory" panel the memory panel in the devtools supports taking heap snapshots, diffing th...
...And 6 more matches

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

PerformanceEntry.toJSON() - Web APIs
the tojson() method is a serializer; it returns a json representation of the performance entry object. note: this feature is available in web workers. syntax json = perfentry.tojson(); arguments none return value json a json object that is the serialization of the performanceentry object. example the following example shows the use of the tojson() method. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... ...
... this feature is available in web workers. syntax json = perfentry.tojson(); arguments none return value json a json object that is the serialization of the performanceentry object. example the following example shows the use of the tojson() method. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... ...
....tojson(); arguments none return value json a json object that is the serialization of the performanceentry object. example the following example shows the use of the tojson() method. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... ...
...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. ...
...ce 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

Web Video Text Tracks Format (WebVTT) - Web APIs
webvtt files the mime type of webvtt is text/vtt. a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. ...
... webvtt files the mime type of webvtt is text/vtt. a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. ...
...e for showing the text that appears underneath. on the same line, we then have a string of "-->". we finish the first line with a second time, which is the ending time for showing the associated text. we can then have one or more lines that start with a hyphen (-), each containing part of the text track to be shown. we can also place comments in our .vtt file, to help us remember important information about the parts of our file. these should be on separate lines, starting with the string note. you'll find more about these in the below section. it is important to not use "extra" blank lines within a cue, for example between the timings line and the cue payload. webvtt is line based; a blank line will close the cue. webvtt comments comments are an optional component that can be used to ...
...And 6 more matches

Intl.RelativeTimeFormat() constructor - JavaScript
possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). ...
...possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). ...
...possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). ...
...And 6 more matches

OpenSearch description format
this article focuses on creating opensearch-compatible search plugins that support these additional firefox features. opensearch description files can be advertised as described in autodiscovery of search plugins, and can be installed programmatically as described in adding search engines from web pages. ...
... a website describe a search engine for itself, so that a browser or other client application can use that search engine. opensearch is supported by (at least) firefox, edge, internet explorer, safari, and chrome. (see reference material for links to other browsers' documentation.) firefox also supports additional features not in the opensearch standard, such as search suggestions and the <searchform> element. this article focuses on creating opensearch-compatible search plugins that support these additional firefox features. opensearch description files can be advertised as described in autodiscovery of search plugins, and can be installed programmatically as described in adding search engines from web pages. opensearch description file the xml file that describes a search engine follows ...
...it must be 16 or fewer characters of plain text, with no html or other markup. description a brief description of the search engine. it must be 1024 or fewer characters of plain text, with no html or other markup. inputencoding the character encoding to use when submitting ...
...And 6 more matches

<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
optional attributes count specifies what in the source tree should be numbered sequentially. it uses an xpath expression. ...
... optional attributes count specifies what in the source tree should be numbered sequentially. it uses an xpath expression. ...
... optional attributes count specifies what in the source tree should be numbered sequentially. it uses an xpath expression. ...
...And 6 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 6 more matches

XForms API Reference - Archive of obsolete content
this page is the beginning of the xforms api reference. ...
... this page is the beginning of the xforms api reference. ...
... this page is the beginning of the xforms api reference. ...
...And 5 more matches

Building Mozilla XForms - Archive of obsolete content
getting started things to know first: the xforms extension has a dependency on the schema-validation extension, so you need to build both (that's done automatically) mozilla switched from cvs to mercurial starting with firefox 3.5. during cvs times, the mozilla repository contained both extensions. since the switch to mercurial, the extensions live in separate repositories. before you can start building the xforms extension, you should check your mozilla build environment by doing a regular firefox build. have a look at the build instructions for detailed information for your platform. the following table gives you an overview of which version you want to build: firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_bra...
...d information for your platform. ...
... firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_branch not developed any more last release: 0.8.5ff2 firefox 3.0 gecko 1.9.0 cvs, branch head not developed any more last release: 0.8.5ff3 firefox 3.5 gecko 1.9.1 xforms/schema-validation code does not build with firefox 3.5 any more not supported firefox 3.6 gecko 1.9.2 xforms/schema-validation code does not build with firefox 3.6 any more not developed any more last release: 0.8.6 firefox 4 gecko 2.0 mercurial, repositories mozilla-central xforms schema-validation mostly works upcoming 0.8.7 release if you have your first working firefox build, you can go on with building the xforms extension. firefox 3.5 and up: get the source code if you want to build xform...
...And 5 more matches

XForms Input Element - Archive of obsolete content
the default value is 'false'. ...
...the default value is 'false'. ...
...the default value is 'false'. ...
...And 5 more matches

XForms Repeat Element - Archive of obsolete content
node set binding special startindex - optional 1-based initial value of the repeat index. ...
... node set binding special startindex - optional 1-based initial value of the repeat index. the default value is 1. ...
...d control set is placed vertically. compact layout each generated control set is placed horizontally. occurs when the repeat element's appearance attribute has a value of compact. behaviour focusing a generated control may change the current index of the containing repeat element. the index is equal to the index of the control set that the focused control belongs to. actions you can use xforms action module elements to modify the nodeset that the repeat element is bound to. the most useful actions for altering the contents of a repeat are the insert (see the spec), delete (see the spec) and setindex (see the spec) elements. example <model> <instance> <my:lines> <my:line name="a"> <my:price>3.00</my:price> </my:line> <my:line name="b"> <my:pri...
...And 5 more matches

HTMLFormElement.requestSubmit() - Web APIs
the htmlformelement method requestsubmit() requests that the form be submitted using a specific submit button. syntax htmlformelement.requestsubmit(submitter); parameters submitter optional the submit button whose attributes describe the method by which the form is to be submitted. this may be either an <input> or <button> element whose type attribute is submit. if you omit the submitter parameter, the form element itself is used as the submitter. return value none. exceptions typeerror the specified submitter is not a submit button. notfounderror the specified submitter isn't a member of the form on which requestsubmit() was called. the submitter must be either a descendant of the form element or must have an form attribute referring to the form. usage notes the obv...
... button. notfounderror the specified submitter isn't a member of the form on which requestsubmit() was called. the submitter must be either a descendant of the form element or must have an form attribute referring to the form. usage notes the obvious question is: why does this method exist, when we've had the submit() method since the dawn of time? ...
.... the submitter must be either a descendant of the form element or must have an form attribute referring to the form. usage notes the obvious question is: why does this method exist, when we've had the submit() method since the dawn of time? ...
...And 5 more matches

HTMLFormElement: submit event - Web APIs
the submit event fires when a <form> is submitted. bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. however, the submitevent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request. the submit event fires when the user clicks a submit button (<button> or <input type="submit">) or presses enter while editing a field (e.g. <input type="text">) in a form. ...
...t. however, the submitevent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request. the submit event fires when the user clicks a submit button (<button> or <input type="submit">) or presses enter while editing a field (e.g. <input type="text">) in a form. the event is not sent to the form when calling the form.submit() method directly. note: trying to submit a form that does not pass validation triggers an invalid event. in this case, the validation prevents form submission, and thus there is no submit event. ...
...ter while editing a field (e.g. <input type="text">) in a form. the event is not sent to the form when calling the form.submit() method directly. note: trying to submit a form that does not pass validation triggers an invalid event. in this case, the validation prevents form submission, and thus there is no submit event. examples this example uses eventtarget.addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then prevents the default action of submitting the form. ...
...And 5 more matches

performance.measure() - Web APIs
name - set to the "name" given when the measure was created. starttime - set to the start mark timestamp. ...
... name - set to the "name" given when the measure was created. starttime - set to the start mark timestamp. ...
... name - set to the "name" given when the measure was created. starttime - set to the start mark timestamp. duration - set to a domhighrestimestamp that is the duration of the measure (typically, the end mark timestamp minus the start mark timestamp). ...
...And 5 more matches

WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables. there are no 2x2, 3x3, and 4x4 versions of this method. they are abbreviated in 2, 3, and 4, respectively. see the syntax below. ...
... the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables. there are no 2x2, 3x3, and 4x4 versions of this method. they are abbreviated in 2, 3, and 4, respectively. see the syntax below. ...
... the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables. there are no 2x2, 3x3, and 4x4 versions of this method. they are abbreviated in 2, 3, and 4, respectively. see the syntax below. ...
...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 ce...
...itioned 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: ...
...ies 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

Date and time formats used in HTML - HTML: Hypertext Markup Language
certain html elements use date and/or time values. the formats of the strings that specify these values are described in this article. elements that use such formats include certain forms of the <input> element that let the user choose or specify a date, time, or both, as well as the <ins> and <del> elements, whose datetime attribute specifies the date or date and time at which the insertion or deletion of content occurred. for <input>, the values of type that return a value which contains a string representing a date and/or time are: date datetime datetime-local month time week examples before getting into the intricacies of how date and time strings are written and parsed in html, here are some examples that should give you a good idea what the more commonly-used date and ti...
...tent occurred. for <input>, the values of type that return a value which contains a string representing a date and/or time are: date datetime datetime-local month time week examples before getting into the intricacies of how date and time strings are written and parsed in html, here are some examples that should give you a good idea what the more commonly-used date and time string formats look like. example html date and time strings string date and/or time 2005-06-07 june 7, 2005 [details] 08:45 8:45 am [details] 08:45:25 8:45 am and 25 seconds [details] 0033-08-04t03:40 3:40 am on august 4, 33 [details] 1977-04-01t14:00:30 30 seconds after 2:00 pm on april 1, 1977 [details] 1...
...ails] 0033-08-04t03:40 3:40 am on august 4, 33 [details] 1977-04-01t14:00:30 30 seconds after 2:00 pm on april 1, 1977 [details] 1901-01-01t00:00z midnight utc on january 1, 1901 [details] 1901-01-01t00:00:01-04:00 1 second past midnight eastern standard time (est) on january 1, 1901 [details] basics before looking at the various formats of date and time related strings used by html elements, it is helpful to understand a few fundamental facts about the way they're defined. html uses a variation of the iso 8601 standard for its date and time strings. it's worth reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with html, as the html specification includes algorit...
...And 5 more matches

Intl.RelativeTimeFormat - JavaScript
the intl.relativetimeformat object enables language-sensitive relative time formatting. 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. constructor intl.relativetimeformat.relativetimeformat() creates a new intl.relativetimeformat object. static methods intl.relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
...interactive-examples and send us a pull request. constructor intl.relativetimeformat.relativetimeformat() creates a new intl.relativetimeformat object. static methods intl.relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.relativetimeformat.prototype.format() formats a value and a unit according to the locale and formatting options of the given intl.relativetimeformat object. ...
...c methods intl.relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.relativetimeformat.prototype.format() formats a value and a unit according to the locale and formatting options of the given intl.relativetimeformat object. intl.relativetimeformat.prototype.formattoparts() returns an array of objects representing the relative time format in parts that can be used for custom locale-aware formatting. intl.relativetimeformat.prototype.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. ...
...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. ...
...uage/transform is a very powerful language, and a complete discussion 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 le...
...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

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 ...
...g 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. ...
...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. ...
...And 4 more matches

XForms Submit Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special submission - required reference to element submission. ...
... accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special submission - required reference to element submission. ...
... accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special submission - required reference to element submission. ...
...And 4 more matches

Reporting a Performance Problem
this article will guide you in reporting a performance problem using the built-in gecko profiler tool. enabling the profiler toolbar button these steps only work in firefox 75+. visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-click on the button and remove it from the toolbar when you're done with it. using the profiler when enabled, the profiler toolbar button is not recording by default. recording can be done by clicking on the toolbar icon to open its panel. make sure to choose an appropriate setting for the recording (if you're not sure, choose firefox platform), and then choosing "start recording". the toolbar icon turns blue when...
...if you choose custom settings (and then clicking edit settings) for the profiler, you can adjust the size of the buffer (presently defaults to 90 mb) and the time interval between data collection (presently defaults to 1 ms). note that increasing the buffer size uses more memory and can make capturing a profile take longer. ...
...s). note that increasing the buffer size uses more memory and can make capturing a profile take longer. using the keyboard shortcuts is often more convenient than using the mouse to interact with the ui: ctrl+shift+1 - start/stop the profiler ctrl+shift+2 - take a profile and launch the viewer to view it capturing and sharing a profile while the profiler is recording, reproduce the performance problem. if possible let the problem manifest itself for 5-10 seconds. press ctrl+shift+2 or click on the profiler toolbar icon in the top right and select 'capture'. try to do this within a few seconds from reproducing the performance problem as only the last few seconds are recorded. if the timeline has a large red block it's a good sign. the data will open in a new tab. wait until the...
...And 4 more matches

TPS Formdata Lists
a formdata asset list is an array of objects, each with the following properties: fieldname: required. value: required. date: the date the form data was used, expressed in hours from the present, so 0 means now, and -24 means 24 hours ago. optional, defaults to 0. ...
... a formdata asset list is an array of objects, each with the following properties: fieldname: required. value: required. date: the date the form data was used, expressed in hours from the present, so 0 means now, and -24 means 24 hours ago. optional, defaults to 0. ...
...dname: required. value: required. date: the date the form data was used, expressed in hours from the present, so 0 means now, and -24 means 24 hours ago. optional, defaults to 0. ...
...And 4 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. ...
...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

HTMLObjectElement.form - Web APIs
living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
...And 4 more matches

performance.clearMeasures() - Web APIs
the clearmeasures() method removes the named measure from the browser's performance entry buffer. if the method is called with no arguments, all performance entries with an entry type of "measure" will be removed from the performance entry buffer. note: this feature is available in web workers. syntax performance.clearmeasures(); performance.clearmeasures(name); arguments name optional a domstring representing the name of the timestamp. if this argument is omitted, all performance entries with an entry type of "measure" will be removed. return value void example the following example shows both uses of the clearmeasures() method. // create a small helper to show how many performancemeasure entries there are. function logmeasurecount() { console.log( "found this many...
...ng the name of the timestamp. if this argument is omitted, all performance entries with an entry type of "measure" will be removed. return value void example the following example shows both uses of the clearmeasures() method. // create a small helper to show how many performancemeasure entries there are. function logmeasurecount() { console.log( "found this many entries: " + performance.getentriesbytype("measure").length ); } // create a bunch of measures. ...
...h an entry type of "measure" will be removed. return value void example the following example shows both uses of the clearmeasures() method. // create a small helper to show how many performancemeasure entries there are. function logmeasurecount() { console.log( "found this many entries: " + performance.getentriesbytype("measure").length ); } // create a bunch of measures. ...
...And 4 more matches

performance.clearResourceTimings() - Web APIs
the clearresourcetimings() method removes all performance entries with an entrytype of "resource" from the browser's performance data buffer and sets the size of the performance data buffer to zero. to set the size of the browser's performance data buffer, use the performance.setresourcetimingbuffersize() method. note: this feature is available in web workers. syntax performance.clearresourcetimings(); arguments void return value none this method has no return value. ...
...ffer, use the performance.setresourcetimingbuffersize() method. note: this feature is available in web workers. syntax performance.clearresourcetimings(); arguments void return value none this method has no return value. ...
...esourcetimingbuffersize() method. note: this feature is available in web workers. syntax performance.clearresourcetimings(); arguments void return value none this method has no return value. ...
...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. ...
... 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. ...
...ler.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

WebGLRenderingContext.getActiveUniform() - Web APIs
the webglrenderingcontext.getactiveuniform() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a uniform attribute. it is generally used when querying unknown uniforms either for debugging or generic library creation. syntax webglactiveinfo webglrenderingcontext.getactiveuniform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information. index a gluint specifying the index of the uniform attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_uniforms). return value a webglactiveinfo object describing the uniform. the type attribute of the return value will be one of the following: gl.float gl.float...
...cube gl.sampler_2d_shadow gl.sampler_2d_array gl.sampler_2d_array_shadow gl.sampler_cube_shadow gl.int_sampler_2d gl.int_sampler_3d gl.int_sampler_cube gl.int_sampler_2d_array gl.unsigned_int_sampler_2d gl.unsigned_int_sampler_3d gl.unsigned_int_sampler_cube gl.unsigned_int_sampler_2d_array when gl.linkprogram is called, webgl creates a list of active uniforms. these are possible values of the name attribute of return values of getactiveuniform. webgl generates one or more entries in the list depending on the declared type of the uniform in the shader: single basic type: one entry with the name of the uniform. e.g. uniform vec4 a; will result in a. array of basic type: one entry with the name of the uniform suffixed with [0]. e.g. uniform vec4 b...
... webgl generates one or more entries in the list depending on the declared type of the uniform in the shader: single basic type: one entry with the name of the uniform. e.g. uniform vec4 a; will result in a. array of basic type: one entry with the name of the uniform suffixed with [0]. e.g. uniform vec4 b[]; will result in b[0]. struct type: one entry for each member of the struct. e.g. uniform struct { float foo; vec4 bar; } c; will result in c.foo and c.bar. arrays of structs or arrays: each entry of the array will generate its own entries. e.g. uniform struct { float foo; vec4 bar; } d[2]; will result in: d[0].foo d[0].bar d[1].foo d[1].bar uniform blocks: one entry for each member. if the uniform block has an instance name, the block name is prefixed. e.g. unif...
...And 4 more matches

Keyframe Formats - Web APIs
element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, ​ color: "#000" } ], 2000); offsets for each keyframe can be specified by providing an offset value. ...
... element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, ​ color: "#000" } ], 2000); offsets for each keyframe can be specified by providing an offset value. ...
... element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, ​ color: "#000" } ], 2000); offsets for each keyframe can be specified by providing an offset value. ...
...And 4 more matches

XRRigidTransform() - Web APIs
the xrrigidtransform() constructor creates and returns a new xrrigidtransform object, representing the position and orientation of a point or object. among other things, xrrigidtransform is used when providing a transform to translate between coordinate systems across spaces. syntax let xrrigidtransform = new xrrigidtransform(position, orientation); parameters position optional an object conforming to dompointinit which specifies the coordinates at which the point or object is located. 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. ...
...m(position, orientation); parameters position optional an object conforming to dompointinit which specifies the coordinates at which the point or object is located. 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. orientation optional an object conforming to dompointinit which specifies the direction in which the object is facing. the default value for orientation is {x: 0, y: 0, z: 0, w: 1}. the specified orientation gets normalized if it's not already. ...
...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. orientation optional an object conforming to dompointinit which specifies the direction in which the object is facing. the default value for orientation is {x: 0, y: 0, z: 0, w: 1}. the specified orientation gets normalized if it's not already. return value a new xrrigidtransform object which has been initialized to represent a transform matrix that would adjust the position and orientation of an object from the origin to the specified position and facing in the direction indicated by orientation. exceptions typeerror the value of the w coordinate in the specified position is not 1.0. examples in this example, the beginning of the animation of a scene is shown, st...
...And 4 more matches

Block formatting context - Developer guides
floats (elements where float isn't none). absolutely positioned elements (elements where position is absolute or fixed). inline-blocks (elements with display: inline-block). table cells (elements with display: table-cell, which is the default for html table cells). table captions (elements with display: table-caption, which is the default for html table captions). ...
... flex or inline-flex) if they are neither flex nor grid nor table containers themselves. grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves. multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1). column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (spec change, chrome bug). formatting contexts affect layout, but typically, we create a new block formatting context for the positioning and clearing floats rather than changing the layout, because an element that establishes a new block formatting context will: contain internal floats. exclude ex...
...there's no floating children avaliable inside a flex/grid container, but exclude external floats and suppress margin collapsing still works. examples contain internal floats make float content and alongside content the same height. ...
...And 4 more matches

CSP: form-action - HTTP
the http content-security-policy (csp) form-action directive restricts the urls which can be used as the target of a form submissions from a given context. whether form-action should block redirects after a form submission is debated and browser implementations of this aspect are inconsistent (e.g. firefox 57 doesn't block the redirects whereas chrome 63 does). csp version 2 directive type navigation directive default-src fallback no. not setting this allows anything. ...
...m-action should block redirects after a form submission is debated and browser implementations of this aspect are inconsistent (e.g. firefox 57 doesn't block the redirects whereas chrome 63 does). csp version 2 directive type navigation directive default-src fallback no. not setting this allows anything. syntax one or more sources can be set for the form-action policy: content-security-policy: form-action <source>; content-security-policy: form-action <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (a...
...a hash, shall be propagated to all the scripts loaded by that root script. at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored. see script-src for an example. 'report-sample' requires a sample of the violating code to be included in the violation report. ...
...And 4 more matches

Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
options optional. ...
... options optional. ...
... options optional. ...
...And 4 more matches

Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. ...
... description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. ...
... description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. ...
...And 4 more matches

Intl.NumberFormat.supportedLocalesOf() - JavaScript
options optional. an object that may have the following property: localematcher the locale matching algorithm to use. ...
... options optional. an object that may have the following property: localematcher the locale matching algorithm to use. ...
... options optional. ...
...And 4 more matches

Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
options optional. ...
... options optional. ...
... options optional. an object that may have the following property: localematcher the locale matching algorithm to use. ...
...And 4 more matches

Forms related code snippets - Archive of obsolete content
here are some <form> related code snippets. date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelemen...
...it is supported in firefox & chrome (v8) and partially supported in opera 9+ and safari. it is not s...
...it is supported in firefox & chrome (v8) and partially supported in opera 9+ and safari. it is not supported in i...
...And 3 more matches

Appendix A: Add-on Performance - Archive of obsolete content
startup this is the area where add-ons have the most noticeable impact. ...
... startup this is the area where add-ons have the most noticeable impact. ...
... startup this is the area where add-ons have the most noticeable impact. ...
...And 3 more matches

Date.prototype.toLocaleFormat() - Archive of obsolete content
the non-standard tolocaleformat() method converts a date to a string using the specified formatting. intl.datetimeformat is an alternative to format dates in a standards-compliant way. see also the newer version of date.prototype.tolocaledatestring(). this feature has been removed and will no longer work in firefox 58+. see warning: date.prototype.tolocaleformat is deprecated for more information and migration help. syntax dateobj.tolocaleformat(formatstring) parameters formatstring a format string in the same format expected by the strftime() function in c. return value a string representing the given date using the specified formatting. description the tolocaleformat() method provides greater software control over the formatting of the generated date and/or time. name...
...ption the tolocaleformat() method provides greater software control over the formatting of the generated date and/or time. names for months and days of the week are localized using the operating system's locale. however, ordering of the day and month and other localization tasks are not handled automatically since you have control over the order in which they occur. you should take care that the format string is localized properly according to the user's system settings. be aware that the locale used is not necessarily the same as the locale of the browser. ...
...he day and month and other localization tasks are not handled automatically since you have control over the order in which they occur. you should take care that the format string is localized properly according to the user's system settings. be aware that the locale used is not necessarily the same as the locale of the browser. ...
...And 3 more matches

XForms Custom Controls Examples - Archive of obsolete content
introduction here is a collection of misc. custom control examples. please feel free to add your own examples. a full example showing a complete form can be found on xforms:custom_controls. ...
... introduction here is a collection of misc. custom control examples. please feel free to add your own examples. a full example showing a complete form can be found on xforms:custom_controls. ...
... introduction here is a collection of misc. custom control examples. please feel free to add your own examples. a full example showing a complete form can be found on xforms:custom_controls. ...
...And 3 more matches

Test your skills: Form validation - Learn web development
this aim of this skill test is to assess whether you've understood our client-side form validation article. note: you can try out solutions locally, however it may be helpful to put your code in an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. form validation 1 in this task, we are providing you with a simple support query form, and we want you to add some validation features to it: make all of the input fields mandatory to complete before the form can be submitted. change the type of the "email address" and "phone number" fields to make the browser apply some more specific validation suitable for the data being asked for. give the "user name"...
... can be submitted. change the type of the "email address" and "phone number" fields to make the browser apply some more specific validation suitable for the data being asked for. give the "user name" field a required length of between 5 and 20 characters, the "phone number" field a maximum length of 15 characters, and the "comment" field a maximum length of 200 characters. ...
... the "user name" field a required length of between 5 and 20 characters, the "phone number" field a maximum length of 15 characters, and the "comment" field a maximum length of 200 characters. try submitting your form — it should refuse to submit until the above constaints are followed, and give suitable error messages. to help, you might want to consider adding some simple css to show when a form field is valid or invalid. download the starting point for this task to work in your own editor or in an online editor. form validation 2 now we want you to take the same form you saw in the previous task (use your previous answer if you want to), and add some more specific pattern validation to the first three fields using regular expressions. all of the user names in our application con...
...And 3 more matches

nsIURLFormatter
the set of known variables is predefined. ...
...the set of known variables is predefined. ...
...the set of known variables is predefined. ...
...And 3 more matches

FormData - Web APIs
the formdata interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the xmlhttprequest.send() method. it uses the same format a form would use if the encoding type were set to "multipart/form-data". you can also pass it directly to the urlsearchparams constructor if you want to generate query parameters in the way a <form> would do if it were using simple get submission. an object implementing formdata can directly be used in a for...of structure, instead of entries(): for (var p of myformdata) is equivalent to for (var p of myformdata.entries()). note: this feature is available in web workers. constructor formdata() creates a new formdata object. ...
... generate query parameters in the way a <form> would do if it were using simple get submission. an object implementing formdata can directly be used in a for...of structure, instead of entries(): for (var p of myformdata) is equivalent to for (var p of myformdata.entries()). note: this feature is available in web workers. constructor formdata() creates a new formdata object. methods formdata.append() appends a new value onto an existing key inside a formdata object, or adds the key if it does not already exist. formdata.delete() deletes a key/value pair from a formdata object. formdata.entries() returns an iterator allowing to go through all key/value pairs contained in this object. ...
...n web workers. constructor formdata() creates a new formdata object. methods formdata.append() appends a new value onto an existing key inside a formdata object, or adds the key if it does not already exist. formdata.delete() deletes a key/value pair from a formdata object. formdata.entries() returns an iterator allowing to go through all key/value pairs contained in this object. formdata.get() returns the first value associated with a given key from within a formdata object. formdata.getall() returns an array of all the values associated with a given key from within a formdata. formdata.has() returns a boolean stating whether a formdata object contains a certain key. ...
...And 3 more matches

HTMLFormElement: reset event - Web APIs
the reset event fires when a <form> is reset. bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs. ...
...t event fires when a <form> is reset. bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs. ...
...ires when a <form> is reset. bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs. ...
...And 3 more matches

NetworkInformation - Web APIs
the networkinformation interface provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. the networkinformation interfaces cannot be instantiated. it is instead accessed through the connection property of the navigator interface. note: this feature is available in web workers. properties this interface also inherits properties of its parent, eventtarget. networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. ...
... it is instead accessed through the connection property of the navigator interface. note: this feature is available in web workers. properties this interface also inherits properties of its parent, eventtarget. networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. networkinformation.downlinkmax read only returns the maximum downlink speed, in megabits per second (mbps), for the underlying connection technology. ...
...terface also inherits properties of its parent, eventtarget. networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. networkinformation.downlinkmax read only returns the maximum downlink speed, in megabits per second (mbps), for the underlying connection technology. networkinformation.effectivetype read only returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. this value is determined using a combination of recently observed round-trip time and downlink values. networkinformation.rtt read only returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds. networkin...
...And 3 more matches

Network Information API - Web APIs
note: this feature is available in web workers. examples detect connection changes this example watches for changes to the user's connection. ...
... note: this feature is available in web workers. examples detect connection changes this example watches for changes to the user's connection. ...
...e would be called soon after page load to check for a connection type where preloading a video may not be desirable. if a cellular connection is found, then the preloadvideo flag is set to false. for simplicity and clarity, this example only tests for one connection type. ...
...And 3 more matches

performance.clearMarks() - Web APIs
the clearmarks() method removes the named mark from the browser's performance entry buffer. if the method is called with no arguments, all performance entries with an entry type of "mark" will be removed from the performance entry buffer. note: this feature is available in web workers. syntax performance.clearmarks(); performance.clearmarks(name); arguments name optional a domstring representing the name of the timestamp. if this argument is omitted, all performance entries with an entry type of "mark" will be removed. return value void example the following example shows both uses of the clearmarks() method. // create a small helper to show how many performancemark entries there are. ...
...g representing the name of the timestamp. if this argument is omitted, all performance entries with an entry type of "mark" will be removed. return value void example the following example shows both uses of the clearmarks() method. // create a small helper to show how many performancemark entries there are. function logmarkcount() { console.log( "found this many entries: " + performance.getentriesbytype("mark").length ); } // create a bunch of marks. ...
...rmance entries with an entry type of "mark" will be removed. return value void example the following example shows both uses of the clearmarks() method. // create a small helper to show how many performancemark entries there are. function logmarkcount() { console.log( "found this many entries: " + performance.getentriesbytype("mark").length ); } // create a bunch of marks. ...
...And 3 more matches

performance.now() - Web APIs
it used to be the same as t0 of the main context, but this was changed. in shared or service workers, the value in the worker might be higher than that of the main context because that window can be created after those workers. ...
...it used to be the same as t0 of the main context, but this was changed. in shared or service workers, the value in the worker might be higher than that of the main context because that window can be created after those workers. ...
...pically round the returned value by some amount in order to be less predictable. this inherently introduces a degree of inaccuracy by limiting the resolution or precision of the timer. for example, firefox rounds the returned time to 1 millisecond increments. the precision of the returned value is subject to change if/when the security concerns are alleviated through other means. syntax t = performance.now(); example const t0 = performance.now(); dosomething(); const t1 = performance.now(); console.log(`call to dosomething took ${t1 - t0} milliseconds.`); unlike other timing data available to javascript (for example date.now), the timestamps returned by performance.now() are not limited to one-millisecond resolution. instead, they represent times as floating-point numbers with up to mic...
...And 3 more matches

PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below. auxclick beforeinput click compositionend compositionstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop input keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. ...
...e mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns the associated event's cancelable attribute. performanceeventtiming.target returns the associated event's last target, if it is not removed. ...
... properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns the associated event's cancelable attribute. performanceeventtiming.target returns the associated event's last target, if it is not removed. methods performanceeventtiming.tojson() converts the performanceeventtiming object to json. ...
...And 3 more matches

PerformanceMark - Web APIs
performancemark is an abstract interface for performanceentry objects with an entrytype of "mark". entries of this type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance timeline. ...
...stimestamp (the mark) to the browser's performance timeline. ...
...n: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monos...
...And 3 more matches

PerformanceMeasure - Web APIs
performancemeasure is an abstract interface for performanceentry objects with an entrytype of "measure". entries of this type are created by calling performance.measure() to add a named domhighrestimestamp (the measure) between two marks to the browser's performance timeline. ...
...re) between two marks to the browser's performance timeline. ...
...n: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mo...
...And 3 more matches

PerformanceObserverEntryList.getEntries() - Web APIs
the getentries() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given filter. the list's members are determined by the set of entry types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to window and worker interfaces. syntax general syntax: entries = list.getentries(); entries = list.getentries(performanceentryfilteroptions); specific usage: entries = list.getentries({name: "entry_name", entrytype: "mark"}); parameters performanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry. "en...
... entries = list.getentries(performanceentryfilteroptions); specific usage: entries = list.getentries({name: "entry_name", entrytype: "mark"}); parameters performanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry. "entrytype", the entry type. the valid entry types are listed in the performanceentry.entrytype method. "initiatortype", the type of the initiating resource (for example an html element). the values are defined by the performanceresourcetiming.initiatortype interface. this parameter is currently not supported on chrome or opera. return value a list of explicitly observed performanceentry objects that meets the criteria of the filter. the items will be in chronolog...
...s' starttime. if no objects that meet the filter are found, an empty list is returned. if no argument is given, all entries are returned. ...
...And 3 more matches

PerformanceObserverEntryList.getEntriesByName() - Web APIs
the getentriesbyname() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given name and entry type. the list's members are determined by the set of entry types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to window and worker interfaces. syntax entries = list.getentriesbyname(name, type); parameters name a domstring representing the name of the entry to retrieve. type optional a domstring representing the type of entry to retrieve such as "mark". the valid entry types are listed in performanceentry.entrytype. ...
...back). this method is exposed to window and worker interfaces. syntax entries = list.getentriesbyname(name, type); parameters name a domstring representing the name of the entry to retrieve. type optional a domstring representing the type of entry to retrieve such as "mark". the valid entry types are listed in performanceentry.entrytype. return value a list of explicitly observed performance entry objects that have the specified name and type. if the type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order based on the entries' starttime. if no objects meet the specified criteria, an empty list is returned. example function print_perf_entry(pe) { console.log("name: " + pe.name + ...
...ems will be in chronological order based on the entries' starttime. if no objects meet the specified criteria, an empty list is returned. ...
...And 3 more matches

WebGL2RenderingContext.getActiveUniforms() - Web APIs
the webgl2renderingcontext.getactiveuniforms() method of the webgl 2 api retrieves information about active uniforms within a webglprogram. syntax any gl.getactiveuniforms(program, uniformindices, pname); parameters program a webglprogram containing the active uniforms. uniformindices an array of gluint specifying the indices of the active uniforms to query. pname a glenum specifying which information to query. possible values: gl.uniform_type: returns an array of glenum indicating the types of the uniforms. gl.uniform_size: returns an array of gluint indicating the sizes of the uniforms. gl.uniform_block_index: returns an array of glint indicating the block indices of the uniforms. ...
...fying the indices of the active uniforms to query. pname a glenum specifying which information to query. possible values: gl.uniform_type: returns an array of glenum indicating the types of the uniforms. gl.uniform_size: returns an array of gluint indicating the sizes of the uniforms. gl.uniform_block_index: returns an array of glint indicating the block indices of the uniforms. gl.uniform_offset: returns an array of glint indicating the uniform buffer offsets. gl.uniform_array_stride: returns an array of glint indicating the strides between the elements. gl.uniform_matrix_stride: returns an array of glint indicating the strides between columns of a column-major matrix or a row-major matrix. ...
...ns an array of glint indicating the block indices of the uniforms. gl.uniform_offset: returns an array of glint indicating the uniform buffer offsets. gl.uniform_array_stride: returns an array of glint indicating the strides between the elements. gl.uniform_matrix_stride: returns an array of glint indicating the strides between columns of a column-major matrix or a row-major matrix. gl.uniform_is_row_major: returns an array of glboolean indicating whether each of the uniforms is a row-major matrix or not. return value depends on which information is requested using the pname parameter. ...
...And 3 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. ...
... 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. ...
...ansformfeedbackvaryings(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

WebGLRenderingContext.getUniform() - Web APIs
the webglrenderingcontext.getuniform() method of the webgl api returns the value of a uniform variable at a given location. syntax any gl.getuniform(program, location); parameters program a webglprogram containing the uniform attribute. location a webgluniformlocation object containing the location of the uniform attribute to get. ...
... the webglrenderingcontext.getuniform() method of the webgl api returns the value of a uniform variable at a given location. syntax any gl.getuniform(program, location); parameters program a webglprogram containing the uniform attribute. location a webgluniformlocation object containing the location of the uniform attribute to get. ...
...ontext.getuniform() method of the webgl api returns the value of a uniform variable at a given location. syntax any gl.getuniform(program, location); parameters program a webglprogram containing the uniform attribute. location a webgluniformlocation object containing the location of the uniform attribute to get. ...
...And 3 more matches

WebXR performance guide - Web APIs
rendering tips ... talk about general stuff like limiting how many different loops there are during rendering, avoiding unnecessary drawing, etc. ...
... rendering tips ... talk about general stuff like limiting how many different loops there are during rendering, avoiding unnecessary drawing, etc. ...
... rendering tips ... talk about general stuff like limiting how many different loops there are during rendering, avoiding unnecessary drawing, etc. ...
...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 arr...
...[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 tha...
...n 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. ...
...y 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

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. ...
...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...
...epresents 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 transform to place objects in the world during rendering. ...
...And 3 more matches

Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.datetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and date and time formatting options computed during initialization of this datetimeformat object. 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 datetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and date and time formatting options computed during the initialization of the given datetimeformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicod...
...default time zone) if none was provided. warning: applications should not rely on undefined being returned, as future versions may return a string value identifying the runtime’s default time zone instead. hour12 the value provided for this property in the options argument or filled in as a default. ...
...ring value identifying the runtime’s default time zone instead. hour12 the value provided for this property in the options argument or filled in as a default. weekday era year month day hour minute second timezonename the values resulting from format matching between the corresponding properties in the options argument and the available combinations and representations for date-time formatting in the selected locale. ...
...And 3 more matches

Intl.ListFormat() constructor - JavaScript
the intl.listformat() constructor creates objects that enable language-sensitive list formatting. 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 new intl.listformat([locales[, options]]) parameters locales optional. a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. options optional. an object with some or all of the following properties: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". ...
...parameters locales optional. a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. options optional. an object with some or all of the following properties: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". for information about this option, see the intl page. type the format of output message. possible values are "conjunction" that stands for "and"-based lists (default, e.g., a, b, and c), or "disjunction" that stands for "or"-based lists (e.g., a, b, or c). "unit" stands for lists of values with units (e.g., 5 pounds, 12 ounces). style the length of the formated message. possible values are: "long"...
...sjunction" that stands for "or"-based lists (e.g., a, b, or c). "unit" stands for lists of values with units (e.g., 5 pounds, 12 ounces). style the length of the formated message. possible values are: "long" (default, e.g., a, b, and c); "short" (e.g., a, b, c), or "narrow" (e.g., a b c). when style is short or narrow, unit is the only allowed value for the type option. examples using format the following example shows how to create a list formatter using the english language. ...
...And 3 more matches

format - SVG: Scalable Vector Graphics
the format attribute indicates the format of the given font. two elements are using this attribute: <altglyph> and <glyphref> context notes value <string> default value none animatable no <string> this value specifies the format of the given font. ...
... the format attribute indicates the format of the given font. two elements are using this attribute: <altglyph> and <glyphref> context notes value <string> default value none animatable no <string> this value specifies the format of the given font. ...
...attribute indicates the format of the given font. two elements are using this attribute: <altglyph> and <glyphref> context notes value <string> default value none animatable no <string> this value specifies the format of the given font. ...
...And 3 more matches

Performance best practices in extensions - Archive of obsolete content
one of firefox's great advantages is its extreme extensibility. extensions can do almost anything. there is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of firefox itself. this article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of firefox itself. improving startup performance extensions are loaded and run whenever a new browser window opens. that means every time a window opens, your extension can have an impact on how long it takes the user to see the content they're trying to view. there are several things you can do to reduce the amount of time your extension delays the appearance of the user's desired content. load o...
...se features until the user actually logs in. use javascript code modules you can create your own javascript code modules incorporating sets of features that are only needed under specific circumstances. this makes it easy to load chunks of your extension on the fly as needed, instead of loading everything all at once. while javascript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. code should be modularized to the extent that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred. defer everything that you can most extensions have a load event listener in the ma...
...tup functions. do as little as possible here. the browser window is blocked while your add-on's load handler runs, so the more it does, the slower firefox will appear to the user. if there is anything that can be done even a fraction of a second later, you can use an nsitimer or the window.settimeout() method to schedule that work for later. even a short delay can have a big impact. general performance tips avoid creating memory leaks memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance. zombie compartments are a particular kind of memory leak that you can detect with minimal effort. see the zombie compartments page, especially the proactive checking of add-ons section. see common causes of memory leaks in extens...
...And 2 more matches

XForms Output Element - Archive of obsolete content
introduction serves to show the instance data that the element is bound to in a read-only manner (see the spec). to see how they work you can try an xhtml example or a xul example. ...
... used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value. if binding attributes are present on the control then the value attribute is is ignored. type restrictions the output element can be bound to a node containing simple content of any data type. representations the xforms output element can be represented by the following widgets for the specified data types (or types derived from these data types): text - default representation for instance data of most types, especially static text (xhtml/xul). calendar - used to represent instance data of type date (xhtml/xul). image - if the instance node contains an image, then an output element can be used in combinatio...
...efault representation for instance data of most types, especially static text (xhtml/xul). calendar - used to represent instance data of type date (xhtml/xul). image - if the instance node contains an image, then an output element can be used in combination with the mediatype element to display the image (fx 3.0 only, xhtml/xul). text displaying the data as text is the default presentation. ...
...And 2 more matches

Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
perceived performance is a subjective measure of how fast a website seems to a user based on load time and site responsiveness. this measure relies on human perception, not an objective metric like time to interactive. in terms of web performance, perceived performance is how fast a user interaction feels rather than how fast an interaction actually is, be that a button press or a page load. perceived performance is not how fast your site is; it's how fast your users think it is. perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is interactive. in terms of conversion rates, perceived performance is more important than the actual load and response times. speed index is a common metric for measur...
...ance is not how fast your site is; it's how fast your users think it is. perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is interactive. in terms of conversion rates, perceived performance is more important than the actual load and response times. speed index is a common metric for measuring perceived performance, though it's not perfect. other features, such as good ux design, including animations, and lazy loading, can make your site appear more responsive, even if the download and response times remain the same. ...
...ve. in terms of conversion rates, perceived performance is more important than the actual load and response times. speed index is a common metric for measuring perceived performance, though it's not perfect. other features, such as good ux design, including animations, and lazy loading, can make your site appear more responsive, even if the download and response times remain the same. actual performance is a measurement from when a request is made, through the downloading, parsing and execution of all resources, and the final paint. while increased performance generally increases perceived performance, there are some techniques that can be used to increase perceived performance while marginally decreasing actual performance. there are front end optimization techniques that can improve perce...
...And 2 more matches

Storing the information you need — Variables - Learn web development
f what javascript is. objective: to gain familiarity with the basics of javascript variables. tools you need throughout this article, you'll be asked to type in lines of code to test your understanding of the content. if you are using a desktop browser, the best place to type your sample code is your browser's javascript console (see what are browser developer tools for more information on how to access this tool). what is a variable? a variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence. but one special thing about variables is that their contained values can change. let's look at a simple example: <button>press me</button> const button = document.queryselector('button'); button.onclick = functi...
...pecify an index value corresponding to the position of the value you want returned. you might have noticed that arrays in javascript are zero-indexed: the first element is at index 0. you'll learn a lot more about arrays in a future article. objects in programming, an object is a structure of code that models a real-life object. ...
... can have a simple object that represents a box and contains information about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more. try entering the following line into your console: let dog = { name : 'spot', breed : 'dalmatian' }; to retrieve the information stored in the object, you can use the following syntax: dog.name we won't be looking at objects any more for now — you can learn more about those in a future module. dynamic typing javascript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (numbers, strings, arrays, etc). for example, if...
...And 2 more matches

nsIFormHistory2
toolkit/components/satchel/public/nsiformhistory.idlscriptable a service which holds a set of name/value pairs. the names correspond to form field names, and the values correspond to values the user has submitted. so, several values may exist for a single name. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) note: this interface provides no means to access stored values. stored values are used by the formfillcontroller to generate autocomplete matches. method overview void addentry(in astring name, in astring value); boolean entryexists(in astring name, in astring value); boolean nameexists(in astring name); void removeallentries(); void removeentriesbytimeframe...
...boolean entryexists( in astring name, in astri...
...lentries(); void removeentriesbytimeframe(in long long abegintime, in long long aendtime); void removeentriesforname(in astring name); void removeentry(in astring name, in astring value); attributes attribute type description dbconnection mozistorageconnection returns the underlying db connection the form history module is using. read only. hasentries boolean returns true if the form history has any entries. read only. methods addentry() adds a name and value pair to the form history. void addentry( in astring name, in astring value ); parameters name value entryexists() gets whether a name and value pair exists in the form history. boolean entryexists( in astring name, in astring value ); parameters name value return value nameexists() returns true if t...
...And 2 more matches

Performance
mozstorage uses sqlite as the database backend. it has generally good performance for a small embedded database. however, many things cause various database operations to be slow. transactions there is overhead associated with each transaction. when you execute a sql statement in isolation, an implicit transaction is created around that statement. when transactions are committed, sqlite does journaling which requires syncing data to disk. this operation is extremely slow. therefore, if you are doing many transactions in a row, you will get significant performance improvements by surrounding them in a transaction. the asynchronous writes discussed below removes most of the immediate penalty of a commit, so you will not notice the problem as much. however, there is still overhead, and us...
...eue to see what operations have been pending, and they will be slower. if the user shuts down the browser soon after you do this type of operation, you can delay shutdown (possibly for many tens of seconds for large numbers of transactions and slow disks), making it look like the browser is hung. queries careful reordering of the sql statement, or creating the proper indices, can often improve performance. see the sqlite optimizer overview on the sqlite web site for information on how sqlite uses indices and executes statements. you might also want to try to the "explain" feature on your statements to see if they are using the indices you expect. type "explain" followed by your statement to see the plan. for example, explain select * from moz_history; the results are hard to understand, but yo...
... in this example, you can see that it is not using an index, so this query would be slow. you can download the command line tool from the sqlite download page. be sure you have a version of the command line tool that is at least as recent as what mozilla uses. as of april 10, 2006, mozilla uses sqlite 3.3.4, but the latest precompiled version of the command line tools is not available for all platforms. this will lead to errors that say "database is encrypted" because the tool is not able to recognize the file format. you may want to check the sqlite_version definition in db/sqlite3/src/sqlite3.h for the current version if you are having problems. caching sqlite has a cache of database pages in memory. it keeps pages associated with the current transaction so it can roll them back, and it also...
...And 2 more matches

FormData.getAll() - Web APIs
the getall() method of the formdata interface returns all the values associated with a given key from within a formdata object. note: this method is available in web workers. syntax formdata.getall(name); parameters name a usvstring representing the name of the key you want to retrieve. returns an array of formdataentryvalues whose key matches the value passed in the name parameter. if the key doesn't exist, the method returns an empty list. ...
...hin a formdata object. note: this method is available in web workers. syntax formdata.getall(name); parameters name a usvstring representing the name of the key you want to retrieve. returns an array of formdataentryvalues whose key matches the value passed in the name parameter. if the key doesn't exist, the method returns an empty list. ...
... note: this method is available in web workers. syntax formdata.getall(name); parameters name a usvstring representing the name of the key you want to retrieve. returns an array of formdataentryvalues whose key matches the value passed in the name parameter. if the key doesn't exist, the method returns an empty list. ...
...And 2 more matches

FormData.has() - Web APIs
the has() method of the formdata interface returns a boolean stating whether a formdata object contains a certain key. note: this method is available in web workers. syntax formdata.has(name); parameters name a usvstring representing the name of the key you want to test for. returns a boolean. ...
... the has() method of the formdata interface returns a boolean stating whether a formdata object contains a certain key. note: this method is available in web workers. syntax formdata.has(name); parameters name a usvstring representing the name of the key you want to test for. returns a boolean. ...
... the has() method of the formdata interface returns a boolean stating whether a formdata object contains a certain key. note: this method is available in web workers. syntax formdata.has(name); parameters name a usvstring representing the name of the key you want to test for. returns a boolean. ...
...And 2 more matches

HTMLFormControlsCollection - Web APIs
this interface replaces one method from htmlcollection, on which it is based. ...
... this interface replaces one method from htmlcollection, on which it is based. ...
...fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pr...
...And 2 more matches

PerformanceLongTaskTiming - Web APIs
the performancelongtasktiming interface of the the long tasks api reports instances of long tasks. ...
...e of the the long tasks api reports instances of long tasks. ...
...n: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale ...
...And 2 more matches

PerformanceObserver.observe() - Web APIs
the observe() method of the performanceobserver interface is used to specify the set of performance entry types to observe. the performance entry types are specified as an array of domstring objects, each naming one entry type; the type names are documented in performance entry type names in performanceentry.entrytype. when a matching performance entry is recorded, the performance observer's callback function—set when creating the performanceobserver—is invoked. syntax observer.observe(options); parameters options a performanceobserverinit dictionary with the following possible members: entrytypes: an array of domstring objects, each specifying one performance entry type to observe. may not be used together with the "type" or "buffered" options. type: a single domstring sp...
...eating the performanceobserver—is invoked. syntax observer.observe(options); parameters options a performanceobserverinit dictionary with the following possible members: entrytypes: an array of domstring objects, each specifying one performance entry type to observe. may not be used together with the "type" or "buffered" options. type: a single domstring specifying exactly one performance entry type to observe. may not be used together with the entrytypes option. buffered: a boolean flag to indicate whether buffered entries should be queued into the observer's buffer. must be used only with the "type" option. see performanceentry.entrytype for a list of valid performance entry type names. unrecognized types are ignored, though the browser may output a warning message t...
... into the observer's buffer. must be used only with the "type" option. see performanceentry.entrytype for a list of valid performance entry type names. unrecognized types are ignored, though the browser may output a warning message to the console to help developers debug their code. if no valid types are found, observe() has no effect. examples this example creates and configures two performanceobservers; one watches for "mark" and "frame" events, and the other watches for "measure" events. ...
...And 2 more matches

PerformanceObserverEntryList.getEntriesByType() - Web APIs
the getentriesbytype() method of the performanceobserverentrylist returns a list of explicitly observed performance entry objects for a given performance entry type. the list's members are determined by the set of entry types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to window and worker interfaces. syntax entries = list.getentriesbytype(type); parameters type the type of entry to retrieve such as "frame". the valid entry types are listed in performanceentry.entrytype. return value a list of explicitly observed performanceentry objects that have the specified type. the items will be in chronological order based on the entries' starttime. if no objects hav...
...ical order based on the entries' starttime. if no objects have the specified type, or no argument is provided, an empty list is returned. ...
... no objects have the specified type, or no argument is provided, an empty list is returned. ...
...And 2 more matches

WorkerGlobalScope.performance - Web APIs
the performance read-only property of the workerglobalscope interface returns a performance object to be used on the worker. not all performance properties and methods are available to web workers. this property is read only . syntax var perfobj = self.performance; return value a performance object. ...
... the performance read-only property of the workerglobalscope interface returns a performance object to be used on the worker. not all performance properties and methods are available to web workers. this property is read only . syntax var perfobj = self.performance; return value a performance object. ...
...rglobalscope interface returns a performance object to be used on the worker. not all performance properties and methods are available to web workers. this property is read only . syntax var perfobj = self.performance; return value a performance object. ...
...And 2 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

Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
the javascript warning "date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead" occurs when the non-standard date.prototype.tolocaleformat method is used. message warning: date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead error type warning. javascript execution won't be halted. what went wrong? the non-standard date.prototype.tolocaleformat method is deprecated and shouldn't be used anymore. it uses a format string in the same format expected by the strftime() function in c. the function is no longer available in firefox 58+. examples deprecated syntax the date.prototype.tolocaleformat method is deprecated and will be removed (no cross-browser support, available in firefox only). var today = new date(); var dat...
... method is deprecated and shouldn't be used anymore. it uses a format string in the same format expected by the strftime() function in c. the function is no longer available in firefox 58+. examples deprecated syntax the date.prototype.tolocaleformat method is deprecated and will be removed (no cross-browser support, available in firefox only). var today = new date(); var date = today.tolocaleformat('%a, %e. %b %y'); console.log(date); // in german locale // "freitag, 10. märz 2017" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 24+, firefox 29+, ie11+, safari10+). you can now either use the date.prototype.tolocaleda...
...te); // in german locale // "freitag, 10. märz 2017" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 24+, firefox 29+, ie11+, safari10+). you can now either use the date.prototype.tolocaledatestring method if you just want to format one date. var today = new date(); var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var date = today.tolocaledatestring('de-de', options); console.log(date); // "freitag, 10. märz 2017" or, you can make use of the intl.datetimeformat object, which allows you to cache an object with most of the computations done so that formatting is fast. th...
...And 2 more matches

Understanding latency - Web Performance
what is latency? latency is generally considered to be the amount of time it takes from when a request is made by the user to the time it takes for the response to get back to that user. ...
... what is latency? latency is generally considered to be the amount of time it takes from when a request is made by the user to the time it takes for the response to get back to that user. ...
... what is latency? latency is generally considered to be the amount of time it takes from when a request is made by the user to the time it takes for the response to get back to that user. ...
...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"> ...
...adient 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 ...
...p 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. ...
...arget element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. ...
...lowing animations to control translation, scaling, rotation, and/or skewing. ...
...And 2 more matches

Offering a context menu for form controls - Archive of obsolete content
firefox 3 changed the behavior of right-click on form controls to no longer display a context menu by default. this article describes how an extension can override this change in a particular window, enabling context menus to work on form controls. this article presents information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. ...
...ion based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. window.addeventlistener("load", function() { l...
...e is responsible for adjusting the behavior of right-clicking on form controls. window.addeventlistener("load", function() { let settargetoriginal = nscontextmenu.prototype.settarget; components.utils.reporterror(settargetoriginal); nscontextmenu.prototype.settarget = function(anode, arangeparent, arangeoffset) { settargetoriginal.apply(this, arguments); if (this.istargetaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is run when the window is opened up, works by replacing the settarget() routine for the prototype of nscontextmenu with one that forces the context menu to display if the target of the menu is a form control. as a result, all controls in the window will support a context menu when right-clicked, since we've ...
...hen the window is opened up, works by replacing the settarget() routine for the prototype of nscontextmenu with one that forces the context menu to display if the target of the menu is a form control. as a result, all controls in the window will support a context menu when right-clicked, since we've changed the core behavior of context menus to override their default behavior of doing nothing on form controls. ...

List of Former Mozilla-Based Applications - Archive of obsolete content
the following is a list of all known applications that at one point used mozilla technologies or that are no longer being actively maintained. a list of actively maintained mozilla-based applications is also available. ...
...erating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the have a web-based tool (need reference for that) miro (formerly democracy player) video switched from xulrunner to webkit in version 3.0.2 moblin browser browser when moblin became meego it switched from a custom gecko-based browser to chrome nautilus file manager hasn't used mozilla code since version 2.0 raptr client gaming client was a xulrunner app initially but now uses adobe air rift techno...
...now uses adobe air rift technologies software installation over internet no longer using mozilla technology -- need confirmation and details second life virtual world desktop client switched from embedded mozilla browser to a plugin architecture with a qtwebkit plugin applications that are no longer being developed name description additional information aphrodite browser inactive aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet s...
... inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl editor inactive xulplayer media player last project update on 3/14/09 zoomcreator photo collage tool on april 29, 2010 the site announced zoomara was shutting down. the authoring part of this app was xulrunner based. other places to find former mozilla-based applications: archived mozilla hall of fame page siftery ...

getFormattedString - Archive of obsolete content
%1$s, %2$s, etc.) can be used to specify the position of the corresponding parameter explicitly. ...
...%1$s, %2$s, etc.) can be used to specify the position of the corresponding parameter explicitly. ...
...%1$s, %2$s, etc.) can be used to specify the position of the corresponding parameter explicitly. ...
...%1$s, %2$s, etc.) can be used to specify the position of the corresponding parameter explicitly. ...

Special per-platform menu considerations - Archive of obsolete content
for many menu commands, convention dictates where these items will be placed. for instance, the edit menu always starts with the undo command if such a feature is available in the application, followed by redo, cut, copy, paste, and so forth. some menu items have specific common labels or locations where certain menu items would go that differ on each platform. for instance, on windows, the menu item which exits the application is labeled "exit" and is normally placed at the end of the file menu. the mac application menu on the macintosh, an extra menu exists beside the file menu; its name is the same as the name of the application. this menu contains a number of items that pertain to the application. for instance, this is the proper place to put the menu items which open the applic...
...r of items that pertain to the application. for instance, this is the proper place to put the menu items which open the application preferences and which quit the application. this can be accomplished by ensuring that certain common ids are set for the menu items that need to be placed on the application menu. on the mac, these menu items will be moved onto the application menu, but on other platforms, they will be left in their original locations. this makes it easier to write the same xul code for all platforms. here is a list of the menu item ids which are automatically handled. menu_filequitseparator the separator just before the quit/exit item. menu_filequititem the item which exits the application. menu_prefsseparator the separator just before the pr...
... notes for firefox extension developers on the mac, some elements, once moved to the application menu, are no longer accessible from xul overlays or from javascript injecte...
...pell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms. when moved to the application menu, the label and shortcut keys are overridden by platform conventions. however, regardless of the platform, the command event will be fired on the menu item when it is activated by the user. notes for firefox extension developers on the mac, some elements, once moved to the application menu, are no longer accessible from xul overlays or from javascript injected into browser.xul. for example, using document.getelementbyid() for the quit menu item retu...

application/http-index-format specification - Archive of obsolete content
the syntax of data is defined by the syntax spec for every number type. if a number is encountered that a parser does not understand the parser is required to ignore that line. there is no line length limit. all lines must be terminated by a carriage return followed by a line feed. number codes 100 a human readable comment line. ...
...mber is encountered that a parser does not understand the parser is required to ignore that line. there is no line length limit. all lines must be terminated by a carriage return followed by a line feed. number codes 100 a human readable comment line. machine parsers should ignore this data. this data is not intended for display to the end user and is only meant as a comment to make the file format clear to a human interpreter. 101 pre formatted human readable information line. this data is intended for the end user of the file format data if there is one. this data should be presented to the user when they are viewing data drawn from the file. 102 a human readable information line in html format. this data is intended for the end user of the file format data if there is one. this d...
...oken must be url escaped. valid 200 tokens note that all tokens are case insensitive. filename the name of file that can be used to retrieve the file when combined with the full path provided by the 300 line. white space and 8 bit characters must be url encoded. content-length base 10 digits representing the size of the file in bytes. only digits are legal. last-modified rfc 1123 date format url encoded. content-type mime content type. whitespace and 8-bit characters must be url-encoded. the mime-type for a directory can be given as application/http-index-format. file-type one of the following keywords to represent a special status for a file: file directory symbolic-link sym-file (a symbolic link to a file) sym-directory (a symbolic link to a directory) permissions ...
... guarentee as 101: as to the functionality of the data or programs 101: presented. 100: 300: ftp://test.netscape.com/u/montulli 100: 200: filename content-length content-type file-type last-modified 201: foo.txt 512 text/plain file tue,%2015%20nov%201994%2008:12:31%20gmt 201: bar.html 9683 text/html file tue,%2025%20oct%201994%2008:12:31%20gmt 201: foobar 0 application/http-index-format directory tue,%2025%20oct%201994%2008:12:31%20gmt original document information author(s): christian biesinger last updated date: may 10, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...

Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
there aren't many blogs out there that don't allow commenting of blog posts. however, rss does not provide sufficient facilities for dealing with them. sure rss has the <comments> element, but it points to a html page that isn't machine readable. it is desirable to be able to deal with comments in the same way one deals with rss feeds; through syndication. the rss well-formed web module exists to fill this gap. ...
...posts. however, rss does not provide sufficient facilities for dealing with them. sure rss has the <comments> element, but it points to a html page that isn't machine readable. it is desirable to be able to deal with comments in the same way one deals with rss feeds; through syndication. the rss well-formed web module exists to fill this gap. ...
...s> element, but it points to a html page that isn't machine readable. it is desirable to be able to deal with comments in the same way one deals with rss feeds; through syndication. the rss well-formed web module exists to fill this gap. ...
...this element lets you syndicate your comments. the uri in the <wfw:commentrss> element must point to an rss feed containing the comments for the <item> it is contained in. ...

XForms Styling - Archive of obsolete content
just a starting draft. hopefully someone more proficient in mozilla xforms and css can clean this up repeats see the mozilla xforms specials page for some general points. switches can be styled as tabs. triggers use appearance="minimal" to be able to style buttons portability the mozilla xforms extension is one of the few xforms processors which allow for styling of the xforms elements directly, using mostly standard css. processors such as chiba create "old-style" html forms from xforms documents, and must be styled accordingly. however, most of the time the transition is straight-forward: view the source after processing of your xforms document, and map the old styles to the new elements. appearance attributes can also make a big difference. experimenting with these can g...
... the time the transition is straight-forward: view the source after processing of your xforms document, and map the old styles to the new elements. appearance attributes can also make a big difference. experimenting with these can give you some easier way of styling the contents than just using the default. === example === here's a small example that shows equivalent styles for chiba and mozilla xforms. ...
...e the transition is straight-forward: view the source after processing of your xforms document, and map the old styles to the new elements. appearance attributes can also make a big difference. experimenting with these can give you some easier way of styling the contents than just using the default. === example === here's a small example that shows equivalent styles for chiba and mozilla xforms. ...
...ent, and map the old styles to the new elements. appearance attributes can also make a big difference. ...

XForms Select Element - Archive of obsolete content
he spec). the list of pre-defined items can be specified by either item (see the spec) or itemset (see the spec) elements. you can visually group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special selection - isn't currently supported. this attribute, when set to 'open', allows the user to provide free entry to the list. possible values are open and closed, default is closed. incremental - supported, defaul...
...ted, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions the select element can be bound to a node containing simple content capable of holding a sequence. ...
...on to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model. the relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is because a copy element can be used to add a subtree of nodes underneath the element that the select control is bound to. representations the xforms select element can be represented by the following widgets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul). characteristics analogous widgets are <html:select size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> v...
... <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf:choices> <xf:label>red colors</xf:label> <xf:item> <xf:label>red</xf:label> <xf:value>r</xf:value> </xf:item> <xf:item> <xf:label>magenta</xf:label> <xf:value>m</xf:value> </xf:item> </xf:choices> </xforms:select> ...

nsIXFormsModelElement
1.0 66 introduced gecko 1.8 obsolete gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview nsidomdocument getinstancedocument(in domstring instanceid); void rebuild(); void recalculate(); void refresh(); void revalidate(); methods getinstancedocument() nsidomdocument getinstancedocument( in domstring instanceid ); parameters instanceid the id of the instance element to be returned. return value an nsidomdocument. exceptions thrown domexception if there is no matching instance data. ...
... domstring instanceid); void rebuild(); void recalculate(); void refresh(); void revalidate(); methods getinstancedocument() nsidomdocument getinstancedocument( in domstring instanceid ); parameters instanceid the id of the instance element to be returned. return value an nsidomdocument. exceptions thrown domexception if there is no matching instance data. rebuild() signals the xforms processor to rebuild any internal data structures used to track computational dependencies within the given xforms model. void rebuild(); parameters none. recalculate() signals the xforms processor to perform a full recalculation of the given xforms model. note: script invocation is not necessarily equivalent to performing the recalculate action handler. though the script is assumed to have mod...
... xforms processor to perform a full recalculation of the given xforms model. note: script invocation is not necessarily equivalent to performing the recalculate action handler. though the script is assumed to have modified instance data prior to invoking recalculate, the dom mutations are not cached. thus, a full recalculation is necessary to ensure the proper changes are effected throughout the xforms model. void recalculate(); parameters none. refresh() signals the xforms processor to perform a full refresh of form controls bound to instance nodes for the given xforms model. void refresh(); parameters none. revalidate() signals the xforms processor to perform a full revalidation of the given xforms model. void revalidate(); parameters none. ...
...ges are effected throughout the xforms model. void recalculate(); parameters none. refresh() signals the xforms processor to perform a full refresh of form controls bound to instance nodes for the given xforms model. void refresh(); parameters none. revalidate() signals the xforms processor to perform a full revalidation of the given xforms model. void revalidate(); parameters none. ...

Toolkit version format
this document is a reference for the version format, as used in firefox 1.5 (xulrunner 1.8) and later. this format is used by the extension manager, software update, and other parts of the platform. versions in at least the following places must conform to this format: addon's and target application's version in install and update manifests. the following preferences: app.extensions.version, extensions.lastappversion versions returned by nsixulappinfo. application.ini in xulrunner applications appversion flag in chrome manifests. you can use nsiversioncomparator to compare versions from your application. see older version formats below for description of the older version format used in firefox/thunderbird 1.0. ...
...fests. the following preferences: app.extensions.version, extensions.lastappversion versions returned by nsixulappinfo. application.ini in xulrunner applications appversion flag in chrome manifests. you can use nsiversioncomparator to compare versions from your application. see older version formats below for description of the older version format used in firefox/thunderbird 1.0. version format a version string consists of one or more version parts, separated with dots. each version part is itself parsed as a sequence of four parts: <number-a><string-b><number-c><string-d>. each of the parts is optional. numbers are integers base 10 (may be negative), strings are non-numeric ascii characters. a few examples of valid version parts: 0 (as in 1.0): <number-a>=0 5a (as in 1.5a): <n...
...'1.0pre1' < '1.0pre10', while the strings are compared bytewise. see the next section for details on how versions are compared. see maintenance policy for special rules that mark version as "be...
...is less than 1.6). examples 1.-1 < 1 == 1. == 1.0 == 1.0.0 < 1.1a < 1.1aa < 1.1ab < 1.1b < 1.1c < 1.1pre == 1.1pre0 == 1.0+ < 1.1pre1a < 1.1pre1aa < 1.1pre1b < 1.1pre1 < 1.1pre2 < 1.1pre10 < 1.1.-1 < 1.1 == 1.1.0 == 1.1.00 < 1.10 < 1.* < 1.*.1 < 2.0 technical reference for those interested in seeing the implementation of toolkit version comparison, see nsversioncomparator.cpp. older version formats firefox and thunderbird 1.0 used a simpler version format, namely major[.minor[.release[.build]]][+] where [..] denotes an optional component, and major, minor, release, and build are all non-negative integers. ...

Version, UI, and Status Information - Plugins
« previousnext » this chapter describes the functions that allow a plug-in to display a message on the status line, get agent information, and check on the current version of the plug-in api and the browser. displaying a status line message users are accustomed to checking the ui status line at the bottom of the browser window for updates on the progress of an operation or the url of a link on the page. you can also use the status line to notify the user of plug-in-related information. the user might appreciate seeing the percentage completed of the current operation or the url of a button or other link object when the cursor is over it, all of which the browser shows. in fact, your plug-in interface should be consistent with the rest of the browser in this way. to accomplish...
...n the status line. the browser always displays the last status line message it receives, regardless of the message source. for this reason, your message is always displayed, but you have no control over how long it stays in the status line before another message replaces it. you should use a different method to display messages that the user needs to see, such as error messages. getting agent information a plug-in can check which browser is running on the user's current system. browsers communicate with http servers, which store agent software name, version, and operating system in a user_agent field. if you want to gather usage statistics or just find out the version of your plug-in's host browser, this information can help you. the plug-in calls the npn_useragent method to retrieve the c...
...version support the windowless feature? */ if (netscape_minor < npvers_has_windowless) { /* plug-in is running in a version of the navigator */ /* that does not support windowless plug-ins. */ return false; } else /* plug-in is running in a navigator version */ /* that has windowless support */ return true; } detecting windowless support on other platforms browser implementations on other platforms did not have windowless plug-in support at the time it was added to ms windows and mac os x, so a different method must be used to detect whether the browser provides support. bool has_windowless() { npbool supportswindowless = false; nperror ret = npn_getvalue(instance, npnvsupportswindowless, &supportswindowless); return ret == nperr_no_e...
... method must be used to detect whether the browser provides support. bool has_windowless() { npbool supportswindowless = false; nperror ret = npn_getvalue(instance, npnvsupportswindowless, &supportswindowless); return ret == nperr_no_error && supportswindowless; } reloading a plug-in when the browser starts up, it loads all the plug-ins it finds in the plugins directory for the platform. if you call npn_reloadplugins, the browser reloads all plug-ins in the plugins directory without restarting. this causes the browser to install a new plug-in and load it, or remove a plug-in, without having to restart. consider using this function as part of the plug-in's smartupdate process. void npn_reloadplugins(npbool reloadpages); the reloadpages parameter is a boolean that indicates whe...

Performance - Firefox Developer Tools
the performance tool gives you insight into your site's general responsiveness, javascript and layout performance. with the performance tool you create a recording, or profile, of your site over a period of time. the tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile. ...
...e. with the performance tool you create a recording, or profile, of your site over a period of time. the tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile. you get four sub-tools to examine aspects of the profile in more detail: the waterfall shows the different operations the browser was performing, such as executing layout, javascript, repaints, and garbage collection the call tree shows the javascript functions in which the browser spent most of its time the flame chart shows the javascript call stack over the course of the recording the allocations view shows the heap allocations made by your code over the course of the recording. this view only appears if you checked "record alloc...
...ting layout, javascript, repaints, and garbage collection the call tree shows the javascript functions in which the browser spent most of its time the flame chart shows the javascript call stack over the course of the recording the allocations view shows the heap allocations made by your code over the course of the recording. this view only appears if you checked "record allocations" in the performance tool settings. getting started ui tour to find your way around the performance tool, here's a quick tour of the ui. how to basic tasks: open the tool, create, save, load, and configure recordings components of the performance tool frame rate understand your site's overall responsiveness. call tree find bottlenecks in your site's javascript. allocations see...
...r the course of the recording. waterfall understand the work the browser's doing as the user interacts with your site. flame chart see which javascript functions are executing, and when, over the course of the recording. scenarios animating css properties uses the waterfall to understand how the browser updates a page, and how animating different css properties can affect performance. intensive javascript uses the frame rate and waterfall tools to highlight performance problems caused by long-running javascript, and how using workers can help in this situation. ...

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. ...
...rix 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...
...rectly to the second canvas context by passing the dommatrix object directly to settransform(), and draw a circle on it. ...
...tly 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. ...
... 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...
...ransformed 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. ...
...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 ...

FormData.get() - Web APIs
the get() method of the formdata interface returns the first value associated with a given key from within a formdata object. if you expect multiple values and want all of them, use the getall() method instead. note: this method is available in web workers. syntax formdata.get(name); parameters name a usvstring representing the name of the key you want to retrieve. return value a formdataentryvalue containing the value. if the key doesn't exist, the method returns null. ...
...xpect multiple values and want all of them, use the getall() method instead. note: this method is available in web workers. syntax formdata.get(name); parameters name a usvstring representing the name of the key you want to retrieve. return value a formdataentryvalue containing the value. if the key doesn't exist, the method returns null. ...
...and want all of them, use the getall() method instead. note: this method is available in web workers. syntax formdata.get(name); parameters name a usvstring representing the name of the key you want to retrieve. return value a formdataentryvalue containing the value. if the key doesn't exist, the method returns null. ...
... them, use the getall() method instead. note: this method is available in web workers. syntax formdata.get(name); parameters name a usvstring representing the name of the key you want to retrieve. return value a formdataentryvalue containing the value. if the key doesn't exist, the method returns null. example the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following get() function will only return the first username value appended: formdata.get('username'); // returns "chris" specifications specification status comment xmlhttprequestthe definition of 'get()' in that specification. ...

performance.mark() - Web APIs
the mark() method creates a timestamp in the browser's performance entry buffer with the given name. the application defined timestamp can be retrieved by one of the performance interface's getentries*() methods (getentries(), getentriesbyname() or getentriesbytype()). the mark()'s stores its data internally as performanceentry. note: this feature is available in web workers. syntax performance.mark(name); arguments name a domstring representing the name of the mark. if the name given to this method already exists in the performancetiming interface, syntaxerror is thrown. return value void example the following example shows how to use mark() to create and retrieve performancemark entries. ...
... is available in web workers. syntax performance.mark(name); arguments name a domstring representing the name of the mark. if the name given to this method already exists in the performancetiming interface, syntaxerror is thrown. return value void example the following example shows how to use mark() to create and retrieve performancemark entries. // create a bunch of marks. performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); // get all of the performancemark entries. const allentries = performance.getentriesbytype("mark"); console.log(allentries.length); // 6 // get all of the "monkey" performancemark entries. ...
... working draft clarifies mark() processing model. ...
... working draft clarifies mark() processing model. user timingthe definition of 'mark()' in that specification. ...

PerformanceFrameTiming - Web APIs
performanceframetiming is an abstract interface that provides frame timing data about the browser's event loop. a frame represents the amount of work a browser does in one event loop such as processing dom events, resizing, scrolling, rendering, css animations, etc.. a frame rate of 60fps (frames per second) for a 60hz refresh rate is the target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event. this information can be used to help identify areas that take too long to provide a good user experience. <div id="interfacediagram" style="display: inline-block; position:...
... areas that take too long to provide a good user experience. ...
...e; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame". performanceentry.name returns the document's addres...
...metiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame". performanceentry.name returns the document's address. performanceentry.starttime returns the timestamp when the frame was started. performanceentry.duration returns a timestamp indicating the difference between the starttimes of two successive frames. methods this interface has no methods. example see the example in using the frame timing api. specifications specification status comment frame timingthe definition of 'perfor...

PerformanceNavigation.type - Web APIs
1 type_reload the page was accessed by clicking the reload button or via the location.reload() method. ...
... 1 type_reload the page was accessed by clicking the reload button or via the location.reload() method. ...
...vel 2 specification. please use the performancenavigationtiming interface instead. the legacy performancenavigation.type read-only property returns an unsigned short containing a constant describing how the navigation to this page was done. possible values are: value constant name meaning 0 type_navigate the page was accessed by following a link, a bookmark, a form submission, a script, or typing the url in the address bar. 1 type_reload the page was accessed by clicking the reload button or via the location.reload() method. 2 type_back_forward the page was accessed by navigating into the history. 255 type_reserved any other way. ...
...e page was accessed by following a link, a bookmark, a form submission, a script, or typing the url in the address bar. 1 type_reload the page was accessed by clicking the reload button or via the location.reload() method. 2 type_back_forward the page was accessed by navigating into the history. 255 type_reserved any other way. syntax type = performancenavigation.type; specifications specification status comment navigation timingthe definition of 'performancenavigation.type' in that specification. recommendation initial definition. ...

PeformanceObserver.disconnect() - Web APIs
the disconnect() method of the performanceobserver interface is used to stop the performance observer from receiving any performance entry events. syntax performanceobserver.disconnect(); example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event // ... ...
... candidate recommendation initial definition of disconnect() method. ...
... candidate recommendation initial definition of disconnect() method. ...
...me" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event // ... // disable additional performance events observer.disconnect(); } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'disconnect()' in that specification. candidate recommendation initial definition of disconnect() method. ...

PerformanceObserverEntryList - Web APIs
the performanceobserverentrylist interface is a list of peformance events that were explicitly observed via the observe() method. note: this interface is exposed to window and worker. methods performanceobserverentrylist.getentries() returns a list of explicitly observed performanceentry objects based on the given filter. performanceobserverentrylist.getentriesbytype() returns a list of explicitly observed performanceentry objects of the given entry type. performanceobserverentrylist.getentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type. ...
...icitly observed performanceentry objects based on the given filter. performanceobserverentrylist.getentriesbytype() returns a list of explicitly observed performanceentry objects of the given entry type. performanceobserverentrylist.getentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type. ...
...sed on the given filter. performanceobserverentrylist.getentriesbytype() returns a list of explicitly observed performanceentry objects of the given entry type. performanceobserverentrylist.getentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type. ...
...list.getentriesbytype() returns a list of explicitly observed performanceentry objects of the given entry type. performanceobserverentrylist.getentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type. example // create observer for all performance event types // list is of type performanceobserveentrylist var observe_all = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); for (var i = 0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); // do something with it } }) specifications specification status comment performance timeline level 2the definition of 'performanceobserverentrylist' in that specification. candidate recommendation...

PerformanceResourceTiming.workerStart - Web APIs
the workerstart read-only property of the performanceresourcetiming interface returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running. if the resource is not intercepted by a service worker the property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... the service worker thread if it is not already running. if the resource is not intercepted by a service worker the property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...a service worker the property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceServerTiming - Web APIs
note: this feature is available in web workers. the performanceservertiming interface surfaces server metrics that are sent with the response in the server-timing http header. this interface is restricted to the same origin, but you can use the timing-allow-origin header to specify the domains that are allowed to access the server metrics. note that this interface is only available in secure contexts (https) in some browsers. properties performanceservertiming.descriptionread only a domstring value of the server-specified metric description, or an empty string. performanceservertiming.durationread only a double that contains the server-specified metric duration, or value 0.0. performanceservertiming.nameread only a domstring value of the server-specified metric name. ...
...ttps) in some browsers. properties performanceservertiming.descriptionread only a domstring value of the server-specified metric description, or an empty string. performanceservertiming.durationread only a double that contains the server-specified metric duration, or value 0.0. performanceservertiming.nameread only a domstring value of the server-specified metric name. methods performanceservertiming.tojson() returns a domstring that is the json representation of the performanceservertiming object. example given a server that sends the server-timing header, for example a node.js server like this: const http = require('http'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, ...
...'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming property: let entries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceserverti...
... working draft initial definition. ...

PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
isuserverifyingplatformauthenticatoravailable() is a static method of the publickeycredential interface that returns a promise which resolves to true if a user-verifying platform authenticator is available. a user-verifying platform authenticator is a kind of multi-factor authenticator that is part of the client device (it is generally not removable) and that involves an action from the user in order to identify them. at the time of this writing, this method's result only resolves to true on windows when windows hello capabilities are available (on recent versions of this os). note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax publickeycredential.isuserverifyingplatformauthenticatoravailable() parameters none. retu...
... windows when windows hello capabilities are available (on recent versions of this os). note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax publickeycredential.isuserverifyingplatformauthenticatoravailable() parameters none. return value a promise which resolves to a boolean indicating whether or a not a user-verifying platform authenticator is available. as of today (march 2019), this is basically indicating if windows hello may be used with the web authentication api and that the user has accepted its use. note: this is a static method which is directly called on the publickeycredential interface and not on an instance. note: in earlier versions of the specification, the boolean also conveyed the consent of the u...
...lo may be used with the web authentication api and that the user has accepted its use. note: this is a static method which is directly called on the publickeycredential interface and not on an instance. note: in earlier versions of the specification, the boolean also conveyed the consent of the user to disclose such an authenticator existed. ...
... recommendation initial definition. ...

format - Web APIs
the svgaltglyphelement.format property is a domstring that defines the format of the given font. it has the same meaning as the 'format' property of svgglyphrefelement property. if the font is in one of the formats listed in css2([css2], section15.3.5), then its value is the corresponding <string> parameter of the font. syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5). ...
...font. it has the same meaning as the 'format' property of svgglyphrefelement property. if the font is in one of the formats listed in css2([css2], section15.3.5), then its value is the corresponding <string> parameter of the font. syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5). ...
... recommendation ...
... recommendation ...

SVGFontFaceFormatElement - Web APIs
the svgfontfaceformatelement interface corresponds to the <font-face-format> elements. object-oriented access to the attributes of the <font-face-format> element via the svg dom is not possible. ...
...ce-format> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. ...
... recommendation initial definition ...

WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
the webgl2renderingcontext.getactiveuniformblockparameter() method of the webgl 2 api retrieves information about an active uniform block within a webglprogram. syntax any gl.getactiveuniformblockparameter(program, uniformblockindex, pname); parameters program a webglprogram containing the active uniform block. uniformblockindex a gluint specifying the index of the active uniform block within the program. pname a glenum specifying which information to query. possible values: gl.uniform_block_binding: returns a gluint indicating the uniform buffer binding point. gl.uniform_block_data_size: returns a gluint indicating the minimum total buffer object size. ...
...aining the active uniform block. uniformblockindex a gluint specifying the index of the active uniform block within the program. pname a glenum specifying which information to query. possible values: gl.uniform_block_binding: returns a gluint indicating the uniform buffer binding point. gl.uniform_block_data_size: returns a gluint indicating the minimum total buffer object size. gl.uniform_block_active_uniforms: returns a gluint indicating the number of active uniforms in the uniform block. gl.uniform_block_active_uniform_indices: returns a uint32array indicating the list of active uniforms in the uniform block. gl.uniform_block_referenced_by_vertex_shader: returns a glboolean indicating whether the uniform block is referenced by the vertex shader. ...
...ct size. gl.uniform_block_active_uniforms: returns a gluint indicating the number of active uniforms in the uniform block. gl.uniform_block_active_uniform_indices: returns a uint32array indicating the list of active uniforms in the uniform block. gl.uniform_block_referenced_by_vertex_shader: returns a glboolean indicating whether the uniform block is referenced by the vertex shader. gl.uniform_block_referenced_by_fragment_shader: returns a glboolean indicating whether the uniform block is referenced by the fragment shader. return value depends on which information is requested using the pname parameter. if an error occurs, null is returned. ...
... a glboolean indicating whether the uniform block is referenced by the vertex shader. gl.uniform_block_referenced_by_fragment_shader: returns a glboolean indicating whether the uniform block is referenced by the fragment shader. return value depends on which information is requested using the pname parameter. if an error occurs, null is returned. examples var blocksize = gl.getactiveuniformblockparameter(program, blockindex, gl.uniform_block_data_size); specifications specification status comment webgl 2.0the definition of 'getactiveuniformblockparameter' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgetactiveuniformblockiv' in that specification. standard man...

Forms - Accessibility
...
... ...
... ...
... ...

Accessibility Information for Web Authors - Accessibility
goes into greater depth. in 30 days, you will know why your website should be accessible and how to make it more accessible. automated checking & repair cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that is designed to identify errors in webpage related to section 508 standards and/or the wcag guidelines. it can perform a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality. the web author chooses the guidelines (as a basis for errors and warnings) to be used by "cynthia says™": section 508, wcag priorities 1, 2 and 3. the output data report is displayed in a clear and well structured table where each and all checkpoints are identified and des...
...ility validation service that identifies accessibility errors and reports accessibility warnings about webpage related to section 508 standards and/or the wcag guidelines. its purpose is to aid humans in the web accessibility evaluation process. rather than providing a complex technical report, wave 4.0 shows the original web page with embedded icons and indicators that reveal the accessibility information within your page. you can get accessibity report for errors, warnings. you can view the structure and order view of the document. you can see a text-only view and and outline view of the document. you can install a custom wave toolbar in firefox for a quick, easy and convenient evaluation of web pages directly within firefox. you can also add a wave bookmarklet in firefox or even wave dir...
...olor brightness difference? color contrast analyzer is an excellent tool for such task. effective color contrast and effective color brightness difference have a decisive importance for reading, furthermore for people with partial color deficiency (see the excellent examples in effective color contrast by lighthouse international). a study has established that about 8 percent of all men have some form of color deficiency. color contrast analyzer algorithm is based on the formula provided in techniques for accessibility evaluation and repair tools from w3c. the juicy studio css analyzer will also analyze and report the color contrast and color brightness differences involved in your stylesheets. the future: accessible dhtml dhtml accessibility roadmap: a peek into how dhtml will be made...
...ity evaluation and repair tools from w3c. the juicy studio css analyzer will also analyze and report the color contrast and color brightness differences involved in your stylesheets. the future: accessible dhtml dhtml accessibility roadmap: a peek into how dhtml will be made accessible in the future. this document gives a plan which is being developed by ibm, mozilla and wai protocols and formats working group (pfwg) to address the issue of accessible dhtml. dynamic web content is not accessible, because it uses vanilla <div>'s and <span>'s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. these widgets are usually not even keyboard focusable. furthermore, assistive technologies do not understand what these...

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: ro...
...n, 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 = ...
... + ( -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. ...

The Web Open Font Format (WOFF) - Developer guides
woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations. it uses a compressed version of the same table-based sfnt structure used by truetype, opentype, and open font format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. there are three main benefits to using woff: the font data is compressed, so sites using woff will use less bandwidth and will load faster than if they used equivalent uncompressed truetype or opentype files. many font vendors that are unwilling to license their truetype or opentype format fonts for use on the web will license woff format fonts. this improves availability of fon...
...ed, so sites using woff will use less bandwidth and will load faster than if they used equivalent uncompressed truetype or opentype files. many font vendors that are unwilling to license their truetype or opentype format fonts for use on the web will license woff format fonts. this improves availability of fonts to site designers. both proprietary and free software browser vendors like the woff format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats. there are two versions of woff; woff and woff2, they mostly differ in regard to the compression algorithm used. in @font-face they are identified by the 'woff' and respectively 'woff2' format descriptor. using woff you can use the @font-face css property to use w...
...ormat for the web, unlike other current font formats. there are two versions of woff; woff and woff2, they mostly differ in regard to the compression algorithm used. in @font-face they are identified by the 'woff' and respectively 'woff2' format descriptor. using woff you can use the @font-face css property to use woff fonts for text in web content. it works exactly like opentype and truetype format fonts do, except it will likely let your content download more efficiently due to the addition of compression. tools for working with woff fonts tools for working with woff fonts are available. sfnt2woff and woff2sfnt convert between woff and opentype. ...
...ntent. it works exactly like opentype and truetype format fonts do, except it will likely let your content download more efficiently due to the addition of compression. tools for working with woff fonts tools for working with woff fonts are available. sfnt2woff and woff2sfnt convert between woff and opentype. specifications specification status comment woff file format 2.0 recommendation new compression algorithm woff file format 1.0 recommendation initial specification. ...

<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
the text is typically rendered using a non-proportional ("monospace") font. whitespace inside this element is displayed as written. 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. content categories flow content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. ...
...e overflow must happen. in modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use css white-space instead. example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text. the alternate description should clearly and concisely describe the image or diagram's content. people experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence. a combination of the <figure> and <figcaption> elements, supplem...
... example <figure role="img" aria-labelledby="cow-caption"> <pre> ___________________________ < i'm an expert in my field. ...
...e <figure role="img" aria-labelledby="cow-caption"> <pre> ___________________________ < i'm an expert in my field. > --------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> a cow saying, "i'm an expert in my field." the cow is illustrated using preformatted text characters. </figcaption> </figure> mdn understanding wcag, guideline 1.1 explanations h86: providing text alternatives for ascii art, emoticons, and leetspeak | w3c techniques for wcag 2.0 specifications specification status comment html living standardthe definition of '<pre>' in that specification. living standard no significant change from...

URIError: malformed URI sequence - JavaScript
an argument given to either the decodeuri, encodeuri, encodeuricomponent, or decodeuricomponent function was not valid, so that the function was unable encode or decode properly. examples encoding encoding replaces each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character. ...
...t valid, so that the function was unable encode or decode properly. examples encoding encoding replaces each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character. ...
...operly. examples encoding encoding replaces each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character. an urierror will be thrown if there is an attempt to encode a surrogate which is not part of a high-low pair, for example: encodeuri('\ud800'); // "urierror: malformed uri sequence" encodeuri('\udfff'); // "urierror: malformed uri sequence" a high-low pair is ok. ...
...rror: malformed uri sequence" encodeuri('\udfff'); // "urierror: malformed uri sequence" a high-low pair is ok. for example: encodeuri('\ud800\udfff'); // "%f0%90%8f%bf" decoding decoding replaces each escape sequence in the encoded uri component with the character that it represents. ...

SyntaxError: missing formal parameter - JavaScript
your function declaration is missing valid parameters. in the declaration of a function, the parameters must be identifiers, not any value like numbers, strings, or objects. declaring functions and calling functions are two separate steps. declarations require identifier as parameters, and only when calling (invoking) the function, you provide the values the function should use. ...
...art with a digit. an identifier differs from a string in that a string is data, while an identifier is part of the code. examples provide proper function parameters function parameters must be identifiers when setting up a function. ...
...dentifier is part of the code. examples provide proper function parameters function parameters must be identifiers when setting up a function. ...
...s must be identifiers when setting up a function. ...

Intl.ListFormat.supportedLocalesOf() - JavaScript
the intl.listformat.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall back to the runtime's default locale. syntax intl.listformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. for the general form of the locales argument, see the intl page. options optional. an object that may have the following property: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". for information about this option, see the intl page. return value an array of strings representing a subset of the given locale tags that are supported in date a...
...t, see the intl page. options optional. an object that may have the following property: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". for information about this option, see the intl page. return value an array of strings representing a subset of the given locale tags that are supported in date and time formatting without having to fall back to the runtime's default locale. description returns an array with a subset of the language tags provided in locales. the language tags returned are those for which the runtime supports a locale in date and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using sup...
...subset of the language tags provided in locales. the language tags returned are those for which the runtime supports a locale in date and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese s...
...unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.listformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification intl.listformatthe definition of 'supportedlocalesof()' in that specification. ...

Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.relativetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and relative time formatting options computed during initialization of this relativetimeformat object. 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 relativetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and number formatting options computed during the initialization of the given relativetimeformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if a...
...7 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale. style the length of the internationalized message. possible values are: "long" (default, e.g., in 1 month) "short" (e.g., in 1 mo.), or "narrow" (e.g., in 1 mo.). the narrow style could be similar to the short style for some locales. ...
... numeric the format of output message. possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). the "auto" value allows to not always have to use numeric values in the output. numberingsystem the value requested using the unicode extension key "nu" or filled in as a default. ...
... stage 4 ...

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 allowe...
... 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. ...
...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 ...
... 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 ...

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. ...
...anation of the degree of present gecko support. use the {{listsubpages}} macro once the bcd for <xsl:fallback>, <xsl:import>, <xsl:namespace-alias>, <xsl:number>, <xsl:output>, <xsl:stylesheet>, <xsl:text> and <xsl:value-of> is fully migrated. ...
...e-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...
... <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> ...

Basic Example - XSLT: Extensible Stylesheet Language Transformations
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. ...
...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...
..."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. ...
...w 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. ...
...ocument. 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...
...g 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 ...

Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the nsifile object has a number of useful attrib...
...pcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the nsifile object has a number of useful attributes which may be used to retrieve information about a file. two useful attributes filesize and lastmodifiedtime (nsifile.attributes) provide a means of retrieving the size of a file and the time when the file was last changed. file size the filesize (nsifile.attributes) attribute holds the size of a file in bytes. if the file does not exist, a 'file not found' exception will occur. you can catch this exception with a try-catch block, ...
... ...

Well-Formed Web - Archive of obsolete content
getting started a guided tutorial that will help you get started with the well-formed web rss module. the well-formed web rss module provides facilities for <item> level commenting: for linking to comments contained in an external rss feed, and for posting new comments. documentation selected articles why well-formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your comments (2005-08-22). ...
...contained in an external rss feed, and for posting new comments. documentation selected articles why well-formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your comments (2005-08-22). ...
...formed web module, why it is popular among some, and how it is used to link to your comments (2005-08-22). ...

Developing Mozilla XForms - Archive of obsolete content
often you'll find the first starting points here or in the error console. schema validation problems the schema-validation extension contains a logging facility that can show some internals on the schema processing. ...
...often you'll find the first starting points here or in the error console. schema validation problems the schema-validation extension contains a logging facility that can show some internals on the schema processing. ...
...often you'll find the first starting points here or in the error console. schema validation problems the schema-validation extension contains a logging facility that can show some internals on the schema processing. ...

RFE to the XForms API - Archive of obsolete content
introduction this page contains requests for enhancement to the xforms api. the term xforms api can fall into two categories. these are xforms dom and xforms interfaces that are exposed by xforms dom. xforms dom is a list of interfaces that are available from xforms elements directly. this means those interfaces available to be queried from the xforms element that resides in the dom. for example, every visual xforms element exposes the nsixformsdelegate interface. if you need some additional functionality that shouldn't be exposed from the xforms element directly, then you should think which interface of the xforms element is more appropriate to expose it. mozilla xforms doens't offer any service you can get via xpcom. ...
...s element that resides in the dom. for example, every visual xforms element exposes the nsixformsdelegate interface. if you need some additional functionality that shouldn't be exposed from the xforms element directly, then you should think which interface of the xforms element is more appropriate to expose it. mozilla xforms doens't offer any service you can get via xpcom. as an example, the nsixformsaccessors interface which allows a user to get/set the value of an instance node and get the state of an instance node, is exposed by the nsixformsdelegate interface using the accessors property. xforms dom put here your requirements how to improve xforms dom api. reflect attributes to properties for the elements that can contain the incremental or selection attributes, it makes sense to ex...
...ows a user to get/set the value of an instance node and get the state of an instance node, is exposed by the nsixformsdelegate interface using the accessors property. xforms dom put here your requirements how to improve xforms dom api. reflect attributes to properties for the elements that can contain the incremental or selection attributes, it makes sense to expose analogous properties. xforms functional interfaces put here your requirements to improve existing xforms interfaces or to add a new one. ability to get nsixformsaccessors for instance node we need the ability to get to the nsixformsaccessors interface on a node by specifying the node via an xpath expression or by specifying the instance node directly (see bug 312956). ...

XForms Label Element - Archive of obsolete content
introduction specifies the label (short description) for the xforms control (see the spec). every form control other than the output and choices elements must contain a label element. it is valid for a form control to have an empty label element. the label text can be specified in instance data, in a remote document, or as inline text. if more than one source of label text is specified for this element, the order of precedence is: single node binding attributes, linking attributes, inline text. ui behavior accesskey support - if the accesskey attribute is specified on labeled xforms controls or on the label element itself then the label text for the control will contain an indicator as to what the access key is in a standard way. usually by underlining the accesskey character in the lab...
... ui behavior accesskey support - if the accesskey attribute is specified on labeled xforms controls or on the label element itself then the label text for the control will contain an indicator as to what the access key is in a standard way. usually by underlining the accesskey character in the label text. focus behavior - when a label element is clicked or its accesskey is activated then the form control that contains the label will be given the focus. attributes ui common accesskey - used to specify the keyboard shortcut for focusing the parent form control. single-node binding linking src - url of a document whose contents will be retrieved by the label element and used to provide label text for the containing form control. type restrictions the label element can be bound...
...he focus. attributes ui common accesskey - used to specify the keyboard shortcut for focusing the parent form control. single-node binding linking src - url of a document whose contents will be retrieved by the label element and used to provide label text for the containing form control. type restrictions the label element can be bound to any simple content. representations the xforms label element is represented by the text retrieved from instance data, a document or the label element's own inline content. ...

XForms Message Element - Archive of obsolete content
lement can be bound to any simple content. ...
... to any simple content. ...
...presentations it may be represented in the following ways: modal window - if level attribute value is modal modeless window - if level attribute value is modeless tooltip window - if level attribute value is ephemeral note: message element doesn't define a default presentation. therefore you should always specify a level attribute. example <xforms:trigger> <xforms:label>it's a button</xforms:label> <xforms:message level="modal" ev:event="domactivate">hello</xforms:message> </xforms:trigger> ...

XForms Select1 Element - Archive of obsolete content
e spec). the list of pre-defined items can be specified by either item (see the spec) or itemset (see the spec) elements. you can visually group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select1 element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special selection - this attribute, when set to 'open', allows the user to provide free entry to the list. possible values are open and closed, default is closed (see #representations section to refer if the attribute is s...
...ation). incremental - supported, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions the select1 element can be bound to a node containing simple content. ...
...n to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model. the relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is because a copy element can be used to add a subtree of nodes underneath the element that the select1 control is bound to. representations the xforms select1 element can be represented by the following widgets for the specified appearance attribute values: combobox - default representation (xhtml/xul) listbox - used when appearance = 'compact' (xhtml/xul) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul). xhtml widget characteristics analogous widgets is <...

XForms Trigger Element - Archive of obsolete content
introduction allows the user to initiate actions (see the spec). actions are described by the xforms action module (see the spec). attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type. actually, the trigger element doesn't interact with the data in the bound node. however, relevant model item property on the bound node has an effect on a trigger. ...
...r focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type. actually, the trigger element doesn't interact with the data in the bound node. however, relevant model item property on the bound node has an effect on a trigger. if the bound node is irrelevant, then the trigger will be hidden. representations the xforms trigger element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul). characteristics analogous widgets are <html:input type="button"/> and <xul:button/> link/clickabl...
...characteristics appearance attribute contains the value minimal analogue widget is <xhtml:a/>. ...

Test your skills: Form structure - Learn web development
this aim of this skill test is to assess whether you've understood our how to structure a web form article. note: you can try out the solution in the interactive editor below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. form structure 1 in this task we want you to structure the provided form features: separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "personal details" for the first two, and "comment information" for the second two). mark up each text label with an appropriate element so that it is semantically assoc...
... add a suitable set of structural elements around the label/field pairs to separate them out. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice this example in the interactive editor above. ...
...r are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for form structure 1 skill test". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. a link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you can't see the...

Performance
this highlights some performance pitfalls related to frame scripts/message manager usage and alternative approaches to avoid them. key points to keep in mind scripts registered during addon startup get executed during session restore. the more expensive they are to execute the longer it will take for the browser to become responsive after startup. frame scripts also get executed on non-restored tabs. all their overhead is thus not just incurred by active tabs but by the total number of tabs in a session. the following examples omit some boilerplate code for the sake of brevity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics. ...
...ive after startup. frame scripts also get executed on non-restored tabs. all their overhead is thus not just incurred by active tabs but by the total number of tabs in a session. the following examples omit some boilerplate code for the sake of brevity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics. performance best practices declaring stateless functions once per process bad: // addon.js services.mm.loadframescript("framescript.js", true) // framescript.js const precomputedconstants = // ... function helper(window, action) { // ... do some work on the window } function dosomething(message) { result = helper(content, message.data) sendasyncmessage("my-addon:response-from-child", {some...
...age-collected immediately after execution. as long as it the action does not happen frequently the memory and startup savings should outstrip the added cost of script evaluation. delaying the script registration until the session is restored my provide some middle ground for some addons. it does not provide the same memory footprint reductions but it improves application startup. beam down information in advance to avoid synchronous calls to the parent bad: // processscript.js function contentpolicy() { // ... } object.assign(contentypolicy.prototype, { classdescription: ..., classid: ..., contractid: ..., queryinterface: xpcomutils.generateqi([ci.nsicontentpolicy]), shouldload: function(type, location, origin, context) { let resultlist = services.cpmm.sendsyncm...

Automated performance testing and sheriffing
we have several test harnesses that test firefox for various performance characteristics (page load time, startup time, etc.). we also generate some metrics as part of the build process (like installer size) that are interesting to track over time. currently we aggregate this information in the perfherder web application where performance sheriffs watch for significant regressions, filing bugs as appropriate. ...
... time, etc.). we also generate some metrics as part of the build process (like installer size) that are interesting to track over time. currently we aggregate this information in the perfherder web application where performance sheriffs watch for significant regressions, filing bugs as appropriate. ...
...eresting to track over time. currently we aggregate this information in the perfherder web application where performance sheriffs watch for significant regressions, filing bugs as appropriate. ...

JSErrorFormatString
this article covers features introduced in spidermonkey 17 represent error message and type. syntax typedef struct jserrorformatstring { const char *format; uint16_t argcount; int16_t exntype; } jserrorformatstring; name type description format const char * the error format string in ascii. argcount uint16_t the number of arguments to expand in the formatted error message. exntype int16_t one of the jsexntype constants. ...
...matstring { const char *format; uint16_t argcount; int16_t exntype; } jserrorformatstring; name type description format const char * the error format string in ascii. argcount uint16_t the number of arguments to expand in the formatted error message. exntype int16_t one of the jsexntype constants. description jserrorformatstring is a struct to represent error message and type, returned by js_reporterrornumber function. ...
... format const char * the error format string in ascii. argcount uint16_t the number of arguments to expand in the formatted error message. exntype int16_t one of the jsexntype constants. description jserrorformatstring is a struct to represent error message and type, returned by js_reporterrornumber function. ...

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. ...
...ix 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. ...
...ample uses the currenttransform property to set a transformation matrix. a rectangle is then drawn using that transformation. ...

HTMLFormControlsCollection.namedItem() - Web APIs
the htmlformcontrolscollection.nameditem() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches. note that this version of nameditem() hides the one inherited from htmlcollection. like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.nameditem("value"). syntax var item = collection.nameditem(str); var item = collection[str]; parameters str is a domstring return value item is a radionodelist , element, or null. ...
... of nameditem() hides the one inherited from htmlcollection. like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.nameditem("value"). syntax var item = collection.nameditem(str); var item = collection[str]; parameters str is a domstring return value item is a radionodelist , element, or null. example html <form> <input id="my-form-control" type="textarea"> </form> javascript // returns the htmlinputelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications specification status comment html living standardthe definition of 'htmlformcontrolscollection.nameditem()' in that specification. living standard html5the defini...
...="my-form-control" type="textarea"> </form> javascript // returns the htmlinputelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications specification status comment html living standardthe definition of 'htmlformcontrolscollection.nameditem()' in that specification. living standard html5the definition of 'htmlformcontrolscollection' in that specification. recommendation in this snapshot of html living standard, the htmlformcontrolscollections is defined for the first time. ...

HTMLFormElement.length - Web APIs
the htmlformelement.length read-only property returns the number of controls in the <form> element. you can access the list of the form's controls using the elements property. this includes both elements that are descendents of the <form> element as well as elements that are made members of the form using their form property. the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. ...
...elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. syntax numcontrols = form.length; value numcontrols is the number of form controls within the <form>. this is the same as the number of the elements in the htmlformcontrolscollection returned by the elements property. ...
...e included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. syntax numcontrols = form.length; value numcontrols is the number of form controls within the <form>. this is the same as the number of the elements in the htmlformcontrolscollection returned by the elements property. example if (document.getelementbyid('form1').length > 1) { // more than one form control here } specifications specification status comment html living standardthe definition of 'htmlformelement: length' in that specification. living standard ...

HTMLSelectElement.form - Web APIs
the htmlselectelement.form read-only property returns a htmlformelement representing the form that this element is associated with. if the element is not associated with of a <form> element, then it returns null. syntax edit aform = aselectelement.form.selectname; example html <form action="http://www.google.com/search" method="get"> <label>google: <input type="search" name="q"></label> <input type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element. for select, the two possible values are "select-one" or "select-multiple", depending on the type of selection list. ...
... method="get"> <label>google: <input type="search" name="q"></label> <input type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element. for select, the two possible values are "select-one" or "select-multiple", depending on the type of selection list. ...
...nput type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element. for select, the two possible values are "select-one" or "select-multiple", depending on the type of selection list. the below code gives all select elements in a particular form a css class of "selectclass": <script type="text/javascript"> var form_element = document.getelementbyid('subscribe_form'); var vist = form_element.style; if (vist.display=='' || vist.display=='none') { vist.display = 'block'; } else { vist.display = 'none'; } </script> specifications specification status comment html living standardthe definition of 'form' in that specification. living standard html5the definition of ...

onMSVideoFormatChanged - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. onmsvideoformatchanged is an event which occurs when the video format changes. this proprietary property is specific to internet explorer and microsoft edge. ...
...web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. onmsvideoformatchanged is an event which occurs when the video format changes. this proprietary property is specific to internet explorer and microsoft edge. ...
...en implementations and the behavior may change in the future. onmsvideoformatchanged is an event which occurs when the video format changes. this proprietary property is specific to internet explorer and microsoft edge. ...

NetworkInformation.downlinkMax - Web APIs
examples the following example monitors the connection using the change event and logs changes as they occur. ...
... examples the following example monitors the connection using the change event and logs changes as they occur. ...
... draft initial definition ...

performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry type objects. a browser's recommended resource timing buffer size is at least 150 performance entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. ...
... entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("... ...
...objects the browser should hold in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("... performance.setresourcetimingbuffersize() = yes"); performance.setresourcetimingbuffersize(maxsize); } else { log("... performance.setresourcetimingbuffersize() = not supported"); } } specifications specification status comment resource timing level 1the definition of 'setresourcetimingbuffersize()' in that specification. candidate recommendation initial defin...

PerformanceNavigation - Web APIs
this interface is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancenavigation interface represents information about how the navigation to the current document was done. an object of this type can be obtained by calling the performance.navigation read-only attribute. properties the performancenavigation interface doesn't inherit any properties. performancenavigation.type read only an unsigned short which indicates how the navigation to this page was done. possible values are: type_navigate (0) the page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the url in the address bar. type_reload (1) the page was accessed by clicking the reloa...
...lues are: type_navigate (0) the page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the url in the address bar. type_reload (1) the page was accessed by clicking the reload button or via the location.reload() method. type_back_forward (2) the page was accessed by navigating into the history. type_reserved (255) any other way. performancenavigation.redirectcount read only an unsigned short representing the number of redirects done before reaching the page. methods the performance interface doesn't inherit any methods. performancenavigation.tojson() is a jsonizer returning a json object representing the performancenavigation object. specifications specification status comment navigation tim...
...unt read only an unsigned short representing the number of redirects done before reaching the page. methods the performance interface doesn't inherit any methods. performancenavigation.tojson() is a jsonizer returning a json object representing the performancenavigation object. specifications specification status comment navigation timingthe definition of 'performancenavigation' in that specification. recommendation initial definition. ...

PerformanceObserver() - Web APIs
the performanceobserver() constructor creates a new performanceobserver object with the given observer callback. the observer callback is invoked when performance entry events are recorded for the entry types that have been registered, via the observe() method. syntax var observer = new performanceobserver(callback); parameters callback a performanceobservercallback callback that will be invoked when observed performance events are recorded. when the callback is invoked, its first parameter is a list of performance observer entries and the second parameter is the observer object. return value a new performanceobserver object which will call the specified callback when observed performance events occur. ...
...manceobservercallback callback that will be invoked when observed performance events are recorded. when the callback is invoked, its first parameter is a list of performance observer entries and the second parameter is the observer object. return value a new performanceobserver object which will call the specified callback when observed performance events occur. ...
...d callback when observed performance events occur. example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver()' in that specification. candidate recommendation initial definition of performanceobserver() constructor. ...

PerformanceObserver.takeRecords() - Web APIs
the takerecords() method of the performanceobserver interface returns the current list of performance entries stored in the performance observer, emptying it out. syntax var performanceentry[] = performanceobserver.takerecords(); parameters none. return value a list of performanceentry objects. ...
... the takerecords() method of the performanceobserver interface returns the current list of performance entries stored in the performance observer, emptying it out. syntax var performanceentry[] = performanceobserver.takerecords(); parameters none. return value a list of performanceentry objects. ...
... candidate recommendation initial definition of takerecords() method. ...

PerformanceResourceTiming.connectStart - Web APIs
server to retrieve the resource. note: this feature is available in web workers. syntax resource.connectstart; return value a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...ource.connectstart; return value a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.domainLookupEnd - Web APIs
the domainlookupend read-only property returns the timestamp immediately after the browser finishes the domain name lookup for the resource. if the user agent has the domain information in cache, domainlookupstart and domainlookupend represent the times when the user agent starts and ends the domain data retrieval from the cache. note: this feature is available in web workers. syntax resource.domainlookupend; return value a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. ...
...ain data retrieval from the cache. note: this feature is available in web workers. syntax resource.domainlookupend; return value a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...source.domainlookupend; return value a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.domainLookupStart - Web APIs
browser starts the domain name lookup for the resource. note: this feature is available in web workers. syntax resource.domainlookupstart; return value a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... workers. syntax resource.domainlookupstart; return value a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.encodedBodySize - Web APIs
applied content-codings. syntax resource.encodedbodysize; return value a number representing the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. example the following example, the value of the size properties of all "resource" type events are logged. function log_sizes(perfentry){ // check for support of the performanceentry.*size properties and print their values // if supported. if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); ...
... working draft initial definition. ...
... working draft initial definition. ...

PerformanceResourceTiming.fetchStart - Web APIs
ely before the user agent starts to fetch the final resource in the redirection. note: this feature is available in web workers. syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...ature is available in web workers. syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.initiatorType - Web APIs
the initiatortype read-only property is a string that represents the type of resource that initiated the performance event. the value of this string is as follows: if the initiator is a element, the property returns the element's localname. if the initiator is a css resource, the property returns "css". if the initiator is a xmlhttprequest object, the property returns "xmlhttprequest". if the initiator is a performancenavigationtiming object, the property returns an empty string (""). note: this feature is available in web workers. ...
...r is a css resource, the property returns "css". if the initiator is a xmlhttprequest object, the property returns "xmlhttprequest". if the initiator is a performancenavigationtiming object, the property returns an empty string (""). note: this feature is available in web workers. syntax resource.initiatortype; return value a string representing the type of resource that initiated the performance event, as specified above. ...
...or is a xmlhttprequest object, the property returns "xmlhttprequest". if the initiator is a performancenavigationtiming object, the property returns an empty string (""). note: this feature is available in web workers. syntax resource.initiatortype; return value a string representing the type of resource that initiated the performance event, as specified above. example function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_initiatortype(p[i]); } } function print_initiatortype(perfentry) { // print this performance entry object's initiatortype value var value = "initiatortype" in perfentry; if (value) console.log("... initiatortype...

PerformanceResourceTiming.redirectEnd - Web APIs
yte of the response of the last redirect; otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectend; return value a timestamp immediately after receiving the last byte of the response of the last redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...vailable in web workers. syntax resource.redirectend; return value a timestamp immediately after receiving the last byte of the response of the last redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.redirectStart - Web APIs
g time of the fetch that initiates the redirect; otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectstart; return value a timestamp representing the start time of the fetch which initiates the redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...re is available in web workers. syntax resource.redirectstart; return value a timestamp representing the start time of the fetch which initiates the redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.requestStart - Web APIs
re is no end property for requeststart. note: this feature is available in web workers. syntax resource.requeststart; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...x resource.requeststart; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.responseEnd - Web APIs
is feature is available in web workers. syntax resource.responseend; return value a domhighrestimestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...hrestimestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.responseStart - Web APIs
response from the server, cache, or local resource. note: this feature is available in web workers. syntax resource.responsestart; return value a domhighrestimestamp immediately after the browser receives the first byte of the response from the server. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...kers. syntax resource.responsestart; return value a domhighrestimestamp immediately after the browser receives the first byte of the response from the server. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.secureConnectionStart - Web APIs
ionstart; return value if the resource is fetched over a secure connection, a domhighrestimestamp immediately before the browser starts the handshake process to secure the current connection. if a secure connection is not used, this property returns zero. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...stamp immediately before the browser starts the handshake process to secure the current connection. if a secure connection is not used, this property returns zero. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.transferSize - Web APIs
this property returns zero. syntax resource.transfersize; return value a number representing the size (in octets) of the fetched resource. the size includes the response header fields plus the response payload body (rfc7230). example the following example, the value of size properties of all "resource" type events are logged. function log_sizes(perfentry){ // check for support of the performanceentry.*size properties and print their values // if supported. if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); ...
... working draft initial definition. ...
... working draft initial definition. ...

PerformanceTiming.domInteractive - Web APIs
this property can be used to measure the speed of loading web sites that users feels. ...
... this property can be used to measure the speed of loading web sites that users feels. ...
...e event is thrown. this property can be used to measure the speed of loading web sites that users feels. nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom web fonts. check if you are in one of these cases before using this property as a proxy for the user experience of a web site's speed of loading. syntax time = performancetiming.dominteractive; specifications specification status comment navigation timingthe definition of 'performancetiming.dominteractive' in that specification. recommendation initial definition. ...

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"/><li...
...e="#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...
.../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. ...
... 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...
.... 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. ...

WebGL2RenderingContext.getInternalformatParameter() - Web APIs
the webgl2renderingcontext.getinternalformatparameter() method of the webgl 2 api returns information about implementation-dependent support for internal formats. syntax any gl.getinternalformatparameter(target, internalformat, pname); parameters target a glenum specifying the target renderbuffer object. possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. internalformat a glenum specifying the internal format about which to retrieve information (must be a color-renderable, depth-renderable or stencil-renderable format). pname a glenum specifying the type of information to query. possible values: gl.samples: returns a int32array containing sample counts supported for internalformat in descending order. ...
...lformat a glenum specifying the internal format about which to retrieve information (must be a color-renderable, depth-renderable or stencil-renderable format). pname a glenum specifying the type of information to query. possible values: gl.samples: returns a int32array containing sample counts supported for internalformat in descending order. return value depends on the requested information (as specified with pname). it is an int32array if pname is gl.samples. examples var samples = gl.getinternalformatparameter(gl.renderbuffer, gl.rgba8, gl.samples); specifications specification status comment webgl 2.0the definition of 'getinternalformatparameter' in that specification. editor's draft initial defin...
...ples. examples var samples = gl.getinternalformatparameter(gl.renderbuffer, gl.rgba8, gl.samples); specifications specification status comment webgl 2.0the definition of 'getinternalformatparameter' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgetinternalformativ' in that specification. standard man page of the (similar) opengl api. ...

WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
the webgl2renderingcontext.getuniformblockindex() method of the webgl 2 api retrieves the index of a uniform block within a webglprogram. syntax gluint gl.getuniformblockindex(program, uniformblockname); parameters program a webglprogram containing the uniform block. uniformname a domstring specifying the name of the uniform block to whose index to retrieve. return value a gluint indicating the uniform block index. ...
... editor's draft initial definition for webgl. ...
...ogram a webglprogram containing the uniform block. uniformname a domstring specifying the name of the uniform block to whose index to retrieve. return value a gluint indicating the uniform block index. examples // assuming a shader with the following declaration: // uniform ubodata { // mat4 foo; // } instancename; // use the block name, not the instance name: var blockindex = gl.getuniformblockindex(program, 'ubodata'); specifications specification status comment webgl 2.0the definition of 'getuniformblockindex' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgetuniformblockindex' in that specification. standard man page of the (similar) opengl api. ...

WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
the webglrenderingcontext.getshaderprecisionformat() method of the webgl api returns a new webglshaderprecisionformat object describing the range and precision for the specified shader numeric format. syntax webglshaderprecisionformat gl.getshaderprecisionformat(shadertype, precisiontype); parameters shadertype either a gl.fragment_shader or a gl.vertex_shader. precisiontype a precision type value. either gl.low_float, gl.medium_float, gl.high_float, gl.low_int, gl.medium_int, or gl.high_int. return value a webglshaderprecisionformat object or null, if an error occurs. exceptions gl.invalid_enum if the shader or precision types aren't recognized. gl.invalid_operation if the shader compiler isn't supported. ...
...pe a precision type value. either gl.low_float, gl.medium_float, gl.high_float, gl.low_int, gl.medium_int, or gl.high_int. return value a webglshaderprecisionformat object or null, if an error occurs. exceptions gl.invalid_enum if the shader or precision types aren't recognized. gl.invalid_operation if the shader compiler isn't supported. examples the following code gets the precision format of a gl.vertex_shader with a gl.medium_float precision type. ...
...or null, if an error occurs. exceptions gl.invalid_enum if the shader or precision types aren't recognized. gl.invalid_operation if the shader compiler isn't supported. examples the following code gets the precision format of a gl.vertex_shader with a gl.medium_float precision type. var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status comment webgl 1.0the definition of 'getshaderprecisionformat' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glgetshaderprecisionformat' in that specification. ...

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 di...
... 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 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. the scene is represented by a scene obj...
... 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. ...

Feature-Policy: legacy-image-formats - HTTP
'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

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 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. ...
... 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. ...

SyntaxError: redeclaration of formal parameter "x" - JavaScript
redeclaring the same variable within the same function or block scope using let is not allowed in javascript. examples redeclared argument in this case, the variable "arg" redeclares the argument. ...
...redeclaring the same variable within the same function or block scope using let is not allowed in javascript. examples redeclared argument in this case, the variable "arg" redeclares the argument. ...
...the same variable name occurs as a function parameter and is then redeclared using a let assignment in a function body again. redeclaring the same variable within the same function or block scope using let is not allowed in javascript. examples redeclared argument in this case, the variable "arg" redeclares the argument. function f(arg) { let arg = 'foo'; } // syntaxerror: redeclaration of formal parameter "arg" if you want to change the value of "arg" in the function body, you can do so, but you do not need to declare the same variable again. in other words: you can omit the let keyword. if you want to create a new variable, you need to rename it as conflicts with the function parameter already. function f(arg) { arg = 'foo'; } function f(arg) { let bar = 'foo'; } ...

Intl​.List​Format​.prototype​.resolvedOptions() - JavaScript
description the object returned by resolvedoptions() has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale. ...
... description the object returned by resolvedoptions() has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale. ...
...tyle the value provided for this property in the options argument of the constructor or the default value ("long"). its value is either "long", "short", or "narrow". type the value provided for this property in the options argument of the constructor or the default value ("conjunction"). its value is either "conjunction", "disjunction", or "unit". examples using resolvedoptions const delistformatter = new intl.listformat("de-de", { style: "short" }); const usedoptions = de.resolvedoptions(); console.log(usedoptions.locale); // "de-de" console.log(usedoptions.style); // "short" console.log(usedoptions.type); // "conjunction" (the default value) specifications specification intl.listformatthe definition of 'resolvedoptions()' in that specification. ...

Using dns-prefetch - Web Performance
ource from a (third party) server, that cross-origin’s domain name must be resolved to an ip address before the browser can issue the request. this process is known as dns resolution. while dns caching can help to reduce this latency, dns resolution can add significant latency to requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. the html <link> element offers this functionality by way of a rel attribute value of dns-prefetch. the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!--...
...n. this is because the ip behind your site’s domain will have already been resolved by the time the browser sees the hint. second, it’s also possible to specify dns-prefetch (and other resources hints) as an http header by using the http link field: link: <https://fonts.gstatic.com/>; rel=dns-prefetch third, consider pairing dns-prefetch with the preconnect hint. while dns-prefetch only performs a dns lookup, preconnect establishes a connection to a server. this process includes dns resolution, as well as establishing the tcp connection, and performing the tls handshake—if a site is served over https. combining the two provides an opportunity to further reduce the perceived latency of cross-origin requests. you can safely use them together like so: <link rel="preconnect" href="https:...
... ...

The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
ndation. development of the xslt processor is ongoing, and this document will be updated as functionality is expanded. ...
...age (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)...
...child descendant descendant-or-self following following-sibling namespace (not supported) parent preceding preceding-sibling self functions boolean() (supported) ceiling() (supported) concat() (supported) contains() (supported) count() (supported) current() (supported) document() (supported) element-available() (supported) false() (supported) floor() (supported) format-number() (supported) function-available() (supported) generate-id() (supported) id() (partially supported) key() (supported) lang() (supported) last() (supported) local-name() (supported) name() (supported) namespace-uri() (supported) normalize-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supp...

Advanced Example - XSLT: Extensible Stylesheet Language Transformations
alue 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...
...tnode(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/...
...nts 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> ...

Converting WebAssembly text format to wasm - WebAssembly
webassembly has an s-expression-based textual representation, an intermediate form designed to be exposed in text editors, browser developer tools, etc. this article explains a little bit about how it works, and how to use available tools to convert text format files to the .wasm assembly format. note: text format files are usually saved with a .wat extension. historically, a .wast extension was also used, however that's now used for the scripting language used by the webassembly testsuite. ...
...owser developer tools, etc. this article explains a little bit about how it works, and how to use available tools to convert text format files to the .wasm assembly format. note: text format files are usually saved with a .wat extension. historically, a .wast extension was also used, however that's now used for the scripting language used by the webassembly testsuite. ...
...ted_func is exported for use in our environment (e.g. the web app in which we are using our webassembly module). when it is called, it calls an imported javascript function called imported_func, which is run with the value (42) provided as a parameter. converting the text .wat into a binary .wasm file let’s have a go at converting the above .wat text representation example into .wasm assembly format. to start with, make a copy of the above listing inside a text file; call it simple.wat. we need to assemble this textual representation into the assembly language the browser actually reads before we can use it. to do this, we can use the wabt tool, which includes compilers to convert between webassembly’s text representation and wasm, and vice versa, plus more besides. go to https://git...

Actionscript Performance Tests - Archive of obsolete content
similar to the acceptance tests set the environment variables avm, asc, builtinabc. the runtests.py test harness works by parsing the abc stdout for lines like: 'metric time 566'. the testconfig.txt file defines groups of tests to run (e.g. sunspider, scimark, language). by default the time for each test is output. use the --memory flag to capture the maximum private bytes memory (high water mark) for a test. by default each test is run a single time. to run each test multiple times use the --iterations flag. when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated. ...
... the mean value to fall within 95% of the measured results. for example if the mean is 100 and the 95% confidence interval is 2%, 95% of the expected values should fall between 98 and 102. to compare two vms against each other export avm2=<path to 2nd vm> or use --avm2=<path to 2nd vm>. the percentage difference is calculated between the two vms. see the --help usage for more details about performance tests. # to run a group of tests (e.g. sunspider) $ ./runtests.py sunspider/*.as sunspider/as3/*.as test avm metric sunspider/access-binary-trees.as 584 time sunspider/access-fannkuch.as 364 time ... # to set vm args (e.g. interp) $ ./runtests.py --vmargs="-dinterp" sunspider/*.as test ...

performInstall - Archive of obsolete content
summary performs the actual installation of the software. moves all components to their final locations, launches any pending executions, and registers the package and all of its subcomponents in the client version registry. method of install syntax int performinstall(); parameters none. returns an integer error code. for a list of possible values, see return codes. in some situations the method may return other errors. in a few cases you may get a registry error. example use the following code to abort or to finalize an installation, based on a variable you set earlier in your code: initinstall("royal airways tripplanner", "/royalairways/tripplanner", "1.0.0.0"); ... ...
... list of possible values, see return codes. ...

mozilla-dev-platform - Archive of obsolete content
about newsgroup summary for mozilla.dev.platform (google groups link) is for people working on the mozilla application framework ("mozilla-the-platform"). ...
...n the mozilla application framework ("mozilla-the-platform"). ...

Developing cross-browser and cross-platform pages - Archive of obsolete content
as a web author, you understandably want to avoid script errors and page layout problems and you may want to ensure your scripts reach as wide an audience as possible. there are 2 known approaches for such goals: the browser identification approach (also known as useragent string detection and often referred as "browser sniffing") and the object/feature support detection approach. the browser identification approach is now known to be complicated, unreliable and difficult to maintain. ...
...ternet explorer uses the windows registry safari, konqueror and icab browsers can mask their browser identity under internet explorer or netscape labels a user or browser distributor can put what they want in the navigator.useragent string and this may trick your code into executing a "wrong" block of code. moreover, there are many cases where even the accurately-identified browser does not perform as it is reputed/expected to. so if "browser sniffing" is unreliable and difficult, then how do you code safely for different browsers and different browser versions? ... using object/feature support detection approach: best and overall most reliable when you use object/feature support detection, you only implement those features whose support you have first tested and verified on the visiting...

XForms Range Element - Archive of obsolete content
control. single-node binding special incremental - supported, default value is false start - lower bound of possible values end - upper bound of possible values step - is used for incrementing/decrementing values start/end/step attributes if the value of the bound instance node is outside the range of values specified by the start and end attributes, then the range element receives a xforms-out-of-range event. if the bound value then becomes in range, the range element receives a xforms-in-range event. start specifies the lower bound of possible values, i.e. values can't be less than the value of this attribute. if this attribute is omitted, then it is assumed to be 0. end specifies the upper bound of possible values, i.e. values can't be greater than the value of this attribute. i...
... changed upon user interaction. if this attribute is omitted, then it is assumed to be the value of end - start / 20. type restrictions the range element can be bound to a node of type xsd:duration, xsd:date, xsd:time, xsd:datetime, xsd:gyearmonth, xsd:gyear, xsd:gmonthday, xsd:gday, xsd:gmonth, xsd:float, xsd:decimal or xsd:double or any type derived from one of these. representations the xforms range element is represented by a slider widget (xhtml only). characteristics analogous widget is <xul:scale/>, which is available in fx 3.0 only if the incremental attribute has the value true, the value of the bound node will be updated upon each movement of the slider's thumb. ...

XForms Secret Element - Archive of obsolete content
ccesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special inputmode - isn't supported. incremental - supported. the default value is false. type restrictions the secret element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these. representations the xforms secret element is represented by a password field. the password field is a text field, the value of which is hidden by asterisks (xhtml/xul). characteristics analogous widgets are <xhtml:input type="password"/> and <xul:textbox type="password"/> if the incremental attribute is present and has the value true, then the bound instance node is updated on every user input. please keep in mind that...
...text field, the value of which is hidden by asterisks (xhtml/xul). characteristics analogous widgets are <xhtml:input type="password"/> and <xul:textbox type="password"/> if the incremental attribute is present and has the value true, then the bound instance node is updated on every user input. please keep in mind that the instance data will hold exactly what the user gave as input. any other xform control bound to that data will show that data 'as is'. ...

XForms Switch Module - Archive of obsolete content
the module defines for this switch, case and toggle elements. switch element the element (see the spec) is used in conjunction with case and toggle elements. the switch element contains case elements which in turn contain markup. only the contents of a single case may be displayed at one time. the toggle element is an action that when triggered will make a case selected and visible and thereby hiding all other case elements contained by the same switch. attributes single-node binding type restrictions the switch element can be bound to a node containing data of any type. ...
..., having a relevant model item property on the bound node has an effect on a switch. binding a switch to a data node will also set a context that the expressions contained inside the case elements can build upon. representations the switch element doesn't have a visual representation. case element this element (see the spec) encloses markup to be conditionally rendered. the content elements (e.g. form controls, groups, switches, repeats and host language elements) within a non-selected case are not rendered. correspondingly, content elements in a case that becomes selected are visible. attributes special selected - determines the initial selected state of the case. if multiple cases within a switch are marked as selected="true", the first selected case will appear and all others ...

XForms Upload Element - Archive of obsolete content
introduction provides a means for the user to select a file (see the spec) from the file system. a filter can be specified to limit the types of files that the user can select from. visually, the upload control is shown as a file picker dialog that hides disallowed (filtered) file types. the xforms author can set the filter by using the mediatype attribute directly on the upload element or by placing a mediatype element (see the spec) as a direct child of the upload element. attributes ui common appearance - isn't supported. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special mediatype - supported. incremental - isn't supported. type restrictions the upload element can be bound to a node of type xsd:anyuri, xsd:base64bina...
...tributes ui common appearance - isn't supported. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special mediatype - supported. incremental - isn't supported. type restrictions the upload element can be bound to a node of type xsd:anyuri, xsd:base64binary or xsd:hexbinary or any type derived from one of these. representations the xforms upload element is represented by visually combining three widgets: a text field that shows the uri of the selected file, a button to open the file picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only). characteristics analogous widget is <xhtml:input type="file"/> ...

Using XForms and PHP - Archive of obsolete content
to do that, you need to use the header() php function: <?php header("content-type: application/xhtml+xml; charset=utf-8"); ... ?> but remember this (quote from php documentation): remember that header() must be called before any actual output is sent, either by normal html tags, blank lines in a file, or from php. it is a very common error to read code with include(), or require(), functions, or another file access function, and have spaces or empty lines that are output before header() is called. ...
...either by normal html tags, blank lines in a file, or from php. it is a very common error to read code with include(), or require(), functions, or another file access function, and have spaces or empty lines that are output before header() is called. the same problem exists when using a single php/html file. parsing submitted data depending on the submission type, you might get different data formats on the server side. to really use the power of xforms (/xml) you would probably submit xml. there is some help in getting to the raw xml on the php documentation site. how to actually parse and use the xml data depends heavily on what you want to achieve and on the php version. to get a dom document on php 4 i usually do something like this: $data = $http_raw_post_data; $dom = domxml_open_mem...

Information architecture - MDN Web Docs Glossary: Definitions of Web-related terms
information architecture, as applied to web design and development, is the practice of organizing the information / content / functionality of a web site so that it presents the best user experience it can, with information and services being easily usable and findable. ...
... information architecture, as applied to web design and development, is the practice of organizing the information / content / functionality of a web site so that it presents the best user experience it can, with information and services being easily usable and findable. ...

Web performance - MDN Web Docs Glossary: Definitions of Web-related terms
web performance is the objective time from when a request for content is made until the requested content is displayed in the user's browser, objective render times, and the subjective user experience of load time and runtime. objectively, it is measurable time, in milliseconds, it takes for the web page or web application to be downloaded, painted in the user's web browser, and become responsive and interactive. it is the frames per second and times the main thread is not available for user interactions. subjectively, it is the user's perception of whether the time it takes between the time the user requests the content and the time until the user feels the content requested is available and usable feels slow or fast. ...
...s web browser, and become responsive and interactive. it is the frames per second and times the main thread is not available for user interactions. subjectively, it is the user's perception of whether the time it takes between the time the user requests the content and the time until the user feels the content requested is available and usable feels slow or fast. learn more learn about web performance perceived performance ...

XForms - MDN Web Docs Glossary: Definitions of Web-related terms
xforms is a convention for building web forms and processing form data in the xml format. no major browser supports xforms any longer—we suggest using html5 forms instead. ...
... xforms is a convention for building web forms and processing form data in the xml format. no major browser supports xforms any longer—we suggest using html5 forms instead. ...

Test your skills: Images and Form elements - Learn web development
note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you have an image that is overflowing the box. ...
...wing the box. we want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task, you have a simple form. your task is to make the following changes to the way this form looks: use attribute selectors to target the search field and button inside .myform. make the form field and button use the same text size as the rest of the form. give the form field and button 10 px of padding. give the button a purple background (i used rebeccapurple), white foreground, no border and rounded corners of 5px.

Accessibility information for UI designers and developers
1.5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface. forms in forms, provide labels for all controls. this includes form elements like inputs and select boxes, but also buttons. for form elements, it should be clear what kind of input is expected. placeholders are best avoided for this, as they are often too low in contrast. it is more helpful to describe what an input element is for in text just above or underneath the input. error recovery when yo...
...th a keyboard, it lets people type a character, say ‘k’, to jump directly to options starting with ‘k’. it is recommended to use native controls, visibly or under the hood. links vs buttons to keep your interface in line with user expectations, use links for interactions that go somewhere (on the current page or another page) and buttons for interactions that do something (like submit a form or open an overlay). links can be styled as buttons and vice versa, but designers are advised to avoid this where possible. motion on pages with transitions and animations, note that some users could experience distraction, dizziness or nausea. pages with a parallax effect can particularly cause troubles. to help these users, you could offer a setting to turn off animations, or wrap the css i...

Information for users
firefox 2 now has help topics (from the menubar: ? ...
... firefox accessibility features this page defines most of the accessibility features possible in firefox. features include assistive technology support on windows (like window-eyes, jaws, etc.), firefox keyboard support, available accessibility extensions like fire vox and other extensions. assistive technology compatibility this is a wiki page which users can edit to provide up to date information on any issues related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice input software and on screen keyboards. planning ahead for accessibility this document is intended to help testers and designers understand and plan what still needs to be added to our ui for full usable accessibility. please give us feedback on the discussion list! fir...

Firefox Operational Information Database: SQLite
a large amount of operational information about websites visited and browser configuration is stored in relational databases in sqlite used by firefox. the sqlite manager add-on allows convenient browsing of this information. (install the sqlite mangager add-on, click tools -> sqlite manager. ...
...e database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) some databases are used by the browser itself, others are used by applications that you have installed or used; for example: content-prefs.sqlite cookies.sqlite download.sqlite formhistory.sqlite persmissions.sqlite places.sqlite search.sqlite signons.sqlite webappstore.sqlite ...

Localization formats
o, which many localizers who are familiar with linux and other projects understand mozilla has a basic tool called main.lang checker, which can show any untranslated files to the localizer no need to compile to .mo file so a localizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural forms no context for localizers unless you provide good comments no styling by localizers if it is needed may be slower because file is not compiled into binaries not used as a standard by any other localization project no tools to validate syntax, so a localizer may cause accidental errors that can cause breakage (level of breakage depends on level of error) cannot use po editor, which most loc...
...with this arrangement, content for localization is presented in the following manner: msgid "coming soon" msgstr "bientôt disponible" where the value in the "" of the msgid is the english content, and the value in the "" of the msgstr is the translation. msgstr can be longer translations than just the exact above. for example, below is the entire introduction used for...

GPU performance
apitrace - open source, works ok. pvrtrace - doesn't seem to emit traces on android/nexus s. ...
...st i checked required a special build to be used. nvidia parallel nsight - haven't tried. amd gpu shaderanalyzer - will compile a shader and show the machine code and give static pipeline estimations. not that useful for firefox because all of our shaders are pretty simple. amd gpu perfstudio - i had trouble getting this to work, and can't remember whether i actually did or not. intel graphics performance analyzers - haven't tried. apitrace - open source, works ok. pvrtrace - doesn't seem to emit traces on android/nexus s. looks like it's designed for x11-based linux-arm devices, omap3 is mentioned a lot in the docs ... guides accurately profiling direct3d api calls (direct3d 9)- suggests avoiding normal profilers like xperf and instead measuring the time to flush the command buffer. os x - be...

Measuring performance using the PerfMeasurement.jsm code module
note: the perfmeasurement.jsm javascript code module can only be used from chrome -- that is, from within the application itself or an add-on. the first thing you need to do is to import the module into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") you can then create a perfmeasurement object. you give the constructor a bit-mask of events you're interested in; see note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems. ...
...benchmark a function that is pretty fast (but not fast enough), so we run it several thousand times: for (let i = 0; i < 10000; i++) { set_up_some_state(); monitor.start(); code_to_be_benchmarked(); monitor.stop(); clean_up_afterward(); } we call the perfmeasurement object's start() method when we want to start recording, and stop() when we want to stop recording. this lets us record information only for the specific code section we want to measure. since we enable monitoring immediately before calling code_to_be_benchmarked(), and disable it as soon as it returns, the code in set_up_some_state() and clean_up_afterward() is not measured. the monitor object automatically accumulates counts over start/stop cycles (that is, it doesn't automatically zero the counters each time you sta...

NSS Key Log Format
uild.sh are not affected). distributors can re-enable it at compile time though (using the nss_allow_sslkeylogfile=1 make variable) which is done for the official firefox binaries. (see bug 1188657.) notably, debian does not have this option enabled, see debian bug 842292. this key log file is a series of lines. comment lines begin with a sharp character ('#') and are ignored. secrets follow the format <label> <space> <clientrandom> <space> <secret> where: <label> describes the following secret. <clientrandom> is 32 bytes random value from the client hello message, encoded as 64 hexadecimal characters. <secret> depends on the label (see below). the following labels are defined, followed by a description of the secret: rsa: 48 bytes for the premaster secret, encoded as 96 hexadecimal...
...cation traffic secret for the client side (for tls 1.3) server_traffic_secret_0: the first hex-encoded application traffic secret for the server side (for tls 1.3) early_exporter_secret: the hex-encoded early exporter secret (for tls 1.3, used for 0-rtt keys in older quic drafts). exporter_secret: the hex-encoded exporter secret (for tls 1.3, used for 1-rtt keys in older quic drafts) the rsa form allows ciphersuites using rsa key-agreement to be logged and was the first form supported by wireshark 1.6.0. it has been superseded by client_random which also works with other key-agreement algorithms (such as those based on diffie-hellman) and is supported since wireshark 1.8.0. the tls 1.3 lines are supported since nss 3.34 (bug 1287711) and wireshark 2.4 (early_exporter_secret exists since ...

nsIAuthInformation
netwerk/base/public/nsiauthinformation.idlscriptable a object that holds authentication information. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the caller of nsiauthprompt2.promptusernameandpassword() or nsiauthprompt2.promptpasswordasync() provides an object implementing this interface; the prompt implementation can then read the values here to prefill the dialog. after the user entered the authentication information, it should set the attributes of this object to indicate to the caller what was entered by the user. attributes attribute type description authenticationscheme autf8string the authentication scheme used for this request, if applicable. if the protocol f...
...sed to prefill the dialog or be shown in some other way to the user. on return, this parameter should contain the username entered by the user. this field can only be changed if the #only_password flag is not set. constants constant value description auth_host 1 this dialog belongs to a network host. auth_proxy 2 this dialog belongs to a proxy. need_domain 4 this dialog needs domain information. the user interface should show a domain field, prefilled with the domain attributes value. only_password 8 this dialog only asks for password information. authentication prompts should not show a username field. attempts to change the username field will have no effect. nsiauthprompt2 implementations should, however, show its initial value to the user in some form. for example, a paragra...

nsIDOMHTMLFormElement
see that page for details. ...
...see that page for details. ...

nsIXFormsNSInstanceElement
nsixformsnsinstanceelement is implemented by all xforms <instance/> elements, defining mozilla extensions. extensions/xforms/nsixformsnsinstanceelement.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) interface code [scriptable, uuid(80669b92-8331-4f92-aaf8-06e80e6827b3)] interface nsixformsnsinstanceelement : nsisupports { nsidomdocument getinstancedocument(); }; methods getinstancedocument nsidomdocument getinstancedocument(); getinstancedocument returns a dom document that corresponds to the instance data associated with the instance element. essentially it is just a shortcut to nsixformsmodelelement::getinstancedocument() for the given instance element. ...
... ...

nsIXFormsNSModelElement
nsixformsnsmodelelement is implemented by all xforms <model/> elements. it defines mozilla extensions to the nsixformsmodelelement interface. extensions/xforms/nsixformsnsmodelelement.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) interface code [scriptable, uuid(85fd60c7-1db7-40c0-ae8d-f723fdd1eea8)] interface nsixformsnsmodelelement : nsisupports { nsidomnodelist getinstancedocuments(); }; methods getinstancedocuments nsidomnodelist getinstancedocuments(); getinstancedocuments returns a nsidomnodelist containing all the instance documents for the model, making it possible to enumerate over instances in the model without knowing their names. ...
...c0-ae8d-f723fdd1eea8)] interface nsixformsnsmodelelement : nsisupports { nsidomnodelist getinstancedocuments(); }; methods getinstancedocuments nsidomnodelist getinstancedocuments(); getinstancedocuments returns a nsidomnodelist containing all the instance documents for the model, making it possible to enumerate over instances in the model without knowing their names. related interfaces nsixformsmodelelement example code none. ...

Using dynamic styling information - Web APIs
in many cases, and where possible, it really is best practice to dynamically manipulate classes via the classname property since the ultimate appearance of all of the styling hooks can be controlled in a single stylesheet. ...
...click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button onclick="resetstyle('p1');">reset background color</button> </body> </html> the getcomputedstyle() method on the document.defaultview object returns all styles that have actually been computed for an element. see example 6: getcomputedstyle in the examples chapter for more information on how to use this method. dom style object the style object represents an individual style statement. unlike the individual rules available from the document.stylesheets collection, the style object is accessed from the document or from the elements to which that style is applied. it represents the in-line styles on a particular element. more important than the two properties noted here ...

FormDataEvent() - Web APIs
the formdataevent() constructor creates a new formdataevent object instance. syntax new formdataevent(type[, formeventinit]); values type a domstring representing the name of the event. formeventinit optional a formeventinit dictionary, which can take the following optional fields: bubbles: a boolean indicating whether the event bubbles. the default is false. cancelable: a boolean indicating whether the event can be cancelled. the default is false. composed: a boolean indicating whether the event will trigger listeners outside of a shadow root (see event.composed for more details). the default is false. formdata: a formdata object to pre-populate the formdataevent with. this would then be accessed through the formdataevent.formdata property. examples let fd = new for...
...lt is false. composed: a boolean indicating whether the event will trigger listeners outside of a shadow root (see event.composed for more details). the default is false. formdata: a formdata object to pre-populate the formdataevent with. this would then be accessed through the formdataevent.formdata property. examples let fd = new formdata(); fd.append('test', 'test'); let fdev = new formdataevent('formdata', { formdata: fd }); for (let value of fdev.formdata.values()) { console.log(value); } specifications specification status comment html living standardthe definition of 'formdataevent' in that specification. living standard initial definition ...

HTMLFormElement.encoding - Web APIs
...
... ...

HTMLFormElement.submit() - Web APIs
the htmlformelement.submit() method submits a given <form>. this method is similar, but not identical to, activating a form's submit <button>. when invoking this method directly, however: no submit event is raised. in particular, the form's onsubmit event handler is not run. constraint validation is not triggered. the htmlformelement.requestsubmit() method is identical to activating a form's submit <button> and does not have these differences. if a form control (such as a submit button) has a name or id of submit, this method will mask the form's submit method. <input> with attribute type="submit" will not be submitted with the form when using htmlformelement.submit(), but it would be submitted when you do it with original html form submit. ...
...tical to activating a form's submit <button> and does not have these differences. if a form control (such as a submit button) has a name or id of submit, this method will mask the form's submit method. <input> with attribute type="submit" will not be submitted with the form when using htmlformelement.submit(), but it would be submitted when you do it with original html form submit. syntax htmlformelement.submit() example document.forms["myform"].submit(); specifications specification status comment html living standardthe definition of 'htmlformelement: submit' in that specification. living standard ...

NavigatorID.platform - Web APIs
returns a string representing the platform of the browser. the specification allows browsers to always return the empty string, so don't rely on this property to get a reliable answer. syntax platform = navigator.platform value a domstring identifying the platform on which the browser is running, or an empty string if the browser declines to (or is unable to) identify the platform. platform is a string that must be an empty string or a string representing the platform on which the browser is executing. for example: "macintel", "win32", "freebsd i386", "webtv os" example console.log(navigator.platform); usage notes most browsers, including chrome, edge, and firefox 63 and later, return "win32" even if running on a 64-bit version of windows. internet explorer and versions of firefox p...
..." example console.log(navigator.platform); usage notes most browsers, including chrome, edge, and firefox 63 and later, return "win32" even if running on a 64-bit version of windows. internet explorer and versions of firefox prior to version 63 still report "win64". specifications specification status comment html living standardthe definition of 'navigatorid.platform' in that specification. living standard initial definition. ...

NetworkInformation.downlink - Web APIs
the downlink read-only property of the networkinformation interface returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. this value is based on recently observed application layer throughput across recently active connections, excluding connections made to a private address space. in the absence of recent bandwidth measurement data, the attribute value is determined by the properties of the underlying connection technology. note that chrome-based browsers do not conform to the specification, and arbitrarily cap the reported downlink at a maximum of 10 mbps as an anti-fingerprinting measure. similar caps exist for the reported latency. syntax var downlink = networkinformation.downlink value a double. specifications...
...underlying connection technology. note that chrome-based browsers do not conform to the specification, and arbitrarily cap the reported downlink at a maximum of 10 mbps as an anti-fingerprinting measure. similar caps exist for the reported latency. syntax var downlink = networkinformation.downlink value a double. specifications specification status comment network information apithe definition of 'downlink' in that specification. draft initial definition. ...

Performance.onresourcetimingbufferfull - Web APIs
the onresourcetimingbufferfull property is an event handler that will be called when the resourcetimingbufferfull event is fired. this event is fired when the browser's resource timing performance buffer is full. note: this feature is available in web workers. syntax callback = performance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired. examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
...n web workers. syntax callback = performance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired. examples the following example sets a callback function on the onresourcetimingbufferfull property. function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification. candidate recommendation initial...

Performance: resourcetimingbufferfull event - Web APIs
red when the browser's resource timing buffer is full. bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
... event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification. candi...

PerformanceNavigationTiming.toJSON() - Web APIs
the tojson() method is a serializer - it returns a json representation of the performancenavigationtiming object. syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performancenavigationtiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes. ...
... - it returns a json representation of the performancenavigationtiming object. syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performancenavigationtiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes. example // get a resource performance entry var perfentries = performance.getentriesbytype("navigation"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performancenavigationtiming.tojson() = " + s); specifications specification status comment navigation timing level 2the definition of 'tojson()' in that specification. wor...

PerformanceNavigationTiming.type - Web APIs
reload navigation is through the browser's reload operation or location.reload(). back_forward navigation is through the browser's history traversal operation. prerender navigation is initiated by a prerender hint. ...
...s history traversal operation. prerender navigation is initiated by a prerender hint. this property is read only . syntax perfentry.type; return value a string which is one of the values listed above. example the following example illustrates this property's usage. ...

PerformanceObserver - Web APIs
the performanceobserver interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline. note: this feature is available in web workers. constructor performanceobserver() creates and returns a new performanceobserver object. methods performanceobserver.observe() specifies the set of entry types to observe. the performance observer's callback function will be invoked when a performance entry is recorded for one of the specified entrytypes performanceobserver.disconnect() stops the performance observer callback from receiving performance entries. performanceobserver.takerecords() returns the current list of performance entries stored in the performance observer, emptying it out. ...
...d for one of the specified entrytypes performanceobserver.disconnect() stops the performance observer callback from receiving performance entries. performanceobserver.takerecords() returns the current list of performance entries stored in the performance observer, emptying it out. example function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver' in that specification. candidate recommendation initial definition of performanceobserver interface. ...

PerformanceResourceTiming.connectEnd - Web APIs
ion, as well as other time intervals such as ssl handshake and socks authentication. note: this feature is available in web workers. syntax resource.connectend; return value a domhighrestimestamp representing the time after a connection is established. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
...s feature is available in web workers. syntax resource.connectend; return value a domhighrestimestamp representing the time after a connection is established. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...

PerformanceResourceTiming.decodedBodySize - Web APIs
working draft initial definition. ...
... working draft initial definition. ...

PerformanceResourceTiming.nextHopProtocol - Web APIs
rotocol. otherwise, this property returns the alpn protocol id of the first hop to the proxy. note: this feature is available in web workers. syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301). example the following example uses the nexthopprotocol property. ...
...note: this feature is available in web workers. syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301). example the following example uses the nexthopprotocol property. ...

PerformanceResourceTiming.toJSON() - Web APIs
the tojson() method is a serializer that returns a json representation of the performanceresourcetiming object. syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performanceresourcetiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes. ...
...izer that returns a json representation of the performanceresourcetiming object. syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performanceresourcetiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes. example // get a resource performance entry var perfentries = performance.getentriesbytype("resource"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performanceentry.tojson = " + s); specifications specification status comment resource timing level 2the definition of 'tojson' in that specification. working draft ...

PerformanceTiming.connectEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.connectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the connection is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. ...
...nection is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated. syntax time = performancetiming.connectend; specifications specification status comment navigation timingthe definition of 'performancetiming.connectend' in that specification. recommendation initial definition. ...

PerformanceTiming.connectStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.connectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. ...
...gned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. syntax time = performancetiming.connectstart; specifications specification status comment navigation timingthe definition of 'performancetiming.connectstart' in that specification. recommendation initial definition. ...

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 ...
...ck(); 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. ...
...eturn 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. ...