ScreenOrientation.lock() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
...And 3 more matches

Window: deviceorientation event - Web APIs
the deviceorientation event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the earth coordinate frame. this data is gathered from a magnetometer inside the device. see orientation and motion data explained for details. ...
... the deviceorientation event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the earth coordinate frame. this data is gathered from a magnetometer inside the device. see orientation and motion data explained for details. ...
... fresh data is available from an orientation sensor about the current orientation of the device as compared to the earth coordinate frame. this data is gathered from a magnetometer inside the device. see orientation and motion data explained for details. ...
...And 3 more matches

nsIDOMOrientationEvent
read only. y double the amount of tilt along the y axis. read only. ...
... read only. y double the amount of tilt along the y axis. read only. ...
... read only. y double the amount of tilt along the y axis. read only. ...
...And 2 more matches

AudioListener.setOrientation() - Web APIs
the setorientation() method of the audiolistener interface defines the orientation of the listener. it consists of two direction vectors: the front vector, defined by the three unitless parameters x, y and z, describes the direction of the face of the listener, that is the direction the nose of the person is pointing towards. the front vector's default value is (0, 0, -1). the up vector, defined by three unitless parameters xup, yup and zup, describes the direction of the top of the listener's head. the up vector's default value is (0, 1, 0). the two vectors must be separated by an angle of 90° — in linear analysis terms, they must be perpendicular to each other. ...
...). the up vector, defined by three unitless parameters xup, yup and zup, describes the direction of the top of the listener's head. the up vector's default value is (0, 1, 0). the two vectors must be separated by an angle of 90° — in linear analysis terms, they must be perpendicular to each other. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.setorientation(0,0,-1,0,1,0); returns void. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. you...
...w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...And 2 more matches

PannerNode.setOrientation() - Web APIs
the setorientation() method of the pannernode interface defines the direction the audio source is playing in. this can have a big effect if the sound is very directional — controlled by the three cone-related attributes pannernode.coneinnerangle, pannernode.coneouterangle, and pannernode.coneoutergain. in such a case, a sound pointing away from the listener can be very quiet or even silent. the three parameters x, y and z are unitless and describe a direction vector in 3d space using the right-hand cartesian coordinate system. the default value of the direction vector is (1, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setorientation(1,0,0); returns void. example in the following example, you can see an example of how the createpanner() me...
...w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
...And 2 more matches

XRRigidTransform.orientation - Web APIs
as a unit quaternion, the length of the returned quaternion is always 1.0 meters. ...
...as a unit quaternion, the length of the returned quaternion is always 1.0 meters. ...
...as a unit quaternion, the length of the returned quaternion is always 1.0 meters. ...
...And 2 more matches

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

DeviceOrientationEvent - Web APIs
the deviceorientationevent provides web developers with information from the physical orientation of the device running the web page. warning: currently, firefox and chrome do not handle the coordinates the same way. take care about this while using them. constructor deviceorientationevent.deviceorientationevent() creates a new deviceorientationevent. properties deviceorientationevent.absolute read only a boolean that indicates whether or not the device is providing orientation data absolutely. deviceorientationevent.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360. ...
...entationevent.deviceorientationevent() creates a new deviceorientationevent. properties deviceorientationevent.absolute read only a boolean that indicates whether or not the device is providing orientation data absolutely. deviceorientationevent.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360. deviceorientationevent.beta read only a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. this represents a front to back motion of the device. deviceorientationevent.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. this represents a left to right motio...
... number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. this represents a front to back motion of the device. deviceorientationevent.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. this represents a left to right motion of the device. deviceorientationevent.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360. deviceorientationevent.webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative. it's usually 10. example wind...
...read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360. deviceorientationevent.webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative. it's usually 10. example window.addeventlistener('deviceorientation', function(event) { console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma); }); specifications specification status comment deviceorientation event specification editor's draft initial specification. ...

ScreenOrientation - Web APIs
the screenorientation interface of the the screen orientation api provides information about the current orientation of the document. properties screenorientation.typeread only returns the document's current orientation type, one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary". screenorientation.angleread only returns the document's current orientation angle. event handlers screenorientation.onchange the eventhandler called whenever the screen changes orientation. methods screenorientation.lock() locks the orientation of the containing document to its default orientation and returns a promise. screenorientation.unlock() unlocks the orientation of the containing document from its default orientation. specifications speci...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...tion. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

text-orientation - CSS: Cascading Style Sheets
the text-orientation css property sets the orientation of the text characters in a line. it only affects text in vertical mode (when writing-mode is not horizontal-tb). it is useful for controlling the display of languages that use vertical script, and also for making vertical table headers. 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. ...
...rizontal-tb). it is useful for controlling the display of languages that use vertical script, and also for making vertical table headers. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ text-orientation: mixed; text-orientation: upright; text-orientation: sideways-right; text-orientation: sideways; text-orientation: use-glyph-orientation; /* global values */ text-orientation: inherit; text-orientation: initial; text-orientation: unset; the text-orientation property is specified as a single keyword from the list below. values mixed rotates the characters of horizontal scripts 90° clockwi...
...ly (upright), as well as the glyphs for vertical scripts. note that this keyword causes all characters to be considered as left-to-right: the used value of direction is forced to be ltr. sideways causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise. sideways-right an alias to sideways that is kept for compatibility purposes. use-glyph-orientation on svg elements, this keyword leads to use the value of the deprecated svg properties glyph-orientation-vertical and glyph-orientation-horizontal. formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem i...
...roperties glyph-orientation-vertical and glyph-orientation-horizontal. formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-mode: vertical-rl; text-orientation: upright; } result specifications specification status comment css writing modes module level 3the definition of 'text-orientation' in that specification. proposed recommendation initial definition. ...

Orientation and motion data explained - Developer guides
we use upper-case letters ("x", "y", and "z") to describe the axes of the earth coordinate frame. ...
...we use upper-case letters ("x", "y", and "z") to describe the axes of the earth coordinate frame. ...
...ation and motion events, it's important to understand what the values you're given by the browser mean. this article provides details about the coordinate systems at play and how you use them. about coordinate frames a coordinate frame is a system whereby the orientation of the three axes (x, y, and z) are defined in reference to an object. there are two coordinate frames to consider when using orientation and motion events: earth coordinate frame the earth coordinate frame is the coordinate frame fixed on the center of the earth; that is, the axes are aligned based on the pull of gravity and the standard magnetic north orientation. we use upper-case letters ("x", "y", and "z") to describe the axes of the earth coordinate frame. the x axis follows along the ground plane, perpendicular to the y...
...ibe the axes of the device coordinate frame. the x axis is in the plane of the screen and is positive toward the right and negative toward the left. the y axis is in the plane of the screen and is positive toward the top and negative toward the bottom. the z axis is perpendicular to the screen or keyboard, and is positive extending outward from the screen. note: on a phone or tablet, the orientation of the device is always considered in relation to the standard orientation of the screen; this is the "portrait" orientation on most devices. on a laptop computer, the orientation is considered in relation to the keyboard. if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event. about rotation rotation is described about any given axis...

Screen.unlockOrientation() - Web APIs
the screen.unlockorientation() method removes all the previous screen locks set by the page/app. the screenorientation.unlock() method should be used instead. note: this method only works for installed web apps or for web pages in full-screen mode. syntax var unlocked = window.screen.unlockorientation(); return value returns true if the orientation was successfully unlocked or false if the orientation couldn't be unlocked. ...
...revious screen locks set by the page/app. the screenorientation.unlock() method should be used instead. note: this method only works for installed web apps or for web pages in full-screen mode. syntax var unlocked = window.screen.unlockorientation(); return value returns true if the orientation was successfully unlocked or false if the orientation couldn't be unlocked. ...
... the page/app. the screenorientation.unlock() method should be used instead. note: this method only works for installed web apps or for web pages in full-screen mode. syntax var unlocked = window.screen.unlockorientation(); return value returns true if the orientation was successfully unlocked or false if the orientation couldn't be unlocked. example var unlockorientation = screen.unlockorientation || screen.mozunlockorientation || screen.msunlockorientation || (screen.orientation && screen.orientation.unlock); if (unlockorientation()) { // orientation was unlocked } else { // orientation unlock failed } specifications specification status comment screen orientation apithe definition of 'lockorientation()' in that specification. working draft initia...

Using the aria-orientation attribute - Accessibility
the aria-orientation attribute is used to indicate whether an element is oriented horizontally or vertically. value vocabulary vertical the element is oriented vertically. horizontal (default) the element is oriented horizontally. possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider that is oriented vertically. ...
... possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider that is oriented vertically. ...
... aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist toolbar related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...

orientation - CSS: Cascading Style Sheets
the orientation css media feature can be used to test the orientation of the viewport (or the page box, for paged media). note: this feature does not correspond to device orientation. opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait. syntax the orientation feature is specified as a keyword value chosen from the list below. keyword values portrait the viewport is in a portrait orientation, i.e., the height is greater than or equal to the width. landscape the viewport is in a landscape orientation, i.e., the width is greater than the height. examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } di...
... chosen from the list below. keyword values portrait the viewport is in a portrait orientation, i.e., the height is greater than or equal to the width. landscape the viewport is in a landscape orientation, i.e., the width is greater than the height. examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } div { background: yellow; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } } result specifications specification status comment media queries level 4the definition of 'orientation' in that specification. ...
...w; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } } result specifications specification status comment media queries level 4the definition of 'orientation' in that specification. candidate recommendation no change. media queriesthe definition of 'orientation' in that specification. recommendation initial definition. ...

glyph-orientation-vertical - SVG: Scalable Vector Graphics
the glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered. when the inline-progression-direction is vertical and the glyph-orientation-vertical results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph. otherwise, if the angle is not a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph. this attribute is applied only to text written in a vertical writing-mode. note: as a presentation attribute, glyph-orientation-vertical can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following five ele...
...cal can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value auto | <angle> default value auto animatable no auto fullwidth ideographic and fullwidth latin text will be set with a glyph orientation of 0 degrees. ideographic punctuation and other ideographic characters having alternate horizontal and vertical forms will use the vertical form of the glyph. text which is not fullwidth will be set with a glyph orientation of 90 degrees. this reorientation rule applies only to the first-level non-ideographic text. all further embedding of writing modes or bidirectional processing will be based...
...n is based on a complex interaction between country, language, script, character properties, font, and character context. <angle> the value of the angle is restricted to 0, 90, 180, and 270 degrees. if another angle is specified, it is rounded to the closest of the permitted values. a value of 0deg indicates that all glyphs are set with the top of the glyphs oriented towards the reference orientation. a value of 90deg indicates an orientation of 90 degrees clockwise from the reference orientation. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'glyph-orientation-vertical' in that specification. recommendation initial definition ...

AbsoluteOrientationSensor - Web APIs
the absoluteorientationsensor constructor creates a new absoluteorientationsensor object which describes the device's physical orientation in relation to the earth's reference coordinate system. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var absoluteorientationsensor = new absoluteorientationsensor([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. ...
...decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device'. specifications specification status comment generic sensor api candidate recommendation defines sensors in general. orientation sensorthe definition of 'absoluteorientationsensor' in that specification. candidate recommendation ...

OrientationSensor.populateMatrix() - Web APIs
the populatematrix method of the orientationsensor interface populates the given target matrix with the rotation matrix based on the latest sensor reading. the rotation matrix is shown below. where: w = cos(θ/2) x = vx * sin(θ/2) y = vy * sin(θ/2) z = vz * sin(θ/2) if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax orientationinstance.populatematrix(targetmatrix) because orientationsensor is a base class, populatematrix may only be read from one of its derived classes. parameters targetmatrix tbd return value undefined example // tbd specifications specification status ...
...hat would ever be shown to a user. see feature-policy for implementation instructions. syntax orientationinstance.populatematrix(targetmatrix) because orientationsensor is a base class, populatematrix may only be read from one of its derived classes. parameters targetmatrix tbd return value undefined example // tbd specifications specification status comment orientation sensorthe definition of 'populatematrix' in that specification. candidate recommendation initial definition. ...

Screen.orientation - Web APIs
the orientation read-only property of the screen interface returns the current orientation of the screen. syntax var orientation = window.screen.orientation; return value an instance of screenorientation representing the orientation of the screen. note that older, prefixed versions returned a domstring equivalent to screenorientation.type. example var orientation = (screen.orientation || {}).type || screen.mozorientation || screen.msorientation; if (orientation === "landscape-primary") { console.log("that looks good."); } else if (orientation === "landscape-secondary") { console.log("mmmh... the screen is upside down!"); } else if (orientation === "portrait-secondary" || orientation === "portrait-primary") { console.log("mmmh... you should rotate your device to landscape"); } else if...
...screen.mozorientation || screen.msorientation; if (orientation === "landscape-primary") { console.log("that looks good."); } else if (orientation === "landscape-secondary") { console.log("mmmh... the screen is upside down!"); } else if (orientation === "portrait-secondary" || orientation === "portrait-primary") { console.log("mmmh... you should rotate your device to landscape"); } else if (orientation === undefined) { console.log("the orientation api isn't supported in this browser :("); } specifications specification status comment screen orientation apithe definition of 'orientation' in that specification. working draft initial definition ...

ScreenOrientation.onchange - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

ScreenOrientation.type - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

ScreenOrientation.unlock() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

Screen Orientation API - Web APIs
the screen orientation api provides information about the orientation of the screen. interfaces screenorientation specifications specification status comment screen orientation api working draft initial definition. browser compatibility screenorientation the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...r compatibility screenorientation the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

orientation - CSS: Cascading Style Sheets
the orientation css descriptor controls the orientation of a document defined by @viewport. /* keyword values */ orientation: auto; orientation: portrait; orientation: landscape; for a ua/device where the orientation is changed upon tilting the device, an author can use this descriptor to inhibit the orientation change. syntax values auto the user agent will set the document's orientation automatically, typically based on the device's orientation as determined by an accelerometer (if the device has such a hardware sensor), although there is often a user-controlled, os-level "lock orientation" setting that will trump the accelerometer reading. portrait the document should be locked into portrait orientation. landscape the document should be locked into landscape orientation. formal def...
...tion" setting that will trump the accelerometer reading. portrait the document should be locked into portrait orientation. landscape the document should be locked into landscape orientation. formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification. working draft initial definition ...

orientation - Web app manifests
type string mandatory no the orientation member defines the default orientation for all the website's top-level browsing contexts. note: orientation and/or its specific values might not be supported by a user agent on various display modes because supporting them does not make sense for the particular context. note: the orientation can be changed at runtime via the screen orientation api. ...
...tory no the orientation member defines the default orientation for all the website's top-level browsing contexts. note: orientation and/or its specific values might not be supported by a user agent on various display modes because supporting them does not make sense for the particular context. note: the orientation can be changed at runtime via the screen orientation api. values orientation can take one of the following values: any natural landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary examples "orientation": "portrait-primary" specification specification status comment feedback web app manifestthe definition of 'orientation' in that specification. working draft ...

glyph-orientation-horizontal - SVG: Scalable Vector Graphics
the glyph-orientation-horizontal attribute affects the amount that hte current text position advances as each glyph is rendered. when the reference orientation direction is horizontal and the glyph-orientation-horizontal results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph. otherwise, if the value of this attribute is not a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph. this attribute is applied only to text written in a horizontal writing-mode. note: as a presentation attribute, glyph-orientation-horizontal can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect...
...ef>, and <tspan> context notes value <angle> default value 0deg animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 270 degrees. if another angle is specified, it is rounded to the closest of the permitted values. a value of 0deg indicates that all glyphs are set with the top of the glyphs oriented towards the reference orientation. a value of 90deg indicates an orientation of 90 degrees clockwise from the reference orientation. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'glyph-orientation-horizontal' in that specification. recommendation initial definition ...

DeviceOrientationEvent.absolute - Web APIs
indicates whether or not the device is providing orientation data absolutely (that is, in reference to the earth's coordinate frame) or using some arbitrary frame determined by the device. see orientation and motion data explained for details. syntax var absolute = instanceofdeviceorientationevent.absolute; on return, absolute is true if the orientation data in instanceofdeviceorientationevent is provided as the difference between the earth's coordinate frame and the device's coordinate frame, or false if the orientation data is being provided in reference to some arbitrary, device-determined coordinate frame. specifications specification status comment deviceorientation event specification editor's draft initial specification. ...

DeviceOrientationEvent.alpha - Web APIs
returns the rotation of the device around the z axis; that is, the number of degrees by which the device is being twisted around the center of the screen. see orientation and motion data explained for details. syntax var alpha = instanceofdeviceorientationevent.alpha; specifications specification status comment deviceorientation event specification editor's draft initial specification. ...

DeviceOrientationEvent.beta - Web APIs
returns the rotation of the device around the x axis; that is, the number of degrees, ranged between -180 and 180, by which the device is tipped forward or backward. see orientation and motion data explained for details. syntax var beta = instanceofdeviceorientationevent.beta; specifications specification status comment deviceorientation event specification editor's draft initial specification. ...

DeviceOrientationEvent.gamma - Web APIs
returns the rotation of the device around the y axis; that is, the number of degrees, ranged between -90 and 90, by which the device is tilted left or right. see orientation and motion data explained for details. syntax var gamma = orientationevent.gamma; specifications specification status comment deviceorientation event specification editor's draft initial specification. ...

OrientationSensor.quaternion - Web APIs
the quaternion read-only property of the orientationsensor interface returns a four element array whose elements contain the components of the unit quaternion representing the device's orientation. syntax var quaternion = orientationinstance.quaternion because orientationsensor is a base class, quaternion may only be read from one of its derived classes. value a array whose values are the x, y, z, and w components of the quaternion representing the device orientation. example // tbd specifications specification status comment orientation sensorthe definition of 'quaternion' in that specification. candidate recommendation initial definition. ...

Screen.onorientationchange - Web APIs
warning: this is a non-standard deprecated feature which was implemented only in firefox under a different name. use screenorientation.onchange instead. an event handler for the orientationchange events sent to the screen object. syntax screen.onorientationchange = funcref; where funcref is a reference to a function. specifications specification status comment screen orientation apithe definition of 'onorientationchange' in that specification. working draft initial definition (not present in the draft anymore) ...

ScreenOrientation.angle - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

window.ondeviceorientation - Web APIs
summary an event handler for the deviceorientation event, which contains information about a relative device orientation change. syntax window.ondeviceorientation = function(event) { ... }; window.addeventlistener('deviceorientation', function(event) { ... }); specifications specification status comment deviceorientation event specification editor's draft initial specification. ...

Window.ondeviceorientationabsolute - Web APIs
summary an event handler for the deviceorientationabsolute event containing information about an absolute device orientation change. syntax window.ondeviceorientationabsolute = function(event) { ... }; window.addeventlistener('deviceorientationabsolute', function(event) { ... }); specifications this event handler is not currently part of any specification. ...

Window.orientation - Web APIs
summary returns the orientation in degrees (in 90-degree increments) of the viewport relative to the device's natural orientation. its only possible values are -90, 0, 90, and 180. positive values are clockwise; negative values are counterclockwise. specifications specification status comment compatibility standardthe definition of 'window.orientation' in that specification. living standard ...

Window: orientationchange event - Web APIs
the orientationchange event is fired when the orientation of the device has changed. bubbles no cancelable no interface event event handler onorientationchange example you can use the orientationchange event in an addeventlistener method: window.addeventlistener("orientationchange", function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }); or use the onorientationchange event handler property: window.onorientationchange = function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }; specifications specification status compatibility standardthe definition of 'orientationchange' in that specification. ...

orientation - SVG: Scalable Vector Graphics
the orientation attribute indicates that the given glyph is only to be used for a particular text direction, i.e. horizontal or vertical. only one element is using this attribute: <glyph> usage notes value h | v default value none (meaning glyph can be used for both text directions) animatable yes h this value indicates that the glyph is only used for a horizontal text direction. v this value indicates that the glyph is only used for a vertical text direction. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'orientation' in that specification. recommendation initial definition ...

Index - Web APIs
rt the onabort read-only property of the fetchsignal interface is an event handler invoked when an abort event fires, i.e. when the fetch request(s) the signal is communicating with is/are aborted. 13 abortsignal: abort event abort, events the abort event of the fetch api is fired when a fetch request is aborted, i.e. using abortcontroller.abort(). ...
...erty of the fetchsignal interface is an event handler invoked when an abort event fires, i.e. when the fetch request(s) the signal is communicating with is/are aborted. 13 abortsignal: abort event abort, events the abort event of the fetch api is fired when a fetch request is aborted, i.e. using abortcontroller.abort(). ...
...ler invoked when an abort event fires, i.e. when the fetch request(s) the signal is communicating with is/are aborted. 13 abortsignal: abort event abort, events the abort event of the fetch api is fired when a fetch request is aborted, i.e. using abortcontroller.abort(). ...
...And 65 more matches

Web audio spatialization basics - Web APIs
ce), which is used by the distance models. we can keep that at the default value of 1 as well: const refdistance = 1; then there's the roll-off factor (rollofffactor) — how quickly does the volume reduce as the panner moves away from the listener. the default value is 1; let's make that a bit bigger to exaggerate our movements. ...
...a positive value would set the sound source facing away from us. ...
...a positive value would set the sound source facing away from us. ...
...And 24 more matches

nsIScrollable
/docshell/base/nsiscrollable.idlscriptable this interface can be implemented by a control that supports scrolling. this is a generic interface without concern for the type of content that may be inside. ...
...ted by a control that supports scrolling. this is a generic interface without concern for the type of content that may be inside. ...
...llable last changed in gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) method overview long getcurscrollpos(in long scrollorientation); obsolete since gecko 29.0 long getdefaultscrollbarpreferences(in long scrollorientation); void getscrollbarvisibility(out boolean verticalvisible, out boolean horizontalvisible); void getscrollrange(in long scrollorientation, out long minpos, out long maxpos); obsolete since gecko 29.0 void setcurscrollpos(in long scrollorientation, in long curpos); obsolete since gecko 29.0 void setcurscrollposex(in long curhorizontalpos, in long curverticalpos); obsolete since gecko 29.0 void setdefaultscrollbarpreferences(in long scrollorientation, in long scrollbarpref); void setscrollrange(in ...
...And 12 more matches

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
d is called and a given point in 3d space. the object returned by getoffsetreferencespace() is an xrreferencespace if called on an xrreferencespace, or an xrboundedreferencespace if called on an object of that type. in other words, when you have an object in 3d space and need to position another object relative to that one, you can call getoffsetreferencespace(), passing into it the position and orientation you want the second object to have relative to the position and orientation of the object on which you call getoffsetreferencespace(). then, when drawing the scene, you can use the offset reference space to not only position objects relative to one another, but to apply the needed transforms to render objects properly based upon the viewer's position. this is demonstrated in the example implemen...
...ementing rotation based on non-xr inputs, which demonstrates a way to use this method to let the user use their mouse to pitch and yaw their viewing angle. syntax offsetreferencespace = xrreferencespace.getoffsetreferencespace(originoffset); parameters originoffset an xrrigidtransform specifying the offset to the origin of the new reference space. these values are added to the position and orientation of the current reference space and then the result is used as the position and orientation of the newly created xrreferencespace. return value a new xrreferencespace object describing a reference space with the same native origin as the reference space on which the method was called, but with an origin offset indicating the distance from the object to the point given by originoffset. if the o...
...then the first animation frame is requested using xrsession's requestanimationframe(). implementing rotation based on non-xr inputs the input controls supported directly by webxr are all dedicated vr or ar input devices. in order to use mouse, keyboard, or other input devices to move or otherwise transform objects in the 3d space—or to allow the user to m...
...And 11 more matches

Geometry and reference spaces in WebXR - Web APIs
ity or virtual reality contexts is performed using webgl, so the two apis share much of the same design language. however, in order to provide the ability to present scenes in true 3d using xr headsets and other such equipment, webxr has additional concepts that must be understood. ...
...t be understood. in this article, we introduce the ways in which webxr expands upon the geometry of webgl, and how the positions and orientations of objects—both physical and virtual—are described in relation to one another using spaces and, in particular, reference spaces. the article spatial tracking in webxr builds upon the information provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited. fundamentals of 3d geometry while we'll examine here the required math operations used to compute the posit...
...e user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited. fundamentals of 3d geometry while we'll examine here the required math operations used to compute the positions, orientations, and movement of objects in virtual space—plus the need to integrate the human viewer of the scene into the mix—a thorough introduction to geometry and the use of matrices and vectors to manage 3d representations of a scene is well beyond the scope of what can be accomplished in this article. you can learn more about the individual operations in matrix math for the web. units before discus...
...And 10 more matches

XRView - Web APIs
you can think of it as a description of a specific eye or camera and how it views the world. a 3d frame will involve two views, one for each eye, separated by an appropriate distance which approximates the distance between the viewer's eyes. this allows the two views, when projected in isolation into the appropriate eyes, to simulate a 3d world. properties eye read only which of the two eyes (left) or (right) for which this xrview represents the perspective. ...
...ng that doesn't need to appear in 3d). projectionmatrix read only the projection matrix that will transform the scene to appear correctly given the point-of-view indicated by eye. this matrix should be used directly in order to avoid presentation distortions that may lead to potentially serious user discomfort. transform read only an xrrigidtransform which describes the current position and orientation of the viewpoint in relation to the xrreferencespace specified when getviewerpose() was called on the xrframe being rendered. usage notes positions and number of xrviews per frame while rendering a scene, the set of views that are used to render the scene for the viewer as of the current frame are obtained by calling the xrframe object's getviewerpose() method to get the xrviewerpose represe...
...y (especially if the field of view is very large). there might also be views representing observers watching the action, or other viewspoints not direclty associated with a player's eye. in addition, the number of views can change at any time, depending on the needs of the time. so you should process the view list every time without making assumptions based on previous frames. all positions and orientations within the views for a given xrviewerpose are specified in the reference space that was passed to xrframe.getviewerpose(); this is called the viewer reference space. the transform property describes the position and orientation of the eye or camera represented by the xrview, given in that reference space. the destination rendering layer to render a frame, you just iterate over the xrviewerpose...
...And 10 more matches

Inputs and input sources - Web APIs
ve the user simply tapping on a spot on the screen, tracking their eyes, or the use of a joystick or motion-sensing controller to move a cursor. actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves. by combining these two types of input with the changing of viewing position and/or orientation through the headset or other mechanisms, you can create an interactive simulated environment. input device types webxr supports a variety of different types of devices to handle targeting and action inputs. these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) can be used to simultaneously perform both targeting and selection. ...
... ray mode is most commonly found on mobile devices like smartphones and tablets. the screen mode indicates that the target ray is determined based on the user interacting with the webxr context by engaging with the screen in some way—most likely by the viewer tapping the screen or dragging the target ray around with their fingers. target ray space the xrspace used to describe the position and orientation of the target ray is found in the targetrayspace property. this space's native origin is located at the point from which the target ray is emitted (such as the front tip of the controller, or the end of a gun barrel if the controller is being rendered as a gun, for example), and the space's orientation vector extends outward along the path of the target ray. you can easily obtain the target ray ...
...handler for a given frame using xrframe's getpose() method. the returned xrpose's transform is the transform corresponding to the target ray. thus, for an input controller primaryinput: let targetraypose = frame.session.getpose(primaryinput.targetrayspace, viewerrefspace); let targetrayorigin = targetraypose.transform.position; let targetrayvector = targetraypose.transform.orientation; with this, you now have the point from which the targeting ray is emitted (targetrayorigin) and the direction in which it's pointing (targetrayvector), given in the viewer's reference space (viewerrefspace). that's everything you need to be able to draw the targeting ray, determine what's being pointed at, do hit testing, and so forth. grip space the input source's gripspace property is an x...
...And 9 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the webxr apis used for implementing augmented and virtual reality is designed specifically to provide the ability to insert a human into a virtual environment. to accomplish this, software needs the ability to not only track the locations, orientation, and movements of objects in the virtual world, but the user's location, orientation, and movement as well. but webxr goes beyond that by adding the ability to track the location, orientation, and motion of the input devices which generate data used to determine the position and movement of individual parts of the viewer's body (with appropriate equipment). the location and movement of the user's headset represent their head's position and orientation in the virtual environment. hand controllers represent their hands in the same manner. other hardw...
...tion and orientation in the virtual environment. hand controllers represent their hands in the same manner. other hardware elements can be used similarly to represent other parts of the body, providing additional data to use when simulating the user's actions in their environment. in this guide, we'll explore how webxr uses spaces and, more specifically, reference spaces, to track the positions, orientations, and movements of objects and of the user's body in the virtual world. note: this article presumes that you are familiar with the concepts introduced in geometry and reference spaces in webxr: that is, the basics of 3d coordinate systems, as well as webxr spaces, reference spaces, and how reference spaces are used to create local coordinate systems for individual objects or movable components ...
...able components within a scene. representing a position using a reference space as covered in defining spatial relationships with reference spaces in geometry and reference spaces in webxr, reference spaces establish a local coordinate system which is offset from another coordinate system that is itself defined by some other space. thus, a reference space can be used to define the position and orientation of a point and by extension the entire object for which that point is the origin. while this is a little heavy-handed to be used for every single object in a scene, it can be very useful for a few specific objects to have their own coordinate system in this manner. the world space; the origin of this space is the origin of the webgl coordinate system underlying the entire 3d canvas. the playe...
...And 7 more matches

Index - Archive of obsolete content
t be clicked to scroll the scrollbox content. 1822 assign xul elements, xul reference for xml templates, specifies an additional variable to assign a value to. 1823 attribute.align the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. 1824 autohide no sum...
... 1828 box xul elements, xul reference a container element which can contain any number of child elements. if the box has an orient attribute that is set to horizontal, the child elements are laid out from left to right in the order that they appear in the box. if orient is set to vertical, the child elements are laid out from top to bottom. child elements do not overlap. the default orientation is horizontal. 1829 broadcaster xul elements, xul reference a broadcaster is used when you want multiple elements to share one or more attribute values, or when you want elements to respond to a state change. any elements that are observing the broadcaster will share the attributes placed on the broadcaster. for instance, if the broadcaster has a label attribute, the observer...
...round it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. 1855 hbox xul elements, xul reference a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizontal orientation. 1856 iframe reference, référence(2), xul, xul elements, xul reference type: one of the values below.the type of browser, which can be used to set access of the document loaded inside the browser. 1857 image xul elements, xul reference an element that displays an image, much like the html img element. the src attribute can be used to specify the url of ...
...And 6 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
centers in the space available. this is pretty simple to achieve. ...
... achieve. ...
...rtain point: @media all and (min-width: 1400px) { body { width: 1400px; margin: 0 auto; } } but it's actually easier to just set the following rule instead, and get rid of the media query altogether: body { max-width: 1400px; margin: 0 auto; } orientation fail we also came across some problems with orientation: the mobile-app layout of our example app is designed for portrait orientation, and looks terrible when viewed on a device in landscape orientation. ...
...And 6 more matches

Sensor APIs - Web APIs
t. instead you'll use one of its subclasses to retrieve specific kinds of sensor data. for example, the accelerometer interface returns the acceleration of the device along all three axes at the time it is read. sensors may or may not correspond exactly to a physical device sensor. for example, the gyroscope interface corresponds exactly to a physical device interface. alternatively, the absoluteorientationsensor interface provides information that is algorithmically agregated from two or more device sensors. these sensor types are referred to as low-level and high-level respectively. the latter type of sensor is also called a fusion sensor (alternatively, virtual or synthetic sensors). feature detection sensor interfaces are only proxies for the underlying device sensors. consequently, feature de...
...low, requests permission before attempting to use the sensor. navigator.permissions.query({ name: 'accelerometer' }) .then(result => { if (result.state === 'denied') { console.log('permission to use accelerometer sensor is denied.'); return; } // use the sensor. }); an alternative approach is to attempt to use the error and listen for the securityerror. const sensor = new absoluteorientationsensor(); sensor.start(); sensor.onerror = event => { if (event.error.name === 'securityerror') console.log("no permissions to use absoluteorientationsensor."); }; the following table describes for each sensor type, the name required for the permissions api, the <iframe> element's allow attribute and the feature-policy directive. sensor permissions sensor permission/feature po...
...r.onerror = event => { if (event.error.name === 'securityerror') console.log("no permissions to use absoluteorientationsensor."); }; the following table describes for each sensor type, the name required for the permissions api, the <iframe> element's allow attribute and the feature-policy directive. ...
...And 5 more matches

Rendering and the WebXR frame animation callback - Web APIs
these setup tasks are described in the article setting up and shutting down a webxr session. preparing the renderer once the xr session has been set up, with the webgl framebuffer connected and webgl primed with the data it needs in order to render the scene, you can set up the renderer to start running. this begins with getting the reference space in which you want to draw, with its origin and orientation set at the viewer's starting position and viewing direction. once that's in hand, you request that the browser call your rendering function the next time it needs a framebuffer to render your scene. this is done by calling the xrsession method requestanimationframe(). kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrs...
...r scene. this is done by calling the xrsession method requestanimationframe(). kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, viewerstartorientation)); animationframerequestid = xrsession.requestanimationframe(mydrawframe); } } after getting a reference space for the immersive world, this creates an offset reference space representing the position and orientation of the viewer by creating an xrrigidtransform representing that position and orientation, then calling the xrreferencespace method getoffsetreferencespace(). then the first ...
...rspective, shadows, memories of what these relationships mean, and so forth, we can figure out a great deal about the world around us. frames, poses, views, and framebuffers once you have an xrframe representing the state of the scene at a moment in time, you need to determine the positions of objects within the scene relative to the viewer so that you can render them. ...
...And 5 more matches

Testing media queries programmatically - CSS: Cascading Style Sheets
querylist object, you can check the result of the query or receive notifications when the result changes. creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query. to do this, use the window.matchmedia method. ...
...r receive notifications when the result changes. creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query. to do this, use the window.matchmedia method. ...
... set up a query list that determines if the device is in landscape or portrait orientation: const mediaquerylist = window.matchmedia("(orientation: portrait)"); checking the result of a query once you've created your media query list, you can check the result of the query by looking at the value of its matches property: if (mediaquerylist.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is not currently in portrait orientation, therefore landscape */ } receiving query notifications if you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. to do this, call the addlistener() method on the mediaquerylist object, with a callback function to ...
...And 5 more matches

Index - Archive of obsolete content
t be clicked to scroll the scrollbox content. 1091 assign xul elements, xul reference for xml templates, specifies an additional variable to assign a value to. 1092 attribute.align the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. 1093 autohide no sum...
... 1097 box xul elements, xul reference a container element which can contain any number of child elements. if the box has an orient attribute that is set to horizontal, the child elements are laid out from left to right in the order that they appear in the box. if orient is set to vertical, the child elements are laid out from top to bottom. child elements do not overlap. the default orientation is horizontal. 1098 broadcaster xul elements, xul reference a broadcaster is used when you want multiple elements to share one or more attribute values, or when you want elements to respond to a state change. any elements that are observing the broadcaster will share the attributes placed on the broadcaster. for instance, if the broadcaster has a label attribute, the observer...
...round it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. 1124 hbox xul elements, xul reference a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizontal orientation. 1125 iframe reference, référence(2), xul, xul elements, xul reference type: one of the values below.the type of browser, which can be used to set access of the document loaded inside the browser. 1126 image xul elements, xul reference an element that displays an image, much like the html img element. the src attribute can be used to specify the url of ...
...And 4 more matches

Beginner's guide to media queries - Learn web development
e design so you will rarely see width or height used alone. there are a number of other media features that you can test for, although some of the newer features introduced in level 4 and 5 of the media queries specification have limited browser support. each feature is documented on mdn along with browser support information, and you can find a full list at using media queries: media features. orientation one well-supported media feature is orientation, which allows us to test for portrait or landscape mode. to change the body text color if the device is in landscape orientation, use the following media query. @media (orientation: landscape) { body { color: rebeccapurple; } } open this example in the browser, or view the source. a standard desktop view has a landscape orientati...
...entation, which allows us to test for portrait or landscape mode. to change the body text color if the device is in landscape orientation, use the following media query. @media (orientation: landscape) { body { color: rebeccapurple; } } open this example in the browser, or view the source. a standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. testing for orientation can help you to create a layout which is optimised for devices in portrait mode. use of pointing devices as part of the level 4 specification, the hover media feature was introduced. this feature means you can test if the user has the ability to hover over an element, which essentially means they are...
...s a touchscreen. more complex media queries with all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched. "and" logic in media queries to combine media features you can use and in much the same way as we have used and above to combine a media type and feature. for example, we might want to test for a min-width and orientation. the body text will only be blue if the viewport is at least 600 pixels wide and the device is in landscape mode. @media screen and (min-width: 600px) and (orientation: landscape) { body { color: blue; } } open this example in the browser, or view the source. "or" logic in media queries if you have a set of queries, any of which could match, then you can comma separate these q...
...And 4 more matches

PannerNode - Web APIs
t have panning effects without at least two audio channels! number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor pannernode.pannernode creates a new pannernode object instance. properties inherits properties from its parent, audionode. the orientation and position value are set and retrieved using different syntaxes, since they're stored as audioparam values. retrieval is done by accessing, for example, pannernode.positionx. while setting the same property is done with pannernode.positionx.value. this is why these values are not marked read only, which is how they appear in the webidl. pannernode.coneinnerangle is a double value describin...
...enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener. possible values are "linear", "inverse" and "exponential". the default value is "inverse". pannernode.maxdistance a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further. pannernode.orientationx represents the horizontal position of the audio source's vector in a right-hand cartesian coordinate system. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 1. pannernode.orientationy represents the vertical position of the audio source's vector in a right-hand cartesian coordinate system. the default is 0. while thi...
...the default is 0. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 0. ...
...And 4 more matches

WebXR Device API - Web APIs
), or for adding graphical imagery to the real world, (augmented reality, or ar). the webxr device api implements the core of the webxr feature set, managing the selection of output devices, render the 3d scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers. webxr-compatible devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery. to accomplish these things, the webxr device api provides the following key capabilities: find compatible vr or ar output devices render a 3d scene to the...
...ents which communicate tracking states will also use xrframe to contain that information. xrrenderstate provides a set of configurable properties which change how the imagery output by an xrsession is composited. xrsession provides the interface for interacting with xr hardware. once an xrsession is obtained from navigator.xr.requestsession(), the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user. xrspace xrspace is an opaque base class on which all virtual coordinate system interfaces are based. positions in webxr are always expressed in relation to a particular xrspace at the time at which a particular xframe takes place. the space's coordinate system has its origin at t...
...ow for creating stereographic effects. xrviewport describes a viewport. a viewport is a rectangular portion of a graphic surface. in webxr, a viewport represents the area of a drawing surface corresponding to a particular xrview, such as the portion of the webgl framebuffer used to render one of the two eyes' perspectives on the scene. xrrigidtransform a transform defined using a position and orientation in the virtual space's coordinate system as described by the xrspace. xrpose describes a position and orientation in space relative to an xrspace. xrviewerpose based on xrpose, xrviewerpose specifies the state of a viewer of the webxr scene as indicated by the xr device. included is an array of xrview objects, each representing one perspective on the scene. for example, it takes two views to ...
...And 4 more matches

XRRigidTransform() - Web APIs
the xrrigidtransform() constructor creates and returns a new xrrigidtransform object, representing the position and orientation of a point or object. among other things, xrrigidtransform is used when providing a transform to translate between coordinate systems across spaces. syntax let xrrigidtransform = new xrrigidtransform(position, orientation); parameters position optional an object conforming to dompointinit which specifies the coordinates at which the point or object is located. these dimensions are specified in meters. if this parameter is left out or is not compatible with dompointinit, the position used is assumed to be {x: 0, y: 0, z: 0, w: 1}. w must always be 1. ...
...igidtransform = new xrrigidtransform(position, orientation); parameters position optional an object conforming to dompointinit which specifies the coordinates at which the point or object is located. these dimensions are specified in meters. if this parameter is left out or is not compatible with dompointinit, the position used is assumed to be {x: 0, y: 0, z: 0, w: 1}. w must always be 1. orientation optional an object conforming to dompointinit which specifies the direction in which the object is facing. the default value for orientation is {x: 0, y: 0, z: 0, w: 1}. the specified orientation gets normalized if it's not already. ...
... exceptions typeerror the value of the w coordinate in the specified position is not 1.0. ...
...And 4 more matches

AudioListener - Web APIs
all pannernodes spatialize in relation to the audiolistener stored in the baseaudiocontext.listener attribute. it is important to note that there is only one listener per context and that it isn't an audionode. properties the position, forward, and up value are set and retrieved using different syntaxes. retrieval is done by accessing, for example, audiolistener.positionx, while setting the same property is done with audiolistener.positionx.value. this is why these values are not marked read only, which is how they appear in the specification's idl. ...
...ward and up values are linearly independent of each other. the default is 1. audiolistener.upz represents the longitudinal (back and forth) position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values. the forward and up values are linearly independent of each other. the default is 0. methods audiolistener.setorientation() sets the orientation of the listener. audiolistener.setposition() sets the position of the listener. note: although these methods are deprecated they are currently the only way to set the orientation and position in firefox, internet explorer and safari. deprecated features audiolistener.dopplerfactor a double value representing the amount of pitch shift to use when rendering ...
...nodes were pitched up or down, not other source nodes. the behavior to adopt when an audiobuffersourcenode was connected to multiple pannernodes was unclear. because the velocity of the panner and the listener were not audioparams, the pitch modification could not be smoothly applied, resulting in audio glitches. because of these issues, these properties and methods have been removed. the setorientation() and setposition() methods have been replaced by setting their property value equivilents. for example setposition(x, y, z) can be achieved by setting positionx.value, positiony.value, and positionz.value respectively. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. genera...
...And 3 more matches

User input and controls - Developer guides
goes beyond simple mouse and keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. user input and controls workflow the following diagram illustrates the typical workflow for implementing user input mechanisms: first of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. once you decided the input mechanisms, you can control them using tools offered ...
...s a pointing method, the pointer lock api helps you in implementing a first person 3d game or other applications requiring full control of the pointing device. and the fullscreen api helps you in displaying your app in fullscreen mode. using features such as contenteditable elements you can implement fast rich-text editors and with drag&drop let users moving elements inside your app. when screen orientation matters for your application, through the screen orientation api you can read the screen orientation state and perform other actions. you should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea. the following is a set of recommendations and best practices f...
...er lock in some cases, typically game development, you might need to access mouse events even when the cursor goes past the boundary of the browser or screen: the pointer_lock_api gives you full control of the pointing device. this is the code to request pointer lock on an element: element.requestpointerlock(); note: for a full tutorial and reference, read our pointer_lock_api page. screen orientation when screen orientation matters for your application, you can read the screen orientation state, be informed when this state changes, and able to lock the screen orientation to a specific state (usually portrait or landscape) through the screen orientation api. orientation data can be retrieved through the screen.orientation attribute or through the orientation media feature. when screen.orient...
...And 3 more matches

CSS3 - Archive of obsolete content
the scoping mechanism. clarifies: interaction of media-dependent @import statements and style sheet loading requirements. css writing modes module level 3 proposed recommendation defines the writing modes of both horizontal and vertical scripts and clarifies how the css direction and unicode-bidi properties interact with the new css text-orientation property, and extends them where needed. css counter styles level 3 candidate recommendation testing modules css images module level 3 candidate recommendation defines the <image> data type. extends the url() syntax to support image slices using media fragments. adds: the dppx unit to the <resolution> data type. ...
...nt(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient(). the ability to define how a replaced element should fit in its element, using the css object-fit property. at risk: due to insufficient browser support, standardization of the object-fit and property may be postponed to the next iteration of this module. ...
...gradient(). the ability to define how a replaced element should fit in its element, using the css object-fit property. at risk: due to insufficient browser support, standardization of the object-fit and property may be postponed to the next iteration of this module. the ability to override the resolution and orientation of an external image using the css image-resolution and image-orientation properties. at risk : due to insufficient browser support, standardization of the image-resolution and image-orientation properties may be postponed to the next iteration of this module the css image values and replaced content level 4 which will supersede css image level 3 is in development and is a working draft. css speech module candidate recommendation...
...And 2 more matches

Index
offlineresourcelist interfaces, xpcom, xpcom api reference the nsidomofflineresourcelist interface provides access to the application cache that allows web content's resources to be cached locally for use while offline. it includes methods for adding resources to and removing resources from the cache, as well as for enumerating the dynamically managed resource list. 510 nsidomorientationevent acceleration, dom, gecko 1.9.2, interfaces, interfaces:scriptable, mobile, orientation, xpcom interface reference the nsidomorientationevent interface describes the event that can be delivered to dom windows, providing information from the device's accelerometer, allowing code to determine the orientation of the device. 511 nsidomparser to create a domparser o...
...uld use ns_debugbreak() from xpcom glue instead, or alternatively the ns_abort, ns_assertion, ns_break, and ns_warning macros, which also call ns_debugbreak() if used in a debugging build. ...
...able, mobile, orientation, xpcom, xpcom interface reference when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener by calling its nsidevicemotionlistener.onaccelerationchange() method as appropriate to share updated acceleration data. 540 nsidevicemotiondata acceleration, dom, interfaces, interfaces:scriptable, mobile, orientation, xpcom, xpcom interface reference the values of x, y, and z can range from -1 to 1, where 0 means the device is balanced on that axis. see accelerometer values explained for details. ...
...And 2 more matches

nsINavHistoryResultViewObserver
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this interface is used by clients of the history results to define domain-specific handling of specific nsitreeview methods that the history result doesn't implement. ...
...s/places/public/nsinavhistoryservice.idlscriptable this interface is used by clients of the history results to define domain-specific handling of specific nsitreeview methods that the history result doesn't implement. ...
... drop_after 1 the drag operation wishes to insert the dragged item after the indicated row. methods candrop() implement this method to report whether or not a drop is permitted onto the specified location. to provide behavior similar to the folder pane in thunderbird, where drops are only permitted on items themselves instead of on the pane as a whole, always return false when the orientation isn't drop_on. warning: do not change the content of the observer list. boolean candrop( in long index, in long orientation ); parameters index the item over which the drag is currently located. orientation whether the drag target is before, after, or on the indicated row. return value return true if the drop is permitted or false if it isn't. ondrop() called when the...
...And 2 more matches

PannerNode.PannerNode() - Web APIs
the default is 1, and negative values are not allo...
...the default is 1, and negative values are not allowed. maxdistance: the panne...
...the default is 1, and negative values are not allowed. maxdistance: the pannernode.maxdistance you want the pannernode to have. the default is 1...
...And 2 more matches

Lighting a WebXR setting - Web APIs
light source will be brighter than the other faces. because the intensity of diffuse light depends on the angle of incidence (the angle between the vector representing the direction from which the light reaches the surface and the surface's normal vector or the vector perpendicular to the surface), the intensity or brightness of the light reflected by an object varies depending on the surface's orientation relative to the light source. a photo taken by nasa's cassini spacecraft showing specular reflection of light from a lake of liquid methane on the surface of saturn's moon titan. specular light specular light is the light that makes up the highlights on reflective objects, such as gems, eyes, shiny cups and plates, and the like. specular lights tend to appear as bright spots or squares...
...it is. even if the surface is flat, the closest point to the light source is the center, with rays becoming increasingly long as the angle away from the normal changes. photo of a spotlight shining upon a stucco wall at night. spot light sources a spot light source (or spotlight) is a light source which is located at a specific position, emitting a cone of light in the direction of its orientation vector. a tapering rate parameter defines how quickly the brightness of the light falls off at the edges of the cone of light, and, as with point lights, an attenuation parameter controls how the light fades over distance. at the edge of the light cone, the light ceases to affect the surface at all. computational costs of lighting to be visible, a scene must include lighting of some sort, so a...
...as appropriate to the pixel before the pixel is stored into the framebuffer. the color of each pixel in the final, rendered, scene is calculated using some intricate math that factors in things like: the color of the texture element (the pixel within the texture mapped onto the object; also known as a texel) corresponding to the screen pixel, given the object geometry, the viewer position and orientation relative to each polygon, and so forth. the viewer position and distance. the surface material and reflectivity. the concavity or convexity of the surface at the target location. the position, color, directionality, and brightness of each light source in the scene. the color and brightness of any ambient light in the scene; this is light which is applied equally throughout the scene, with no...
...And 2 more matches

Window - Web APIs
rage objects that were used for storing data across multiple pages. window.mozanimationstarttime the time in milliseconds since epoch at which the current animation cycle began. use animation.starttime instead. window.mozpaintcount returns the number of times the current document has been rendered to the screen in this window. this can be used to compute rendering performance. window.orientation read only returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation. window.pkcs11 formerly provided access to install and remove pkcs11 modules. window.returnvalue the return value to be returned to the function that called window.showmodaldialog() to display the window as a modal dialog. methods this interface inheri...
...called when the page is installed as a webapp. see appinstalled event. window.onbeforeinstallprompt an event handler property dispatched before a user is prompted to save a web site to a home screen on mobile. window.ondevicelight an event handler property for any ambient light levels changes window.ondevicemotion called if accelerometer detects a change (for mobile devices) window.ondeviceorientation called when the orientation is changed (for mobile devices) window.ondeviceorientationabsolute an event handler property for any device orientation changes. window.ondeviceproximity an event handler property for device proximity event window.ongamepadconnected represents an event handler that will run when a gamepad is connected (when the gamepadconnected event fires). window.ongamepadd...
...listener to the oneventname property of this interface. error fired when a resource failed to load, or can't be used. for example, if a script has an execution error or an image can't be found or is invalid. also available via the onerror property. languagechange fired at the global scope object when the user's preferred language changes. also available via the onlanguagechange property. ...
...And 2 more matches

XRRigidTransform - Web APIs
the transform of an xrview. the transform of an xrpose. the xrreferencespaceevent event's transform property, as found in the reset event received by an xrreferencespace. ...
... the transform of an xrview. the transform of an xrpose. the xrreferencespaceevent event's transform property, as found in the reset event received by an xrreferencespace. ...
...than bare arrays that providing the matrix data is that the xrrigidtransform automatically does things like computing the inverse of the transform. even better, once it's been computed, it's cached so that subsequent requests are significantly faster. constructor new xrrigidtransform() creates a new xrrigidtransform object which represents a transform that applies a specified position and/or orientation. attributes xrrigidtransform.position read only a dompointreadonly specifying a 3-dimensional point, expressed in meters, describing the translation component of the transform. the w attribute is always 1.0. xrrigidtransform.orientation read only a dompointreadonly which contains a unit quaternion describing the rotational component of the transform. as a unit quaternion, its length...
...And 2 more matches

Web APIs
age access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available. ...
...adonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_t...
...odelist nondocumenttypechildnode notation notification notificationaction notificationevent notifyaudioavailableevent o oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_texture_float_linear oes_texture_half_float oes_texture_half_float_linear oes_vertex_array_object ovr_multiview2 offlineaudiocompletionevent offlineaudiocontext offscreencanvas orientationsensor oscillatornode overconstrainederror p pagetransitionevent paintworklet pannernode parentnode passwordcredential path2d payererrors paymentaddress paymentcurrencyamount paymentdetailsbase paymentdetailsupdate paymentitem paymentmethodchangeevent paymentrequest paymentrequestevent paymentrequestupdateevent paymentresponse paymentvalidationerrors pbkdf2params performance performanceen...
...And 2 more matches

Browser detection using the user agent - HTTP
s. ...
...bkit is a bit worse because apple forces all of the browsers on ios to use webkit internally, thus the user has no way to get a better more updated browser on older devices. most bugs can be detected, but some bugs take more effort to detect than others. in such cases, it might be beneficial to use user agent sniffing to save on performance. for example, webkit 6 has a bug whereby when the device orientation changes, the browser might not fire mediaquerylist listeners when it should. to overcome this bug, observe the code below. var ua=navigator.useragent, iswebkit=/\b(ipad|iphone|ipod)\b/.test(ua) && /webkit/.test(ua) && !/edge/.test(ua) && !window.msstream; var mediaqueryupdated = true, mql = []; function whenmediachanges(){mediaqueryupdated = true} var listentomediaquery = iswebk...
...istentomediaquery = iswebkit ? function(mq, f) { if(/height|width/.test(mq.media)) mql.push([mq, f]); mq.addlistener(f), mq.addlistener(whenmediachanges); } : function(){}; var destroymediaquery = iswebkit ? ...
...And 2 more matches

The Box Model - Archive of obsolete content
standards). there are 3 basic box elements in xul: hbox, vbox and box. an hbox is oriented horizontally by default, meaning that its child nodes are displayed next to each other from left to right. a vbox is oriented vertically by default, its child nodes displayed one below the other from top to bottom. a box is a generic version that you can orient as you please, but its default is horizontal orientation, so it's pretty much equivalent to an hbox and it is seldom used. here's a very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like ...
...tty much equivalent to an hbox and it is seldom used. here's a very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient css property. with these you can make an hbox have vertical orientation and viceversa, although that isn't very useful. the css property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation. flexibility an html div is as bi...
...use in xul code. this is because this attribute is used much too often, and it would require a great deal of css code to avoid using it. at any rate, it can always be overriden using css, so your extension won't lose skinability because of it. flexibility is defined as a numeric value. the default value for most elements is 0, which means that the element will not stretch in the direction of its orientation, and its size in that dimension will be determined by its contents and padding. if you want an element to be flexible, you should set its flexibility to 1. this makes the element stretch to occupy as much available space there is in the direction of its orientation. if we add flexibility to the hbox in our first example, we get the following result: the box flexes to cover the available horizo...
...ce it's best to use margins and paddings and avoid adding unnecessary nodes to your xul document. alignment xul, unlike html, provides an easy way to align elements both horizontally and vertically. you can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack css properties. packing determines the positioning of the child elements in the direction of the container's orientation. alignment determines the positioning in the other direction. so, in a flexed hbox, having center alignment and end packing results in this: one important thing to notice is that aligment and flexibility can't be mixed in some cases. if you add flexibility to one of the buttons, the packing will no longer be useful, but the alignment still makes a difference. it also wouldn't make sense to use...

Using the viewport meta tag to control layout on mobile browsers
a device with a pixel density of 96dpi and a distance from the reader of an arm's length. for web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. but remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations. the default pixel ratio depends on the display density. on a display with density less than 200dpi, the ratio is 1.0. on displays with density between 200 and 300dpi, the ratio is 1.5. for displays with density over 300dpi, the ratio is the integer floor(density/150dpi). note that the default ratio is true only when the viewport scale equals 1. otherwise, the relationship between css pixels an...
...n the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen: <meta name="viewport" content="width=500, initial-scale=1"> other attributes that are available are minimum-scale, maximum-scale, and user-scalable. these properties affect the initial scale and width, as well as limiting changes in zoom level. ...
...ffect the initial scale and width, as well as limiting changes in zoom level. not all mobile browsers handle orientation changes in the same way. for example, mobile safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. if web developers want their scale settings to remain consistent when switching orientations on the iphone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in: <meta name="viewport" content="initial-scale=1, maximum-scale=1"> suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. the result is horizontal scroll is suppressed in any orie...
...y want to. <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"> common viewport sizes for mobile and tablet devices if you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here. this gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device. specifications specification status comment css device adaptationthe definition of '<meta name="viewport">' in that specification. working draft non-normatively describes the viewport meta element there is clearly demand for the viewport meta tag, since it is supported...

nsIDeviceMotion
listener.onaccelerationchange() method as appropriate to share updated acceleration data. void addlistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object whose nsidevicemotionlistener.onaccelerationchange() method should be called with updated acceleration data. native code only!addwindowlistener sets the nsiaccelerometer as the source for mozorientation events on the specified dom window. void addwindowlistener( in nsidomwindow awindow ); parameters awindow the dom window that the accelerometer should begin sending mozorientation events to. removelistener() tells the accelerometer to stop sending updates to the specified nsidevicemotionlistener. void removelistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidev...
...gin sending mozorientation events to. removelistener() tells the accelerometer to stop sending updates to the specified nsidevicemotionlistener. void removelistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object to which no further updates should be sent. native code only!removewindowlistener removes the nsiaccelerometer as the source for mozorientation events on the specified dom window. void removewindowlistener( in nsidomwindow awindow ); parameters awindow the dom window that the accelerometer should stop sending mozorientation events to. ...
...listener the nsidevicemotionlistener object to which no further updates should be sent. native code only!removewindowlistener removes the nsiaccelerometer as the source for mozorientation events on the specified dom window. ...
...vicemotionlistener object to which no further updates should be sent. native code only!removewindowlistener removes the nsiaccelerometer as the source for mozorientation events on the specified dom window. ...

nsIDeviceMotionData
le the amount of tilt along the y axis. read only. z double the amount of tilt along the z axis. read only. ...
... z double the amount of tilt along the z axis. read only. the values of x, y, and z can range from -1 to 1, where 0 means the device is balanced on that axis. ...
... the z axis. read only. the values of x, y, and z can range from -1 to 1, where 0 means the device is balanced on that axis. see accelerometer values explained for details. ...
...only. the values of x, y, and z can range from -1 to 1, where 0 means the device is balanced on that axis. see accelerometer values explained for details. ...

nsITreeView
gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implementing a nsitreeview in lieu of dom methods for tree creation can improve performance dramatically, and removes the need to make changes to the tree manually when changes to the database occur. further information about creating treeviews is given in the xul tutorial. ...
...lean candrop(in long index, in long orientation, in nsidomdatatransfer datatransfer); boolean candropbeforeafter(in long index, in boolean before); obsolete since gecko 1.8 boolean candropon(in long index); obsolete since gecko 1.8 void cyclecell(in long row, in nsitreecolumn col); void cycleheader(in nsitreecolumn col); void drop(in long row, in long orientation, in nsidomdatatransfer datatransfer); astring getcellproperties(in long row, in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getcelltext(in long row, in nsitreecolumn col); astring getcellvalue(in long row, in nsitreecolumn col); astring getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete sinc...
...indropbefore 0 obsolete since gecko 1.8 indropon 1 obsolete since gecko 1.8 indropafter 2 obsolete since gecko 1.8 methods candrop() methods used by the drag feedback code to determine if a drag is allowable at the current location. to get the behavior where drops are only allowed on items, such as the mailnews folder pane, always return false when the orientation is not drop_on. note: drop_on will only be passed to candrop() if the item is a container; see iscontainer(). boolean candrop( in long index, in long orientation, in nsidomdatatransfer datatransfer ); parameters index the index of the row. orientation the position around the given row. defined in constants. datatransfer this parameter, added in gecko 1.9.2, provides the data be...
...olumn (for example, unread/flag/and so on.) is clicked. void cyclecell( in long row, in nsitreecolumn col ); parameters row the row of the cell. col the column of the cell. cycleheader() called on the view when a header is clicked. void cycleheader( in nsitreecolumn col ); parameters col the column to cycle. drop() called when the user drops something on this view. the orientation paramater specifies before/on/after the given row. void drop( in long row, in long orientation, in nsidomdatatransfer datatransfer ); parameters row the index of the row. orientation the position around the given row. defined in constants. datatransfer this parameter, added in gecko 1.9.2, provides the data that has been dropped. getcellproperties() an atomized list of proper...

BaseAudioContext.createPanner() - Web APIs
syntax baseaudioctx.createpanner(); returns a pannernode. ...
...w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

DOMPoint - Web APIs
he values for its properties. properties dompoint inherits properties from its parent, dompointreadonly. dompoint.x the x coordinate of the dompoint. dompoint.y the y coordinate of the dompoint. dompoint.z the z coordinate of the dompoint. dompoint.w the perspective value of the dompoint. examples in the webxr device api, dompointreadonly values are used to represent positions and orientations. in the following snippet, the pose of the xr device (such as a vr headset or phone with ar capabilities) can be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion. function onxrframe(time, xrframe) { ...
...ng xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion. ...
...n xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion. ...
...rame.getviewerpose(xrreferencespace); if (viewerpose) { let position = viewerpose.transform.position; let orientation = viewerpose.transform.orientation; console.log('xr viewer position: {x: ' + roundtotwo(position.x) + ', y: ' + roundtotwo(position.y) + ', z: ' + roundtotwo(position.z)); console.log('xr viewer orientation: {x: ' + roundtotwo(orientation.x) + ', y: ' + roundtotwo(orientation.y) + ', z: ' + roundtotwo(orientation.z) + ', w: ' + roundtotwo(orientation.w)); } } specifications specification status comment geometry interfaces module level 1the definition of 'dompoin...

PannerNode.coneInnerAngle - Web APIs
ce is a double value describing the angle, in degrees, of a cone inside of which there will be no volume reduction. the coneinnerangle property's default value is 360, suitable for a non-directional source. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneinnerangle = 360; value a double. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by...
... radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component ...
...therwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotat...
...t.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator! osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe ...

PannerNode.coneOuterAngle - Web APIs
uble value describing the angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the coneoutergain property. the coneouterangle property's default value is 0. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneouterangle = 0; value a double. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by...
... radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component ...
...therwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotat...
...t.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator! osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe ...

PannerNode.coneOuterGain - Web APIs
that no sound can be heard outside the cone. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneoutergain = 0; value a double. the default is 0, and its value can be in the range 0–1. exceptions invalidstateerror the property has been given a value outside the accepted range (0–1). example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by...
... radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component ...
...therwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotat...
...t.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator! osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe ...

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the difference, but the two of you cannot. if you are a camera, you can achieve the same visual result both by moving the camera or by moving everything around the camera. and that's our solution. since we can't move the camera, we move the world around it. our renderer needs to know where we imagine the camera to be, then alter the position of every visible object to simulate that position and orientation. thus, instead of referring to an actual camera object, the term camera is used in webgl and webxr programming to refer to an object describing the position and viewing direction of a hypothetical viewer of the scene, whether there's an actual object present in 3d space or not. points of view since the camera is a virtual object which, rather than necessarily representing a physical object in t...
...s actually (x/w, y/w, z/w, 1) or simply (x/w, y/w, z/w). if you're not using perspective, w is always 1. in that situation, the complete coordinates for an object located at (1, 0, 3) are (1, 0, 3, 1). but the location isn't enough to describe an object in 3d space because an object's state in space isn't only about its location, but about its rotation or facing direction, otherwise known as its orientation. the orientation can be represented using a 3d vector, which is typically normalized so that its length is 1.0. for example, if the object is facing an object located at (3, 1, -2)—that is, three meters to the right, one meter up, and two meters away from the origin point—the result is: [31-2]\left [ \begin{matrix} 3 \\ 1 \\ -2 \end{matrix} \right ] this can also be represented as an array...
...once you've determined the matrix representing the combination of movements you wish the camera to make, you need to reverse it, because you're not moving the camera. since you're actually moving everything except the camera, take the inverse of the transform matrix to get an inverse transform matrix. this inverse matrix can then be applied to the objects in the world to alter their positions and orientations to simulate the desired camera position. this is why the xrrigidtransform object used by webxr to represent transforms includes an inverse property. the inverse property is another xrrigidtransform object which is the inverse of the parent transform. since the xrview representing the view has a transform property which is an xrrigidtransform providing the camera view, you can get the model view...
... performed. so you need to be careful about the order in which you apply your transforms when building your composite transform (or directly applying transforms in sequence). applying the transform to apply the transform, you multiply the point or vector by the transform or composition of transforms. this has been a very quick overview of the concepts of position in terms of physical location, orientation or facing direction, and perspective. for more detail on the subject, see the articles geometry and reference spaces, webgl model view projection, and matrix math for the web. simulating classic cinematography cinematography is the art of designing, planning, and executing camera movements to create the desired look and emotion for a scene in animation or film. there are a number of terms that ...

XRReferenceSpace: reset event - Web APIs
this is common when the user calibrates or recalibrates an xr device, or if the device automatically changes its origin after losing tracking of the user, then re-gaining it. in the case of xrboundedreferencespace objects, the reset event can also be fired when the boundsgeometry changes. ...
...nough from the starting position (the reference space's origin) that floating-point or other forms of error or drift are problematic. the coordinate system is thus reset with its new origin at or near the user's current position. the webxr infrastructure or hardware drivers detected that the device had temporarily lost tracking, causing the hardware and software to be out of sync on position and orientation. note: a reset event will not occur if the reference space is able to regain tracking of its previous origin, since that means the origin has not been forced to be relocated. this event is only fired when the origin has to be relocated to recover from the tracking loss. manual resets if you've spent any time using a vr headset, you've had times when you've started it up and although you're ...
..., you've had times when you've started it up and although you're facing straight ahead, the headset thinks you're looking at the sky or the floor; or times when you point the hand controller straight forward, but it thinks you're pointing it up and to the right somewhere. when that happens, you typically hold down a button somewhere and it causes the world to resynchronize to the device's current orientation. that works by sending a `reset` event to the reference space or reference spaces that are based on the headset's orientation. handling discontinuities you can handle jumps in the viewer's position by watching the boolean xrpose property emulatedposition. if a jump in the viewer's position coincides with emulatedposition toggling from true to false, the viewer has regained tracking, and that th...
...ean xrpose property emulatedposition. if a jump in the viewer's position coincides with emulatedposition toggling from true to false, the viewer has regained tracking, and that their new position represents a correction from the previously emulated values. this is typically the desired behavior if your site or app doesn't simulate motion through the space by expressly changing the position and/or orientation of the viewer (rather than the user's physical movements being used by the xr device to introduce movement). however, if that kind of "teleportation" is being used, you actually want to avoid jumping the user's position after tracking recovery, this can introduce additional and potentially jarring jumping. instead of allowing this to happen, you can integrate the emulatedposition into the telepo...

XRReferenceSpace - Web APIs
as the one on which you call the method (so, either xrreferencespace or xrboundedreferencespace). the new reference space can be used to transform a coordinate from the reference space of the object on which the method is called into a different coordinate space. this is useful for positioning objects while rendering, and to perform the needed transforms when changing the viewer's position and/or orientation in 3d space. events in addition to other events that may be sent to xrspace or eventtarget objects, the following also apply to xrreferencespace objects. reset the reset event is sent to an xrreferencespace object when the browser detects a discontinuity has occurred wherein the tracked object's origin relative to the user's environment or location. this can happen, for example, after t...
...space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more...
...need to move the origin to a new position; this is commonly done, for example, when your project allows the user to move through the environment using input devices such as the keyboard, mouse, touchpad, or game controls that are not connected through the xr device. since the origin will typically be the user's location in the space, you need to change the origin to reflect their movement and any orientation changes they make. to move or rotate the user's view of the world, you need to change the xrreferencespace used to represent that viewpoint. however, xrreferencespace is immutable, so you need to instead create a new reference space representing the changed viewpoint. this is easily done using the getoffsetreferencespace() method. let offsettransform = new xrrigidtransform({x: 2, y: 0, z: 1}, ...
...new reference space representing the changed viewpoint. this is easily done using the getoffsetreferencespace() method. let offsettransform = new xrrigidtransform({x: 2, y: 0, z: 1}, {x: 0, y: 1, z: 0, w: 1}); xrreferencespace = xrreferencespace.getoffsetreferencespace(offsettransform); this replaces the xrreferencespace with a new one whose origin and orientation are adjusted to place the new origin at (2, 0, 1) relative to the current origin and rotated given a unit quaternion that orients the space to put the viewer facing straight up relative to the previous world orientation. geometry the native origin of any xrreferencespace is always configured so that +x is considered to be to the right, +y is upward, and +z is "backward" or toward the user. spe...

XRRigidTransform.matrix - Web APIs
the read-only xrrigidtransform property matrix returns the transform matrix represented by the object. the returned matrix can then be premultiplied with a column vector to rotate the vector by the 3d rotation specified by the orientation, then translate it by the position. syntax let matrix = xrrigidtransform.matrix; value a float32array containing 16 entries which represents the 4x4 transform matrix which is described by the position and orientation properties. usage notes matrix format all 4x4 transform matrices used in webgl are stored in 16-element float32arrays. the values are stored into the array in column-major order; that is, each column is written into the array top-down before moving to the right one column and writing the next column into the array. thus, for an array [a0,...
...need it. creating the matrix in this section, intended for more advanced readers, we cover how the api calculates the matrix for the specified transform. it begins by allocating a new matrix and writing a 4x4 identity matrix into it: [1000010000100001]\begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix} this is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied. next, the position is placed into the right-hand column, like this, resulting in a translation matrix that will transform a coordinate system by the specified distance in each dimension, with no rotational change. here px, py, and pz are the values of the x, y, and z members of the dompointreadonly position. [100px010py001pz0001...
...by the specified distance in each dimension, with no rotational change. here px, py, and pz are the values of the x, y, and z members of the dompointreadonly position. ...
... q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix} examples in this example, a transform is created to create a matrix which can be used as a transform during rendering of webgl objects, in order to place objects to match a given offset and orientation. the matrix is then passed into a library function that uses webgl to render an object matching a given name using the transform matrix specified to position and orient it. let transform = new xrrigidtransform( {x: 0, y: 0.5, z: 0.5}, {x: 0, y: -0.5, z: -0.5, w: 1}); drawglobject("magic-lamp", transform.matrix); specifications specification...

XRViewerPose - Web APIs
each xrviewerpose can have multiple views to represent, for example, the slight separation between the left and right eye. this view can represent anything from the point-of-view of a user's xr headset to the viewpoint represented by a player's movement of an avatar using mouse and keyboard, presented on the screen, to a virtual camera capturing the scene for a spectator. ...
...iew represents. taken together, these views can reproduce the 3d effect when displayed on the xr device. usage notes the xrviewerpose object is used to describe the state of a viewer of a webxr scene as it's tracked by the user's xr hardware. the viewer may be the virtual representation of the user, or it may represent another device or interface which may serve as the source of a position and orientation that make up a view upon the scene. for example, every player in a mmorpg might have an instance of xrviewerpose to provide a way to calculate what they can see; if the game provides a mechanism that tells the player if another player sees them, or that they see another player, this information becomes crucial. an xrviewerpose is always obtained and referenced relative to an existing xrreference...
...r example, every player in a mmorpg might have an instance of xrviewerpose to provide a way to calculate what they can see; if the game provides a mechanism that tells the player if another player sees them, or that they see another player, this information becomes crucial. an xrviewerpose is always obtained and referenced relative to an existing xrreferencespace. this ensures that positions and orientations are reported using the expected relative coordinate system. to render a scene using the xrviewerpose representing the user's head, one would iterate over the views in the views array, rendering them one after another. by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct...
...you can see more context and see much more on that page. specifications specification status comment webxr device apithe definition of 'xrviewerpose' in that specification. working draft initial definition. ...

Event reference
pup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor events compassneedscalibration devicemotion deviceorientation orientationchange smartcard events icccardlockerror iccinfochange smartcard-insert smartcard-remove stkcommand stksessionend cardstatechange sms and ussd events delivered received sent ussdreceived frame events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserlocationchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychang...
... the text selection has been removed from the document and added to the clipboard. dblclick mouseevent dom l3 a pointing device button is clicked twice on an element. devicechange event media capture and streams a media device such as a camera, microphone, or speaker is connected or removed from the system. devicemotion devicemotionevent device orientation events fresh data is available from a motion sensor. deviceorientation deviceorientationevent device orientation events fresh data is available from an orientation sensor. dischargingtimechange event battery status the dischargingtime attribute has been updated. domactivate uievent dom l3 a button, link, or state changing element is act...
... event html5 offline the browser has lost access to the network. online event html5 offline the browser has gained access to the network (but particular websites might be unreachable). open event websocket a websocket connection has been established. open event server sent events an event source connection has been established. orientationchange event screen orientation the orientation of the device (portrait/landscape) has changed. pagehide pagetransitionevent html5 a session history entry is being traversed from. pageshow pagetransitionevent html5 a session history entry is being traversed to. paste clipboardevent clipboard data has been transferred from the system ...
..., for example due to a call to setvisible(). mozgamepadbuttondown to be specified a gamepad button is pressed down. mozgamepadbuttonup to be specified a gamepad button is released. mozmousepixelscroll mozilla specific the wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead) mozorientation mozilla specific fresh data is available from an orientation sensor (see deviceorientation). mozscrolledareachanged uievent mozilla specific the document view has been scrolled or resized. moztimechange mozilla specific the time of the device has been changed. moztouchdown mozilla specific a touch point is placed on the touch s...

Event developer guide - Developer guides
pages describe how to use events of different kinds defined by web browsers. unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers. the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d transforms. that is different, but similar, to the change in device vertical orientation. the window in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it. the process loading of a web page can tri...
... eventsgecko 1.9.1 added support for several mozilla-specific dom events used to handle mouse gestures. these are special movements that can be made with a mouse or trackpad and can be interpreted to perform specific tasks.mutation eventsmutation events provide a mechanism for a web page or an extension to get notified about changes made to the dom. use mutation observers instead if possible. orientation and motion data explainedwhen using orientation and motion events, it's important to understand what the values you're given by the browser mean. this article provides details about the coordinate systems at play and how you use them.overview of events and handlersevents and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web pag...
... ...
...zilla experimental)the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17. you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with 3d transformsthis article provides tips on how to use device orientation information in tandem with css 3d transforms. ...

Index - Developer guides
ific dom events used to handle mouse gestures. these are special movements that can be made with a mouse or trackpad and can be interpreted to perform specific tasks. 22 mutation events advanced, dom, guide mutation events provide a mechanism for a web page or an extension to get notified about changes made to the dom. use mutation observers instead if possible. 23 orientation and motion data explained intermediate, mobile, motion, needscontent, orientation, páginas_a_traducir, rotation when using orientation and motion events, it's important to understand what the values you're given by the browser mean. this article provides details about the coordinate systems at play and how you use them. 24 overview of events and handlers beginner, dom, e...
...wsers can handle. 25 touch events (mozilla experimental) dom the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17. you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12. 26 using device orientation with 3d transforms advanced, css, dom, needsupdate, orientation, transforms this article provides tips on how to use device orientation information in tandem with css 3d transforms. 27 graphics on the web 2d, 3d, canvas, graphics, html5, svg, web, webgl, webrtc websites and applications often need to present graphics, such as images.these articles provide insight in...
...off) fonts, needsmobilebrowsercompatibility, woff woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations. it adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. 42 user input and controls screen orientation, contenteditable, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user input modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more de...
...goes beyond simple mouse and keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. 43 writing forward-compatible websites css, compatibility, dom, html, javascript, web development this page explains how to write websites that do not break when new browser versions are released. this is especially important for intranets and other non-public websites; if we can't see your code, we can't see that it broke. it's n...

SVG Attribute reference - SVG: Scalable Vector Graphics
direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m ...
... k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatur...
...properties. ...
...e, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode...

SVG documentation index - SVG: Scalable Vector Graphics
of glyph names which identify a set of possible first glyphs in the kerning pair. 92 g2 deprecated, svg, svg attribute the g2 attribute specifies a list of glyph names which identify a set of possible second glyphs in the kerning pair. 93 glyph-name deprecated, svg, svg attribute the glyph-name attribute specifies the name of a glyph. 94 glyph-orientation-horizontal deprecated, svg, svg attribute the glyph-orientation-horizontal attribute affects the amount that hte current text position advances as each glyph is rendered. 95 glyph-orientation-vertical deprecated, svg, svg attribute the glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered. 96...
...for glyphs to achieve hanging baseline alignment for horizontally oriented glyph layouts. 100 height svg, svg attribute the height attribute defines the vertical length of an element in the user coordinate system. 101 horiz-adv-x deprecated, svg, svg attribute the horiz-adv-x attribute indicates the horizontal advance after rendering a glyph in horizontal orientation. 102 horiz-origin-x deprecated, svg, svg attribute the horiz-origin-x attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing horizontally oriented text. 103 horiz-origin-y deprecated, svg, svg attribute the horiz-origin-y attribute indicates the y-coordinate in the font coordinate system of the ...
...ed in. either it defines the compositing or morphing operation to be performed. 148 order filters, svg, svg attribute the order attribute indicates the size of the matrix to be used by a <feconvolvematrix> element. 149 orient svg, svg attr the orient attribute indicates how a marker is rotated when it is placed at its position on the shape. 150 orientation deprecated, svg, svg attribute the orientation attribute indicates that the given glyph is only to be used for a particular text direction, i.e. horizontal or vertical. 151 origin svg, svg attribute the origin attribute specifies the origin of motion for an animation. it has no effect in svg. 152 overflow svg, svg attribute the overflow attribut...
...precated, svg, svg attribute the version attribute is used to indicate what specification a svg document conforms to. it is only allowed on the root <svg> element. it is purely advisory and has no influence on rendering or processing. 241 vert-adv-y deprecated, svg, svg attribute the vert-adv-y attribute indicates the vertical advance after rendering a glyph in vertical orientation. 242 vert-origin-x deprecated, svg, svg attribute the vert-origin-x attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing vertically oriented text. 243 vert-origin-y deprecated, svg, svg attribute the vert-origin-y attribute indicates the y-coordinate in the font coordinate system of the origin...

Tabboxes - Archive of obsolete content
ox: <tabbox id="tablist"> <tabs> <!-- tab elements go here --> </tabs> <tabpanels> <!-- tabpanel elements go here --> </tabpanels> </tabbox> the tab elements are placed inside a tabs element, which is much like a regular box. the tabs element itself has been placed inside a tabbox. the tabbox also contains a tabpanels element which will appear below the tabs due to the vertical orientation on the whole tabbox. there is really nothing special about the tab elements that make them different than boxes. like boxes, tabs can contain any element. the difference is that the tabs render slightly differently and only one tab panel's contents are visible at once, much like a deck. the contents of the individual tab pages should go inside each tabpanel element. they do not go in the tab el...
...at a time. position of the tabs finally, you can change the position of the tabs so that they appear on any side of the tab pages. there is no special syntax to do this. you simply set the orient and dir attributes as necessary. remember that the tab elements are much like regular boxes in terms of layout. moreover, the tabbox element is much like a regular container box with a default vertical orientation, whereas the tabs element is much like a container box with a default horizontal orientation. for example, to place the tabs along the left side, change the orientation of the tabs element to vertical to make the tabs appear vertically stacked. next, adjust the tabbox so it has horizontal orientation. this will make the tabs appear to the left of, not above, the tab pages. note that changing the...
... you can place the tabs on the right or bottom side by moving the tabs element to after the tabpanels element in your code. alternatively, you could set the dir attribute to reverse on the tabbox. ...

nsIDeviceMotionListener
xpcom/system/nsidevicemotion.idlscriptable this interface can be implemented by clients that want to be notified orientation or acceleration changes on supported devices. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void onmotionchange(in nsidevicemotiondata amotiondata); methods onmotionchange() called when new orientation or acceleration data is available. ...
...n gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void onmotionchange(in nsidevicemotiondata amotiondata); methods onmotionchange() called when new orientation or acceleration data is available. ...
...ox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void onmotionchange(in nsidevicemotiondata amotiondata); methods onmotionchange() called when new orientation or acceleration data is available. ...

AudioListener.dopplerFactor - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.forwardX - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.forwardY - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.forwardZ - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.positionX - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.positionY - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.positionZ - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.setPosition() - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.speedOfSound - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.upX - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.upY - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

AudioListener.upZ - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

DeviceMotionEvent - Web APIs
warning: currently, firefox and chrome do not handle the coordinates the same way. take care about this while using them. constructor devicemotionevent.devicemotionevent() creates a new devicemotionevent. properties devicemotionevent.accelerationread only an object giving the acceleration of the device on the three axis x, y and z. acceleration is expressed in m/s2. devicemotionevent.accelerationincludinggravityread only an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. ...
...ct giving the acceleration of the device on the three axis x, y and z. acceleration is expressed in m/s2. devicemotionevent.accelerationincludinggravityread only an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. devicemotionevent.rotationrateread only an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is expressed in degrees per seconds. devicemotionevent.intervalread only a number representing the interval of time, in milliseconds, at which data is obtained from the device. example window.addeventlistener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); specifications specif...
...amma. rotation rate is expressed in degrees per seconds. devicemotionevent.intervalread only a number representing the interval of time, in milliseconds, at which data is obtained from the device. example window.addeventlistener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); specifications specification status comment deviceorientation event specificationthe definition of 'devicemotionevent' in that specification. editor's draft initial definition. ...

MediaQueryList.matches - Web APIs
f the document currently matches the media query list, or false if not. you can be notified when the value of matches changes by watching for the change event to be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
...r false if not. you can be notified when the value of matches changes by watching for the change event to be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
... if the document currently matches the media query list; otherwise, it's false. examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification. working draft initial definition ...

PannerNode.distanceModel - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

PannerNode.maxDistance - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

PannerNode.panningModel - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

PannerNode.setPosition() - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

PannerNode.setVelocity() - Web APIs
w the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner...
...fine other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audi...
... if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the...

SVGMarkerElement - Web APIs
it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. svg_marker_orient_auto...
...it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. ...
...imatedlength corresponds to attribute markerwidth on the given marker element. markerheight svganimatedlength corresponds to attribute markerheight on the given marker element. orienttype svganimatedenumeration corresponds to attribute orient on the given marker element. one of the marker orientation types defined on this interface. orientangle svganimatedangle corresponds to attribute orient on the given marker element. if markerunits is svg_marker_orient_angle, the angle value for attribute orient; otherwise, it will be set to zero. methods this also inherits methods from its parent, svgelement, and...

Screen - Web APIs
the operating system, such as the taskbar on windows. screen.availwidth returns the amount of horizontal space in pixels available to the window. screen.colordepth returns the color depth of the screen. screen.height returns the height of the screen in pixels. screen.left returns the distance in pixels from the left side of the main screen to the left side of the current screen. screen.orientation returns the screenorientation instance associated with this screen. screen.pixeldepth gets the bit depth of the screen. screen.top returns the distance in pixels from the top side of the current screen. screen.width returns the width of the screen. screen.mozenabled boolean. setting to false will turn off the device's screen. screen.mozbrightness controls the brightness of a ...
...th gets the bit depth of the screen. screen.top returns the distance in pixels from the top side of the current screen. screen.width returns the width of the screen. screen.mozenabled boolean. setting to false will turn off the device's screen. screen.mozbrightness controls the brightness of a device's screen. a double between 0 and 1.0 is expected. ...
...screen.top returns the distance in pixels from the top side of the current screen. screen.width returns the width of the screen. screen.mozenabled boolean. setting to false will turn off the device's screen. screen.mozbrightness controls the brightness of a device's screen. a double between 0 and 1.0 is expected. events handler screen.onorientationchange a handler for the orientationchange event. methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget. eventtarget.removeev...

Starting up and shutting down a WebXR session - Web APIs
r extension the mozilla webxr team has created a webxr api emulator browser extension, compatible with both firefox and chrome, which emulates the webxr api, simulating a variety of compatible devices such as the htc vive, the oculus go and oculus quest, samsung gear, and google cardboard. with the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers. emulator usage while somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer webxr code on a desktop computer, where webxr isn't normally available. it also lets you perform some basic testing before taking your code to a real device. be aware, however, th...
...this includes the xrsession itself, all of the data used to render the scene in webgl, the world reference space, and the id returned by reques...
...aces the origin (0, 0, 0) in the center of the space. this is great—if your player's viewpoint starts in the exact center of the world. but most likely, that's not the case at all. if that's so, you call getoffsetreferencespace() on the initial reference space to create a new reference space which offsets the coordinate system so that (0, 0, 0) is located at the position of the viewer, with the orientation likewise shifted to face in the desired direction. the input value into getoffsetreferencespace() is an xrrigidtransform encapsulating the player's position and orientation as specified in the default world coordinates. with the new reference space in hand and stored into the worlddata object for safe-keeping, we call the session's requestanimationframe() method to schedule a callback to be exec...

XRInputSource.targetRaySpace - Web APIs
the read-only xrinputsource property targetrayspace returns an xrspace (typically an xrreferencespace) representing the position and orientation of the target ray in the virtual space. its native origin tracks the position of the origin point of the target ray, and its orientation indicates the orientation of the controller device itself. these values, interpreted in the context of the input source's targetraymode, can be used both to fully interpret the device as an input source. <<<--- needs diagram showing targetrayspace relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property. syntax let targetrayspace = xrinputsource.targetrayspace; value an xrspace object—typically an xr...
... <<<--- needs diagram showing targetrayspace relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property. syntax let targetrayspace = xrinputsource.targetrayspace; value an xrspace object—typically an xrreferencespace or xrboundedreferencespace—which represents the position and orientation of the input controller's target ray in virtual space. the native origin of the returned xrspace is located at the point from which the target ray is emitted, and the orientation of the space indicates the direction in which the target ray is pointing. usage notes all input sources—regardless of their targetraymode—have a valid targetrayspace. the exact meaning of this space varies, howeve...
... since the gaze input comes from the viewer's head. this shared space represents the same location as the space returned by the xrsession method requestreferencespace(), but is maintained as a different object to allow for future enhancements to the api. the target ray space reported by tracked pointer inputs (targetraymode of tracked-pointer) is actually based upon the true spatial position and orientation of the input device. to determine the position and orientation of the target ray while rendering a frame, pass it into the xrframe method getpose() method, then use the returned xrpose object's transform to gather the spatial information you need. example this fragment of code shows part of a function to be called once every frame. it looks for inputs which have a non-null targetrayspace. inp...

XRPose - Web APIs
the xrspace—which is either an xrreferencespace or an xrboundedreferencespace—defines the coordinate system used for the pose and, in the case of an xrviewerpose, its underlying views. to obtain the xrpose for the xrspace used as the local coordinate system of an object, call xrframe.getpose(), specifying that local xrspace and the space to which you wish to convert: thepose = xrframe.getpose(localspace, basespace); the pose for a viewer (or camera) is represented by the xrviewerpose subclass of xrpose. ...
...g position and angle: viewerpose = xrframe.getviewerpose(adjreferencespace); here, adjreferencespace is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs. ...
...y adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs. see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose relative to the base xrspace. xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). if any component...

XRView.transform - Web APIs
the read-only transform property of the xrview interface is an xrrigidtransform object which provides the position and orientation of the viewpoint relative to the xrreferencespace specified when the xrframe.getviewerpose() method was called to obtain the view object. with the transform, you can then position the view as a camera within the 3d scene. if you instead need the more traditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. syntax let viewtransform = xrview.transform; value a xrrigidtransform object specifying the position and orientation of the viewpoint represented by the xrview. ...
...itional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. syntax let viewtransform = xrview.transform; value a xrrigidtransform object specifying the position and orientation of the viewpoint represented by the xrview. examples for each view making up the presented scene, the view's transform represents the position and orientation of the viewer or camera relative to the reference space's origin. you can then use the inverse of this matrix to transform the objects in your scene to adjust their placement and orientation to simulate the viewer's movement through space. in this example, we see an outline of a code fragment used while rendering an xrframe, which makes use of the view transform to place objects in the world dur...
... with some additions to the api. for each view, we obtain its viewport and pass that to webgl using gl.viewport(). for the left eye, this will be the left half of the canvas, while the right eye will use the right half. then we iterate over each object that makes up the scene. each object's model view matrix is computed by multiplying its own matrix which describes the object's own position and orientation by the additional position and orientation adjustments needed to match the camera's movement. to convert the "camera focused" transform matrix into an "object focused" transform, we use the transform's inverse, thus taking the matrix returned by view.transform.inverse.matrix. the resulting model view matrix will apply all the transforms needed to move and rotate the object based on the relative p...

Web accessibility for seizures and physical reactions - Accessibility
tic or moving patterns of discernable light and dark stripes have the same effect as flashing lights because of the alternation of dark and bright areas." the epilepsy foundation of america working group is able to "quantify" the problem a little. "a pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation" in addition to stripes, checkered patterns have also been known to cause photosensitive seizures, according to cedars-sinai. although static images are possible as triggers, they are less consistent. the trigger that is well established and strong is flashing/strobe lights. dr. selim benbadis of usf's comprehensive epilepsy program notes, "the only thing that is really documented is flashing li...
... of its risk". the point is, seizures most definitely can be and are fatal, and developers and designers are incredibly important to making the web a safer place for those with sensitivities to photosensitive or musicogenic triggers. seizures can be fatal, but even the ones that are "only" debilitating can be of such severity, that they render the user incapacitated. other disorders, such as disorientation, nausea, vomiting, and more can also be so severe that the user is unable to function. the epilepsy foundation's article, photosensitivity and seizures, provides a list of triggers that may cause seizures in photosensitive people; here's an excerpt from that list: television screens or computer monitors due to the flicker or rolling images. certain video games or tv broadcasts containing rapi...
...skills problems. for example, the page for trace research & development center’s photosensitive epilepsy analysis tool notes that “photosensitive seizures can be provoked by certain types of flashing in web or computer content, including mouse-overs that cause large areas of the screen to rapidly flash on and off repeatedly.” other physical reactions nausea, vertigo (or dizziness), and disorientation are very nonspecific symptoms associated with all kinds of diseases and not particularly suggestive of seizures (except maybe disorientation, which is seen in seizures). however, seizures are not the only adverse physical response possible from flashing, flickering, blnking, and other such stimuli. in 1997, a japanese cartoon featured an animated "virus bomb". some of the children watching the ca...

size - CSS: Cascading Style Sheets
the size css at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. most of the time, this size corresponds to the target size of the printed page if applicable. size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions. syntax /* keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page. in most cas...
.../ size: auto; size: portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page. in most cases, the dimensions and orientation of the target sheet are used. landscape the content of the page is displayed in landscape mode (i.e. the longest side of the box is horizontal). portrait the content of the page is displayed in portrait mode (i.e. the longest side of the box is vertical). this is the default orientation. <length> any length value (see <length>). the first value corresponds to the width of the page box and t...
...th america i.e. 8.5in x 14in. ledger this keyword is a equivalent to the dimensions of ledger pages in north america i.e. 11in x 17in. formal definition related at-rule@pageinitial valueautocomputed valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status comment css paged media module level 3the definition of 'size' in that specification. working draft initial definition ...

@viewport - CSS: Cascading Style Sheets
isplayed. max-height used in the determination of the height of the viewport when the document is first displayed. height a shorthand descriptor for setting both min-height and max-height. zoom sets the initial zoom factor. min-zoom sets the minimum zoom factor. max-zoom sets the maximum zoom factor. user-zoom controls whether or not the user should be able to change the zoom factor. ...
...termination of the height of the viewport when the document is first displayed. height a shorthand descriptor for setting both min-height and max-height. zoom sets the initial zoom factor. min-zoom sets the minimum zoom factor. max-zoom sets the maximum zoom factor. user-zoom controls whether or not the user should be able to change the zoom factor. orientation controls the document's orientation. ...
...or. min-zoom sets the minimum zoom factor. max-zoom sets the maximum zoom factor. user-zoom controls whether or not the user should be able to change the zoom factor. orientation controls the document's orientation. viewport-fit controls the display of the document on non-rectangular displays. formal syntax @viewport { <group-rule-body> } examples setting viewport size, zoom, and orientation @viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; } specifications specification status comment css round display level 1the definition of '@viewport' in that specification. working draft defined the viewport-fit descriptor. css device adaptationt...

Using media queries - CSS: Cascading Style Sheets
hover over elements? added in media queries level 4. inverted-colors is the user agent or underlying os inverting colors? added in media queries level 5. light-level light level of the environment added in media queries level 5. monochrome bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome orientation orientation of the viewport overflow-block how does the output device handle content that overflows the viewport along the block axis? added in media queries level 4. overflow-inline can content that overflows the viewport along the inline axis be scrolled? added in media queries level 4. pointer is the primary input mechanism a pointing device, an...
...when no other type is specified. however, if you use the not or only operators, you must explicitly specify a media type. combining multiple types or features the and keyword combines a media feature with a media type or other media features. this example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems: @media (min-width: 30em) and (orientation: landscape) { ... } to limit the styles to devices with a screen, you can chain the media features to the screen media type: @media screen and (min-width: 30em) and (orientation: landscape) { ... } testing for multiple queries you can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. for instance, the following rule ...
...} taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true. ...

CSS reference - CSS: Cascading Style Sheets
ency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear...
... (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-botto...
...mbols (@counter-style)symbols()system (@counter-style)ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuu...

Mobile Web Development - Developer guides
anized it into two sections, designing for mobile devices and cross-browser compatibility. also see jason grlicky's guide to mobile-friendliness for web developers. designing for mobile devices mobile devices have quite different hardware characteristics compared with desktop or laptop computers. their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. they usually have touch screens for user input. apis like geolocation or orientation are either not supported on desktops or are much less useful, and these apis give mobile users new ways to interact with your site. working with small screens responsive web design is a term for a set of techniques that enables your web site to...
...lly have touch screens for user input. apis like geolocation or orientation are either not supported on desktops or are much less useful, and these apis give mobile users new ways to interact with your site. working with small screens responsive web design is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device. working with touch scre...
... bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution. you do this in css by querying for screen height, width, and pixel ratio. you can also make use of css properties to implement visual effects like gradients and shadows without images. mobile apis finally, you can take advantage of the new possibilities offered by mobile devices, such as orientation and geolocation. cross-browser development write cross-browser code to create web sites that will work acceptably across different mobile browsers: try to avoid using browser-specific features, such as vendor-prefixed css properties. if you do need to use these features, check whether other browsers implement their own versions of these features, and target them too. for browsers that don...

SVG Presentation Attributes - SVG: Scalable Vector Graphics
lements. ...
...e baseline-shift clip clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transfor...
...face from its font-family. value: normal|italic|oblique; animatable: yes font-variant it specifies whether a font should be used with some of their variation such as small caps or ligatures. value: see css font-variant; animatable: yes font-weight it specifies the weight (or boldness) of the font. value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; animatable: yes glyph-orientation-horizontal deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is horizontal. value: <angle>|inherit; animatable: no glyph-orientation-vertical deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is vertical. value: auto|<angle>|inherit; animatable: no image-rendering it provides a hint to the browser about how t...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
nted. ellipse implemented. polyline implemented. polygon implemented. text module text implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. various presentation attributes don'...
...variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. ...
... svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. ...

Gradients in SVG - SVG: Scalable Vector Graphics
ay you reference elements in css, using a url. in this case, the url is just a reference to our gradient, which i've given the creative id, "gradient". to attach it, set the fill to url(#gradient), and voila! our object is now multicolored. you can do the same with stroke. the <lineargradient> element also takes several other attributes, which specify the size and appearance of the gradient. the orientation of the gradient is controlled by two points, designated by the attributes x1, x2, y1, and y2. these attributes define a line along which the gradient travels. the gradient defaults to a horizontal orientation, but it can be rotated by changing these. gradient2 in the above example is designed to create a vertical gradient. <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> note: you ...
...ialgradient1)"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#radialgradient2)"/> </svg> screenshotlive sample the stops used here are the same as before, but now the object will be red in the center, and in all directions gradually change to blue at the edge. like linear gradients, the <radialgradient> node can take several attributes to describe its position and orientation. however, unlike linear gradients, it's a bit more complex. the radial gradient is again defined by two points, which determine where its edges are. the first of these defines a circle around which the gradient ends. it requires a center point, designated by the cx and cy attributes, and a radius, r. setting these three attributes will allow you to move the gradient around and change its size, as...
...there are two possible values to use here: userspaceonuse or objectboundingbox. objectboundingbox is the default, so that's what has been shown so far. it essentially scales the gradient to the size of your object, so you only have to specify coordinates in values from zero to one, and they're scaled to the size of your object automatically for you. userspaceonuse essentially tak...

2015 MDN Fellowship Program - Archive of obsolete content
logy writer, mozilla developer network. github: chrisdavidmills twitter: @chrisdavidmills why increase the reach and impact of your expertise grow your skills beyond coding and managing to educating and communicating build something used by hundreds of thousands (or more) developers worldwide directly impact and grow the value of the open web when application deadline: april 1, 2015 orientation: early june (dates tbd) graduation: august 11-12, 2015 where orientation: a mozilla location (tbd). core program: conducted at your normal workspace. the fine print mozilla will provide coaching, direction and training on teaching best practices. subject to mozilla’s travel reimbursement policies, mozilla will cover fellows travel, room, per diem food costs and visa costs up to $3,000 to ...
...fellows are responsible for obtaining their own visas if any are required (mozilla will provide reasonable supporting documentation). the fellows will meet the stated deliverables of their projects and meet weekly with their mentor, the program lead and their other fellows. ...

pack - Archive of obsolete content
the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. ...
...the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. ...

Box Objects - Archive of obsolete content
there is also a corresponding css property -moz-box-orient which may be used instead, depending on the situation. this attribute was explained earlier in the section on boxes. ordinal attribute the ordinal attribute on an element may be used to specify the ordinal group of t...
...n 2" hidden="true"/> <button label="button 3" oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 4" collapsed="true"/> </hbox> box ordering attributes when a xul box is laid out on a window, the elements are ordered according to a number of properties, for instance the orientation, their ordinal group and their direction. orient attribute the orientation is commonly modified using the orient attribute. there is also a corresponding css property -moz-box-orient which may be used instead, depending on the situation. this attribute was explained earlier in the section on boxes. ordinal attribute the ordinal attribute on an element may be used to specify the ordinal group of the element, or you can use the css property -moz-box-ordinal-group. element...

Groupboxes - Archive of obsolete content
x example the example below shows a simple groupbox: example 1 : source view <groupbox> <caption label="answer"/> <description value="banana"/> <description value="tangerine"/> <description value="phone booth"/> <description value="kiwi"/> </groupbox> this will cause four pieces of text to be displayed surrounded by a box with the label answer. note that the groupbox has a vertical orientation by default which is necessary to have the text elements stack in a single column. more complex captions you can also add child elements inside the caption element to create a more complex caption. for example, mozilla's font preferences panel uses a drop-down menu as a caption. although any content can be used, usually you would use a checkbox or dropdown menu. example 2 : source view <groupb...
... checkbox has been used as a caption. we might use a script to enable and disable the contents of the groupbox when the checkbox is checked and unchecked. the groupbox contains a horizontal box with a label and textbox. both the textbox and groupbox have been made flexible so the textbox expands when the window is expanded. the additional checkbox appears below the textbox because of the vertical orientation of the groupbox. we'll add a groupbox to the find files dialog in the next section. radio groups you can use the radiogroup element to group radio elements together. the radiogroup is a type of box. you can put any element you want inside it, and apart from its special handling of radio buttons, it works like any other box. any radio buttons placed inside the radio group will be grouped together,...

The Box Model - Archive of obsolete content
el allows you to divide a window into a series of boxes. elements inside of a box will orient themselves horizontally or vertically. by combining a series of boxes, spacers and elements with flex and pack attributes, you can control the layout of a window. although a box is the fundamental part of xul element layout, it follows a few very simple rules. a box can lay out its children in one of two orientations, either horizontally or vertically. a horizontal box lines up its elements horizontally and a vertical box orients its elements vertically. you can think of a box as one row or one column from an html table. various attributes placed on the child elements in addition to some css style properties control the exact position and size of the children. box elements the basic syntax of a box is as fol...
...zontal elements --> </hbox> <vbox> <!-- vertical elements --> </vbox> the hbox element is used to create a horizontally oriented box. each element placed in the hbox will be placed horizontally in a row. the vbox element is used to create a vertically oriented box. added elements will be placed underneath each other in a column. there is also a generic box element which defaults to horizontal orientation, meaning that it is equivalent to the hbox. however, you can use the orient attribute to control the orientation of the box. you can set this attribute to the value horizontal to create a horizontal box and vertical to create a vertical box. thus, the two lines below are equivalent: <vbox></vbox> <box orient="vertical"></box> the following example shows how to place three buttons vertically. ex...

XUL element attributes - Archive of obsolete content
« xul reference home the following attributes are common to all xul elements: align type: one of the values below the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is spli...
...h other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. pack type: one of the values below the pack attribute specifies where child elements of the box are placed when the box is larger that the size of the children. for boxes with horizontal orientation, it is used to indicate the position of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the b...

attribute.align - Archive of obsolete content
the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...
...the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...

-ms-block-progression - Archive of obsolete content
the -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation. initial valuetbapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values tb default. top-to-bottom block flow. layout is horizontal. rl right-to-left block flow. layout is vertical. bt bottom-to-top block flow. layout is horizontal. lr left-to-right block flow. layout is vertical. formal syntax tb | rl | bt | lr specifications not part of any specification. remarks in vertical layout, text lines are rotated 90° clockwise. images are not rotated, but tables are. ...
...low. layout is horizontal. rl right-to-left block flow. layout is vertical. bt bottom-to-top block flow. layout is horizontal. lr left-to-right block flow. layout is vertical. formal syntax tb | rl | bt | lr specifications not part of any specification. remarks in vertical layout, text lines are rotated 90° clockwise. images are not rotated, but tables are. box layout in vertical orientations is exactly analogous to layout in the horizontal orientation: width, height, top, bottom, right, and left do not rotate with the text. only one block progression is active at a time; these values cannot be combined. this property is based on the block-progression property of the css3 text layout module. ...

WebVR — Virtual Reality for the Web - Game development
se from: desktop ones like oculus rift or htc vive, through consoles with playstation vr (which admittedly doesn't support webvr at this time), to mobile experiences like gear vr or google cardboard. note: for more information, read our webvr concepts article. the webvr api the webvr api is the central api for capturing information on vr devices connected to a computer and headset position/orientation/velocity/acceleration information, and converting that into useful data you can use in your games and other applications. note: there are of course other apis useful for creating games, for example the gamepad api for control inputs, and the device orientation api for handling display orientation on mobile. browser support and spec status currently browser support for the webvr api is still ...
...e ghmd variable — using this you can set up the scene, getting the eye parameters, setting the field of view, etc. for example: function setcustomfov(up,right,down,left) { var testfov = new vrfieldofview(up,right,down,left); ghmd.setfieldofview(testfov,testfov,0.01,10000.0); } the gpositionsensor variable holds the positionsensorvrdevice — using this you can get the current position or orientation state (for example to update the scene view on every frame), or reset the sensor. for example, the below code outputs position information on the screen: function setview() { var posstate = gpositionsensor.getstate(); if(posstate.hasposition) { pospara.textcontent = 'position: x' + roundtotwo(posstate.position.x) + " y" + roundtotwo(posstate.position.y) +...

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

Accessibility API cross-reference
s for text input. for other kinds of keyboard operation, e.g. ui controls, see armed focused focused focused available to javascript as document.activeelement appearance has changed for mouseover hottracked n/a n/a especially used for sliders, scrollbars, toolbars, tablists... n/a horizontal horizontal aria-orientation=horizontal indicates whether the element is exposed to an accessibility api. note the reversed logic in some apis invisible visible visible aria-hidden hidden (boolean attribute) indicates whether the object is in an iconified or minimized state. minimized n/a iconified iconified can be expressed with aria-expanded ...
...her like this. for grayed-out (disabled) vs. available (enabled) items. html attribute also removes element from tab sequence and 'grays it out'. aria attribute keeps it 'perceivable'. ...

XPCOM Interface Reference by grouping
mhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretriev...
... nsisockettransport nsisockettransportservice nsisupports nsiuuidgenerator debug nsistackframe device display nsiscreen nsiscreenmanager geolocation nsigeolocationprovider nsigeolocationupdate orientation nsiacceleration nsiaccelerationlistener nsiaccelerometer misc nsisound nsiwifimonitor document nsiwebnavigation environment nsienvironment event nsieventlistenerinfo nsieventlistenerse...

Responsive Design Mode - Firefox Developer Tools
ress the responsive design mode button in the toolbox's toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos). controlling responsive design mode with responsive design mode enabled, the content area for web pages is set to the screen size for a mobile device. initially, it's set to 320 x 480 pixels. note: the device you select when in responsive design mode and the orientation (portrait or landscape) is saved between sessions. information for the selected device is centered over the display. from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have selected from the device settings screen. screen size - you can edit the width and height values to change the device size by editing a number di...
...hange the device size by editing a number directly or using the up and down keys to increase or decrease the value by 1 pixels on each keypress or hold and shift to change the value by 10. the mouse wheel changes the size values by 1 pixel at a time you can also change the device's screen size by grabbing the bottom-right corner of the viewport and dragging it to the size you want. orientation (portrait or landscape) - this setting persists between sessions screenshots are saved to firefox's default download location. if you checked "screenshot to clipboard" in the developer tools settings page, then the screenshot will be copied to the system clipboard. dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device...

CSS Object Model (CSSOM) - Web APIs
e csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era). managing screen orientation specifications specification status comment css typed om level 1 working draft css painting api level 1 working draft extended the css interface with the paintworklet static property. css object model (cssom) view module working draft defined the screen and mediaquerylist interfaces and the mediaquerylistevent event and mediaqueryli...
...css interface with the paintworklet static property. css object model (cssom) view module working draft defined the screen and mediaquerylist interfaces and the mediaquerylistevent event and mediaquerylistlistener event listener. css object model (cssom) working draft extended the css interface and provides the base for the modern cssom specification. screen orientation api working draft css fonts module level 3 candidate recommendation css animations working draft css transitions working draft css custom properties for cascading variables module level 1 candidate recommendation css conditional rules module level 3 candidate recommendation defined the css interface. ...

Lighting in WebGL - Web APIs
gl.uniformmatrix4fv( programinfo.uniformlocations.normalmatrix, false, normalmatrix); update the shaders now that all the data the shaders need is available to them, we need to update the code i...
...ax(dot(transformednormal.xyz, directionalvector), 0.0); vlighting = ambientlight + (directionallightcolor * directional); } `; once the position of the vertex is computed, and we pass the coordinates of the texel corresponding to the vertex to the fragment shader, we can work on computing the shading for the vertex. the first thing we do is transform the normal based on the current orientation of the cube, by multiplying the vertex's normal by the normal matrix. we can then compute the amount of directional lighting that needs to be applied to the vertex by calculating the dot product of the transformed normal and the directional vector (that is, the direction from which the light is coming). if this value is less than zero, then we pin the value to zero, since you can't have less than...

WebGL model view projection - Web APIs
uteperspectivematrix(). view matrix while some graphics libraries have a virtual camera that can be positioned and pointed while composing a scene, opengl (and by extension webgl) does not. this is where the view matrix comes in. its job is to translate, rotate, and scale the objects in the scene so that they are located in the right place relative to the viewer given the viewer's position and orientation. simulating a camera this makes use of one of the fundamental facets of einstein's special relativity theory: the principle of reference frames and relative motion says that, from the perspective of a viewer, you can simulate changing the position and orientation of the viewer by applying the opposite change to the objects in the scene. either way, the result appears to be identical to the view...
... left, we apply the inverse transform to the box: we move the box backward one meter, and then 10 centimeters to its right. the result, from the perspective of each of the two objects, is identical. <<< insert image(s) here >>> the final step in all of this is to create the view matrix, which transforms the objects in the scene so they're positioned to simulate the camera's current location and orientation. our code as it stands can move the cube around in world space and project everything to have perspective, but we still can't move the camera. imagine shooting a movie with a physical camera. you have the freedom to place the camera essentially anywhere you wish, and to aim the camera in whichever direction you choose. to simulate this in 3d graphics, we use a view matrix to simulate the positio...

Fundamentals of WebXR - Web APIs
nderstanding of how eyes collect light and how the brain interprets the collected data, it is important to keep in mind that as such, software designers and developers have a responsibility to be even more careful than usual to ensure that the results are correct. virtual reality sickness virtual reality sickness is a condition in which a person experiencing virtual reality feels discomfort, disorientation, or even serious nausea during and sometimes for a short time after the experience. there are a number of theories surrounding exactly what about virtual reality causes some people to feel uncomfortable or sick, most of which focusing on the idea that even subtle differences between what the brain thinks should be happening and what is being seen can cause these symptoms. defects, misalignments...
...ers and often include gaming-specific features such as physics models, input control systems, asset management, 3d sound playback, and the like. playcanvas next steps with these basic facts in hand, you're ready to take those next steps into the world of mixed reality. the following articles can help. webxr application life cycle starting up and shutting down a webxr session movement, orientation, and motion: a webxr example ...

XRFrame.getPose() - Web APIs
the xrframe method getpose() returns the relative position and orientation—the pose—of one xrspace to that of another space. with this, you can observe the motion of objects relative to each other and to fixed locations throughout the scene. for example, to get the position of a controller relative to the viewer's head, you would compare the controller's gripspace to the xrreferencespace of type viewer. syntax var xrpose = xrframe.getpose(space, basespace); parameters space an xrspace specifying the space for which to obtain an xrpose describing the item's position and orientation. basespace an xrspace to use as the base or origin for the purposes of computing the relative position and orientation. ...
...ferencespace of type viewer. syntax var xrpose = xrframe.getpose(space, basespace); parameters space an xrspace specifying the space for which to obtain an xrpose describing the item's position and orientation. basespace an xrspace to use as the base or origin for the purposes of computing the relative position and orientation. return value an xrpose object specifying the position and orientation, relative to the xrspace indicated by basespace. specifications specification status comment webxr device apithe definition of 'xrframe.getpose()' in that specification. working draft initial definition. ...

XRFrame.getViewerPose() - Web APIs
the getviewerpose() method, a member of the xrframe interface, returns a xrviewerpose object which describes the viewer's pose (position and orientation) relative to the specified reference space. see the getpose() method for a way to calculate a pose that represents the difference between two spaces. syntax var xrviewerpose = xrframe.getviewerpose(referencespace); parameters referencespace an xrreferencespace object specifying the space to use as the reference point or base for the computation of the viewer's current pose. return value a xrviewerpose describing the viewer's position and orientation relative to the specified reference space. exceptions invalidstateerror a domexception indicating that getviewerpose() was not called within the context of a callback to a sess...
...n.requestanimationframe(). examples in this callback function for requestanimationframe(), the xrviewerpose describing the viewer's viewpoint on the world is obtained by calling getviewerpose() on the xrframe passed into the callback. viewerpose = xrframe.getviewerpose(xrreferencespace); if (viewerpose) { /* render the pose's views */ } to see a complete example, take a look at movement, orientation, and motion. specifications specification status comment webxr device apithe definition of 'xrframe.getviewerpose()' in that specification. working draft initial definition. ...

XRFrame - Web APIs
to render a single frame of animation for an xrsession describing a vr or ar sccene. events which communicate the tracking state of objects also provide an xrframe reference as part of their structure. in addition to providing a reference to the xrsession for which this frame is to be rendered, the getviewerpose() method is provided to obtain the xrviewerpose describing the viewer's position and orientation in space, and getpose() can be used to create an xrpose describing the relative position of one xrspace relative to another. properties session read only the xrsession that for which this xrframe describes the tracking details for all objects. the information about a specific object can be obtained by calling one of the methods on the object. methods getpose() returns an xrpose object...
...the xrsession that for which this xrframe describes the tracking details for all objects. the information about a specific object can be obtained by calling one of the methods on the object. methods getpose() returns an xrpose object representing the spatial relationship between the two specified xrspace objects. getviewerpose() returns an xrviewerpose describing the viewer's position and orientation in a given xrreferencespace. specifications specification status comment webxr device apithe definition of 'xrframe' in that specification. working draft initial definition. ...

XRInputSource.gripSpace - Web APIs
...
... controller in the virtual environment. for (let source in xrsession.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, xrrefspace); if (grippose) { mydrawmeshusingtransform(controllermesh, grippose.transform.matrix); } } } for each input source which has a value for gripspace, this loop obtains the xrpose representing the position and orientation that are described by gripspace. if a valid pose is returned, a method mydrawmeshusingtransform() is called to draw the controller's mesh transformed using the grip pose's transform matrix. specifications specification status comment webxr device apithe definition of 'xrinputsource.gripspace' in that specification. working draft initial definition. ...

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

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

XRRigidTransform.inverse - Web APIs
nerate it. syntax let transforminverse = xrrigidtransform.inverse; value an xrrigidtransform which contains the inverse of the xrrigidtransform on which it's accessed. applying the inverse of a transform to any object previously transformed by the parent xrrigidtransform always undoes the transformation, resulting in the object returning to its previous pose. in other words, its position and orientation both return to their prior configurations. examples in this example, the model view matrix for an object is computed by taking the view matrix and multiplying it by the object's pose matrix. let modelviewmatrix = mat4.create(); for (let view of pose.view) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* ... */ mat4.
...iewmatrix, view.transform.inverse.matrix, objectmatrix); gl.uniformmatrix4fv(programinfo.uniformlocations.modelviewmatrix, false, modelviewmatrix); /* ... */ } this outline of a renderer's core code shows how the pose's view gets represented by taking its transform's inverse's matrix as the model view matrix used to transform objects based on the viewer's position and orientation. the inverse's matrix is multiplied by the object's matrix to get the model view matrix, which is then passed into the shader program by setting a uniform to contain that information. specifications specification status comment webxr device apithe definition of 'xrrigidtransform.inverse' in that specification. working draft initial definition. ...

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
ways. the external resources and see also sections of this document link to more writing modes resources. the writing modes specification the css writing modes level 3 specification defines the impact a change the document writing mode has on flow layout. in the writing modes introduction, the specification says, “a writing mode in css is determined by the writing-mode, direction, and text-orientation properties. it is defined primarily in terms of its inline base direction and block flow direction.” the specification defines the inline base direction as the direction in which content is ordered on a line. this defines the start and end of the inline direction. the start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line. the bl...
...ock-level box will establish a new block formatting context, meaning that if its inner display type would be flow, it will get a computed display type of flow-root. this is shown in the next example where the box which displays as horizontal-tb contains a float which is contained due to its parent establishing a new bfc. replaced elements replaced elements such as images will not change their orientation based on the writing-mode property. however, replaced elements such as form controls which include text, should match the writing mode in use. logical properties and values once you are working in writing modes other than horizontal-tb many of the properties and values that are mapped to the physical dimensions of the screen seem strange. for example, if you give a box a width of 100px, in ho...

CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models. reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these. implementing image sprites in css describes the common technique grouping several images i...
... describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page. specifications specification status comment css images module level 4 working draft added image-resolution, conic-gradient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css gradients' in that specification. living standard standardizes the -webkit prefixed gradient value functions css values and units module level 3the definition of '<url>' in that specification. candidate recommendation css level 2 (revision 1)the definition of '<uri...

CSS Writing Modes - CSS: Cascading Style Sheets
css writing modes is a css module that defines various international writing modes, such as left-to-right (e.g. used by latin and indic scripts), right-to-left (e.g. used by hebrew or arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some asian scripts). ...
... is a css module that defines various international writing modes, such as left-to-right (e.g. used by latin and indic scripts), right-to-left (e.g. used by hebrew or arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some asian scripts). ...

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

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

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

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

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

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

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

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

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

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

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

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

box-align - CSS: Cascading Style Sheets
icular direction. the effect of the property is only visible if there is extra space in the box. see flexbox for information about the current standard. /* keyword values */ box-align: start; box-align: center; box-align: end; box-align: baseline; box-align: stretch; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-align property is specified as one of the keyword values listed below. values start the box aligns contents at the start, leaving any extra space at the end. center the box aligns contents in the center, dividing any extra space equally between the start and the end. end the box aligns contents at the end, leaving any extra space at the start. b...
...below. values start the box aligns contents at the start, leaving any extra space at the end. center the box aligns contents in the center, dividing any extra space equally between the start and the end. end the box aligns contents at the end, leaving any extra space at the start. baseline the box aligns the baselines of the contents (lining up the text). this only applies if the box's orientation is horizontal. stretch the box stretches the contents so that there is no extra space in the box. notes the edge of the box designated the start for alignment purposes depends on the box's orientation: horizontal top vertical left the edge opposite to the start is designated the end. if the alignment is set using the element's align attribute, then the style ...

box-pack - CSS: Cascading Style Sheets
x-pack css properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. the effect of this is only visible if there is extra space in the box. /* keyword values */ box-pack: start; box-pack: center; box-pack: end; box-pack: justify; /* global values */ box-pack: inherit; box-pack: initial; box-pack: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-pack property is specified as one of the keyword values listed below. values start the box packs contents at the start, leaving any extra space at the end. center the box packs contents in the center, dividing any extra space equally between the start and the end. end the box packs contents at the end, leaving any extra space at the start. justi...
...start and the end. end the box packs contents at the end, leaving any extra space at the start. justify the space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. if there is only one child, treat the value as if it were start. notes the edge of the box designated the start for packing purposes depends on the box's orientation and direction: normal reverse horizontal left right vertical top bottom the edge opposite to the start is designated the end. if the packing is set using the element's pack attribute, then the style is ignored. formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webki...

margin-block-end - 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. ...
...he text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to margin-block-start, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-end property takes the same values as the margin-left property. formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if s...

margin-block-start - 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. ...
...ze */ margin-block-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to margin-block-end, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-start property takes the same values as the margin-left property. formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if s...

margin-inline-end - 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 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. ...

margin-inline-start - 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 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. ...

margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-inline: 10px 20px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for wr...
... container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation. constituent properties this property is a shorthand for the following css properties: margin-inline-end margin-inline-start syntax values the margin-inline property takes the same values as the margin-left property. formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute le...

offset-rotate - CSS: Cascading Style Sheets
note: early versions of the spec called this property motion-rotation. syntax /* follow the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto 45deg; /* follow the path direction but facing the opposite direction of `auto` */ offset-rotate: reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis. this is the default value. ...
...ted value of auto. reverse the element is rotated similar to auto, except it faces the opposite direction. it is the same as specifying a value of auto 180deg. ...

padding-block-end - 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. ...
...tainer's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-inline-start, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div...

padding-block-start - 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. ...
... width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-end, padding-inline-start, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p cla...

padding-inline-end - 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. ...
...er's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-block-end, and padding-inline-start, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p cla...

padding-inline-start - 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. ...
...h */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-block-end, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p cla...

padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. /* <length> values */ padding-inline: 10px 20px; /* an absolute length */ padding-inline: 1em 2em; /* relative to the text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property ta...
...perty is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the padding-left property. description values for this property correspond to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orientation. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .examplete...

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
kens to lift particular restrictions: allow-downloads-without-user-activation : allows for downloads to occur without a gesture from the user. allow-downloads : allows for downloads to occur with a gesture from the user. allow-forms: allows the resource to submit forms. if this keyword is not used, form submission is blocked. allow-modals: lets the resource open modal windows. allow-orientation-lock: lets the resource lock the screen orientation. allow-pointer-lock: lets the resource use the pointer lock api. allow-popups: allows popups (such as window.open(), target="_blank", or showmodaldialog()). if this keyword is not used, the popup will silently fail to open. allow-popups-to-escape-sandbox: lets the sandboxed document open new windows without those windows inheriting the san...
...hat specification. candidate recommendation added the referrerpolicy attribute. html living standardthe definition of '<iframe>' in that specification. living standard html5the definition of '<iframe>' in that specification. recommendation html 4.01 specificationthe definition of '<iframe>' in that specification. recommendation screen orientation api working draft adds allow-orientation-lock to the sandbox attribute. ...

<input type="range"> - HTML: Hypertext Markup Language
allowing only integers to be entered, unless the stepping base is not an integer; for example, if you set min to -10 and value to 1.5, then a step of 1 will allow only values such as 1.5, 2.5, 3.5,... in the positive direction and -0.5, -1.5, -2.5,... in the negative direction. see the html step attribute. non standard attributes attribute description orient sets the orientation of the range slider. firefox only. orient similar to the -moz-orient non-standard css property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. note: the following input attributes do not apply to...
... live note: currently, no browser fully supports these features. firefox doesn't support hash marks and labels at all, for example, while chrome supports hash marks but doesn't support labels. version 66 (66.0.3359.181) of chrome supports labels but the <datalist> tag has to be styled with css as its display property is set to none by default, hiding the labels. change the orientation by default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. when supported, we will be able to make the range vertical, to slide up and down with css by declaring a height value greater than the width value. this is not actually implemented yet by any of the major browsers. (see firefox bug 981916, chrome bug 341071). it also, perhaps, m...

Feature-Policy - HTTP
ise rejects with a typeerror. geolocation controls whether the current document is allowed to use the geolocation interface. when this policy is disabled, calls to getcurrentposition() and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied. ...
... microphone controls whether the current document is allowed to use audio input devices. when this policy is disabled, the promise returned by mediadevices.getusermedia() will reject with a notallowederror. midi controls whether the current document is allowed to use the web midi api. ...

HTTP Index - HTTP
ed to use the geolocation interface. when this policy is enabled, calls to getcurrentposition() and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied. 133 feature-policy: gyroscope the http feature-policy header gyroscope directive controls whether the current document is allowed to gather information about the orientation of the device through the gyroscope interface. 134 feature-policy: layout-animations directive, feature-policy, http, reference, layout-animations the http feature-policy header layout-animations directive controls whether the current document is allowed to show layout animations. 135 feature-policy: legacy-image-formats direcive, feature-policy, http, referenc...
... the http feature-policy header legacy-image-formats directive controls whether the current document is allowed to display images in legacy formats. 136 feature-policy: magnetometer directive, feature-policy, http, magnetometer, reference the http feature-policy header magnetometer directive controls whether the current document is allowed to gather information about the orientation of the device through the magnetometer interface. 137 feature-policy: microphone feature policy, feature-policy, http, header, microphone the http feature-policy header microphone directive controls whether the current document is allowed to use audio input devices. when this policy is enabled, the promise returned by mediadevices.getusermedia() will reject with a notallowede...

Lazy loading - Web Performance
ferred by default. css by default, css is treated as a render blocking resource, so the browser won't render any processed content until the cssom is constructed. css must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering. <link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that. fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering. it is possible to override the default behaviour and preload web font resources using <link rel="preload">, the css font-display pro...
...lude this polyfill to provide support for older and currently incompatible browsers: loading-attribute-polyfill intersection observer api intersection observers allow the user to know when an observed element enters or exits the browser’s viewport. event handlers when browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, resize or orientation change event handlers to determine if a specific element is in viewport specifications specification status comment html living standard living standard ...

<ellipse> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. ...
...omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following e...

<marker> - SVG: Scalable Vector Graphics
table: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>. value type: userspaceonuse|strokewidth ; default value: strokewidth; animatable: yes markerwidth this attribute defines the width of the marker viewport. value type: <length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to. value type: auto|auto-start-reverse|<angle> ; default value: 0; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|...
...omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation ele...

<text> - SVG: Scalable Vector Graphics
the text baseline. value type: <length>|<percentage> ; default value: 0; animatable: yes dx shifts the text position horizontally from a previous text element. value type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text element. value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. value type: <length>|<p...
...omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the follow...

<tspan> - SVG: Scalable Vector Graphics
e text baseline. value type: <length>|<percentage> ; default value: none; animatable: yes dx shifts the text position horizontally from a previous text element. value type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text element. value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. value type: <length>|<p...
...omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of ...

Events - Archive of obsolete content
archived event pages domsubtreemodifiedmozaudioavailablemozbeforeresizemozorientationcachedchargingchangechargingtimechangecheckingdischargingtimechangedownloadingerrorlevelchangenoupdateobsoleteprogressupdateready ...

jspage - Archive of obsolete content
.callee){return"arguments"; }else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xm...

Table Cellmap - Border Collapse - Archive of obsolete content
it can have 4 values: ns_side_top ns_side_right ns_side_bottom ns_side_left the size of the smaller border that goes into that corner. if this corner is a start for a horizontal segment, if this corner is a start for a vertical segment, if this corner should be beveled. ...

align - Archive of obsolete content
« xul reference home align type: one of the values below the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting ...

Template and Tree Listeners - Archive of obsolete content
ew.addobserver(treebuilderobserver); // ppchenhui@hotmail.com tree.builder.queryinterface (components.interfaces.nsixultreebuilder) .addobserver(treebuilderobserver); the candropbeforeafter method returns false since we do not want to allow before and after drops. the candropon method returns true however. the candrop method is there for compatibility with older versions; this function checks the orientation and returns the opposite. this works as the 'on' value is 0 and the 'between' values are -1 and 1. obviously, this code is much simpler than what we would really want to use -- we should be checking what is being dragged to make sure that it is compatible with the tree. or, we might want to allow dropping on specific rows only; the drop methods are supplied with an index argument so we can check ...

Tree Widget Changes - Archive of obsolete content
it should return true if a drop is allowed on a row. checkbox columns tree columns now implement the checkbox type. previously the value existed but was not implemented. now it is. you can create a checkbox column by setting the type attribute of a column to checkbox. <treecol type="checkbox"> you can then set or clear the checkbox for a particular cell in that column by...

Adding Buttons - Archive of obsolete content
...

Creating a Window - Archive of obsolete content
nd files' will appear. orient="horizontal" the orient attribute specifies the arrangement of the items in the window. the value horizontal indicates that items should be placed horizontally across the window. you may also use the value vertical, which means that the items are placed in a column. this is the default value, so you may leave the attribute off entirely if you wish to have vertical orientation. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this line declares the namespace for xul, which you should put on the window element to indicate that all of its children are xul. note that this url is never actually downloaded. mozilla will recognize this url internally. <!-- other elements go here --> replace this comment block with other elements (the buttons, menu...

Features of a Window - Archive of obsolete content
lag, the file will open up as the content in a browser window. for example: var mywin = window.open("chrome://findfile/content/findfile.xul", "findfile", "chrome"); specifying the width and height you should have noticed that whenever elements were added to a window, the window's width expanded to fit the new elements. the window is really just a box which is flexible and defaults to vertical orientation. you can also specify the width and height directly on the window tag. this, of course, causes the window to be displayed in a specific size. if you leave it out, the size is determined by the elements that are in it. gecko 1.9.2 note starting in gecko 1.9.2 (firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session stor...

Numeric Controls - Archive of obsolete content
o the user, for instance, a field to enter a number of days, or the maximum size of a file. a scale would be used when the actual value isn't important, just that sliding the scale decreases or increases a state. for instance, a volume slider or a zoom level. the default arrangement of a scale is horizontal with lower values to the left and higher values to the right. however, you can change this orientation with the orient and dir attributes. <scale orient="vertical" dir="reverse"/> this scale will be shown vertical with lower values at the bottom and higher values at the top. date and time entry fields the datepicker and timepicker elements may be used to allow the user to enter dates and times. when used, they display a set of numeric textboxes to enter each of the components of the date or time.

Simple Menu Bars - Archive of obsolete content
he key will still work if it doesn't). the menu element is normally placed on a menubar, although it does not have to be. however, it will be given a different look. the image here shows what the earlier example would look like without the menu bar. menupopup element the menupopup element creates the popup window containing the menu commands. it is a type of box which defaults to a vertical orientation. you could change it to horizontal if you wanted to and the menuitems would be placed in a row. normally only menuitems and menuseparators would be placed on a menupopup. you can place any element on a menupopup, however they will be ignored on a macintosh. menuitem element the menuitem element is much like the menu element and has some of the same attributes. id the unique identifier of th...

Toolbars - Archive of obsolete content
olbar"> <toolbarbutton id="opensearch" label="open"/> <toolbarbutton id="savesearch" label="save"/> </toolbar> </toolbox> <tabbox> a toolbar with two buttons has been added here. in the image, you can see them appear horizontally along the top. notice that the toolbar has been placed inside the vertical box just above the tabbox. this is because we need the vertical orientation so that the toolbar will appear above everything else. the find files example so far: source view next, we'll find out how to add a menu bar to a window. « previousnext » ...

Trees - Archive of obsolete content
ropriate treecell. however, the three elements listed above are not displayed directly. they are used only as the source for the data for the view. thus, only a handful of attributes apply to the treeitem and related elements. for instance, you cannot change the appearance of the tree rows using the style attribute or with other css properties and the box related features such as flexibility and orientation cannot be used. in addition, mouse and other user interface events do not fire at these elements. in fact, apart from some tree specific attributes, the only attributes that will have any effect will be the label attribute to set a text label for a cell and the src attribute to set an image. however, there are special ways of styling the tree and setting other features which we will see in later...

box - Archive of obsolete content
attributes | properties | methods | related ] a container element which can contain any number of child elements. if the box has an orient attribute that is set to horizontal, the child elements are laid out from left to right in the order that they appear in the box. if orient is set to vertical, the child elements are laid out from top to bottom. child elements do not overlap. the default orientation is horizontal. more information is available in the xul tutorial. examples <box orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertion...

hbox - Archive of obsolete content
more information is available in the xul tutorial. ...

radiogroup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a group of radio buttons. only one radio button inside the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement, getindexofitem, getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <ra...

scale - Archive of obsolete content
the default value is horizontal which displays a horizontal scale. ...

toolbar - Archive of obsolete content
it can be collapsed with a grippy when the toolbar is placed inside a toolbox. the toolbar should always have an id attribute. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox element. you can associate an external toolbar with a toolbox for the purpose of managing your toolbars by setting the toolboxid property on the toolbar. ...

toolbox - Archive of obsolete content
if a toolbar is placed inside a toolbox, a grippy is displayed on its left or upper edge. the user may click the grippy to collapse the toolbar. if multiple toolbars are placed in the same toolbox, they will all collapse into the same row. the firefox browser does not have grippies so toolbars cannot be collapsed and expanded. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox. ...

vbox - Archive of obsolete content
more information is available in the xul tutorial. ...

CSS - Archive of obsolete content
-window-shadow css property specifies whether a window will have a shadow. ...

Index - Game development
game if you cannot control it! so let's add some user interaction: a controllable paddle. 69 track the score and win beginner, canvas, games, javascript, tutorial, scoring, winning destroying the bricks is really cool, but to be even more awesome the game could award points for every brick a user hits, and keep count of the total score. 70 2d maze game with device orientation canvas, device orientation api, game development, html5, phaser, vibration api i hope this tutorial will help you dive into 2d game development and inspire you to create awesome games on your own. you can play the demo game cyber orb and check out its source code on github. 71 touch event horizon needscontent, needsexample this tutorial shows how to use touch events...

Explaining basic 3D theory - Game development
pace for the viewer to see. it's like taking a photo of the given scenery you have prepared — you have to place the objects first, configure the camera, and then take the shot. there are four stages to this processing: the first one involves arranging the objects in the world, and is called model transformation. then there's view transformation which takes care of positioning and setting the orientation of the camera in the 3d space. the camera has three parameters — location, direction, and orientation — which have to be defined for the newly created scene. projection transformation (also called perspective transformation) then defines the camera settings. it sets up what can be seen by the camera — the configuration includes field of view, aspect ratio and optional near and far planes...

Tutorials - Game development
d winning and losing states. 2d breakout game using phaser in this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using thephaser html5 game framework. this idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics. 2d maze game with device orientation this tutorial shows how to create a 2d maze game using html5, incorporating fundamentals such as collision detection and sprite placement on a <canvas>. this is a mobile game that uses the device orientation and vibration apis to enhance the gameplay and is built using the phaser framework. 2d platform game with phaser this tutorial series shows how to create a simple platform game using phase...

Visual typescript game engine - Game development
code format : npm run fix npm run tslint or use : tslint -c tslint.json 'src/**/*.ts' --fix tslint -c tslint.json 'src/**/*.ts' the external licence in this project : - networking based on : muaz khan mit license www.webrtc-experiment.com/licence - base physics based on : original source: matter.js https://github.com/liabru/matter-js matter.ts used because typescript orientation. https://www.npmjs.com/package/@types/matter-js crypto icons downloaded from https://www.behance.net/junikstudio todo list for 2019 i'm still far away from the project objective : make visual nodes for editor mode in gameplay. item's selling for crypto values. create examples demos in minimum 20 gameplay variants (table games, actions, platformers, basic demo throw the api doc etc.). im...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
veloped by google as a way to experiment with ways to improve tcp and web application delivery. 349 quality values glossary, webmechanics quality values, or q-values and q-factors, are used to describe the order of priority of values in a comma-separated list. it is a special syntax allowed in some http headers and in html. 350 quaternion definition, glossary, orientation, quaternion, webxr, rotation a quaternion is the quotient of two 3d vectors and is used in 3d graphics and in accelerometer-based sensors to represent orientation or rotational data. 351 rail glossary, rail, timings, web performance rail, an acronym for response, animation, idle, and load, is a performance model originated by the google chrome team in 2015, focused on u...

Fundamental text and font styling - Learn web development
ion: define the text direction (this depends on the language and usually it's better to let html handle that part as it is tied to the text content.) hyphens: switch on and off hyphenation for supported languages. line-break: relax or strengthen line breaking for asian languages. text-align-last: define how the last line of a block or a line, right before a forced line break, is aligned. text-orientation: define the orientation of the text in a line. overflow-wrap: specify whether or not the browser may break lines within words in order to prevent overflow. writing-mode: define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow. font shorthand many font properties can also be set through the shorthand property font. these are writte...

Introduction to automated testing - Learn web development
scroll up and down by dragging with the mouse, or use appropriate gestures (e.g. pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g. macbook). note that not all features are available on all devices. you'll also see a menu that allows you to control the session. the features here are as follows: switch — change to another platform/device/browser combination. orientation (looks like a reload icon) — switch orientation between portrait and landscape. fit to screen (looks like a full screen icon) — fill the testing areas as much as possible with the device. capture a bug (looks like a camera) — takes a screenshot, then allows you to annotate and save it. issue tracker (looks like a deck of cards) — view previously captured bugs/screenshots. settings (co...

Handling common HTML and CSS problems - Learn web development
rn browsers, then instead apply a floated layout to older browsers that don't support flexbox. note: there is a fairly new feature in css called @supports, which allows you to implement native feature detection tests. responsive design problems responsive design is the practice of creating web layouts that change to suit different device form factors — for example, different screen widths, orientations (portrait or landscape), or resolutions. a desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using media queries, and make sure it is applied correctly using viewport. you can find a detailed account of such practices in the building blocks of responsive design. resolution is a big issue too — for example, mobile devi...

Mozilla’s UAAG evaluation report
p2) p dom inspector provides some capability, but not really intended for end users (tasks, tools, dom inspector) 9.10 configure important elements. (p3) ni the navigational elements aren't user configurable guideline 10. orient the user. checkpoint title status notes/plans checkpoint title status notes/plans 10.1 table orientation. (p1) ni we don't make use of scope, headers, axis, or any other table accessibility features we have nothing under properties, or anywhere else, to orient users reading a table 10.2 highlight selection and content focus. (p1) vg provides a focus outline box highlights follow graphical rendering conventions for windows does not highlight selected images we do ...

nsIPrinterEnumerator
talled printers. void enumerateprinters( out pruint32 acount, [retval, array, size_is(acount)] out wstring aresult ); parameters acount returns number of printers returned. aresult returns array of names. initprintsettingsfromprinter() initializes certain settings from the native printer into the printsettings these settings include, but are not limited to: page orientation, page size, number of copies. void initprintsettingsfromprinter( in wstring aprintername, in nsiprintsettings aprintsettings ); parameters aprintername aprintsettings ...

nsIScreen
ed (that is, off). brightness_full 1 the screen is at full brightness. brightness_levels 2 the number of different brightness levels. screen rotation constants requires gecko 13.0(firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) constant value description rotation_0_deg 0 0° of rotation (that is, no rotation, or default orientation). rotation_90_deg 1 90° of rotation. rotation_180_deg 2 180° of rotation. rotation_270_deg 3 270° of rotation. methods getavailrect() returns a rectangle indicating the portion of the screen that is available for use. note: this returns a rectangle representing the region of the screen that is available for application use. for example, this w...

XPCOM Interface Reference
errorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomxuleleme...

A basic ray-caster - Web APIs
wing the current view. i know i could have started with a simpler example, but i'm sure the canvas tutorial will get to that, and i wanted to see if i could do this. so every update, the raycaster looks to see if you've pressed any keys lately, to conserve calculations by not casting if you're idle. if you have, then the canvas is cleared, the ground and sky are drawn, the camera position and/or orientation are updated, and the rays are cast out. as the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall. the height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line. the code i ended up with is a r...

DOMPoint.x - Web APIs
syntax var xpos = dompoint.x; value a double-precision floating-point value indicating the x coordinate's value for the point. ...

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

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

DOMPointInit.x - Web APIs
the dompointinit dictionary's x property is used to specify the x component of a point in 2d or 3d space when either creating or serializing a dompoint or dompointreadonly. in general, positive values x mean to the right, and negative values of x means to the left, assuming that transforms have not altered the orientation of the axes. syntax var dompointinit = { x: xpos }; dompointinit.x = xpos; var xpos = dompointinit.x; value a double-precision floating-point value indicating the point's x coordinate. this value is unrestricted, meaning that it is allowed to be infinite or invalid (that is, its value may be nan or ±infinity). if this property is missing when the dompointinit object is passed into frompoint(), the value is assumed to be 0 by default. dompointinit is used as an input whe...

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

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

DeviceMotionEvent.DeviceMotionEvent() - Web APIs
nal options are as follows: acceleration: an object giving the acceleration of the device on the three axis x, y and z. acceleration is expressed in m/s2. accelerationincludinggravity: an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. rotationrate: an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is express in degrees per seconds. interval: a number representing the interval of time, in milliseconds, at which data is obtained from the device. specifications not part of any specifications. ...

DeviceMotionEvent.acceleration - Web APIs
out acceleration on three axis. each axis is represented with its own property: x represents the acceleration upon the x axis which is the west to east axis y represents the acceleration upon the y axis which is the south to north axis z represents the acceleration upon the z axis which is the down to up axis specifications specification status comment deviceorientation event specification editor's draft initial definition. ...

DeviceMotionEvent.accelerationIncludingGravity - Web APIs
out acceleration on three axis. each axis is represented with its own property: x represents the acceleration upon the x axis which is the west to east axis y represents the acceleration upon the y axis which is the south to north axis z represents the acceleration upon the z axis which is the down to up axis specifications specification status comment deviceorientation event specification editor's draft initial definition. ...

DeviceMotionEvent.interval - Web APIs
...

DeviceMotionEvent.rotationRate - Web APIs
...

DeviceMotionEventAcceleration: x - Web APIs
read-only property indicates the amount of acceleration that occurred along the x axis in a devicemotioneventacceleration object. syntax var xaccel = devicemotioneventacceleration.x; return value x a double indicating the amount of acceleration along the x axis. see accelerometer values explained for details. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventacceleration: x' in that specification. editor's draft ...

DeviceMotionEventAcceleration: y - Web APIs
read-only property indicates the amount of acceleration that occurred along the y axis in a devicemotioneventacceleration object. syntax var yaccel = devicemotioneventacceleration.y; return value y a double indicating the amount of acceleration along the y axis. see accelerometer values explained for details. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventacceleration: y' in that specification. editor's draft ...

DeviceMotionEventAcceleration: z - Web APIs
read-only property indicates the amount of acceleration that occurred along the z axis in a devicemotioneventacceleration object. syntax var zaccel = devicemotioneventacceleration.z; return value z a double indicating the amount of acceleration along the z axis. see accelerometer values explained for details. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventacceleration: z' in that specification. editor's draft ...

DeviceMotionEventAcceleration - Web APIs
. properties devicemotioneventacceleration.x read only the amount of acceleration along the x axis. read only. devicemotioneventacceleration.y read only the amount of acceleration along the y axis. read only. devicemotioneventacceleration.z read only the amount of acceleration along the z axis. read only. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventacceleration' in that specification. editor's draft initial definition ...

DeviceMotionEventRotationRate: alpha - Web APIs
ound the z axis -- in degrees per second -- in a devicemotioneventrotationrate object. syntax var alpha = devicerotationrate.alpha; this property is read-only. return value alpha a double indicating the rate of rotation around the z axis, in degrees per second. see accelerometer values explained for details. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate: alpha' in that specification. editor's draft ...

DeviceMotionEventRotationRate: beta - Web APIs
around the x axis -- in degrees per second -- in a devicemotioneventrotationrate object. syntax var beta = devicerotationrate.beta; this property is read-only. return value beta a double indicating the rate of rotation around the x axis, in degrees per second. see accelerometer values explained for details. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate: beta' in that specification. editor's draft ...

DeviceMotionEventRotationRate: gamma - Web APIs
ound the y axis -- in degrees per second -- in a devicemotioneventrotationrate object. syntax var gamma = devicerotationrate.gamma; this property is read-only. return value gamma a double indicating the rate of rotation around the y axis, in degrees per second. see accelerometer values explained for details. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate: gamma' in that specification. editor's draft ...

DeviceMotionEventRotationRate - Web APIs
tionrate.alpha read only the amount of rotation around the z axis, in degrees per second. devicemotioneventrotationrate.beta read only the amount of rotation around the x axis, in degrees per second. devicemotioneventrotationrate.gamma read only the amount of rotation around the y axis, in degrees per second. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate' in that specification. editor's draft ...

Document: pointercancel event - Web APIs
le no interface pointerevent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. the browser decides that the user started pointer input accidentally. this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events. the touch-action css property prevents the input from continuing. after the pointercancel event is fired, the brows...

EffectTiming.fill - Web APIs
hould be rotated 90° to the left. that means 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 o...

Element.requestFullscreen() - Web APIs
n the document receives these events instead. earlier implementations of the fullscreen api would always send these events to the document rather than the element, and you may need to be able to handle that situation. check browser compatibility in fullscreen for specifics on when each browser made this change. note: this method must be called while responding to a user interaction or a device orientation change; otherwise it will fail. syntax var promise = element.requestfullscreen(options); parameters options optional a fullscreenoptions object providing options that control the behavior of the transition to full-screen mode. currently, the only option is navigationui, which controls whether or not to show navigation ui while the element is in full-screen mode. the default value is "au...

Event - Web APIs
aces which are based on the main event interface, with links to their respective documentation in the mdn api reference. note that all event interfaces have names which end in "event". ...

HTMLElement: pointercancel event - Web APIs
le no interface pointerevent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. the browser decides that the user started pointer input accidentally. this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events. the touch-action css property prevents the input from continuing. after the pointercancel event is fired, the brows...

HTMLImageElement.sizes - Web APIs
each condition is specified using the same conditional format used by media queries. ...

PannerNode.positionX - Web APIs
the positionx property of the pannernode interface specifies the x coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the horizontal axis (left-right). the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contai...

PannerNode.positionY - Web APIs
the positiony property of the pannernode interface specifies the y coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the vertical axis (top-bottom). the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contained...

PannerNode.positionZ - Web APIs
the positionz property of the pannernode interface specifies the z coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the depth axis (behind-in front of the listener). the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the au...

Sensor - Web APIs
policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. interfaces based on sensor below is a list of interfaces based on the sensor interface. accelerometer ambientlightsensor gyroscope linearaccelerationsensor magnetometer orientationsensor properties sensor.activated read only returns a boolean indicating whether the sensor is active. sensor.hasreading read only returns a boolean indicating whether the sensor has a reading. sensor.timestamp read only returns the time stamp of the latest sensor reading. event handlers sensor.onerror called when an error occurs on one of the child interfaces of the sensor in...

WebGLRenderingContext.frontFace() - Web APIs
the default value is gl.ccw. possible values: gl.cw: clock-wise winding. gl.ccw: counter-clock-wise winding. return value none. examples gl.frontface(gl.cw); specifications specification status comment webgl 1.0the definition of 'frontface' in that specification. ...

WebGLRenderingContext - Web APIs
hrange() specifies the depth range mapping from normalized device coordinates to window or viewport coordinates. webglrenderingcontext.disable() disables specific webgl capabilities for this context. webglrenderingcontext.enable() enables specific webgl capabilities for this context. webglrenderingcontext.frontface() specifies whether polygons are front- or back-facing by setting a winding orientation. webglrenderingcontext.getparameter() returns a value for the passed parameter name. webglrenderingcontext.geterror() returns error information. webglrenderingcontext.hint() specifies hints for certain behaviors. the interpretation of these hints depend on the implementation. webglrenderingcontext.isenabled() tests whether a specific webgl capability is enabled or not for this context. w...

Using bounded reference spaces - Web APIs
e level by transforming it by providing an appropriate transform matrix to the xrreferencespace method requestoffsetreferencespace(). this would change the onrefspacecreated() method from the above snippet to: function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); let startposition = vec3.fromvalues(0, 1.5, 0); const startorientation = vec3.fromvalues(0, 0, 1.0); xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, startorientation)); xrsession.requestanimationframe(ondrawframe); } in this code, executed after the reference space has been created, we create an xrrigidtransform representing the transform that will move the viewpoint upward by 1.5 meters. this approxi...

Web Audio API - Web APIs
audio source out into a set of mono outputs. channelmergernode the channelmergernode interface reunites different mono inputs into a single output. each input will be used to fill a channel of the output. audio spatialization these interfaces allow you to add audio spatialization panning effects to your audio sources. audiolistener the audiolistener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization. pannernode the pannernode interface represents the position and behavior of an audio source signal in 3d space, allowing you to create complex panning effects. stereopannernode the stereopannernode interface represents a simple stereo panner node that can be used to pan an audio stream left or right. audio proce...

Window: devicemotion event - Web APIs
editor's draft ...

Window.ondevicemotion - Web APIs
an event handler for the devicemotion events sent to the window. syntax window.ondevicemotion = funcref; where funcref is a reference to a function. this function receives a devicemotionevent object describing the motion that occurred. specifications specification status comment deviceorientation event specification editor's draft initial definition. ...

self.createImageBitmap() - Web APIs
erence point of the rectangle from which the imagebitmap will be extracted. sw the width of the rectangle from which the imagebitmap will be extracted. this value can be negative. sh the height of the rectangle from which the imagebitmap will be extracted. this value can be negative. options optional an object that sets options for the image's extraction. the available options are: imageorientation: specifies whether the image should be presented as is or flipped vertically. either none (default) or flipy. premultiplyalpha: specifies whether the bitmap's color channels should be premultiplied by the alpha channel. one of none, premultiply, or default (default). colorspaceconversion: specifies whether the image should be decoded using color space conversion. either none or default (defau...

XRBoundedReferenceSpace.boundsGeometry - Web APIs
the bounds are the physical limitations of the available space, shifted so that the reference space's bounds points are all defined relative to the xrboundedreferencespace's effective origiin. usage notes bounded reference spaces always have their origin located at ground level, where y is 0. as a general rule, with the origin for x and z located in or near the center of the space, and with the orientation set facing in a logical forward direction, as appropriate for the underlying platform or xr hardware. in order to reduce the risk of the room boundaries being used for fingerprinting purposes, each point in the boundsgeometry array may be rounded or adjusted by some amount. the specification recommends that browsers shift the points to the nearest 5 centimeters (while avoiding going outside the ...

XRFrame.session - Web APIs
an xrframe object's read-only session property returns the xrsession object that generated the frame. syntax var xrsession = xrframe.session; value a xrsession object representing the webxr session for which this xrframe describes the object positions and orientations. specifications specification status comment webxr device apithe definition of 'xrframe.session' in that specification. working draft initial definition. ...

XRInputSource.targetRayMode - Web APIs
nts in the direction of the target. the target ray extends from the hand (or the object in the hand) in the targeted direction. the direction is determined using platform-specific rules, though if no such rules exist, the direction is chosen by assuming the user is pointing their index finger straight out from their hand. usage notes the input source's targetrayspace indicates the position and orientation of the target ray, and can be used to determine where to render the ray. example this fragment of code shows part of a function to be called once every frame. it looks for inputs which have a non-null targetrayspace. inputs which have a value for this property represent inputs that project a target ray outward from the user. for each such input, this example looks for inputs whose targetraymod...

XRInputSource - Web APIs
evice, this property's value is null. note: while xrinputsource uses the gamepad interface from the gamepad api, this input device is strictly associated with the webxr hardware and is not a general-purpose gaming device. gripspaceread only an xrspace whose origin tracks the pose which is used to render objects which should appear as if they're held in the hand indicated by handedness. the orientation of this space indicates the angle at which the hand is gripping the object. read on in the main article on gripspace for more details on how to use this space. handednessread only a domstring that indicates which hand the device represented by this xrinputsource is being used in, if any. the value will be left, right, or none. profilesread only an array of domstring objects, each specifying...

XRPermissionDescriptor.optionalFeatures - Web APIs
space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more...

XRPermissionDescriptor.requiredFeatures - Web APIs
space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more...

XRPermissionStatus.granted - Web APIs
space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more...

XRReferenceSpace.onreset - Web APIs
the xrreferencespace interface's onreset event handler property can be set to a function which is called when the xrreferencespace receives a reset event, signaling that the xr device has experienced a discontinuity large enough to require that the position and/or orientation of the origin be significantly altered to compensate. syntax xrreferencespace.onreset = eventhandler; eventhandler = xrreferencespace.onreset; value an event handler function which will be called whenever the reset event is received by the xrreferencespace. usage notes see the reset event documentation for further details. specifications specification status comment webxr device apithe definition of 'onreset' in that specification. working draft initial definition. ...

XRReferenceSpaceEvent.transform - Web APIs
the read-only xrreferencespaceevent property transform indicates the position and orientation of the affected referencespace's native origin after the changes the event represents are applied. the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system. syntax let refspace = xrreferencespaceevent.transform; value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system. usage notes upon receiving a reset event, you can apply the transform to cached position or orientation information to shift them into the updated coordinate system. alternatively, you can just discard a...

XRReferenceSpaceEventInit.transform - Web APIs
the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system. syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system. ...

XRReferenceSpaceType - Web APIs
space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more...

XRSession.requestReferenceSpace() - Web APIs
space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need. xrreferencespace viewer a tracking space whose native origin tracks the viewer's position and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more...

XRSession - Web APIs
the webxr device api's xrsession interface represents an ongoing xr session, providing methods and properties used to interact with and control the session. to open a webxr session, use the xrsystem interface's requestsession() method. with xrsession methods, you can poll the viewer's position and orientation (the xrviewerpose), gather information about the user's environment, and present imagery to the user. xrsession supports both inline and immersive virtual and augmented reality modes. properties in addition to the properties listed below, xrsession inherits properties from its parent interface, eventtarget. environmentblendmode read only returns this session's blend mode which denotes how much of the real-world environment is visible through the xr device and how the devi...

XRViewerPose.views - Web APIs
you can see more context and see much more on that page. specifications specification status comment webxr device apithe definition of 'xrviewerpose.views' in that specification. working draft initial definition. ...

XRViewport - Web APIs
ffset from the origin of the destination graphics surface (typically a xrwebgllayer) to the left edge of the viewport, in pixels. y read only the offset from the origin of the viewport to the bottom edge of the viewport; webgl's coordinate system places (0, 0) at the bottom left corner of the surface. usage notes currently, the only type of surface available is the xrwebgllayer. the precise orientation of the coordinate system may vary with other surface types, but in webgl, the origin (0, 0) is located at the bottom-left corner of the surface. thus the values specified in an xrviewport define a rectangle whose bottom-left corner is at (x, y) and which extends width pixels toward the left and height pixels upward. these values may be passed directly into the webglrenderingcontext.viewport() me...

XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
's x and y at 0, the width at 640, and the height set to 720. the right eye gets the other half of the frame buffer, with its viewport's x set at 639. while rendering a frame for this scene, we get the viewport for the view and apply it to webgl, then render the scene. this ensures that the scene we render will not only match the viewpoint we need to express (which is defined by the position and orientation data in the pose), but that the rendered output will be constrained within the correct portion of the frame buffer for the eye we're drawing, regardless of any scaling that is being performed. examples in this example, we request a frame buffer at the device's native resolution, regardless of any performance concerns: function requestnativescalewebgllayer(gl, xrsession) { return gl.makexrcom...

XRWebGLLayer - Web APIs
eye's point of view are each placed into the correct parts of the framebuffer. static methods getnativeframebufferscalefactor() returns the scaling factor that can be used to scale the resolution of the recommended webgl framebuffer resolution to the rendering device's native resolution. examples binding the layer to a webgl context this snippet, taken from drawing a frame in movement, orientation, and motion: a webxr example, shows how the xrwebgllayer is obtained from the xrsession object's rendering state and is then bound as the current rendering webgl framebuffer by calling the webgl bindframebuffer() function. let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); rendering every view in a frame each time the gpu is ready to render...

Using the slider role - Accessibility
ursday", "friday", "saturday"]; var updateslider = function (newvalue) { var handle = document.getelementbyid("day-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-valuemax aria-valuenow aria-valuetext aria-orientation related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the slider role ...

Using ARIA: Roles, states, and properties - Accessibility
main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls...

ARIA: listbox role - Accessibility
tion. it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free. elements with the role listbox have an implicit aria-orientation value of vertical. when a list is tabbed to, the first item in the list will be selected if nothing else already is. up/down arrows navigate the list, and pressing shift + up/down arrows will move and extend the selection. typing one or more letters will navigate the list items (same letter goes to each item starting with that, different letters go to the first item starting with that entire str...

Accessibility and Spacial Patterns - Accessibility
set up in the brain. these oscillations in the brain are a different kind of response than other kinds of neurological responses believed to cause photosensitive seizures. stripes and patterns are typical of the kinds of images that create problems, and stripes have been studied most closely. there's the potential for causing harm if there are more than five light-dark pairs of stripes in any orientation. they can be parallel, radial, curved or straight, and may be formed by rows of repeating elements. in 2005, arnold wilkins, john emmett, and graham harding evaluated the guidelines for characterizing patterned images that could precipitate seizures. they revised the guidelines to their fundamental core, and came up with a surprisingly simple, but powerful test. which they published in the ...

Accessibility documentation index - Accessibility
for labeling. list multiple element ids in a space delimited fashion.this idea is similar to how the "for" attribute is used to link a label to an input.assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. without an element id, the assistive technology cannot catalog the object. 23 using the aria-orientation attribute aria, accessibility, attribute the aria-orientation attribute is used to indicate whether an element is oriented horizontally or vertically. 24 using the aria-relevant attribute aria, accessibility, needsexample, arialive, attri the aria-relevant attribute is an optional value used to describe what types of changes have occurred to an aria-live region, and...

Mobile accessibility checklist - Accessibility
cag 2.1: label in name. all form controls must have labels (<label> elements) for the benefit of screen reader users. handling state standard controls such as radio buttons and checkboxes are handled by the operating system. however, for other custom controls state changes must be provided via aria states such as aria-checked, aria-disabled, aria-selected, aria-expanded, and aria-pressed. orientation content should not be restricted to a single orientation, such as portrait or landscape, unless essential. wcag 2.1: orientation examples of when an orientation is esssential is a piano application or a bank cheque. general guidelines an app title must be provided. headings must not break hierarchical structure <h1>top level heading</h1> <h2>secondary heading</h2> <h2>a...

Perceivable - Accessibility
some users might not be able to swipe the screen, either due to disability or because their device does not support touch. an alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means. note: conveying instructions solely by color is related, but covered in a different guideline — 1.4.1. 1.3.4 orientation (aa) added in 2.1 content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. understanding orientation 1.3.5 identify input purpose (aa) added in 2.1 follow the list of 53 input fields to programmatically identify the purpose of a field. understandin...

-moz-orient - CSS: Cascading Style Sheets
syntax the -moz-orient property is specified as one of the keyword values chosen from the list below. values inline the element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes. block the element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes. horizontal the element is rendered horizontally. vertical the element is rendered vertically. ...

-webkit-border-before - CSS: Cascading Style Sheets
ore: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color. it maps to a physical border depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element. this property is on the standard track as border-block-start. syntax values one or more of the...

@import - CSS: Cascading Style Sheets
candidate recommendation extended the syntax to support the @supports syntax. css cascading and inheritance level 3the definition of '@import' in that specification. candidate recommendation ...

@media - CSS: Cascading Style Sheets
hover over elements? added in media queries level 4. inverted-colors is the user agent or underlying os inverting colors? added in media queries level 5. light-level light level of the environment added in media queries level 5. monochrome bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome orientation orientation of the viewport overflow-block how does the output device handle content that overflows the viewport along the block axis? added in media queries level 4. overflow-inline can content that overflows the viewport along the inline axis be scrolled? added in media queries level 4. pointer is the primary input mechanism a pointing device, an...

@page - CSS: Cascading Style Sheets
in the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet. marks adds crop and/or registration marks to the document. bleed specifies the extent beyond the page box at which the page rendering is clipped. description you can't change all css properties with @page. ...

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

CSS Device Adaptation - CSS: Cascading Style Sheets
css device adaptation is a module of css that lets you define the size, zoom factor, and orientation of the viewport. reference at-rules @viewport specifications specification status comment css device adaptation working draft initial definition ...

Ordering Flex Items - CSS: Cascading Style Sheets
ation says the following on this matter: “note: the reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. this allows authors to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order. if you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. the specification continues with a warning not...

Media queries - CSS: Cascading Style Sheets
dia attribute, they define the media to which the style should be applied. media queries in javascript in javascript, you can use the window.matchmedia() method to test the window against a media query. you can also use mediaquerylist.addlistener() to be notified whenever the state of a query changes. with this functionality, your site or app can respond to changes in the device configuration, orientation, or state. you can learn more about programmatically using media queries in testing media queries. reference at-rules @import @media guides using media queries introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions. testing media queries programmatically describes how to use media queries in your javascript...

Visual formatting model - CSS: Cascading Style Sheets
ications. in this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on mdn for further details. the role of the viewport in continuous media, the viewport is the viewing area of the browser window. user agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device. if the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. we most often see this as scrolling in the block dimension — vertically in a horizontal, top-to-bottom language. however, you might design something that requires scrolling in the inline dimension too. box generati...

WebKit CSS extensions - CSS: Cascading Style Sheets
threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u-w -webkit-user-select -epub-word-break -epub-writing-mode supported in non-webkit browsers without a prefix, but not s...

border-block-color - CSS: Cascading Style Sheets
the border-block-color css property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. border-block-color: yellow; border-block-color: #f5f6f7; the border color in the other dimension can be set with border-inline-color which sets border-inline-start-color, and border-inline-end-color. syntax values <'color'> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation...

border-block-end - CSS: Cascading Style Sheets
lor border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-end is specified with one or more of the following, in any order: ...

border-block-start - CSS: Cascading Style Sheets
-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-end, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-start is specified with one or more of the following, in any order: ...

border-block-style - CSS: Cascading Style Sheets
the border-block-style css property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-style'> values */ border-block-style: dashed; border-block-style: dotted; border-block-style: groove; the border style in the other dimension can be set with border-inline-style, which sets border-inline-start-style, and border-inline-end-style. syntax values <'border-style'> the line style of the border. see border-style. formal definition initial valuenon...

border-block-width - CSS: Cascading Style Sheets
the border-block-width css property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-width'> values */ border-block-width: 5px; border-block-width: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednope...

border-block - CSS: Cascading Style Sheets
e place in the style sheet. border-block: 1px; border-block: 2px dotted; border-block: medium dashed blue; border-block can be used to set the values for one or more of border-block-width, border-block-style, and border-block-color setting both the start and end in the block dimension at once. the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-mode, direction, and text-orientation. the borders in the other dimension can be set with border-inline, which sets border-inline-start, and border-inline-end. constituent properties this property is a shorthand for the following css properties: border...

border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the size of t...

border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes the size...

border-inline-color - CSS: Cascading Style Sheets
the border-inline-color css property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. border-inline-color: yellow; border-inline-color: #f5f6f7; the border color in the other dimension can be set with border-block-color which sets border-block-start-color, and border-block-end-color. syntax values <'color'> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typedisc...

border-inline-end - CSS: Cascading Style Sheets
ull request. constituent properties this property is a shorthand for the following css properties: border-inline-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-block-end, and border-inline-start, which define the other borders of the element. initial valueas each of the properties of the shorthand:border-width: as each of the properti...

border-inline-start - CSS: Cascading Style Sheets
onstituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-block-end, and border-inline-end, which define the other borders of the element. values the border-inline-start is specified with one or more of the following, in any order: ...

border-inline-style - CSS: Cascading Style Sheets
the border-inline-style css property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-style'> values */ border-inline-style: dashed; border-inline-style: dotted; border-inline-style: groove; the border style in the other dimension can be set with border-block-style, which sets border-block-start-style, and border-block-end-style. syntax values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies...

border-inline-width - CSS: Cascading Style Sheets
the border-inline-width css property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-width'> values */ border-inline-width: 5px 10px; border-inline-width: 5px; border-inline-width: thick; the border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width. syntax values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall...

border-inline - CSS: Cascading Style Sheets
the border-inline css property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet. border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; the physical borders to which border-inline maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation. the borders in the other dimension can be set with border-block, which sets border-block-start, and border-block-end. initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolor...

border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denotes the si...

border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property. syntax values <length-percentage> ...

box-direction - CSS: Cascading Style Sheets
box-direction: initial; box-direction: unset; syntax the box-direction property is specified as one of the keyword values listed below. values normal the box lays out its contents from the start (the left or top edge). reverse the box lays out its contents from the end (the right or bottom edge). notes the edge of the box designated the start for layout purposes depends on the box's orientation: horizontal left vertical top the edge opposite to the start is designated the end. if the direction is set using the element's dir attribute, then the style is ignored. formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | reverse ...

box-orient - CSS: Cascading Style Sheets
ult. this css property will only apply to html elements with a css display value of box or inline-box. formal definition initial valueinline-axis (horizontal in xul)applies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax horizontal | vertical | inline-axis | block-axis | inherit examples setting horizontal box orientation here, he box-orient property will cause the two <p> sections in the example to display in the same line. html <div class="example"> <p>i will be to the left of my sibling.</p> <p>i will be to the right of my sibling.</p> </div> css div.example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as...

inset-block-end - CSS: Cascading Style Sheets
the inset-block-end css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-end: 3px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end: 10%; /* keyword value */ inset-block-end: auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheritednoperc...

inset-block-start - CSS: Cascading Style Sheets
the inset-block-start css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property. formal definition initial valueautoapplies topositioned ele...

inset-block - CSS: Cascading Style Sheets
the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10% 5%; /* keyword value */ inset-block: auto; /* global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following css properties: inset-block-end inset-blo...

inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /* keyword value */ inset-inline-end: auto; /* global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-end property takes the same values as the left proper...

inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-start property takes the same valu...

inset-inline - CSS: Cascading Style Sheets
the inset-inline css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* keyword value */ inset-inline: auto; /* global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following css properties: ...

inset - CSS: Cascading Style Sheets
it has the same multi-value syntax of the margin shorthand. it is a shorthand that corresponds to the top, right, bottom, and/or left properties. ...

margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation. constituent...

object-fit - CSS: Cascading Style Sheets
background-size ...

object-position - CSS: Cascading Style Sheets
...

padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. /* <length> values */ padding-block: 10px 20px; /* an absolute length */ padding-block: 1em 2em; /* relative to the text size */ padding-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orientatio...

Overview of events and handlers - Developer guides
define a large number of events so it is not practical to list them all. the event reference attempts to maintain a list of the standard events used in modern web browsers. in general, we can distinguish events of different kinds based on the object emitting the event including: the window object, such as due to resizing the browser, the window.screen object, such as due to changes in device orientation, the document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects such as audio and video, when the media stream players change state. although this list is currently incomplete. s...

HTML5 - Developer guides
ood offline-capable web application, you need to know when your application is actually offline. incidentally, you also need to know when your application has returned to an online status again. device access touch events handlers to react to events created by a user pressing touch screens. using geolocation let browsers locate the position of the user using geolocation. detecting device orientation get the information when the device on which the browser runs changes orientation. this can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape). pointer lock api allows locking the pointer to the content, so games and similar application don't lose focus when the poin...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
m the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends). border-inline-start-color and border-inline-end-color these let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. which side this is will vary depending on the writing-mode, direction, and text-orientation properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. for example, if the box's text is being rendered right-to-left, then the border-inline-start-color is applied to the right side of the border. other ways to use color css isn't the only web technology that supports color. there are graphics technologies that are available ...

<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
t, so that the text within is rendered in a different direction. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example). content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no correspondin...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
hile the user is still editing the value of the field. webkit and blink only (safari, chrome, opera, etc.). mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for android only. orient sets the orientation of the range slider. firefox only. results the maximum number of items that should be displayed in the drop-down list of previous search queries. safari only. webkitdirectory a boolean indicating whether or not to only allow the user to choose a directory (or directories, if multiple is also present) autocorrect a safari extension, the autocorrect attribute is ...

CSP: sandbox - HTTP
licy: sandbox; content-security-policy: sandbox <value>; where <value> can optionally be one of the following values: allow-downloads-without-user-activation allows for downloads to occur without a gesture from the user. allow-forms allows the page to submit forms. if this keyword is not used, this operation is not allowed. allow-modals allows the page to open modal windows. allow-orientation-lock allows the page to disable the ability to lock the screen orientation. allow-pointer-lock allows the page to use the pointer lock api. allow-popups allows popups (like from window.open, target="_blank", showmodaldialog). if this keyword is not used, that functionality will silently fail. allow-popups-to-escape-sandbox allows a sandboxed document to open new windows without forcing the...

Feature-Policy: gyroscope - HTTP
syntax feature-policy: gyroscope <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: magnetometer - HTTP
syntax feature-policy: magnetometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Web app manifests
n(s), version, description, and list of all the necessary resources (among other things). can pwa manifest contain comments? it is a json-formatted file, with one exception: it is allowed to contain "//"-style comments. members web manifests can contain the following keys. ...

Codecs used by WebRTC - Web media technologies
interpret this parameter in their sdp, identifying the sub-profile used by the codec. the specific value that is set is not defined; what matters is that the parameter be used at all. this is useful to note, since in rfc 6184 ("rtp payload format for h.264 video"), profile-level-id is entirely optional. other requirements for the purposes of supporting switching between portrait and landscape orientations, there are two methods that can be used. the first is the video orientation (cvo) header extension to the rtp protocol. however, if this isn't signaled as supported in the sdp, then it's encouraged that browsers support display orientation sei messages, though not required. unless signaled otherwise, the pixel aspect ratio is 1:1, indicating that pixels are square. other notes the payload for...

Critical rendering path - Web Performance
evice-width changes when a user rotates their phone between landscape and portrait mode. layout happens every time a device is rotated or browser is otherwise resized. layout performance is impacted by the dom -- the greater the number of 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 creat...

Performance fundamentals - Web Performance
and the system provides "built-in" support for some use cases developers may not think of initially, like different-resolution displays or right-to-left languages. the canvas element offers a pixel buffer directly for developers to draw on. this gives developers pixel-level control over rendering and precise control of framerate, but now the developers need to deal with multiple resolutions and orientations, right-to-left languages, and so forth. developers draw to canvases using either a familiar 2d drawing api, or webgl, a "close to the metal" binding that mostly follows opengl es 2.0. gecko rendering the gecko javascript engine supports just-in-time (jit) compilation. this enables application logic to perform comparably to other virtual machines — such as java virtual machines — and in som...

Web API reference - Web technology reference
n api that allows access to and modification of the current document. it allows manipulation of document node and element. html, xml and svg have extended it to manipulate their specific elements. device apis this set of apis allows access to various hardware features available to web pages and applications. e.g. ambient light sensor api, geolocation api, pointer lock api, proximity api, device orientation api, screen orientation api, vibration api. communication apis these apis let web pages and applications communicate with other pages or devices. e.g. network information api, web notifications. data management apis user data can be stored and managed using this set of apis. e.g. filehandle api, indexeddb. related topics these topics may also be of interest: index of all web api inter...

horiz-adv-x - SVG: Scalable Vector Graphics
the horiz-adv-x attribute indicates the horizontal advance after rendering a glyph in horizontal orientation. three elements are using this attribute: <font>, <glyph>, and <missing-glyph> font for <font> elements, horiz-adv-x specifies the default horizontal advance of a glyph in horizontal orientation. value <number> default value none animatable no <number> this value indicates the horizontal advance of the glyph. glyph, missing-glyph for <glyph> and <missing-glyph> elements, horiz-adv-x specifies the horizontal advance of the glyph in horizontal orientation. value <number> default value <font>ʼs horiz-adv-x value animatable no <number> this value indicates the horizontal advance of the glyph. s...

orient - SVG: Scalable Vector Graphics
e auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed. auto-start-reverse if placed by marker-start, the marker is oriented 180° different from the orientation that would be used if auto where specified. for all other markers, auto-start-reverse means the same as auto. note: this allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. which points outwards from both ends. <angle> this value indicates that the marker is oriented such that the specified angle is that measured between the shape's p...

rotate - SVG: Scalable Vector Graphics
ath. if the value of rotate is auto, the element turns to align its right-hand side in the current direction of motion. if the value is auto-reverse, it turns its left-hand side in the current direction of motion. setting rotate's value to a number specifies a constant rotation, in degrees, that does not change with the animation. the default value of 0 keeps the animated element in its original orientation. examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <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="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 ...

vert-adv-y - SVG: Scalable Vector Graphics
the vert-adv-y attribute indicates the vertical advance after rendering a glyph in vertical orientation. three elements are using this attribute: <font>, <glyph>, and <missing-glyph> font for <font> elements, vert-adv-y specifies the default vertical advance for a glyph in vertical orientation. value <number> default value 1 em as of units-per-em animatable no <number> this value indicates the default vertical advance of the glyph in vertical direction glyph, missing-glyph for <glyph> and <missing-glyph> elements, vert-adv-y specifies the vertical advance for a glyph in vertical orientation. value <number> default value <font>ʼs vert-adv-y value animatable no <number> this value indicates the vertic...

<a> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation ele...

<circle> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following e...

<foreignObject> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification sta...

<g> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any...

<glyph> - SVG: Scalable Vector Graphics
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="no...

<line> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following e...

<mpath> - SVG: Scalable Vector Graphics
dle and end. --> <path id="path1" d="m100,250 c 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- here is a triangle which will be moved about the motion path. it is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. --> <path d="m-25,-12.5 l25,-12.5 l 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg> result specifica...

<path> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order...

<polygon> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following e...

<polyline> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following e...

<rect> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following e...

<svg> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any...

<symbol> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any...

<textPath> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentch...

<use> - SVG: Scalable Vector Graphics
omplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, struct...