Creating a cross-browser video player - Developer guides
l allows users who have javascript turned off (for whatever reason) to still have access to the browser's native controls. a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file. this provides the player with data such as video duration and format. note: ie9 behaves differently than most other browsers when a poster attribute is set. most browsers interpret the presence of a poster attribute to mean that the specified image is to be displayed until the user chooses to play the video. ie9 will only use the specified poster image in this way if preload="none" is set; otherwise, it will take the first still of the video and displ...
...e of 0. the function of these attributes is self-explanatory, with min indicating the minimum allowed value of the progress element and value indicating its current value. it also needs to have a maximum value set so that it can display its range correctly, and this can be done via the max attribute, which needs to be set to the maximum playing time of the video. ...
... value of the progress element and value indicating its current value. it also needs to have a maximum value set so that it can display its range correctly, and this can be done via the max attribute, which needs to be set to the maximum playing time of the video. this is obtained from the video's duration attribute, which again is part of the media api. ...
...And 7 more matches

transition-delay - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the delay may be zero, positive, or negative: a value of 0s (or 0ms) will begin the transition effect immediately. a positive value will delay the start of the transition effect for the given length of time. a negative value will begin the transition effect immediately, and partway through the effect. ...
...># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top...
...font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { e...
...And 6 more matches

transition - CSS: Cascading Style Sheets
the transition css property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. 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. transitions enable you to define the transition between two states of an element. different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript. ...
...lease clone https://github.com/mdn/interactive-examples and send us a pull request. transitions enable you to define the transition between two states of an element. different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript. ...
...fine the transition between two states of an element. different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript. ...
...And 6 more matches

Configuring servers for Ogg media - HTTP
media properly. handle http 1.1 byte range requests correctly in order to support seeking and playing back regions of the media that aren't yet downloaded, gecko uses http 1.1 byte-range requests to retrieve the media from the seek target position. in addition, gecko uses byte-range requests to seek to the end of the media (assuming you serve the content-length header) in order to determine the duration of the media. your server should accept the accept-ranges: bytes http header if it can accept byte-range requests. it must return 206: partial content to all byte range requests; otherwise, browsers can't be sure you actually support byte range requests. your server must also return 206: partial content for the request range: bytes=0- as well. include regular key frames when the browser seeks...
...periment a bit to get the right balance between file size and seek performance. consider using the preload attribute the html <audio> and <video> elements provide the preload attribute, which tells the browser to attempt to download the entire media when the page loads. without preload, the browser only downloads enough of the media to display the first video frame, and to determine the media's duration. preload is off by default, so if getting to video is the point of your web page, your users may appreciate it if you include preload in your video elements. using preload="metadata" will preload the media file's metadata and possibly the first few frames of video. setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assu...
... may appreciate it if you include preload in your video elements. using preload="metadata" will preload the media file's metadata and possibly the first few frames of video. setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assumption that the user will play it. configuration for older firefox versions serve x-content-duration headers note: as of firefox 41, the x-content-duration header is no longer supported. see bug 1160695 for more details. the ogg format doesn't encapsulate the duration of media, so for the progress bar on the video controls to display the duration of the video, gecko needs to determine the length of the media using other means. there are two ways gecko can do this. the best way is to offer a...
...And 5 more matches

Following the Android Toasts Tutorial from a JNI Perspective
ontinue editing later. toasts automatically disappear after a timeout. toasts do not have to be created with jni; they are exposed by the nativewindow feature on firefox for android, see toast documentation. java code let's start with the following java code, which invokes a toast and says "hello, firefox!". context context = getapplicationcontext(); charsequence text = "hello, firefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the nativewindow object. the java code example above can be done with privileged javascript from firefox for android with the following code: window.n...
...clare this with strings: { name: 'maketext', sig: '(landroid/content/context;ii)landroid/widget/toast;' } we see there are no separating characters between the arguments. because we want to avoid typos, we will avoid typing the signatures and user our sig object. ...
...// context sig.int + // resid sig.int + // duration ')' + sig.toast // return } let's do the same for show and here are our methods placed into our third argument of loadclass: static_methods: [ { name: 'maketext', sig: '(' + sig.context + // context sig.int + // resid sig.int + // duration ')' + sig.toast // return } ], methods: [ { name: 'show', sig: '()' + // no arguments sig.void // return } ] determine static-ness of fields declare them just like methods, fields have two types, static and not. we look up the documentation for our field, which is length_short, and we see it is static. so we will not need a group ...
...And 4 more matches

animation - CSS: Cascading Style Sheets
the animation shorthand css property applies an animation between styles. it is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. 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. ...
...nimation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. 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. ...
...is 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. ...
...And 4 more matches

Cross-browser audio basics - Developer guides
en the media is ready to play? fortunately, there are a number of events we can use to let our player know exactly what is happening. first, let's take a look at the media loading process in order: loadstart the loadstart event tells us simply that load process has started and the browser is connecting to the media. ...
...number of events we can use to let our player know exactly what is happening. first, let's take a look at the media loading process in order: loadstart the loadstart event tells us simply that load process has started and the browser is connecting to the media. myaudio.addeventlistener("loadstart", function() { //grabbing the file }); durationchange if you just want to know as soon as the duration of your media is established, this is the event for you. ...
...a loading process in order: loadstart the loadstart event tells us simply that load process has started and the browser is connecting to the media. myaudio.addeventlistener("loadstart", function() { //grabbing the file }); durationchange if you just want to know as soon as the duration of your media is established, this is the event for you. this can be useful because the initial value for duration is nan (not a number), which you probably don't want to display to your users. myaudio.addeventlistener("durationchange", function() { //you can display the duration now }); loadedmetadata metadata can consist of more than just duration — if you want to wait for all the metadata to download before doing something, you can detect the loadedmetadata event. myaudio.addeventlistener("loadedme...
...And 4 more matches

Media buffering, seeking, and time ranges - Developer guides
ript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addeventlistener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); ...
...length - 1) actually tells us the end point of the last time range that is seekable (not all seekable media). in practice this is good enough as the browser either enables range requests or it doesn't. if it doesn't then audio.seekable will be equivalent to audio.buffered, which will give a valid indication of the end of seekable media. if range requests are enabled this value usually becomes the duration of the media almost instantly. it is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display. so let's build this. the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </di...
... width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; break; } }...
...And 4 more matches

Navigation and resource timings - Web Performance
we transferred 22.04kb for an uncompressed file size of 87.24kb. if we do the math with these numbers, we get the same result: 1 - (22.04 / 87.24) = 0.747. the navigation timings provide us a way to programmatically check transfer sizing and bandwidth savings. note that this is the size for this single document alone: for this resource alone, not for all the resources combined. ...
... request time the api doesn't provide every measurement you may desire. for example, how long did the request take? we can use measurements we do have, to get our answer. ...
... from the server, or from relevant application caches or from local resources. the response start is the time immediately after the user agent's http parser receives the first byte of the response from relevant application caches, or from local resources or from the server, which happens after the request is received and processed. ...
...And 4 more matches

SVG documentation index - SVG: Scalable Vector Graphics
reference, svg, svg attribute the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. 62 dur svg, svg attribute the dur attribute indicates the simple duration of an animation. 63 dx svg, svg attribute the dx attribute indicates a shift along the x-axis on the position of an element or its content. 64 dy svg, svg attribute the dy attribute indicates a shift along the y-axis on the position of an element or its content. 65 edgemode filters, needscompattable, needsexample, svg, svg attribute t...
...es. note that the positive z-axis points towards the viewer of the content. 67 enable-background deprecated, svg, svg attribute the enable-background attribute specifies how the accumulation of the background image is managed. 68 end needscompattable, svg, svg attribute the end attribute defines an end value for the animation that can constrain the active duration. 69 exponent needscompattable, svg, svg attribute the exponent attribute defines the exponent of the gamma function. 70 externalresourcesrequired deprecated, needsexample, svg, svg attribute the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the give...
...vg attribute the kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero). 119 keypoints svg, svg attribute the keypoints attribute indicates the simple duration of an animation. 120 keysplines svg, svg attribute the keysplines attribute defines a set of bézier curve control points associated with the keytimes list, defining a cubic bézier function that controls interval pacing. this attribute is ignored unless the calcmode attribute is set to spline. if there are any errors in the keysplines specification (bad values, too man...
...And 4 more matches

Setting up adaptive streaming media sources - Developer guides
he appropriate file will be chosen automatically. here's a simple example that provides an audio track representation and four separate video representations. ...
...400 contains (1.m4s, 2.m4s, 3.m4s ... ) the playlist or .mpd file contains xml that explicitly lists where all the various bitrate files reside. ...
...> http://example.com/segments </baseurl> <period start="pt0s"> <adaptationset bitstreamswitching="true"> <representation id="0" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" bandwidth="46986"> <segmentbase> <initialization sourceurl="main/news100/1.m4s" range="0-862"/> </segmentbase> <segmentlist duration="1"> <segmenturl media="main/news100/2.m4s" mediarange="863-7113"/> <segmenturl media="main/news100/3.m4s" mediarange="7114-14104"/> <segmenturl media="main/news100/4.m4s" mediarange="14105-17990"/> </segmentlist> </representation> <representation id="1" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" band...
...And 3 more matches

jspage - Archive of obsolete content
string,secure){if($type(string)!="string"||!string.length){return null;}if(secure&&!(/^[,:{}\[\]0-9.\-+eaeflnr-u \n\r\t]*$/).test(string.replace(/\\./g,"@").replace(/"[^"\\\n\r]*"/g,""))){return null; }return eval("("+string+")");}});native.implement([hash,array,string,number],{tojson:function(){return json.encode(this);}});var cookie=new class({implements:options,options:{path:false,domain:false,duration:false,secure:false,document:document},initialize:function(b,a){this.key=b; this.setoptions(a);},write:function(b){b=encodeuricomponent(b);if(this.options.domain){b+="; domain="+this.options.domain;}if(this.options.path){b+="; path="+this.options.path; }if(this.options.duration){var a=new date();a.settime(a.gettime()+this.options.duration*24*60*60*1000);b+="; expires="+a.togmtstring();}if(this.opt...
...a.settime(a.gettime()+this.options.duration*24*60*60*1000);b+="; expires="+a.togmtstring();}if(this.options.secure){b+="; secure"; }this.options.document.cookie=this.key+"="+b;return this;},read:function(){var a=this.options.document.cookie.match("(?:^|;)\\s*"+this.key.escaperegexp()+"=([^;]*)"); return(a)?decodeuricomponent(a[1]):null;},dispose:function(){new cookie(this.key,$merge(this.options,{duration:-1})).write("");return this;}});cookie.write=function(b,c,a){return new cookie(b,a).write(c); };cookie.read=function(a){return new cookie(a).read();};cookie.dispose=function(b,a){return new cookie(b,a).dispose();};var swiff=new class({implements:[options],options:{id:null,height:1,width:1,container:null,properties:{},params:{quality:"high",allowscriptaccess:"always",wmode:"transparent",swliveconn...
...hild(this.toelement());return this;},remote:function(){return swiff.remote.apply(swiff,[this.toelement()].extend(arguments)); }});swiff.callbacks={};swiff.remote=function(obj,fn){var rs=obj.callfunction('<invoke name="'+fn+'" returntype="javascript">'+__flash__argumentstoxml(arguments,2)+"</invoke>"); return eval(rs);};var fx=new class({implements:[chain,events,options],options:{fps:50,unit:false,duration:500,link:"ignore"},initialize:function(a){this.subject=this.subject||this; this.setoptions(a);this.options.duration=fx.durations[this.options.duration]||this.options.duration.toint();var b=this.options.wait;if(b===false){this.options.link="cancel"; }},gettransition:function(){return function(a){return -(math.cos(math.pi*a)-1)/2;};},step:function(){var a=$time();if(a<this.time+this.options.duratio...
...And 2 more matches

AudioBufferSourceNode.start() - Web APIs
if when is less than (audiocontext.currenttime, or if it's 0, the sound begins to play at once. the default value is 0. ...
...he number of seconds in the same time coordinate system as the audiocontext, to the time within the audio buffer that playback should begin. for example, to start playback halfway through a 10-second audio clip, offset should be 5. ...
... return value undefined. ...
...And 2 more matches

prefwindow - Archive of obsolete content
moreover this hides s...
...moreover this hides separator between titlebar and wi...
...moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonalign type: string the value of the align attribute for the box ...
...keeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonalign type: string the value of the align attribute for the box containing the buttons. butt...

Video and Audio APIs - Learn web development
function playpausemedia() { if(media.paused) { play.setattribute('data-icon','u'); media.play(); } else { play.setattribute('data-icon','p'); media.pause(); } } here we use an if statement to check whether the video is paused. the htmlmediaelement.paused property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. if it is paused, we set the data-icon attribute value on the play button to "u", which is a "paused" icon, and invoke the htmlmediaelement.play() method to play the media. on the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with htmlmediaelement.pause(). stopping the video next, let's a...
... need to define the windbackward() and windforward() functions invoked in the setinterval() calls. add the following below your two previous functions: function windbackward() { if(media.currenttime <= 3) { rwd.classlist.remove('active'); clearinterval(intervalrwd); stopmedia(); } else { media.currenttime -= 3; } } function windforward() { if(media.currenttime >= media.duration - 3) { fwd.classlist.remove('active'); clearinterval(intervalfwd); stopmedia(); } else { media.currenttime += 3; } } again, we'll just run through the first one of these functions as they work almost identically, but in reverse to one another. in windbackward() we do the following — bear in mind that when the interval is active, this function is being run once every 200 m...
... then we initialize two more variables — minutevalue and secondvalue. the two if statements work out whether the number of minutes and seconds are less than 10. if so, they...
...s a colon character plus secondvalue. the node.textcontent value of the timer is set to the time value, so it displays in the ui. the length we should set the inner <div> to is worked out by first working out the width of the outer <div> (any element's clientwidth property will contain its length), and then multiplying it by the htmlmediaelement.currenttime divided by the total htmlmediaelement.duration of the media. we set the width of the inner <div> to equal the calculated bar length, plus "px", so it will be set to that number of pixels. fixing play and pause there is one problem left to fix. if the play/pause or stop buttons are pressed while the rewind or fast forward functionality is active, they just don't work. how can we fix it so that they cancel the rwd/fwd button functionality a...

Introduction to automated testing - Learn web development
sure everything is saved, and run your file like so: node call_bstack below we've also provided some other ready-made functions you might find useful when working with the browserstack restful api. function getbuilds(){ request({uri: baseurl + "builds.json"}, function(err, res, body){ console.log(json.parse(body)); }); /* response: [ { automation_build: { name: <string>, duration: <int>, status: <string>, hashed_id: <string> } }, { automation_build: { name: <string>, duration: <int>, status: <string>, hashed_id: <string> } }, ... ] */ }; function getsessionsinbuild(build){ let buildid = build.automation_build.hashed_id; request({uri: baseurl + "builds/" + buildid + "/sessions.json"}, function(err, res, body){ console.log(jso...
... name: <string>, duration: <int>, status: <string>, hashed_id: <string> } }, ... ...
...g>, browser: <string>, device: <string>, status: <string>, hashed_id: <string>, reason: <string>, build_name: <string>, project_name: <string>, logs: <string>, browser_url: <string>, public_url: <string>, video_url: <string>, browser_console_logs_url: <string>, har_logs_url: <string> } }, { automation_session: { name: <string>, duration: <int>, os: <string>, os_version: <string>, browser_version: <string>, browser: <string>, device: <string>, status: <string>, hashed_id: <string>, reason: <string>, build_name: <string>, project_name: <string>, logs: <string>, browser_url: <string>, public_url: <string>, video_url: <string>, browser_console_logs_url: <string>, har_lo...
..., video_url: <string>, browser_console_logs_url: <string>, har_logs_url: <string> } }, ... ...

GamepadHapticActuator.pulse() - Web APIs
note: repeated calls to pulse() override the previous calls if they are still ongoing. ...
... note: repeated calls to pulse() override the previous calls if they are still ongoing. ...
... note: repeated calls to pulse() override the previous calls if they are still ongoing. return value a promise that resolves with a value of true when the pulse has successfully completed. ...
... note: repeated calls to pulse() override the previous calls if they are still ongoing. return value a promise that resolves with a value of true when the pulse has successfully completed. ...

PerformanceServerTiming - Web APIs
icted 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. 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 no...
... working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...

Using Performance Timeline - Web APIs
(), getentriesbyname() and getentriesbytype(). function log(s) { var o = document.getelementsbytagname("output")[0]; o.innerhtml += s + " <br>"; } function do_work (n) { for (var i=0 ; i < n; i++) { var m = math.random(); } } function print_perf_entry(pe) { log("..name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } function print_performanceentries() { if (performance.mark === undefined) { log("... performance.mark not supported"); return; } // create some performance entries via the mark() and measure() methods performance.mark("begin"); do_work(50000); performance.mark("end"); do_work(50000); performance.measure("measure1", "begin", "end"); // use getentri...
...+ i + "]"); print_perf_entry(p[i]); } } performanceentry interface the performanceentry interface encapsulates a single performance entry i.e. a single performance metric. this interface has four properties and a json serializer (tojson(). the following example shows the use of these properties. ...
...these methods have been used in the above stated example. specifications the interfaces described in this document are defined in the performance timeline stan...
...these methods have been used in the above stated example. specifications the interfaces described in this document are defined in the performance timeline standard which has two...

Advanced techniques: Creating and sequencing audio - Web APIs
fferent properties — for instance setting the frequency on a bandpass type adjusts the middle frequency, however on a lowpass it would set the top frequency. ...
.... ...
...dpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequency.value = 1000; // connect our graph noise.connect(bandpass).connect(audioctx.destination); noise user controls on the ui we'll expose the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in previous sections: <label for="duration">duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> let noiseduration = 1; const durcontrol = document.queryselector('#duration'); durcontrol.addeventlistener('input', function() { noiseduration = number(this.value); }, false);...
...entlistener('input', function() { noiseduration = number(this.value); }, false); let bandhz = 1000; const bandcontrol = document.queryselector('#band'); bandcontrol.addeventlistener('input', function() { bandhz = number(this.value); }, false); the final playnoise() function here's the entire playnoise() function: function playnoise() { const buffersize = audioctx.samplerate * noiseduration; // set the time of the note const buffer = audioctx.createbuffer(1, buffersize, audioctx.samplerate); // create an empty buffer let data = buffer.getchanneldata(0); // get data // fill the buffer with noise for (let i = 0; i < buffersize; i++) { data[i] = math.random() * 2 - 1; } // create a buffer source for our created data let noise = audioctx.createbuffe...

window.location - Web APIs
ent vitae eros erat, pulvinar laoreet magna. maecenas vestibulum mollis nunc in posuere. pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. ...
... erat, pulvinar laoreet magna. maecenas vestibulum mollis nunc in posuere. pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. ...
... metus a turpis lobortis tempor eu vel tortor. ...
... living standard no change from html5. html5the definition of 'window.location' in that specification. recommendation initial definition. ...

Web accessibility for seizures and physical reactions - Accessibility
nd crt/lcd screen flicker, had an interesting response concerning the refresh rates in hz. ...
...er, had an interesting response concerning the refresh rates in hz. ...
...ich, used in combination with animation-duration or transition-duration, to conclude at a rate that is imperceptible to the human eye. in other words, eric's techniques address the refresh-rate problem. the css below is from the article, css-tricks revisiting prefers-reduced-motion, the reduced motion media query. ...
...he article, css-tricks revisiting prefers-reduced-motion, the reduced motion media query. @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; /* hat tip nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */ transition-duration: 0.001ms !important; } } from w3.org's page on media queries 4: the update media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered. it has the values of "none", "slow", and "fast". developmental & experimental features mdn navigator​.donottrack from the documentation: "returns the user's do-not-track setting. this is "1...

WebKit CSS extensions - CSS: Cascading Style Sheets
ask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below. ...
... -webkit-mask-position-x* -webkit-mask-position-y* * supported unprefix...
...ties that are now standard above. note: due to the legacy code in a multitude of web sites that used -webkit- prefixed properties, edge and firefox redirect many -webkit- prefixed properties to -moz-, -ms-, and unprefixed equivalents. ...
...microsoft edge and ie mobile support this property with the -webkit- prefix, rather than -ms- for interopability reasons as well. ** these values are supported even though they are not standard and are not on trac...

animation-timing-function - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...d 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the animation begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end. instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration. jump-both includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration. start same as jump-start. end same as jump-end. step-start equal to steps(1, jump-start) step-end equal to steps(1, jump-end) note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified i...
...mp-none | jump-both | start | end examples cubic-bezier examples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .ease { animation-...
... class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="start">start</div> <div class="end">end</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .jump-start { anim...

transition-timing-function - CSS: Cascading Style Sheets
for css properties being affected by a transition effect. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration. this acceleration curve is defined using one <timing-function> for each property to be transitioned. you may specify multiple timing functions; each one will be applied to the corresponding property as specified by the transition-property property, which acts as a transition-property list. if there are fewer timing functions specified than in the transition-property list, the user agent must c...
...depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end. instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration jump-both includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time. start same as jump-start. end same as jump-end. step-start equal to steps(1, jump-start) step-end equal to steps(1, jump-end) accessibility concerns some animations can be helpful such as to guide users to understand what actions are expected, to sh...
...-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var in...
...mp-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var inte...

Digital audio concepts - Web media technologies
a sample. by chaining all the samples together, you can approximately represent the original wave, as seen in the diagram below. in this example, the blue line represents the samples taken from the audio waveform, which is black. at regular intervals, the a/d converter circuitry reads the voltage of the signal as a value between (in this case) -1.0 and +1.0. since the amplitude varies over the duration of that time slice, the a/d converter must choose a value to represent that slice, whether by simply taking the value at a particular moment (in the diagram above, the midpoint of each slice is used as the value), or by averaging the amplitude over the duration of each sample. those sample values are then recorded as the amplitude of the waveform at that time. when it comes time to play back tha...
... of the encoded audio size; the higher the bit rate, the higher the resulting audio quality will be. the quality of the audio will fluctuate over time as needed in order to meet the targeted bit rate. somewhat similar to abr is cbr (constant bit rate). where abr attempts to keep the bit rate on average at a given level, while allowing some fluctuation, cbr uses an actually fixed bit rate for the duration of the audio. cbr is primarily used in codecs designed for voice-only purposes, where the frequency range and variation tends to be minimal, allowing cbr encoding to work without unworkable fluctuations in audio quality. variable bit rate variable bit rate (vbr) encoding works by accepting as an input into the encoder a constant quality setting. this indicates a quality level to maintain for th...
...f the audio. cbr is primarily used in codecs designed for voice-only purposes, where the frequency range and variation tends to be minimal, allowing cbr encoding to work without unworkable fluctuations in audio quality. variable bit rate variable bit rate (vbr) encoding works by accepting as an input into the encoder a constant quality setting. this indicates a quality level to maintain for the duration of the audio, allowing the bit rate to fluctuate as needed to achieve that quality level. in portions of the sound where compression is easily achieved with minimum impact to quality, the bit rate may be very low, while in areas where compression is more complex, the bit rate will be higher. audio frequency bandwidth some codecs allow you to configure the audio frequency bandwidth directly, eit...
...audio samples in a more space-efficient manner by taking into account that usually the sound entering each ear is similar. thus, rather than storing every bit of each channel's sample, a base amplitude and a per-channel amplitude deviation value are stored, wherein the deviation value may use fewer bits than a complete sample. there are two types of joint stereo: mid-side and intensity. over the duration of an audio file, the encoder may change which format is being used to represent the stereo signal over the course of the audio file. mid-side stereo coding mid-side stereo coding (ms) works by recording frames that contain a fundamental mid channel, which is the average amplitude of the original left and right audio channels. this is essentially what you would calculate as the amplitude when c...

dur - SVG: Scalable Vector Graphics
the dur attribute indicates the simple duration of an animation. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specifies ...
...finite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specifies the length of the simple duration. the value must be greater than 0 and can be expressed with hours (h), minutes (m), seconds (s) or milliseconds (ms). itʼs possible to combine those time representations to create some complex durations like hh:mm:ss.iii or mm:ss.iii. media this value specifies the simple duration as the intrinsic media duration. this is only valid for elements that define media. (for animation elements the a...
... specifications specification status comment svg animations level 2the definition of 'dur' in that specification. ...
... specifications specification status comment svg animations level 2the definition of 'dur' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'dur' in that specification. ...

JavaScript Daemons Management - Archive of obsolete content
*/ daemon.prototype.makesteps = function (nhowmany, breverse, bforce) { if (nhowmany === 0) { return true; } if (...
... equal to infinity. mydaemon.unmakeloop() sets the reversals property equal to 0. mydaemon.setrate(milliseconds) sets the time lapse between calls (in milliseconds). if the daemon is running it will be immediately updated with the new property. mydaemon.forceposition(index) sets the internal index property equal to the index argument without any kind of control about the range. mydaemon.getduration() returns the duration of the daemon in milliseconds. mydaemon.getposition() returns the internal index property. mydaemon.makesteps(howmany[, backwards[, force]]) calls synchronously the callback function howmany times. forwards or backwards. if the force argument is set to true, the possible return false of the callback function will be ignored. mydaemon.skipto(index[, force]) calls sync...
...the callback function will be ignored. mydaemon.restart() stops and restarts the daemon. mydaemon.loopuntil(date) sets the reversals property in function of a future date. the date argument can be a date object, a string expressing the date in gmtstring format, or a number expressing the number of milliseconds since january 1, 1970, 00:00:00 utc. mydaemon.spread(milliseconds) sets the total duration of the daemon in milliseconds. only the rate property will be modified. mydaemon.adaptlength(milliseconds) sets the internal length property equal to milliseconds / mydaemon.rate. mydaemon.playuntil(date) starts the daemon forward and sets the total duration of it in function of a future date. the date argument can be a date object, a string expressing the date in gmtstring format, or a numbe...

AudioParam.setValueCurveAtTime() - Web APIs
the setvaluecurveattime() method of the audioparam interface schedules the parameter's value to change following a curve defined by a list of values. the curve is a linear interpolation between the sequence of values defined in an array of floating-point values, which are scaled to fit into the given interval starting at starttime and a specific duration. syntax var paramref = param.setvaluecurveattime(values, starttime, duration); parameters values an array of floating-point numbers representing the value curve the audioparam will change through along the specified duration. every value in the array must be a finite number; if any value is nan, infinity, or -infinity, a typeerror exception is thrown. starttime a double representing the time (in seconds) after the audiocontext was first ...
... return value a reference to this audioparam object. some older browser implementations of this interface return undefined. ...
...ime a double representing the time (in seconds) after the audiocontext was first created that the change in value will happen. if this value is lower than audiocontext.currenttime, it is clamped to currenttime. duration a double representing the total time (in seconds) over which the parameter's value will change following the specified curve. the specified values are spaced equally along this duration. return value a reference to this audioparam object. some older browser implementations of this interface return undefined. exceptions invalidstateerror the specified array of values has fewer than 2 items in it. rangeerror the specified starttime is either negative or a non-finite value, or duration is not a finite, strictly positive number. typeerror one or more of the values in the...

EffectTiming.fill - Web APIs
ans that unless we specify otherwise using the fill property, the instant the animation is started the element will be rotated to the left 90°, and then it will animate smoothly from there. since by default the box isn't rotated, the last keyframe says that the animation's final frame should draw the animation rotated 90° to the right from its original orientation. var boxrotationtiming = { duration: 2000, iterations: 1, fill: "none" }; the boxrotationtiming object describes how long the animation should take to run, how many times it should run, what state the element should be in before the animation begins and after it ends, and so forth. here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be "...
...of timing properties, which is where we pass in fill. forwards makes the rabbit retain its last keyframe rather than reverting to its unanimated state: // create a set of keyframes to slide the rabbit down the hole--and keep him down with 'fill'! var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode feature of css animations. when used to persist the effect of an anim...
...)'; elem.animate({ transform: 'none', offset: 0 }, 200); for some complex effects where animations layer on top of one another, it may be necessary to use a fill mode temporarily to capture the final value of an animation before canceling it. elem.addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result. animation.commitstyles(); animation.cancel(); }); specifications specification status comment web animationsthe definition of 'fill' in that specification. working draft edit...

Element.animate() - Web APIs
m. you can get a list of the animations that affect an element by calling element.getanimations(). syntax var animation = element.animate(keyframes, options); parameters keyframes either an array of keyframe objects, or a keyframe object whose property are arrays of values to iterate over. see keyframe formats for more details. options either an integer representing the animation's duration (in milliseconds), or an object containing one or more timing properties: id optional a property unique to animate(): a domstring with which to reference the animation. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each ite...
...: a domstring with which to reference the animation. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value lik...
...ation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. notice the array of objects passed as keyframes and also the timing options block. document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; ...

Frame Timing API - Web APIs
rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience. this means the browser should process a frame in about 16.7 ms. an application can register a performanceobserver for "frame" performance entry types. the observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (length of time) will be available. this data can be used to help identify areas that take too long to provide a good user experience. example code of the interfaces described in this document is included in using the frame timing api. performance frames the performanceframetiming interface extends the following performanceentry properties (for "frame" performance entry types) by qualifying an...
...frames the performanceframetiming interface extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constrainting the properties as follows: performanceentry.entrytype set to "frame". performanceentry.name set to the document's address. performanceentry.starttime set to the domhighrestimestamp when the frame was started. performanceentry.duration set to a timestamp indicating the difference between the starttimes of two successive frames. this data, particularly the duration timestamp, can be used to help identify performance problems. frame observers the performance observer interfaces allow an application to register an observer for specific performance event types. when one of those event types is recorded in the browser's perfor...
...me" event type. when the browser adds a new frame to the performance timeline, the specified observer callback will be invoked. accessing frame data when a frame observer is invoked, frame performance entries can be retrieved by calling performanceobserverentrylist.getentriesbytype() with an argument of "frame". this method returns a list of "frame" performanceentry objects. each frame object's duration property returns the timestamp of two consecutive frames. if this value is greater than the time needed to provide a good user experience, further analysis might be warranted. ...

HTMLElement: transitionend event - Web APIs
then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. examples this code gets an element that has a transition defined and adds a listener to the transitionend event: const transition = document.queryselector('.transition'); transition.addeventlistener('transi...
...in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for the transition end event to fire,...
...red'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. specifications specification status comment css transitionsthe definition of 'transitionend' in that specification. working draft initial definition. ...

HTMLMediaElement - Web APIs
ted html attribute, which indicates whether the media element's audio output should be muted by default. htmlmediaelement.defaultplaybackrate a double indicating the default playback rate for the media. htmlmediaelement.disableremoteplayback a boolean that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback ui. htmlmediaelement.duration read only a read-only double-precision floating-point value indicating the total duration of the media in seconds. if no media data is available, the returned value is nan. if the media is of indefinite length (such as streamed live media, a webrtc call's media, or similar), the value is +infinity. htmlmediaelement.ended read only returns a boolean that indicates whether the media element ha...
...iakeys is a set of keys that an associated htmlmediaelement can use for decryption of media data during playback. htmlmediaelement.mozaudiocaptured read only returns a boolean. related to audio stream capture. htmlmediaelement.mozfragmentend is a double that provides access to the fragment end time if the media element has a fragment uri for currentsrc, otherwise it is equal to the media duration. htmlmediaelement.mozframebufferlength is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each mozaudioavailable event. this number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total). the mozframebufferlength property can be set to a new value for lower lat...
...ror. canplay fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content canplaythrough fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. durationchange fired when the duration attribute has been updated. emptied fired when the media has become empty; for example, when the media has already been loaded (or partially loaded), and the htmlmediaelement.load() method is called to reload it. ended fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available. error fired when the r...

KeyframeEffect.KeyframeEffect() - Web APIs
t(element, keyframeset, keyframeoptions); var keyframes = new keyframeeffect(sourcekeyframes); parameters the first type of constructor (see above) creates a completely new keyframeeffect object instance. its parameters are: element the dom element to be animated, or null. keyframeset an keyframe object or null. keyframeoptions optional either an integer representing the animation's duration (in milliseconds), or an object containing one or more of the following: delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). def...
...or an object containing one or more of the following: delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value lik...
...one. examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification. draft added the iterationcomposite option. web animationsthe definition of 'keyframeeffect()' in that specification. working draft editor's draft. ...

MediaPositionState.position - Web APIs
ion to the viewer. for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { position: timeinseconds }; let duration = positionstate.duration; value a floating-point value indicating the current playback position within the media currently being performed, in seconds. this value should always be zero or more. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position informatio...
.... this value should always be zero or more. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position information by calling setpositionstate(). ...
...l is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. let positioninterval = window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.trackplaypositioninseconds }); } else { window.clearinterval(positioninterval); } }, 1000); specifications specification status comment media session standardthe definition of 'mediapositionstate.position' in that specification. draft initial definitio...

MediaPositionState - Web APIs
this should always be a positive number, with positive infinity (infinity) indicating media without a defined end, such as a live stream. ...
...this should always be a positive number, with positive infinity (infinity) indicating media without a defined end, such as a live stream. ...
...this should always be a positive number, with positive infinity (infinity) indicating media without a defined end, such as a live stream. ...

MediaRecorder.start() - Web APIs
then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. ...
...upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. a blob is created and the data is collected in it until the time slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable event is sent to the mediarecorder with the recorded data. if the source is still playing, a new blob is created and recording continues into that, and so forth. when the source stream ends, state is set to inactive and data gathering stops. a final dataavailable event is sent to the mediarecorder, followed by a stop event.
... browser is unable to start recording or continue recording, it will raise a domerror event, followed by a mediarecorder.dataavailable event containing the blob it has gathered, followed by the mediarecorder.stop event. syntax mediarecorder.start(timeslice) parameters timeslice optional the number of milliseconds to record into each blob. if this parameter isn't included, the entire media duration is recorded into a single blob unless the requestdata() method is called to obtain the blob and trigger the creation of a new blob into which the media continues to be recorded. return value undefined. exceptions errors that can be detected immediately are thrown as dom exceptions. all other errors are reported through error events sent to the mediarecorder object. you can implement the oner...

MediaSession.setPositionState() - Web APIs
optional an object conforming to the mediapositionstate dictionary, providing updated information about the playback position and speed of the document's ongoing media. if the object is empty, the existing playback state information is cleared. return value undefined. exceptions typeerror this error can occur in an array of circumstances: the specified mediapositionstate object's duration is missing, negative, or null. position is missing or null, or is either negative or greater than duration. the playbackrate is zero. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position information by calling setpositionstate(). if the media is still...
... duration. the playbackrate is zero. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position information by calling setpositionstate(). if the media is still playing when the interval is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. ...
...l is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. let positioninterval = window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.trackplaypositioninseconds }); } else { window.clearinterval(positioninterval); } }, 1000); specifications specification status comment media session standardthe definition of 'mediasession.setpositionstate()' in that specification. draft initial defi...

Vibration API - Web APIs
ibration period. canceling existing vibrations calling navigator.vibrate() with a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern. ...
...ng vibrations calling navigator.vibrate() with a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern. ...
... will allow you to create persistent vibration: var vibrateinterval; // starts vibration at passed in level function startvibrate(duration) { navigator.vibrate(duration); } // stops vibration function stopvibrate() { // clear interval and stop persistent vibrating if(vibrateinterval) clearinterval(vibrateinterval); navigator.vibrate(0); } // start persistent vibration at given duration and interval // assumes a number value is given function startpersistentvibrate(duration, interval) { vibrateinterval = setinterval(function() { startvibrate(duration); }, interval); } of course, the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval b...

Web Animations API Concepts - Web APIs
w far along a set timeline we've come. the animation model determines what the animated object should look like at any given time. timing the timing model is the backbone of working with the waapi. each document has a master timeline, document.timeline, which stretches from the moment the page is loaded to infinity — or until the window is closed. spread along that timeline according to their durations are our animations. each animation is anchored to a point in the timeline by its starttime, representing the moment along the document’s timeline when the animation starts playing. all the animation's playback relies on this timeline: seeking the animation moves the animation’s position along the timeline; slowing down or speeding up the playback rate condenses or expands its spread across ...
... repeating the animation lines up additional iterations of it along the timeline. in the future, we might have timelines based on gestures or scroll position or even parent and child timelines. the web animations api opens up so many possibilities! animation the animation model can be thought of as an array of snapshots of what the animation could look like at any given time, lined up along the duration of the animation. core concepts web animations consist of timeline objects, animation objects, and animation effect objects working together. by assembling these disparate objects, we can create animations of our own. timeline timeline objects provide the useful property currenttime, which lets us see how long the page has been opened for: it's the "current time" of the document's timeline,...
...e’ll get to those in a moment). like a dvd player, we can use the animation object’s methods to play, pause, seek, and control the animation’s playback direction and speed. animation effect if animation objects are dvd players, we can think of animation effects, or keyframe effects, as dvds. keyframe effects are a bundle of information including at the bare minimum a set of keys and the duration they need to be animated over. the animation object takes this information and, using the timeline object, assembles a playable animation we can view and reference. we currently have only one animation effect type available: keyframeeffect. potentially we could have all kinds of animation effects in the future—e.g. effects for grouping and sequencing, not unlike features we had in flash. in fa...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
ements. if invalid, it is handled as if the enumerated keyword anonymous was used. see cors settings attributes for additional information. currenttime reading currenttime returns a double-precision floating-point value indicating the current playback position, in seconds, of the audio. if the audio's metadata isn't available yet—thereby preventing you from knowing the media's start time or duration—currenttime instead indicates, and can be used to change, the time at which playback will begin. otherwise, setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded. if the audio is being streamed, it's possible that the user agent may not be able to obtain some parts of the resource if that data has expired...
...nning point of the media timeline's reference frame. disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc). see this proposed specification for more information. in safari, you can use x-webkit-airplay="deny" as a fallback. duration read only a double-precision floating-point value which indicates the duration (total length) of the audio in seconds, on the media's timeline. if no media is present on the element, or the media is not valid, the returned value is nan. if the media has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. loo...
... canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the media has finished loading. ...

CSS3 - Archive of obsolete content
ns that are deemed to be in the refining phase are already fairly stable. though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases. css animations working draft allows the definition of animations effects by adding the css animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function properties, as well as the @keyframes at-rule. web animations working draft css text module level 3 working draft extends: the css text-transform property with the value full-width. the css text-align pro...
...anslatez(), scale3d(), scalez(), rotate3d(), rotatex(), rotatey(), rotatez(), and perspective(). note: this specification is a merge of css 2d-transforms, css 3d-transforms and svg transforms. css transitions working draft allows the definition of transitions effects between two properties values by adding the css transition, transition-delay, transition-duration, transition-property, and transition-timing-function properties. css box alignment module level 3 working draft selectors level 4 working draft css lists module level 3 working draft extends the list counter mechanism so that list markers can be styled and web developers can define new list counter schemes. ...

Implementation Status - Archive of obsolete content
xml schema built-in datatypes partial whitespace facet not supported. ...
... 5.2.1 additional xforms datatypes to allow empty content unsupported 5.2.2 xforms:listitem supported 5.2.3 xforms:listitems supported 5.2.4 xforms:daytimeduration supported 5.2.5 xforms:yearmonthduration supported 5.2.6 xforms:email unsupported 5.2.7 xforms:card-number unsupported supported types: string, normalized string, token, language, boolean, gday, gmonth, gyear, gyearmonth, gmonthday, date, time, datetime, duration, integer, nonpositiveinteger, negativeinteger, positivein...

Accessible multimedia - Learn web development
= 'play'; }; there is no stop() function available on htmlmediaelements, so instead we pause() it, and at the same time set the currenttime to 0. ...
...if either conditions are true, we simply stop the video, to avoid the user interface going wrong if they attempt to fast forward when the video is not playing, or fast forward past the end of the video. ...

Profiling with the Firefox Profiler
waiting and not necessarily that there was an event pending for that long. black: these indicate synchronous ipc calls. ranges ranges of time can be zoomed in on by clicking and dragging anywhere in the tracing marker or thread areas. once a range is selected, a magnifying glass appears which zooms into that range. clicking on a tracing marker will create a selection corresponding with its duration allowing for easy zooming in on interesting time ranges. as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to previously-selected ranges or the entire profile (denoted as "full range"). tip: while zooming out to a previously-selected range deletes the narrower range, the browser back button can be used to restore the narrower range. thread timeline(s) thr...
...ally setting the layers.dump-texture pref to true, or by adding -f layersdump to the profiler command line (the latter implies both the layers.dump and layers.dump-texture prefs). warning: dumping texture data slows performance considerably, and requires a lot of storage for the profile files. expect rendering to happen at a significantly reduced frame rate when profiling this way, and keep the duration of the capture short, to ensure the samples of interest aren't overwritten. here's how the layer tree view looks in cleopatra with texture data: this time, the visualization in right panel shows the actual textures rather than just the outlines of the layers. this can be very useful for debugging correctness problems such as a temporary visual/rendering glitch, because it allows you to find ...

Statistics API
the data } prefs.set("javascript.options.mem.notify", true); services.obs.addobserver(observer, "garbage-collection-statistics", false); the toplevel json object contains these fields: timestamp: integer (microseconds) - time at which the gc ended, measured from epoch. total_time: number (milliseconds) - the amount of wall time that this gc consumed. note: this is the sum of all the slice durations, not end time - start time. compartments_collected: integer - the number of compartments that were collected by the gc. compartment_count: integer - the number of compartments that were present in the system at the end of the gc. max_pause: number (milliseconds) - longest duration pause during the gc. nonincremental_reason: string - a string representing the reason that an incremental gc was...
...; neither one is a refinment of the other). a little bit of gc work is done in each slice. in between slices, other browser code is allowed to run. the slices array describes how long each slice took and what work was done during the slice. each element of the slices array is an object with these fields: slice: integer - the slice index, starting at 0. pause: number (milliseconds) - the slice duration. when: number (milliseconds) - the time this slice started, relative to the first slice's start time. reason: string - a string describing the api that initiated this gc slice. page_faults: integer - number of page faults incurred during the processing of this slice. start_timestamp: integer (microseconds) - time of slice start from epoch. end_timestamp: integer (microseconds) - time of slic...

JSAPI User Guide
ated error. the application must ensure that the garbage collector can reach all the objects, numbers, and strings that are still being used. otherwise, the gc will free the memory occupied by those values, leading to a probable crash the next time your program tries to use them. there are many ways to ensure that a value is gc-reachable. if you just need the value to remain reachable for the duration of a jsnative call, store it in *rval or an element of the argv array. the values stored in those locations are always reachable. to get extra argv slots, use jsfunctionspec.extra. if a custom object needs certain values to remain in memory, just store the values in properties of the object. as long as the object is reachable, its properties will remain reachable. if these values must not be ...
...erties of the object. as long as the object is reachable, its properties will remain reachable. if these values must not be accessible from javascript, use reserved slots instead. or store the values in private data and implement jsclass.mark. if a function creates new objects, strings, or numbers, it can use js_enterlocalrootscope and js_leavelocalrootscope to keep those values alive for the duration of the function. to keep a value alive permanently, store it in a gc root. still, gc bugs do occur. these two functions, both available only in debug builds, are especially useful for debugging gc-related crashes: use js_setgczeal to enable extra garbage collection. gc zeal usually causes a gc-related crash to occur much sooner (closer to its cause) and more reliably. it's for developmen...

nsIUpdateChecker
/nsiupdateservice.idlscriptable this interface describes an object that knows how to check for software updates. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(in nsiupdatechecklistener listener, in boolean force); void stopchecking(in unsigned short duration); constants constant value description current_check 1 constant for the stopchecking() method indicating that only the current update check should be stopped. current_session 2 constant for the stopchecking() method indicating that all update checks during the current session should be stopped. any_checks 3 constant for the stopchecking() method indicating that all update checking sho...
..., the update checker checks for updates, regardless of the current value of the user's update settings. this is used by any user interface that offers the user the opportunity to check for updates immediately. the force option doesn't work if the system administrator has locked the app.update.enabled preference. stopchecking() ends any pending update check. void stopchecking( in unsigned short duration ); parameters duration one of the constants indicating the set of updates to stop. see also nsiupdatepatch nsiupdate nsiupdatechecklistener nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...

Animation.currentTime - Web APIs
renttime; animation.currenttime = newtime; value a number representing the current time in milliseconds, or null to deactivate the animation. examples in the drink me/eat me game, alice's height is animated so it can go from small to large or large to small. ...
...resenting the current time in milliseconds, or null to deactivate the animation. examples in the drink me/eat me game, alice's height is animated so it can go from small to large or large to small. at the start of the game, her height is set between the two extremes by setting her animation's currenttime to half her keyframeeffect's duration: alicechange.currenttime = alicechange.effect.timing.duration / 2; a more generic means of seeking to the 50% mark of an animation would be: animation.currenttime = animation.effect.getcomputedtiming().delay + animation.effect.getcomputedtiming().activeduration / 2; reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.currenttime might get rounded depending on browser settings. in firefox,...

AnimationEffect.getComputedTiming() - Web APIs
the getcomputedtiming() method of the animationeffect interface returns the calculated timing properties for this animation effect. although many of the attributes of the returned object are common to the effecttiming contained in the object returned by the animationeffect.gettiming() method, the values returned by this object differ in the following ways: duration returns the calculated value of the iteration duration. if effecttiming.duration is the string auto, this attribute will return 0. fill the auto value is replaced with the appropriate effecttiming.fill value. these values are comparable to the computed styles of an element returned using window.getcomputedstyle(elem). syntax var currenttimevalues = animation.getcomputedtiming(); parameters none. return value a comp...
...(elem). syntax var currenttimevalues = animation.getcomputedtiming(); parameters none. return value a computedeffecttiming dictionary object, which contains the following properties: endtime the end time of the animation in milliseconds from the animation's start (if the keyframeeffect is associated with an animation). (also includes effecttiming.enddelay in that calculation.) activeduration the length of time in milliseconds that the animation's effects will run. this is equal to the iteration duration multiplied by the iteration count. localtime the current time of the animation in milliseconds. if the keyframeeffect is not associated with an animation, its value is null. progress indicates how far along the animation is through its current iteration with values between 0 and ...

AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
playback, the new value will take effect on the next processing block of audio. loopend: an optional value, in seconds, where looping should end if the loop attribute is true. the default is 0. its value is exclusive to the content of the loop. the sample frames, comprising the loop, run from the values loopstart to loopend-(1/samplerate). it's sensible to set this to a value between 0 and the duration of the buffer. if loopend is less than 0, looping will end at 0. if loopend is greater than the duration of the buffer, looping will end at the end of the buffer. this attribute is converted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. thus, its behavior is independent of the value of the playbackrate para...
...erted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. thus, its behavior is independent of the value of the playbackrate parameter. loopstart: an optional value in seconds, where looping should begin if the loop attribute is true. the default is 0. it's sensible to set this to a value between 0 and the duration of the buffer. if loopstart is less than 0, looping will begin at 0. if loopstart is greater than the duration of the buffer, looping will begin at the end of the buffer. this attribute is converted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. thus, its behavior is independent of the value of the playbackr...

AudioScheduledSourceNode.start() - Web APIs
the start() method on audioscheduledsourcenode schedules a sound to begin playback at the specified time. if no time is specified, then the sound begins playing immediately. syntax audioscheduledsourcenode.start([when [, offset [, duration]]]); parameters when optional the time, in seconds, at which the sound should begin to play. this value is specified in the same time coordinate system as the audiocontext is using for its currenttime attribute. a value of 0 (or omitting the when parameter entirely) causes the sound to start playback immediately. ...
...pecified in the same time coordinate system as the audiocontext is using for its currenttime attribute. a value of 0 (or omitting the when parameter entirely) causes the sound to start playback immediately. offset optional a floating-point number indicating the offset, in seconds, into the audio buffer where playback should begin. if 0 is passed then the playback will start from the beginning. duration optional a floating-point number indicating the duration, in seconds, to be played. if no value is passed then the duration will be equal to the length of the audio buffer minus the offset value return value undefined exceptions invalidstatenode the node has already been started. this error occurs even if the node is no longer running because of a prior call to stop(). rangeerror the v...

Using the CSS Typed Object Model - Web APIs
onst myelement = document.queryselector('p'); // get the table we'll be populating const stylestable = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['padding-top', 'margin-bottom', 'font-size', 'font-stretch', 'animation-duration', 'animation-iteration-count', 'width', 'height']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // create a row const row = document.createelement( 'tr' ); // add the name of the property const cssproperty = document.createelement( 'td' ); cssproperty.appendchild( document.createtextnode( ofinterest[i] ) ); row.appendchild...
... we didn't declare a width or a height for the paragraph, both of which default to auto and ...

EffectTiming - Web APIs
simply put, these properties describe how the user agent should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends. ...
...behave when the animation begins and ends. properties delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value lik...

Using the Frame Timing API - Web APIs
ch as processing dom events, resizing, scrolling, rendering, css animations, etc. a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common 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 will have data about the duration of each frame event. this data can be used to help identify areas that take too long to provide a good user experience. this document describes how to use the performanceframetiming interfaces including example code. for an overview of these interfaces see frame timing api. frame observers the performance observer interfaces allow an application to register an observer for specific performanc...
...tentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type. in the following example, the observer only processes "frame" entries. var threshold = 1500; var observe_frame = new performanceobserver(function(list) { var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { if (perfentries[i].duration > threshold) { console.log("warning: frame '" + threshold + "' exceeded!"); } } }); observe_frame.observe({entrytypes: ['frame']}); the tools will save you! first, perhaps using the tools will save you is a bit too strong but performance tools can certainly help identify code that is not conformant to some expected time threshold. this section briefly describes the web performance ...

HTMLAudioElement - Web APIs
ar_horn.wav'); then you can invoke the play() method on the element audioelement.play(); a common gotcha is trying to play an audio element immediately on page load. modern browser's default autoplay policy will block that from happening. refer to firefox and chrome for best practices and work arounds. ...
...ioelement.play(); a common gotcha is trying to play an audio element immediately on page load. modern browser's default autoplay policy will block that from happening. refer to firefox and chrome for best practices and work arounds. some of the more commonly used properties of the audio element include src, currenttime, duration, paused, muted, and volume. this snippet copies the audio file's duration to a variable: var audioelement = new audio('car_horn.wav'); audioelement.addeventlistener('loadeddata', () => { let duration = audioelement.duration; // the duration variable now holds the duration (in seconds) of the audio clip }) events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement. listen to events using addeventlistener() or by assigning an e...

HTMLElement: transitioncancel event - Web APIs
in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for the transition end event to fire,...
...istener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitioncancel event is fired if the transition is cancelled in either direction after the transitionrun event occurs and before the transitionend is fired. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. specifications specification status comment css transitionsthe definition of 'transitioncancel' in that specification. working draft initial definition. ...

Timing element visibility with the Intersection Observer API - Web APIs
he document itself becomes visible or invisible. the most important scenario here is when the user switches tabs. since intersection observer only cares about the intersection between the targeted elements and the intersection root, and not the tab's visibility (which is a different issue entirely), we need to use the page visibility api to detect these tab switches and disable our timers for the duration. function handlevisibilitychange() { if (document.hidden) { if (!previouslyvisibleads) { previouslyvisibleads = visibleads; visibleads = []; previouslyvisibleads.foreach(function(adbox) { updateadtimer(adbox); adbox.dataset.lastviewstarted = 0; }); } } else { previouslyvisibleads.foreach(function(adbox) { adbox.dataset.lastviewstarted...
...hrough previouslyvisibleads and set each one's dataset.lastviewstarted to the current document's time (in milliseconds since the document was created) using the performance.now() method. then we set visibleads back to previouslyvisibleads and set the latter to null. now the ads are all restarted, and configured to know that they became visible at the current time, so that they will not add up the duration of time the page was tabbed away the next time they're updated. handling intersection changes once per pass through the browser's event loop, each intersectionobserver checks to see if any of its target elements have passed through any of the observer's intersection ratio thresholds. for each observer, a list of targets that have done so is compiled, and sent to the observer's callback as an ar...

KeyframeEffectOptions - Web APIs
simply put, these properties describe how the user agent should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends. ...
...eudo-element to be targeted, if any. defaults to null. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value lik...

MediaSession.setActionHandler() - Web APIs
lers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers. let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. audio.currenttime = math.max(audio.currenttime - skiptime, 0); }); supporting multiple actions in one handler function you can also, if you prefer, use a single function to handle multiple action types, by checking the value of the mediasessionactiondetails object'...
... specifications specification status comment media session standardthe definition of 'media session action types' in that specification. draft initial defi...

Media Session action types - Web APIs
lers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers. let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. audio.currenttime = math.max(audio.currenttime - skiptime, 0); }); supporting multiple actions in one handler function you can also, if you prefer, use a single function to handle multiple action types, by checking the value of the mediasessionactiondetails object'...
... specifications specification status comment media session standardthe definition of 'media session action types' in that specification. draft initial defi...

MediaSessionActionDetails - Web APIs
lers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers. let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. audio.currenttime = math.max(audio.currenttime - skiptime, 0); }); supporting multiple actions in one handler function you can also, if you prefer, use a single function to handle multiple action types, by checking the value of the mediasessionactiondetails object'...
... specifications specification status comment media session standardthe definition of 'media session action types' in that specification. draft initial defi...

PerformanceEntry - Web APIs
.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_performanceentries() { ...
..." + properties[i] + " = " + value); } else { console.log("... " + properties[i] + " is not supported"); } } } specifications specification status commen...

PerformanceFrameTiming - Web APIs
uch 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: 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" p...
... 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 'performanceframetiming' in that specification. draft initial definition. ...

PerformanceObserverEntryList.getEntries() - Web APIs
. the items will be in chronological order based on the entries' starttime. if no objects that meet the filter are found, an empty list is returned. if no argument is given, all entries are returned. ...
...e in chronological order based on the entries' starttime. if no objects that meet the filter are found, an empty list is returned. if no argument is given, all entries are returned. ...

PerformanceObserverEntryList.getEntriesByName() - Web APIs
e 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. ...
...d 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. ...

PerformanceObserverEntryList.getEntriesByType() - Web APIs
s 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. ...
...ecified 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. ...

RTCIceTransport.getLocalParameters() - Web APIs
returns null if the parameters have not yet been received. ...
... returns null if the parameters have not yet been received. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.getlocalparameters' in that specification. candidate recommendation initial specification. ...

RTCIceTransport.getRemoteParameters() - Web APIs
returns null if the parameters haven't been received yet. ...
...ation of the ice session. the remote peer's parameters are received during ice signaling and delivered to the transport when the client calls rtcpeerconnection.setremotedescription(). syntax parameters = rtcicetransport.getremoteparameters(); parameters none. return value an rtciceparameters object indicating the usernamefragment and password which uniquely identify the remote peer for the duration of the ice session. returns null if the parameters haven't been received yet. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.getremoteparameters' in that specification. candidate recommendation initial specification. ...

User Timing API - Web APIs
performance mark the performance.mark() method is used to create a performance mark. the method takes one argument, the name of the mark (for example performance.mark("mark-1")). the mark's performance entry will have the following property values: entrytype - set to "mark". name - set to the "name" given when the mark was created. starttime - set to the timestamp when mark() was called. duration - set to "0" (a mark has no duration). retrieving performance marks the performance interface has three methods that can be used to retrieve a mark: performance.getentries() returns all performance entries in the performance timeline. finding only mark entries requires checking each entry's entrytype for "mark". performance.getentriesbyname(name, entrytype) returns all performance entrie...
...asure's name and startmarkname and endmarkname are the start and end names, respectively, of the marks the measure will be placed between (in the performance timeline). the measure's performance entry will have the following property values: entrytype - set to "measure". name - set to the "name" given when the measure was created. starttime - set to the timestamp when measure() was called. duration - set to a domhighrestimestamp that is the duration of the measure (typically, the end mark timestamp minus the start mark timestamp). retrieving performance measures the performance interface has three methods that can be used to retrieve a measure: performance.getentries() returns all performance entries in the performance timeline. finding the measure entries requires checking each entr...

Inputs and input sources - Web APIs
t profiles. transient input sources some devices may create transient input sources to be used in tandem with an action which doesn't really come from that device, but is being presented as if it is. for example, if an xr device provides a mode in which the mouse is used to simulate events on the device, a new xrinputsource object might be created to represent the simulated input source for the duration of handling the action. this is necessary because of the separation that's maintained between standard input devices and xr input sources. an artificial source is used to represent the external source for the duration of each transient action. managing input sources when multiple input sources are available, you need to be able to obtain information about each one, including its position and o...
...releases the mouse button, the select event is sent to the xrsession, then the dom receives a click event. the session then receives the selectend event indicating the completion of the action. when the action is completed, the browser deletes the transient input source, and any appropriate pointerup events are sent. thus, the transient input source is indeed transient—it exists only for the duration of handling the input and will as such not be listed in the input source list. facing and targeting facing is the direction in which the viewer is looking. this isn't provided using an input source. instead, it's obtained using the xrpose obtained from the current animation frame's xrframe.getviewerpose() method. the rotation component of the viewer pose's transform matrix is the viewer's facin...

Mozilla CSS extensions - CSS: Cascading Style Sheets
fixed standard properties instead of the prefixed ones listed below. once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while. ...
...neobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label c...

CSS reference - CSS: Cascading Style Sheets
le to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...ration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewpor...

<easing-function> - CSS: Cascading Style Sheets
the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation. they correlate a time ratio to an output ratio, both expressed as <number>s. for these values, 0.0 represents the initial state, and 1.0 represents the final state. ...
...gins; jump-end denotes a right-continuous function, so that the last step or jump happens when the animation ends; jump-both denotes a right and left continuous function, includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration; jump-none there is no jump on either end. instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration start is the equivalent of jump-start end is the equivalent of jump-end end is the default. steps( n, <direction> ) steps(2, jump-start) steps(2, start) steps(4, jump-end) steps(4, end) steps(5, jump-none) steps(3, jump-both) steps-start the equivalent of steps(1, jump-start) steps-end the equivalent of steps(1, jump-end) step-start ...

Event reference
canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the media has finished loading. ...
...tml5 a dragged element or text selection leaves a valid drop target. dragover dragevent html5 an element or text selection is being dragged over a valid drop target (fires every 350ms). dragstart dragevent html5 the user starts dragging an element or text selection. drop dragevent html5 an element is dropped on a valid drop target. durationchange event html5 media the duration attribute has been updated. emptied event html5 media the media has become empty. for example, this event is triggered if the media has already been loaded (or partially loaded), and the load() method is called to reload it. end event web speech api the speech recognition service has disconnected. end ...

<time> - HTML: Hypertext Markup Language
e html <time> element represents a specific period in time. it may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders. it may represent one of the following: a time on a 24-hour clock. a precise date in the gregorian calendar (with optional time and timezone information). a valid time duration. 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, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the ...
...ing 11-18 a valid week string 2011-w47 a valid time string 14:54 14:54:39 14:54:39.929 a valid local date and time string 2011-11-18t14:54:39.929 2011-11-18 14:54:39.929 a valid global date and time string 2011-11-18t14:54:39.929z 2011-11-18t14:54:39.929-0400 2011-11-18t14:54:39.929-04:00 2011-11-18 14:54:39.929z 2011-11-18 14:54:39.929-0400 2011-11-18 14:54:39.929-04:00 a valid duration string pt4h18m3s examples simple example html <p>the concert starts at <time datetime="2018-07-07t20:00:00">20:00</time>.</p> output datetime example html <p>the concert took place on <time datetime="2001-05-15t19:00">may 15</time>.</p> output specifications specification status comment html living standardthe definition of '<time>' in that specifi...

<video>: The Video Embed element - HTML: Hypertext Markup Language
m suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases. disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc). in safari, you can use x-webkit-airplay="deny" as a fallback. duration read only a double-precision floating-point value which indicates the duration (total length) of the media in seconds, on the media's timeline. if no media is present on the element, or the media is not valid, the returned value is nan. if the media has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. hei...
... canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the media has finished loading. ...

Using HTTP cookies - HTTP
web page can use), you can enable the storage inspector in developer tools and select cookies from the storage tree. creating cookies after receiving an http request, a server can send one or more set-cookie headers with the response. the cookie is usually stored by the browser, and then the cookie is sent with requests made to the same server inside a cookie http header. an expiration date or duration can be specified, after which the cookie is no longer sent. additional restrictions to a specific domain and path can be set, limiting where the cookie is sent. for details about the header attributes mentioned below, refer to the set-cookie reference article. the set-cookie and cookie headers the set-cookie http response header sends cookies from the server to the user agent. a simple cookie i...
...ocality. the burden is on you to know and comply with these regulations. there are companies that offer "cookie banner" code that helps you comply with these regulations. other ways to store information in the browser another approach to storing data in the browser is the web storage api. the window.sessionstorage and window.localstorage properties correspond to session and permanent cookies in duration, but have larger storage limits than cookies, and are never sent to a server. more structured and larger amounts of data can be stored using the indexeddb api, or a library built on it. other techniques have been created to cause cookies to be recreated after they are deleted, known as "zombie" cookies. these techniques violate the principles of user privacy and user control, may violate data pr...

keyTimes - SVG: Scalable Vector Graphics
the keytimes attribute represents a list of time values used to control the pacing of the animation. each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation. each time value in the keytimes list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the duration of the animation element. four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> ...
...d with each value defines when the value is set; values are interpolated between the key times. for discrete animation, the first time value in the list must be 0. the time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the list. if the calcmode attribute is set to paced, the keytimes attribute is ignored. if the duration of the animation is indefinite, any keytimes specification will be ignored. specifications specification status comment svg animations level 2the definition of 'keytimes' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'keytimes' in that specification. recommendation initial def...

max - SVG: Scalable Vector Graphics
the max attribute specifies the maximum value of the active animation duration. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies the...
...the value must be greater than 0. specifications specification status comment svg animations level 2the definition of 'max' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'max' in that specification. recommendation initial definition ...

min - SVG: Scalable Vector Graphics
the min attribute specifies the minimum value of the active animation duration. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies the le...
...the value must be greater than 0. specifications specification status comment svg animations level 2the definition of 'min' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'min' in that specification. recommendation initial definition ...

<set> - SVG: Scalable Vector Graphics
it supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. for attributes that can be reasonably be interpolated, the <animate> is usualy prefered. note: the <set> element is non-additive. the additive and accumulate attributes are not allowed, and will be ignored if specified. ...
...the value must match the requirements of the target attribute. value type: <anything>; default value: none; animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global att...

Classes and Inheritance - Archive of obsolete content
.y = y; } we can now use this constructor to create instances of shape: let shape = new shape(2, 3); shape instanceof shape; // => true shape.x; // => 2 shape.y; // => 3 the keyword new tells javascript that we are performing a constructor call. constructor calls differ from ordinary function calls in that javascript automatically creates a new object and binds it to the keyword this for the duration of the call. moreover, if the constructor does not return a value, the result of the call defaults to the value of this. constructors are just ordinary functions, however, so it is perfectly legal to perform ordinary function calls on them. in fact, some people (including the add-on sdk team) prefer to use constructors this way. however, since the value of this is undefined for ordinary function ...

Windows - Archive of obsolete content
ows requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko, each dom window has a unique 64-bit id number. you can get a dom window's id using the nsidomwindowutils attribute outerwindowid. each time a new window is created, it gets assigned an id one greater than the last created window. this can be used in cases in which you need to uniquely identify a dom window during the duration of the application's lifespan: var util = win.queryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsidomwindowutils); var windowid = util.outerwindowid; after running that code, windowid contains the outer window's unique id. similarly, you can get the current inner window id using the nsidomwindowutils attribute currentinnerwindowid: var util = win...

Appendix F: Monitoring DOM changes - Archive of obsolete content
ttp://www.w3.org/1999/xhtml'; doc = doc || document; let style = doc.createelementns(xhtml, 'style'); style.setattribute('type', 'text/css'); let preamble = ' @-moz-keyframes ' + event + ' { \n\ from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } \n\ }\n'; let properties = [ 'animation-duration: 0.0001s;', 'animation-name: ' + event + ' !important;' ]; properties = properties.map(function (prop) ' ' + watchnodes.namespace + prop) .join('\n'); doc.addeventlistener('animationstart', listener, false); function listener(event) { if (event.animationname == event) callback.call(this...

Introducing the Audio API extension - Archive of obsolete content
ed with mozcurrentsampleoffset()), where "a little" means something on the order of 500 ms of samples. for example, if working with two channels at 44100 samples per second, a writing interval of 100 ms, and a pre-buffer equal to 500 ms, one would write an array of (2 * 44100 / 10) = 8820 samples, and a total of (currentsampleoffset + 2 * 44100 / 2). it's also possible to auto-detect the minimal duration of the pre-buffer, such that the sound is played without interruptions, and lag between writing and playback is minimal. to do this start writing the data in small portions and wait for the value returned by mozcurrentsampleoffset() to be greater than 0. var prebuffersize = samplerate * 0.020; // initial buffer is 20 ms var autolatency = true, started = new date().valueof(); ... // auto latency ...

Supporting per-window private browsing - Archive of obsolete content
e (such as when data or an action originate from some other source than web content). in these cases, it is permissable to pass null as the argument instead of a real privacy context. however, this can lead to privacy leaks (such as cache and download entries) if not used carefully. clearing any temporarily-stored private data it is permissable to store private data in non-persistent ways for the duration of a private browsing session. to be notified when such a session ends (i.e., when the last private window is closed), observe the last-pb-context-exited notification. function pbobserver() { /* clear private data */ } var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.addobserver(pbobserver, "last-pb-context...

2006-11-03 - Archive of obsolete content
s what is the 'lastmodifieddate' item used for in tb? there are some code example given and also further discussion on lastmodifieddate. tb storage-idea tb is planning to change from mbox-format storage to database-based storage. however, user wonder both storage method could exist in tb at the same time without crashing. suggestion made for e-mail popup it suggested that the e-mail popup duration should depends on number of messages and examples of this idea is provided. xul overlay question -- how to replace an existing element? no respond thus far. links in tb is not sent to firefox directly cédric corazza provided a code solution for this problem. bug found in nslocalmailfolder.cpp david bienvenu is following up on this bug. meetings calendar project weekly status meeting -...

NPPrint - Archive of obsolete content
e union is valid. see npfullprint and npp_print. np_embed: pointer to npembedprint structure. plug-in should print in embedded mode. the embedprint field of the union is valid. see npembedprint. description the npp_print function passes a pointer to an npprint object (previously allocated by the browser) to the plug-in. the pointer and fields within the npprint structure are valid only for the duration of the npp_print call. see also npp_print, npfullprint, npembedprint ...

XForms Range Element - Archive of obsolete content
attribute. if this attribute is omitted, then it is assumed to be the value of start + 20. step specifies the step of incrementing/decrementing values. this determines how much the value of the range will be 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 tr...

Building up a basic demo with A-Frame - Game development
o="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"> </a-animation> </a-box> as with any other entities, you can define key properties for the animation. we'll be animating the rotation attribute from 20 0 0 to 20 360 0, so it will do a full spin. the animation direction is set to alternate so the animation will be played forward, and then back. the duration is set to 4 seconds, and it will be repeated indefinitely. the animation uses ease for easing, with tween.js being implemented internally. scaling we can also add animation to entities with custom geometry like the torus, in much the same way. add the following <a-animation> element to your torus: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentst...

Efficient animation for web games - Game development
some effort for other properties to be animated quickly, these are pretty much the only ones semi-guaranteed to be fast across all browsers. something to be careful of is that overflow may end up causing re-layout, or other expensive calculations. if you are setting a transform on something that would overlap its container’s bounds, you may want to set overflow: hidden on that container for the duration of the animation. use requestanimationframe when you are animating <canvas> content, or when your dom animations absolutely must synchronise with canvas content animations, do make sure to use window.requestanimationframe, and not older methods such as window.settimeout. assuming you are running in an arbitrary browsing session, you can never really know how long the browser will take to draw a...

UI pseudo-classes - Learn web development
d pseudo-class, when supported, will be similar to :invalid, but with better user experience. if the value is valid when the input receives focus, the element may match :invalid as the user enters data if the value is temporarily invalid, but will only match :user-invalid when the element loses focus. if the value was originally invalid, it will match both :invalid and :user-invalid for the whole duration of the focus. in a similar manner to :invalid, it will stop matching :user-invalid if the value does become valid. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: advanced styling. summary this completes ou...

Working with Svelte stores - Learn web development
e/transition module. put the following import statement below the existing ones: import { fly } from 'svelte/transition' to use it, update your opening <div> tag like so: <div role="alert" on:click={() => visible = false} transition:fly > transitions can also receive parameters, like this: <div role="alert" on:click={() => visible = false} transition:fly="{{delay: 250, duration: 300, x: 0, y: -100, opacity: 0.5}}" > note: the double curly braces are not special svelte syntax. it's just a literal javascript object being passed as a parameter to the fly transition. try your app out again — you'll see that the notifications now look a bit more appealing. note: being a compiler allows svelte to optimize the size of our bundle by excluding features that...

HTML parser threading
ondataavailable and onstoprequest on the main thread post runnables on to the parser thread. there runnables obtain mtokenizermutex and call dodataavailable and dostoprequest, repectively, on the parser thread. these two methods along with timerflush (discussed later) are the entry points from the parser thread event loop into nshtml5streamparser. the runnables hold mtokenizermutex for the entire duration of the dodataavailable or dostoprequest call. mtokenizermutex protects most data structures on nshtml5streamparser from concurrent access. the runnables need to keep the nshtml5streamparser instance alive, so they have to addref it. however, if they released on the parser thread, nshtml5streamparser could be deleted from the parser thread, which would lead to all sorts of badness, because nshtml5...

CustomizableUI.jsm
batch update of items. during a batch update, the customization state is not saved to the user's preferences file, in order to reduce (possibly sync) io. calls to begin/endbatchupdate may be nested. callers should ensure that no matter what happens they call endbatchupdate once for each call to beginbatchupdate, even if there are exceptions in the code in the batch update. otherwise, for the duration of the firefox session, customization state is never saved. typically, you would do this using a try...finally block wrapped around your insertion code. endbatchupdate() end a batch update. see the documentation for beginbatchupdate above. state is not saved if we believe it is identical to the last known saved state. state is only ever saved when all batch updates have finished (that is, th...

OSFile.jsm
by javascript code. what are the relationships with the html5 file api? none, really. the file api is designed for high-level, highly-restricted manipulation of files by web applications. os.file is designed for efficient, unrestricted, manipulation of files by firefox itself and by add-ons. why is off main thread file i/o important? one thing that all developers need to remember is that the duration of a file i/o operation is unbounded. depending on the current load of the kernel, the current disk activity, the current load of the bus, the current rotation speed of the disk, the amount of battery power, etc. operations can take an arbitrary amount of time. we are talking about several seconds to execute operations that look trivial, such as closing a file, or checking when it was last modifi...

PromiseWorker.jsm
be passed here. if any of the arguments is a promise, it is resolved before posting the message. if any of the arguments needs to be transferred instead of copied, this may be specified by making the argument an instance of basepromiseworker.meta or by using the atransferlist argument. by convention, the last argument may be an object options with some of the following fields: outexecutionduration {number|null} a parameter to be filled with the duration of the off main thread execution for this call. aclosure optional an object holding strong references to value that should not be garbage-collected before the reply has been received. atransferlist optional an optional array of transferable objects to transfer ownership of. if the ownership of an object is transferred, it becomes ...

Mozilla Framework Based on Templates (MFBT)
alues within an array. refptr.h implements various smart pointer templates to simplify reference counting of values of particular classes. scoped.h implements scope-based resource management, to simplify the task of cleaning up resources when leaving a scope. threadlocal.h implements thread-local storage, aka "tls", also called thread-specific storage. it should be used only for static-storage-duration variables, such as global variables or static class members. ...

AsyncTestUtils extended framework
into smaller chunks (like a search operation) so that the ui stays responsive. in the mozilla platform, the "top level" of a program is the event loop. it is a never-ending loop that dequeues pending events and runs them. this is how asynchronous callbacks get their chance to run again. when i/o results in newly read data it places an event in the queue. when a timer fires because the requested duration is up, it also places an event in the queue. in order to give these events a chance to run we either need to make sure we yield control to the top-level event loop or spin our own nested event loop. asynctestutils is currently implemented by the first method (yielding control to the top-level event loop). mozmill is an example of a testing framework that uses a nested event loop. in the future w...

Anonymous Shared Memory
shared memory that is accessbile only by parent and child processes. ... it's a security thing. depending on the underlying platform, the file-mapped shared memory may be backed by a file. ... surprise! ... on some platforms, no real file backs the shared memory. on platforms where the shared memory is backed by a file, the file's name in the filesystem is visible to other processes for only the duration of the creation of the file, hopefully a very short time. this restricts processes that do not inherit the shared memory from opening the file and reading or writing its contents. further, when all processes using an anonymous shared memory terminate, the backing file is deleted. ... if you are not paranoid, you're not paying attention. the file-mapped shared memory requires a protocol for the p...

PRThreadPriority
adpriority; enumerators pr_priority_first placeholder. pr_priority_low the lowest possible priority. this priority is appropriate for threads that are expected to perform intensive computation. pr_priority_normal the most commonly expected priority. pr_priority_high slightly higher priority than pr_priority_normal. this priority is for threads performing work of high urgency but short duration. pr_priority_urgent highest priority. only one thread at a time typically has this priority. pr_priority_last placeholder description in general, an nspr thread of higher priority has a statistically better chance of running relative to threads of lower priority. however, because of the multiple strategies nspr uses to implement threading on various host platforms, nspr priorities are not ...

nss tech note8
ter, and to fix bugs that caused corruption in multi-process servers, and also to allow separate virtual servers to have their own session caches. the new approach was to use shared memory for the server session cache, and to allow multiple different server session caches to coexist. as part of that work, i decided that each cache would have its own variables containing the ssl2 and ssl3 session durations. this means that client cache session lifetimes are separate from server session cache lifetimes, and that each server session cache may have its own lifetimes. so, in nss 3.4, the global variables ssl3_sid_timeout and ssl_sid_timeout were intended to become the definitions for the client cache only, and each server cache had its own new pair of variables for ssl2 and ssl3 session lifetimes, i.

Exact Stack Rooting
s work for every new call frame. to solve this, we use the standard "handle" approach. a js::handlet is a pointer to a js::rootedt. a js::rootedt will automatically convert to a js::handlet. by using js::handlet in the interface instead of direct gcpointers, we ensure that the gcthing is already rooted on some previous stack frame, freeing us from having to worry about rooting the gcthing for the duration of the call. bool hello(jscontext *cx, handleobject foo) { return hello(cx, foo); } ..... void otherfunction(jscontext *cx) { ... rootedobject obj(cx, ...); hello(cx, obj); ... } a secondary benefit: since all js functions take js::handlets, code that does not root cstack gcpointers correctly will be much less likely to compile. warning: js::handlet does not root objects...

Web Replay
ated js object has not been destroyed yet during the replay, it will never be used again because at this point in the recording it has been finalized. similarly, gc behavior can cause values read from weak pointers to differ between recording and replay. if this difference can affect the recording, the weak pointer must be instrumented so that during replay it holds onto its target for the same duration it was held while recording. recording a recording content process differs from a normal content process in the following ways: calls to certain functions are intercepted by hooking them (rewriting the machine code at their entry points to call a different function with the same signature), including the function used to dispatch mach messages. when a call or message is intercepted, the wr...

nsDependentCString
class declaration nstdependentstring_chart stores a null-terminated, immutable sequence of characters. subclass of nststring that restricts string value to an immutable character sequence. this class does not own its data, so the creator of objects of this type must take care to ensure that a nstdependentstring continues to reference valid memory for the duration of its use. method overview constructors assertvalid rebind operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendi...

nsDependentString
class declaration nstdependentstring_chart stores a null-terminated, immutable sequence of characters. subclass of nststring that restricts string value to an immutable character sequence. this class does not own its data, so the creator of objects of this type must take care to ensure that a nstdependentstring continues to reference valid memory for the duration of its use. method overview constructors assertvalid rebind operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appen...

nsIUpdateTimerManager
these timers are used to schedule update checks in the future, for example. ...

Weak reference
in xpcom, a weak reference is a special object that contains a pointer to an xpcom object, but doesnot keep that object alive. if the referent object is destroyed before the weak reference, the pointer inside the weak reference is set to nsnull. why do i need this? when you hold an owning reference on an object (i.e., you have addrefed it), you are holding that object in existence for the duration of your reference. this isn't always appropriate, and can lead to trouble. if, for instance, this owning reference is part of a cycle of owning references (e.g., if the referenced object also holds a owning reference back to you), then none of the objects in the cycle can be reclaimed without taking special measures. there are less severe situations. a naive design for an observer/observable rel...

Network request details - Firefox Developer Tools
receiving time taken to read the entire response from the server (or cache). server timing new in firefox 71, the server timing section lists any information provided in the server-timing header — this is used to surface any backend server timing metrics you've recorded (e.g. database read/write, cpu time, file system access, etc.). the header takes a series of descriptions and durations, which can be anything you like. in the above screenshot for example, the highlighted request's server-timing header contains 4 items — data, markup, total, and miss. security tab if the site is being served over https, you get an extra tab labeled "security". this contains details about the secure connection used including the protocol, the cipher suite, and certificate details: the secu...

Animation inspector example: Web Animations API - Firefox Developer Tools
acity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions...

Work with animations - Firefox Developer Tools
bar for each animation, labeled with its name. if the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and enddelay are both represented. if you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including: the type of animation: css transition, css animation, or web animations api the duration of the animation the animation's start and end delay the animation's easing (or timing function). the animation's fill the playback rate of the animation information about the animated element to the left of each bar is a selector for the element that the animation applies to. if you hover over this selector, the element is highlighted in the page. click the selector to select the elemen...

Flame Chart - Firefox Developer Tools
code is just this: function sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } the markers labeled "bubb..." and colored olive-green are presumably bubblesort(). the ones colored plain green are presumably the other sort functions. even at a glance, we can see that the bubble sort blocks are much wider (of a longer duration) than the others. we can also see some functions being called from bubblesort(), colored purple. let's zoom in one more time: this slice is about 20ms long. we can see that the purple markers underneath bubblesort() are the calls to swap(). if you counted them all, the call tree view tells us that you'd see 253 of them. all the ones in this zoom are underneath bubblesort(), but according to ...

Waterfall - Firefox Developer Tools
example - you can go to the waterfall to see what the browser was doing at that point in the recording. along the x-axis is time. recorded operations, called markers, are shown as horizontal bars, laid out in a waterfall to reflect the serial nature of the browser's execution. when a marker is selected you'll see more information about it in a sidebar on the right. this includes the marker's duration and some more information that's specific to the marker type. markers the markers for operations are color-coded and labeled. the following operations are recorded: name and description color detailed information dom event javascript code that's executed in response to a dom event. event type for example, "click" or "message". ...

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

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

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

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

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

Animation.playState - Web APIs
s can get an ending with alice crying into a pool of tears. in the game, for performance reasons, the tears should only be animating when they're visible. so they must be paused as soon as they are animated like so: // setting up the tear animations tears.foreach(function(el) { el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)' }); el.pause(); }); // play the tears falling when the ending needs to be shown. tears.foreach(function(el) { el.play(); }); // reset the crying tears animations and pause them. tears.foreach(function(el) { el.pause(); el.currenttime = 0; ...

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

AudioBuffer - Web APIs
te buffer. constructor audiobuffer() creates and returns a new audiobuffer object instance. properties audiobuffer.samplerate read only returns a float representing the sample rate, in samples per second, of the pcm data stored in the buffer. audiobuffer.length read only returns an integer representing the length, in sample-frames, of the pcm data stored in the buffer. audiobuffer.duration read only returns a double representing the duration, in seconds, of the pcm data stored in the buffer. audiobuffer.numberofchannels read only returns an integer representing the number of discrete audio channels described by the pcm data stored in the buffer. methods audiobuffer.getchanneldata() returns a float32array containing the pcm data associated with the channel, defined by the...

AudioBufferSourceNode.loopEnd - Web APIs
ing live, or view the source. ...

AudioBufferSourceNode.loopStart - Web APIs
nning live, or view the source. ...

AudioParam.setTargetAtTime() - Web APIs
anges exponentially, with each timeconstant bringing you another 63.2% toward the target value. you don't have to worry about reaching the target value; once you are close enough, any further changes will be imperceptible to a human listener. depending on your use case, getting 95% toward the target value may already be enough; in that case, you could set timeconstant to one third of the desired duration. for more details, check the following table on how the value changes from 0% to 100% as the time progresses. time since starttime value 0 * timeconstant 0% 0.5 * timeconstant 39.3% 1 * timeconstant 63.2% 2 * timeconstant 86.5% 3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.3% ...

AudioParam - Web APIs
moves towards the value given by the target parameter. the exponential decay rate is defined by the timeconstant parameter, which is a time measured in seconds. audioparam.setvaluecurveattime() schedules the values of the audioparam to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time. audioparam.cancelscheduledvalues() cancels all scheduled future changes to the audioparam. audioparam.cancelandholdattime() cancels all scheduled future changes to the audioparam but holds its value at a given time until further changes are made using other methods. examples first, a basic example showing a gainnode having its gain value set. gain is an example of an a-rate audiop...

AudioScheduledSourceNode: ended event - Web APIs
event of the audioscheduledsourcenode interface is fired when the source node has stopped playing. bubbles no cancelable no interface event event handler property audioscheduledsourcenode.onended usage notes this event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audiosch...

AudioScheduledSourceNode - Web APIs
g immediately. stop() schedules the node to stop playing at the specified time. if no time is specified, the node stops playing at once. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended fired when the source node has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. also available using the onended event handler property. specification specification status comment web audio apithe definition of 'audioscheduledsourcenode' in that specification. working draft ...

console - Web APIs
to start one, call the console.time() method, giving it a name as the only parameter. to stop the timer, and to get the elapsed time in milliseconds, just call the console.timeend() method, again passing the timer's name as the parameter. up to 10,000 timers can run simultaneously on a given page. for example, given this code: console.time("answer time"); alert("click t...

Document.requestStorageAccess() - Web APIs
not fulfilled. grant the document access to cookies and other site storage and store that fact for the purposes of future calls to document.hasstorageaccess() and requeststorageaccess(). assuming all of the requirements above are satisfied, firefox will automatically grant storage access to the requesting origin on up to a threshold number of first-party origins in the current session for the duration of user’s session, up to a maximum of 24 hours. after the requesting origin has exceeded the maximum allowable number of storage access grants, any future call to requeststorageaccess() during the same browsing session will prompt the user. the maximum number of concurrent storage access grants an origin can obtain is a positive integer currently defined as one percent of the number of top-lev...

Document: transitionend event - Web APIs
then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original target for this event is the element that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on thi...

Document - Web APIs
event is raised. globaleventhandlers.ondragover is an eventhandler representing the code to be called when the dragover event is raised. globaleventhandlers.ondragstart is an eventhandler representing the code to be called when the dragstart event is raised. globaleventhandlers.ondrop is an eventhandler representing the code to be called when the drop event is raised. globaleventhandlers.ondurationchange is an eventhandler representing the code to be called when the durationchange event is raised. globaleventhandlers.onemptied is an eventhandler representing the code to be called when the emptied event is raised. globaleventhandlers.onended is an eventhandler representing the code to be called when the ended event is raised. globaleventhandlers.onformdata is an eventhandler for proce...

EXT_disjoint_timer_query - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension should be available in webgl1 contexts only. ext_disjoint_timer_query_webgl2 is available in webgl 2 contexts . in webgl 2, the getqueryobject was renamed to getqueryparameter. in webgl 2, other queries (such as occlusion queries and primitive queries) are possible using webglquery objects. ...

EffectTiming.delay - Web APIs
working draft editor's draft. ...

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

EffectTiming.easing - Web APIs
working draft editor's draft. ...

EffectTiming.endDelay - Web APIs
the enddelay property of the effecttiming dictionary (part of the web animations api) indicates the number of milliseconds to delay after the active period of an animation sequence. the animation's end time—the time at which an iteration is considered to have finished—is the time at which the animation finishes an iteration (its initial delay, animationeffecttimingreadonly.delay, plus its duration,duration, plus its end delay. this is useful for sequencing animations based on the end time of another animation; note, however, that many of the sequence effectst that will benefit most from this property have not been defined in the specification yet. for now, its main purpose is to represent the value of the svg min attribute. element.animate(), keyframeeffectreadonly(), and keyframeeffect...

EffectTiming.iterations - Web APIs
working draft editor's draft. ...

GamepadHapticActuator - Web APIs
to provide haptic feedback to the user (if available), most commonly vibration hardware. this interface is accessible through the gamepad.hapticactuators property. properties gamepadhapticactuator.type read only returns an enum representing the type of the haptic hardware. methods gamepadhapticactuator.pulse() read only makes the hardware pulse at a certain intensity for a specified duration. examples tbd. specifications specification status comment gamepad extensionsthe definition of 'gamepadhapticactuator' in that specification. editor's draft initial definition ...

GlobalEventHandlers.onanimationend - Web APIs
the onanimationend property of the globaleventhandlers mixin is the eventhandler for processing animationend events. the animationend event fires when a css animation reaches the end of its active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay). syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. example html content <div class="main"> <div id="box"> <div id="text">box</di...

GlobalEventHandlers.ontransitioncancel - Web APIs
ncel event occurs indicating that a css transition has been cancelled on the target, where the target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration. note: elapsedtime does not include time prior to the transition effect beginning; that means that the value of transition-delay doesn't affect the value of elapsedtime, which is zero until the delay period ends and the animation begins. example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur du...

GlobalEventHandlers.ontransitionend - Web APIs
sitionend event occurs indicating that a css transition has completed on the target, where the target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration. elapsedtime does not include time prior to the transition effect beginning; that means that the value of transition-delay doesn't affect the value of elapsedtime, which is zero until the delay period ends and the animation begins. example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during t...

GlobalEventHandlers - Web APIs
event is raised. globaleventhandlers.ondragover is an eventhandler representing the code to be called when the dragover event is raised. globaleventhandlers.ondragstart is an eventhandler representing the code to be called when the dragstart event is raised. globaleventhandlers.ondrop is an eventhandler representing the code to be called when the drop event is raised. globaleventhandlers.ondurationchange is an eventhandler representing the code to be called when the durationchange event is raised. globaleventhandlers.onemptied is an eventhandler representing the code to be called when the emptied event is raised. globaleventhandlers.onended is an eventhandler representing the code to be called when the ended event is raised. globaleventhandlers.onformdata is an eventhandler for proce...

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

HTMLElement: animationend event - Web APIs
class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-ex...

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

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

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

HTMLElement: transitionstart event - Web APIs
const transition = document.queryselector('.transition'); const message = document.queryselector('.message'); transition.addeventlistener('transitionrun', function() { message.t...

HTMLMediaElement.currentTime - Web APIs
ime = 35; value a double-precision floating-point value indicating the current playback time in seconds. if the media is not yet playing, the value of currenttime indicates the time position within the media at which playback will begin once the play() method is called. setting currenttime to a new value seeks the media to the given time, if the media is available. for media without a known duration—such as media being streamed live—it's possible that the browser may not be able to obtain parts of the media that have expired from the media buffer. also, media whose timeline doesn't begin at 0 seconds cannot be seeked to a time before its timeline's earliest time. the length of the media in seconds can be determined using the duration property. example var video = document.createelemen...

HTMLMediaElement: loadedmetadata event - Web APIs
read only int the number of samples collected in all channels. examples these examples add an event listener for the htmlmediaelement's loadedmetadata event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadedmetadata', (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }); using the onloadedmetadata event handler property: const video = document.queryselector('video'); video.onloadedmetadata = (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }; specifications specification status html living standardthe de...

HTMLTimeElement.dateTime - Web APIs
-0300 -08:00 valid global date and time string any combination of a valid local date and time string followed by a valid time-zone offset string 2013-12-25 11:12+0200 1972-07-25 13:43:07+04:30 1941-03-15 07:06:23.678z 2013-12-25t11:12-08:00 valid week string yyyy-www 2013-w46 four or more ascii digits yyyy 2013, 0001 valid duration string pddthhmmss pddthhmms.xs pddthhmms.xxs pddthhmms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt7h12m13s p12dt7h12m13.3s p12dt7h12m13.45s p12dt7h12m13.455s pt7h12m13s pt7h12m13.2s pt7h12m13.56s pt7h12m13.999s 7d 5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetime...

IDBDatabaseSync - Web APIs
iven name (based on case-sensitive comparison) does not exist in the connected database. setversion() sets the version of the connected database. void setversion ( in domstring version ); parameters returns void version the version to store in the database. transaction() creates and returns a transaction, acquiring locks on the given database objects, within the specified timeout duration, if possible. idbtransactionsync transaction ( in optional domstringlist storenames, in optional unsigned int timeout ) raises (idbdatabaseexception); parameters storenames the names of object stores and indexes in the scope of the new transaction. timeout the interval that this operation is allowed to take to acquire locks on all the objects stores and indexes identified in storenam...

IdleDeadline - Web APIs
the idledeadline interface is used as the data type of the input parameter to idle callbacks established by calling window.requestidlecallback(). it offers a method, timeremaining(), which lets you determine how much longer the user agent estimates it will remain idle and a property, didtimeout, which lets you determine if your callback is executing because its timeout duration expired. to learn more about how request callbacks work, see collaborative scheduling of background tasks. properties idledeadline.didtimeout read only a boolean whose value is true if the callback is being executed because the timeout specified when the idle callback was installed has expired. methods idledeadline.timeremaining() returns a domhighrestimestamp, which is a floating-point value providing an es...

KeyframeEffect.setKeyframes() - Web APIs
opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the keyframe where it is specified until the next keyframe. any easing value specified on the options argument, however, applies across a single iteration of the animation — for the entire duration. an object containing key-value pairs consisting of the property to animate and an array of values to iterate over. element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this format, the number of elements in each array does not need to be equal. the provided values will be spaced out independently. element.an...

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

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

MediaPositionState.playbackRate - Web APIs
er and faster reverse playback. note: a value of 0.0 is not permitted. example in this example, an app is updating the browser to let it know that the user has clicked a button causing the playback to shift to a double-speed mode. it begins by creating a mediapositionstate object, then submits it to the browser it by calling navigator.mediasession.setpositionstate(). let positionstate = { duration: mymediaduration; playbackrate: 2.0; position: mymediaposition; }; navigator.mediasession.setpositionstate(positionstate); note the value 2.0 as the playbackrate. specifications specification status comment media session standardthe definition of 'mediapositionstate.playbackrate' in that specification. draft initial definition. ...

MediaRecorder.ondataavailable - Web APIs
data which has been captured since recording began or the last time a dataavailable event occurred is delivered; then a new blob is created and media capture continues into that blob. if a timeslice property was passed into the mediarecorder.start() method that started media capture, a dataavailable event is fired every timeslice milliseconds. that means that each blob will have a specific time duration (except the last blob, which might be shorter, since it would be whatever is left over since the last event). so if the method call looked like this — recorder.start(1000); — the dataavailable event would fire after each second of media capture, and our event handler would be called every second with a blob of media data that's one second long. you can use timeslice alongside mediarecorder.st...

MediaRecorder - Web APIs
ce the last time requestdata() was called. after calling this method, recording continues, but in a new blob. mediarecorder.resume() resumes recording of media after having been paused. mediarecorder.start() begins recording media; this method can optionally be passed a timeslice argument with a value in milliseconds. if this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk. mediarecorder.stop() stops recording, at which point a dataavailable event containing the final blob of saved data is fired. no more recording occurs. static methods mediarecorder.istypesupported() a static method which returns a boolean value indicating if the given mime media type is supported by the curre...

MediaSource.setLiveSeekableRange() - Web APIs
the setliveseekablerange() method of the mediasource interface sets the range that the user can seek to in the media element. syntax mediasource.setliveseekablerange(start, end) parameters start the start of the seekable range to set in seconds measured from the beginning of the source. if the duration of the media source is positive infinity, then the timeranges object returned by the htmlmediaelement.seekable property will have a start timestamp no greater than this value. end the end of the seekable range to set in seconds measured from the beginning of the source. if the duration of the media source is positive infinity, then the timeranges object returned by the htmlmediaelement.seekable property will have an end timestamp no less than this value. return value undefined exampl...

MediaSource - Web APIs
he selected video track, enabled audio tracks, and shown/hidden text tracks. mediasource.readystate read only returns an enum representing the state of the current mediasource, whether it is not currently attached to a media element (closed), attached and ready to receive sourcebuffer objects (open), or attached but the stream has been ended via mediasource.endofstream() (ended.) mediasource.duration gets and sets the duration of the current media being presented. event handlers mediasource.onsourceclose the event handler for the sourceclose event. mediasource.onsourceended the event handler for the sourceended event. mediasource.onsourceopen the event handler for the sourceopen event. methods inherits methods from its parent interface, eventtarget. mediasource.addsourcebuffe...

MediaTrackConstraints.groupId - Web APIs
since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { groupid: constraint }; constraintsobject.groupid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) group ids which are acceptable as the source of media content. group ids are unique for a given origin for the duration of a single browsing session, and are shared by all media sources that come from the same physical device. for example, the microphone and speaker on the same headset would share a group id. this makes it possible to use the group id to ensure that the audio and input devices are on the same headset by retrieving the group id of the input device and specifying it when asking for an output device,...

Media Session API - Web APIs
s a web page to provide custom behaviors, for standard media playback interactions. dictionaries mediaimage a mediaimage object contains information describing an image associated with the media. this might be a cd or dvd cover, a movie poster, a poster frame, or the like. mediapositionstate used to contain information about the current playback position, playback speed, and overall media duration when calling the mediasession method setpositionstate() to establish the media's length, playback position, and playback speed. mediasessionactiondetails provides information needed in order to perform the action which has been requested, including the type of action to perform and any other information needed, such as seek distances or times. examples the following example shows feature det...

Transcoding assets for Media Source Extensions - Web APIs
eo) video_01625.mp4 splitting media file (video) video_02000.mp4 $ tree -l 2 output output ├── audio │ └── und ├── stream.mpd └── video ├── 1 ├── 2 ├── 3 ├── 4 └── 5 8 directories, 1 file note: mp4-dash-encode.py does not display ffmpeg error messages. you can see it by specifying the -d option. note: if "invalid duration specification for force_key_frames: 'expr:eq(mod(n" is displayed as an error message, modify mp4-dash-encode.py and remove two "'" from "-force_key_frames 'expr:eq(mod(n,%d),0)'". summary with your video properly encoded and adaptive bitrate media generated, you're now ready to begin adaptive bitrate streaming on the web using dash and mse. ...

OfflineAudioContext.suspend() - Web APIs
then(function() { ... }); parameters suspendtime a double specifying the suspend time, in seconds. returns a promise resolving to void. exceptions the promise is rejected when any exception is encountered. invalidstateerror if the quantized frame number is one of the following: a negative number is less than or equal to the current time is greater than or equal to the total render duration is scheduled by another suspend for the same time specifications specification status comment web audio apithe definition of 'suspend()' in that specification. working draft initial definition. ...

Page Visibility API - Web APIs
me is very similar except that the budget is specified in seconds. windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see reasons for delays longer than specified). in chrome, this value is 10 seconds. timer tasks are only permitted when the budget is non-negative. once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget. the budget regenerates at a rate of 10 ms per second, in both firefox and chrome. some processes are exempt from this throttling behavior. in these cases, you can use the page visibility api to reduce the tabs' performance impact while they're hidden. tabs which are playing audio are considered foreground and ...

performance.getEntries() - Web APIs
performance.getentries(); for (var i=0; i < p.length; i++) { console.log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (let i=0; i < p.length; i++) { console.log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (let i=0; i < p.length; i++) { console.log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification ...

performance.getEntriesByName() - Web APIs
ies({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status ...

performance.getEntriesByType() - Web APIs
ries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); checkperformanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status ...

performance.measure() - Web APIs
ctively. the named timestamp is referred to as a measure. the measure can be retrieved by one of the performance interfaces: (getentries(), getentriesbyname() or getentriesbytype()). the measure's performance entry will have the following property values: entrytype - set to "measure". 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). note: this feature is available in web workers. syntax performance.measure(name); performance.measure(name, startmark); performance.measure(name, startmark, endmark); performance.measure(name, undefined, endmark); arguments name a domstring representing ...

PerformanceEntry.name - Web APIs
ce entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[met...

PerformanceEntry.startTime - Web APIs
ce entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[met...

PerformanceEntry.toJSON() - Web APIs
ce entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[met...

PerformanceEventTiming - Web APIs
manceeventtiming.target returns the associated event's last target, if it is not removed. methods performanceeventtiming.tojson() converts the performanceeventtiming object to json. examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.getentries().foreach(entry => { // full duration const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch). const inputsyncprocessingtime = entry.processingend - entry.processingstart; }); }); // register observer for event. observer.observe({entrytypes...

PerformanceMark - Web APIs
no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark". performanceentry.name returns the name given to the mark when it was created via a call to performance.mark(). performanceentry.starttime returns the domhighrestimestamp when performance.mark() was called. performanceentry.duration returns "0". (a mark has no duration.) methods this interface has no methods. example see the example in using the user timing api. specifications specification status comment user timing level 2the definition of 'performancemark' in that specification. working draft user timingthe definition of 'performancemark' in that specification. recommenda...

PerformanceMeasure - Web APIs
xtends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure". performanceentry.name returns the name given to the measure when it was created via a call to performance.measure(). performanceentry.starttime returns a timestamp given to the measure when performance.measure() was called. performanceentry.duration returns a domhighrestimestamp that is the duration of the measure (typically, the measure's end mark timestamp minus its start mark timestamp). methods this interface has no methods. example see the example in using the user timing api. specifications specification status comment user timing level 2the definition of 'performancemeasure' in that specification. wo...

PerformanceNavigationTiming - Web APIs
erties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation". performanceentry.name read only returns the document's address. performanceentry.starttime read only returns a domhighrestimestamp with a value of "0". performanceentry.duration read only returns a timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties. this interface also extends following performanceresourcetiming properties for navigation performance entry types by qualifying and constraining them as follows: performanceresourcetiming.initiatortyperead only returns "navigation". the in...

PerformanceObserver.takeRecords() - Web APIs
erformanceentry objects. 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"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment performance timeline level 2the definition of 'takerecords()' in that specification. candidate recommendation initial definition of takerecords() method. ...

PerformancePaintTiming - Web APIs
rface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint". performanceentry.name returns either "first-paint" or "first-contentful-paint". performanceentry.starttime returns the timestamp when the paint ocurred. performanceentry.duration returns 0. methods this interface has no methods. example function showpainttimings() { if (window.performance) { let performance = window.performance; let performanceentries = performance.getentriesbytype('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + "...

PerformanceResourceTiming - Web APIs
entry properties for resource performance entry types by qualifying and constraining them as follows: performanceentry.entrytyperead only returns "resource". performanceentry.nameread only returns the resources url. performanceentry.starttimeread only returns the timestamp for the time a resource fetch started. this value is equivalent to performanceentry.fetchstart. performanceentry.durationread only returns a timestamp that is the difference between the responseend and the starttime properties. the interface also supports the following properties which are listed in the order in which they are recorded for the fetching of a single resource. an alphabetical listing is shown in the navigation, at left. performanceresourcetiming.initiatortyperead only a string representing the...

Performance Timeline - Web APIs
. this interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (such as performancemark): name the name of the performance entry when the metric was created. entrytype the type of performance metric (for example, "mark"). starttime a high resolution timestamp representing the starting time for the performance entry. duration a high resolution timestamp representing the time value of the duration of the performance event. (some performance entry types have no concept of duration and this value is set to '0' for such types.) this interface includes a tojson() method that returns the serialization of the performanceentry object. the serialization is specific to the performance entry's type. performance observers ...

Using Pointer Events - Web APIs
to continue: idx = " + idx); } } this function looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn. this is done by looking at each touch's pointerevent.pointerid property. this property is a unique integer for each pointer event, and remains consistent for each event during the duration of each finger's contact with the surface. this lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together. after drawing the line, we call array.splice() to replace the previous information about the touch point with the current information in the ongoingtouches array. handling the end of...

RTCDTMFSender.insertDTMF() - Web APIs
sending of the tones is performed asynchronously, with tonechange events sent to the rtcdtmfsender every time a tone starts or ends. as long as the connection is active, you can send tones at any time. calling insertdtmf() will append the specified tones to the end of the current tone buffer, so that those tones play after the previously-enqueued tones. syntax rtcdtmfsender.insertdtmf(tones[, duration[, intertonegap]]); parameters tones a domstring containing the dtmf codes to be transmitted to the recipient. specifying an empty string as the tones parameter clears the tone buffer, aborting any currently queued tones. a "," character inserts a two second delay. duration optional the amount of time, in milliseconds, that each dtmf tone should last. this value must be between 40 ms and 6...

RTCDTMFSender - Web APIs
ll;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string). see tonebuffer for details on the format of the tone buffer. methods rtcdtmfsender.insertdtmf() given a string describing a set of dtmf codes and, optionally, the duration of and inter-tone gap between the tones, insertdtmf() starts sending the specified tones. calling insertdtmf() replaces any already-pending tones from the tonebuffer. you can abort sending queued tones by specifying an empty string ("") as the set of tones to play. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this inter...

RTCIceCandidateStats.address - Web APIs
characters, it is interpreted as an ipv6 address. otherwise, the address is presumed to be a fully-qualified domain name, which is resolved first using an aaaa record (assuming ipv6 is available), then using an a record (if no result is found or the device onlu supports ipv4). if multiple ip addresses are returned in response to the query, the user agent selects one, which is then used for the duration of ice processing. usage notes the address property was previously known as ip, and only permitted ipv4 and ipv6 addresses to be used. the addition of support for fully-qualified domain names to be used for the address brought about the renaming of the property. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'r...

RTCIceParameters.password - Web APIs
the rtciceparameters dictionary's password property specifies the ice password that, in tandem with the usernamefragment, uniquely identifies an ice session for its entire duration. syntax password = rtciceparameters.password; value a domstring containing the password that corresponds to the transport's usernamefragment string specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceparameters.password' in that specification. candidate recommendation initial specification. ...

RTCIceParameters.usernameFragment - Web APIs
syntax ufrag = rtciceparameters.usernamefragment; value a domstring containing the username fragment that, in tandem with the password, uniquely identify the ice session being used by the transport. the string may be up to 256 characters long. see rtcicecandidate.usernamefragment to learn more about username fragments and their role in a connection. ...

RTCIceParameters - Web APIs
rtcicetransport by calling its getlocalparameters() or getremoteparameters() method, depending on which end interests you. properties usernamefragment a domstring specifying the value of the ice session's username fragment field, ufrag. password a domstring specifying the session's password string. usage notes the username fragment and password uniquely identify the remote peer for the duration of the ice session, and are used to both ensure security and to avoid crosstalk across multiple ongoing ice sessions. see rtcicecandidate.usernamefragment for further information. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceparameters' in that specification. candidate recommendation in...

RTCOutboundRtpStreamStats.qualityLimitationReason - Web APIs
quality in the stream is currently being reduced by the codec during encoding, or none if no quality reduction is being performed. this quality reduction may include changes such as reduced frame rate or resolution, or an increase in compression factor. the amount of time the encoded media has had its quality reduced in each of the potential ways that can be done can be found in qualitylimitationdurations. syntax var qualitylimitationreason = rtcoutboundrtpstreamstats.qualitylimitationreason; value a map whose keys are domstrings whose values come from the rtcqualitylimitationreason enumerated type, and whose values are the duration of the media, in seconds, whose quality was reduced for that reason. examples specifications specification status comment identifi...

RTCOutboundRtpStreamStats - Web APIs
integer specifying the number of times the remote receiver has notified this rtcrtpsender that some amount of encoded video data for one or more frames has been lost, using picture loss indication (pli) packets. only available for video streams. qpsum a 64-bit value containing the sum of the qp values for every frame encoded by this rtcrtpsender. valid only for video streams. qualitylimitationdurations a record mapping each of the quality limitation reasons in the rtcremoteinboundrtpstreamstats enumeration to a floating-point value indicating the number of seconds the stream has spent with its quality limited for that reason. qualitylimitationreason a value from the rtcqualitylimitationreason enumerated type explaining why the resolution and/or frame rate is being limited for this rtp strea...

RTCPeerConnection.peerIdentity - Web APIs
syntax var identity = rtcpeerconnection.peeridentity; value a javascript promise which resolves to an rtcidentityassertion that describes the remote peer's identity. ...

RTCRtpEncodingParameters - Web APIs
ng the maximum number of bits per second to allow for this encoding. other parameters may further constrain the bit rate, such as the value of maxframerate or transport or physical network limitations. maxframerate a double-precision floating-point value specifying the maximum number of frames per second to allow for this encoding. ptime an unsigned long integer value indicating the preferred duration of a media packet in milliseconds. this is typically only relevant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first creat...

RTCRtpSendParameters.encodings - Web APIs
ng the maximum number of bits per second to allow for this encoding. other parameters may further constrain the bit rate, such as the value of maxframerate or transport or physical network limitations. maxframerate a double-precision floating-point value specifying the maximum number of frames per second to allow for this encoding. ptime an unsigned long integer value indicating the preferred duration of a media packet in milliseconds. this is typically only relevant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first creat...

ReadableStream.pipeThrough() - Web APIs
the pipethrough() method of the readablestream interface provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair. piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it. syntax var transformedstream = readablestream.pipethrough(transformstream[, options]); parameters transformstream a transformstream (or an object with the structure {writable, readable}) consisting of a readable stream and a writable stream working together to transform some data from one form to another. data writen to the writable stream can be read in some transformed state by the readable stream. for example, a textdecoder, has bytes written to it and strings read from it, while a video decoder...

ReadableStream.pipeTo() - Web APIs
the pipeto() method of the readablestream interface pipes the current readablestream to a given writablestream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered. piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it. syntax var promise = readablestream.pipeto(destination[, options]); parameters destination a writablestream that acts as the final destination for the readablestream. options optional the options that should be used when piping to the writable stream. available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed. the method will retur...

ReadableStream.tee() - Web APIs
ferent speeds. you might do this for example in a serviceworker if you want to fetch a response from the server and stream it to the browser, but also stream it to the serviceworker cache. since a response body cannot be consumed more than once, you’d need two copies to do this. to cancel the stream you then need to cancel both resulting branches. teeing a stream will generally lock it for the duration, preventing other readers from locking it. syntax var teedstreams = readablestream.tee(); parameters none. return value an array containing two readablestream instances. exceptions typeerror the source stream is not a readablestream. examples in the following simple example, a previously-created stream is teed, then both resulting streams (contained in two members of a generated arr...

SVGAnimationElement: beginEvent event - Web APIs
it may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method. ...

SVGAnimationElement - Web APIs
time, in seconds, for this animation element's current interval, if it exists, regardless of whether the interval has begun yet. if there is no current interval, then a domexception with code invalid_state_err is thrown. svganimationelement.getcurrenttime() returns a float representing the current time in seconds relative to time zero for the given time container. svganimationelement.getsimpleduration() returns a float representing the number of seconds for the simple duration for this animation. if the simple duration is undefined (e.g., the end time is indefinite), then a domexception with code not_supported_err is raised. svganimationelement.beginelement() creates a begin instance time for the current time. the new instance time is added to the begin instance times list. the behavior o...

SourceBuffer.remove() - Web APIs
lse. if sourcebuffer.updating is not equal to false, call sourcebuffer.abort(). syntax sourcebuffer.remove(start, end); parameters start a double representing the start of the time range, in seconds. end a double representing the end of the time range, in seconds. return value undefined. exceptions exception explanation invalidaccesserror the mediasource.duration property is equal to nan, the start parameter is negative or greater than mediasource.duration, or the end parameter is less than or equal to start or equal to nan. invalidstateerror the sourcebuffer.updating property is equal to true, or this sourcebuffer has been removed from the mediasource. example tbd. specifications specification status comment ...

TextTrackCue - Web APIs
the cue includes the start time (the time at which the text will be displayed) and the end time (the time at which it will be removed from the display), as well as other information. properties this interface also inherits properties from eventtarget. ...

TimeRanges.end() - Web APIs
nge number to return the ending time for. exceptions index_size_err a domexception thrown if the specified index doesn't correspond to an existing range. example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded. specifications specification status comment html living standardthe definition of 'timeranges.end()' in that specification. living standard initi...

TimeRanges.length - Web APIs
the timeranges.length read-only property returns the number of ranges in the object. syntax length = timeranges.length; example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded. specifications specification status comment html living standardthe definition of 'timeranges.length()' in that specification. living standard initial definition ...

TimeRanges.start() - Web APIs
e number to return the starting time for. exceptions index_size_err a domexception thrown if the specified index doesn't correspond to an existing range. example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded. specifications specification status comment html living standardthe definition of 'timeranges.start()' in that specification. living standard initial...

Touch - Web APIs
; if the hardware reports only a single point, these values will be 1. constructor touch() creates a touch object. properties this interface has no parent, and doesn't inherits or implements any other property. basic properties touch.identifier read only returns a unique identifier for this touch object. a given touch point (say, by a finger) will have the same identifier for the duration of its movement around the surface. this lets you ensure that you're tracking the same touch all the time. touch.screenx read only returns the x coordinate of the touch point relative to the left edge of the screen. touch.screeny read only returns the y coordinate of the touch point relative to the top edge of the screen. touch.clientx read only returns the x coordinate of the touch poin...

Touch events - Web APIs
} } } this iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn. this is done by looking at each touch's touch.identifier property. this property is a unique integer for each touch and remains consistent for each event during the duration of each finger's contact with the surface. this lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together. after drawing the line, we call array.splice() to replace the previous information about the touchpoint with the current information in the ongoingtouches array. handling the end of ...

Using bounded reference spaces - Web APIs
sive sessions, it also has significant differences from bounded-floor, so you need to be prepared to handle these differences. this is why the code snippet above records the reference space being used in the variable spacetype. the most obvious difference is that local-floor spaces don't provide boundaries, and are primarily meant to be used in situations where the user stays in one place for the duration of the session. if upon attempting to create a local-floor reference space, the user's xr device doesn't have built-in support for determining floor level, the webxr layer will still create a local-floor space. however, the floor level will be simulated by choosing and emulating the floor level and shifting the view upward by a fixed amount in order to ensure that the scene's contents render in ...

Geometry and reference spaces in WebXR - Web APIs
dians, simply multiply the value in degrees by π/180. the following code snippet shows two simple functions, degreestoradians() and radianstodegrees(), which convert back and forth between the two units for measuring angles. const radians_per_degree = math.pi / 180.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks. all times and durations in webxr are measured using the domhighrestimestamp type, which is a double-precision floating-point value specifying the time in milliseconds relative to the starting time. s...

WebXR application life cycle - Web APIs
ation of webxr functionality by engaging with the user interface enabled above, request an xrsession using the desired mode. this is done by calling navigator.xr.requestsession(), again specifying the string indicating the mode you want to enable: inline, immersive-vr, or immersive-ar. if the promise returned by requestsession() resolves, use the new xrsession to manage the webxr session for the duration of the webxr experience. this will involve managing inputs, animations, and rendering. call the xrsession method requestanimationframe() to schedule the first frame render for the xr device. if your scene is complex, you should consider creating a worker—or using one that you've previously created for this purpose—to perform the computations needed for each frame to be rendered. this...

Rendering and the WebXR frame animation callback - Web APIs
d an xrframe object providing details about the state of the scene for the frame you need to render. ideally, you want this code to be fast enough that it can maintain a 60 fps frame rate, or as close to that as possible, remembering that there's more going on than just your code in this one function. you need to make sure that the main thread doesn't need to run for more time per frame than the duration of the frame itself. a basic renderer in this version of the webxr renderering callback, we use a very straightforward approach that works great for relatively simple projects. this pseudocode outlines that process: for each view in the pose's views list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() ...

Keyframe Formats - Web APIs
opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the keyframe where it is specified until the next keyframe. any easing value specified on the options argument, however, applies across a single iteration of the animation — for the entire duration. an object containing key-value pairs consisting of the property to animate and an array of values to iterate over. element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this format, the number of elements in each array does not need to be equal. the provided values will be spaced out independently. element.an...

Using the Web Storage API - Web APIs
ing'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores. the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). localstorage does the same thing, but persists even when the browser is closed and reopened. these mechanisms are available via the window.sessionstorage and window.localstorage properties (to be more precise, in supporting browsers the window object implements the windowlocalstorage and windowsessionsto...

Web Storage API - Web APIs
the web storage api provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. web storage concepts and usage the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores) stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. data is never transferred to the server. storage limit is larger than a cookie (at most 5mb). localstorage does the same thing, but persists even when the browser is closed and reopened. stores data with no expiration date, and gets cleared only through jav...

Window: transitionend event - Web APIs
then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this ...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
be pinned to 4 ms. browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common. note also that the actual amount of time that elapses between calls to the callback may be longer than the given delay; see reasons for delays longer than specified in windoworworkerglobalscope.settimeout() for examples. ensure that execution duration is shorter than interval frequency if there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using settimeout(). for example, if using setinterval() to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing ...

XRReferenceSpace - Web APIs
or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more often. xrreferencespace usage notes creating an xrreferencespace there are two situations in which you need to obtain an xrreferencespace. the first is when you set up your scene and need to obtain a reference space to represent the user's viewpoint on the world for the duration of the xrsession. to do that, call the xrsession method requestreferencespace(), specifying the reference space type you wish to obtain. xrsession.requestreferencespace("local").then((refspace) => { xrreferencespace = refspace; /* ... */ }); the other situation in which you may need to acquire a new reference space is if you need to move the origin to a new position; this is commonly done, ...

XRSpace - Web APIs
f space whose borders are defined by an array of points laid out in clockwise order along the floor to define the passable region of the space. the origin of an xrboundedreferencespace is always at floor level, with its x and z coordinates typically defaulting to a location near the room's center. xrreferencespace represents a reference space which is typically expected to remain static for the duration of the xrsession. while objects may move within the space, the space itself remains fixed in place. there are exceptions to this static nature; most commonly, an xrreferencespace may move in order to adjust based on reconfiguration of the user's headset or other motion-sensitive device. properties the xrspace interface defines no properties of its own; however, it does inherit the properties o...

Cognitive accessibility - Accessibility
ing out forms. solutions include providing users enough additional time to complete tasks or eliminate time constraints altogether. timers options for adjusting time requirements include: allowing the user to turn off or adjust the time to at least 10 times the original limit before encountering it. alerting the user and providing a buffer of at least 20 seconds to extend the timeout duration by a factor of 10 with a simple action, such as hitting the space bar. provide a toggle on content that allows users to enable a longer session time limit, or no session time limit at all. examples of timed content include forms, timed reading exercises, and training materials. if the time limit is longer than 20 hours, accommodations are not required. moving, blinking, scrolling it i...

Perceivable - Accessibility
including background video or audio that autoplays, make it as unobtrusive as possible. don't make it look/sound like content, and provide a control to turn it off. ideally, don't include it at all. note: also see the wcag description for guideline 1.1: text alternatives. guideline 1.2 — providing text alternatives for time-based media time-based media refers to multimedia with a duration, such as audio and video. note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative. success criteria how to conform to the criteria practical resource 1.2.1 provide alternatives for pre-recorded audio-only and video-only content (a) a transcript should be provided for prerecorded audio-only media...

-webkit-overflow-scrolling - CSS: Cascading Style Sheets
not touch devices use momentum-based scrolling for a given element. syntax values auto use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen. touch use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. the speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. also creates a new stacking context. formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-a...

CSS Animations tips and tricks - CSS: Cascading Style Sheets
possible. this means you should not rely on animation-direction: alternate. instead you should explicitly write a keyframe animation that goes through the full animation in one forward repetition. use javascript and clear the animation being used when the animationiteration event fires. ...

CSS Animations - CSS: Cascading Style Sheets
css animations is a module of css that lets you animate the values of css properties over time, using keyframes. the behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes. reference css properties animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @keyframes guides detecting css animation support describes a technique for detecting if a browser supports css animations. using css animations step-by-step tutorial about how to create animations using css. this article describes each relevant css property and at-rule and explains how they in...

Border-image generator - CSS: Cascading Style Sheets
} /* * visible area */ #preview_section { position: relative; min-height: 400px; } /* image control */ #subject { width: 300px; height: 300px; background-repeat: no-repeat; background-size: 100%; background-color: #fff; border: 1px solid #ccc; position: absolute; z-index: 10; top: 15%; left: 10%; box-shadow: 0 0 3px 0 #bababa; transition-property: width, height; transition-duration: 0.1s; } #subject .guideline { background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.3); position: absolute; } #subject .guideline:hover { background-color: #f00; } #subject .guideline[data-active] { background-color: #f00; z-index: 10; } #subject .guideline[data-axis='x'] { width: 1px; height: 100%; top: -1px; } #subject .guideline[data-axis='y'] { width: 1...

Box-shadow generator - CSS: Cascading Style Sheets
: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position: relative; border: 1px solid #ccc; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .container { height: 100%; width: 100%; position: absolute; left: 100%; transition-property: left; transition-duration: 0.5s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .title { text-align: center; font-weight: bold; line-height: 2em; border-bottom: 1px solid #43a6e1; color: #666; } /* * stack of layers for shadow */ #layer_manager { width: 17%; background-color: #fefefe; margin: 0 1% 0 0; -moz-box-sizing: border-box; -webkit-box-s...

CSS Transitions - CSS: Cascading Style Sheets
css transitions is a module of css that lets you create gradual transitions between the values of specific css properties. the behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. reference properties transition transition-delay transition-duration transition-property transition-timing-function guides using css transitions step-by-step tutorial about how to create transitions using css. this article describes each relevant css property and explains how they interact with each other. specifications specification status comment css transitions working draft initial definition. ...

Cubic Bezier Generator - CSS: Cascading Style Sheets
ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size } ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ctx.stroke(); ctx.closepath(); // draw the bézier curve ctx.beginpath(); ctx.moveto(cx(0), cy(0)); ctx.strokestyle = 'blue'; ctx.beziercurveto(cx(x1), cy(y1), cx(x2), cy(y2), cx(1), cy(1)); ctx.stroke(); ...

animation-fill-mode - CSS: Cascading Style Sheets
e (which is the default). html <p>move your mouse over the gray box!</p> <div class="demo"> <div class="growsandstays">this grows and stays big.</div> <div class="grows">this just grows.</div> </div> css .demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; } see css animations for more examples. specifications specification status comment css animationsthe definition of 'animation-fill-mode' in that specification. working draft initial definition. ...

<dimension> - CSS: Cascading Style Sheets
syntax the syntax of <dimension> is a <number> immediately followed by a unit which is an identifier. unit identifiers are case insensitive. ...

Video player styling basics - Developer guides
ent. since the enclosing <figure> element now has position:relative set on it, the calculations made by this click handler are incorrect. it now also needs to take into account the offset position of the parent element: progress.addeventlistener('click', function(e) { var pos = (e.pagex - (this.offsetleft + this.offsetparent.offsetleft)) / this.offsetwidth; video.currenttime = pos * video.duration; }); fullscreen the fullscreen implemention hasn't changed. responsive styling now that the player has its basic look and feel taken care of, some other styling changes — involving media queries — need to be made in order to make it responsive. the player currently works fairly well until displayed on a "medium" screen (e.g. 1024px/64em) or smaller. in this case, the margins and padding ...

Media events - Developer guides
the readystate changes to have_enough_data, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. it will also be fired when playback is toggled between paused and playing. note: manually setting the currenttime will eventually fire a canplaythrough event in firefox. other browsers might not fire this event. durationchange the metadata has loaded or changed, indicating a change in duration of the media. this is sent, for example, when the media has loaded enough that the duration is known. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. encrypted the user ...

Global attributes - HTML: Hypertext Markup Language
deprecated, but kept for compatibility purposes. the multiple aria-* attributes, used for improving accessibility. ...

Closures - JavaScript
); running this code has exactly the same effect as the previous example of the init() function above. what's different (and interesting) is that the displayname() inner function is returned from the outer function before being executed. at first glance, it might seem unintuitive that this code still works. in some programming languages, the local variables within a function exist for just the duration of that function's execution. once makefunc() finishes executing, you might expect that the name variable would no longer be accessible. however, because the code still works as expected, this is obviously not the case in javascript. the reason is that functions in javascript form closures. a closure is the combination of a function and the lexical environment within which that function was decl...

Control flow and error handling - JavaScript
eptions that may be generated in the try block. catch (catchid) { statements } the catch block specifies an identifier (catchid in the preceding syntax) that holds the value specified by the throw statement. you can use this identifier to get information about the exception that was thrown. javascript creates this identifier when the catch block is entered. the identifier lasts only for the duration of the catch block. once the catch block finishes executing, the identifier no longer exists. for example, the following code throws an exception. when the exception occurs, control transfers to the catch block. try { throw 'myexception'; // generates an exception } catch (err) { // statements to handle any exceptions logmyerrors(err); // pass exception object to error handler } bes...

Functions - JavaScript
s that the outer function has access to). however, the outer function does not have access to the variables and functions defined inside the inner function. this provides a sort of encapsulation for the variables of the inner function. also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the outer function execution, if the inner function manages to survive beyond the life of the outer function. a closure is created when the inner function is somehow made available to any scope outside the outer function. var pet = function(name) { // the outer function defines a variable called "name" var getname = function() { return name; // the inner function has acces...

Function.prototype.call() - JavaScript
function() { console.log('#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); } using call to invoke a function and specifying the context for 'this' in the example below, when we call greet, the value of this will be bound to object obj. function greet() { const reply = [this.animal, 'typically sleep between', this.sleepduration].join(' '); console.log(reply); } const obj = { animal: 'cats', sleepduration: '12 and 16 hours' }; greet.call(obj); // cats typically sleep between 12 and 16 hours using call to invoke a function and without specifying the first argument in the example below, we invoke the display function without passing the first argument. if the first argument is not passed, the value of this is bou...

Logical nullish assignment (??=) - JavaScript
ence any side effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place). logical nullish assignment short-circuits as well meaning that x ??= y is equivalent to: x ?? (x = y); and not equivalent to the following which would always perform an assignment: x = x ?? y; examples using logical nullish assignment function config(options) { options.duration ??= 100; options.speed ??= 25; return options; } config({ duration: 125 }); // { duration: 125, speed: 25 } config({}); // { duration: 100, speed: 25 } specifications specification logical assignment operatorsthe definition of 'assignment operators' in that specification. ...

Optional chaining (?.) - JavaScript
"unknown city"; console.log(customercity); // unknown city specifications specificati...

Critical rendering path - Web Performance
nodes, the longer layout takes. layout can become a bottleneck, leading to jank if required during scrolling or other animations. while a 20ms delay on load or orientation change may be fine, it will lead to jank on animation or scroll. any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs. to reduce the frequency and duration of layout events, batch updates and avoid animating box model properties. paint the last step is painting the pixels to the screen. once the render tree is created and layout occurs, the pixels can be painted to the screen. onload, the entire screen is painted. after that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. paint ...

Optimizing startup performance - Web Performance
thing that matters which is currently running, depending on the operating environment. the source application might have a main loop that can easily be made to operate asynchronously (by running each main loop iteration separately); startup is often just a continuous, monolithic procedure that might periodically update a progress meter. while you can use web workers to run even very large, long-duration chunks of javascript code asynchronously, there's a huge caveat that: workers don't have access to webgl or audio, and they can't send synchronous messages to the main thread, so you can't even proxy those apis to the main thread. this all means that unless you can easily pull out the "pure calculation" chunks of your startup process into workers, you'll wind up having to run most or all of your ...

SVG Event Attributes - SVG: Scalable Vector Graphics
s animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, on...

begin - SVG: Scalable Vector Graphics
nc-value consists of the function wallclock() with a time value as parameter. the time syntax is based upon the syntax defined in iso 8601. indefinite the begin of the animation will be determined by a beginelement() method call or a hyperlink targeted to the element. discard for <discard>, begin defines when the target element will be discarded. the <discard> element has an implicit simple duration of indefinite. as soon as the element's active duration starts, the element identified by the href attribute is discarded. the behavior is the same as if node.removechild() were called on the parent of the target element with the target element as parameter. after removal of the target element, the <discard> element is no longer useful, therefore it is also discarded after the target element's r...

end - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> usage notes default value none value <end-value-list> animatable no the <end-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. ...

keyPoints - SVG: Scalable Vector Graphics
the keypoints attribute indicates the simple duration of an animation. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle> </sv...

repeatCount - SVG: Scalable Vector Graphics
="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the number of iterations. it can include partial iterations expressed as fraction values. a fractional value describes a portion of the simple duration. values must be greater than 0. indefinite this value indicates that the animation will be repeated indefinitely (i.e. until the document ends). specifications specification status comment svg animations level 2the definition of 'repeatcount' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the defin...

repeatDur - SVG: Scalable Vector Graphics
the repeatdur attribute specifies the total duration for repeating an animation. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies the dur...

restart - SVG: Scalable Vector Graphics
); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time. whennotactive this value indicates that the animation can only be restarted when it is not active (i.e. after the active end). attempts to restart the animation during its active duration are ignored. never this value indicates that the animation cannot be restarted for the time the document is loaded. specifications specification status comment svg animations level 2the definition of 'restart' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'restart' in that spe...

to - SVG: Scalable Vector Graphics
ifies the ending value of the animation. value <value> default value none animatable no the exact value type for this attribute depend on the value of the attribute that will be animated. if a list of values is defined via the values attribute, the to attribute is ignored. set for the <set> element, to specifies the value for the attribute during the duration of the element. value <value> default value none animatable no the exact value type for this attribute depend on the value of the attribute that will be animated. specifications specification status comment svg animations level 2the definition of 'to for <set>' in that specification. editor's draft no change ...

SVG Attribute reference - SVG: Scalable Vector Graphics
addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, on...

SVG animation with SMIL - SVG: Scalable Vector Graphics
to animate. below are examples for the four different ways. animating attributes of an element the following example animates the cx attribute of a circle. to do so, we add an <animate> element inside the <circle> element. the important attributes for <animate> are: attributename the name of the attribute to animate. from the initial value of the attribute. to the final value. dur the duration of the animation (for example, write '5s' for 5 seconds). if you want to animate more attributes inside the same element, just add more <animate> elements. <svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <...