Revision 1130861 of Firefox 50 for developers

<p>{{ReleaseChannelInfo("50", "50", "November 2016", "beta")}}</p>

<h2 id="Changes_for_Web_developers">Changes for Web developers</h2>

<ul>
</ul>

<h3 id="HTML">HTML</h3>

<ul>
 <li>The default style of {{HTMLElement("bdo")}} now sets {{cssxref("unicode-bidi")}} with the <code>isolate-override</code> value ({{bug(1249497)}}).</li>
 <li>Setting the {{HTMLElement("track")}} element's {{htmlattrxref("src", "track")}} attribute now works correctly ({{bug(1281418)}}).</li>
 <li>The <code>referrerpolicy</code> attribute on {{HTMLElement("area")}}, {{HTMLElement("a")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}} and&nbsp;{{HTMLElement("link")}} elements is now available by default ({{bug(1223838)}}, {{bug(1264165)}}).</li>
</ul>

<h3 id="CSS">CSS</h3>

<ul>
 <li>Border-radiused corners with dashed and dotted styles are now rendered with the specified style instead of a solid style ({{bug(382721)}}).</li>
 <li>The non-standard {{cssxref(":-moz-full-screen-ancestor")}} pseudo-class selector has been removed ({{bug(1199529)}}).</li>
 <li>The {{cssxref("box-sizing")}}<code>: padding-box</code> has been removed, since it’s no longer a part of the spec and Firefox was the only major browser implementing it ({{bug(1166728)}}).</li>
 <li>The three values <code>isolate</code>, <code>isolate-override</code>, and <code>plaintext</code> of the {{cssxref("unicode-bidi")}} property have been unprefixed ({{bug(1141895)}}).</li>
 <li>In quirks mode, the bullet of a list item now inherits the size of the list, like in standards mode ({{bug(648331)}}).</li>
 <li>The {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} pseudo-classes have changed behavior to not match disabled or read-only inputs ({{bug(1264157)}}).</li>
 <li>The {{cssxref(":any-link")}} pseudo-class is now unprefixed ({{bug(843579)}}).</li>
 <li>The <code>space</code> value for {{cssxref("border-image-repeat")}} has been implemented ({{bug(720531)}}).</li>
</ul>

<h3 id="JavaScript">JavaScript</h3>

<ul>
 <li>The ES2015 {{jsxref("Symbol.hasInstance")}} property has been implemented ({{bug(1054906)}}).</li>
 <li>The ES2017 {{jsxref("Object.getOwnPropertyDescriptors()")}} method has been implemented ({{bug(1245024)}}).</li>
 <li>The behavior of \W in {{jsxref("RegExp")}} with unicode and ignoreCase flags is changed to match recent draft spec. Now it doesn't match to K, S, k, s, and KELVIN SIGN (U+212A), and&nbsp;LATIN SMALL LETTER LONG S (U+017F) ({{bug(1281739)}}).</li>
</ul>

<h3 id="Developer_Tools">Developer Tools</h3>

<ul>
 <li>The box model panel was moved into the <em>Computed</em> side panel ({{bug(1247729)}}).</li>
</ul>

<h3 id="HTTP">HTTP</h3>

<ul>
 <li>The experimental (and deprecated) <a href="https://en.wikipedia.org/wiki/SPDY">SPDY</a> 3.1 is now disabled by default {{bug(1287132)}}.</li>
 <li>Support for {{HTTPHeader("X-Content-Type-Options")}} has been added ({{bug(471020)}}).</li>
 <li>The cookie prefixes <strong><code>__Host-</code></strong> and <strong><code>__Secure-</code></strong> have been implemented. See {{HTTPHeader("Set-Cookie")}} and {{bug(1283368)}}.</li>
 <li>The {{HTTPHeader("Referrer-Policy")}} header has been implemented {{bug(1264164)}}.</li>
</ul>

<h3 id="Security">Security</h3>

<ul>
 <li>The {{htmlattrxref("ping", "a")}} attribute of {{htmlelement("a")}} element now abides by the <code><a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives#connect-src">connect-src</a></code> <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives">CSP 1.1 policy directive</a> ({{bug(1100181)}}).</li>
 <li>Support for the <code><a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives#sandbox">sandbox</a></code> <a href="/en-US/docs/Web/Security/CSP">CSP</a> directive has been added ({{bug(671389)}}).</li>
 <li>It's now possible to set a <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Content_security_policy">content security policy for workers</a> ({{bug (959388)}}).</li>
 <li>The {{domxref("Navigator.sendBeacon()")}} method no longer throws an exception if the beacon data couldn't be sent due to a <a href="/en-US/docs/Web/Security/CSP">Content Security Policy</a> restriction; instead, it returns <code>false</code> as expected ({{bug(1234813)}}).</li>
</ul>

<h3 id="Networking">Networking</h3>

<ul>
 <li>When a error has happened during an asynchronous {{domxref("XMLHttpRequest")}}, the {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} method now returns an empty string ({{bug(1286744)}}).</li>
 <li>Instead of returning a <code>NetworkError</code>, asynchronous {{domxref("XMLHttpRequest")}} that fails for CORS or other network constraints now raises an {{event("error")}} that can be catched like any other error ({{bug(709991)}}).</li>
 <li>{{domxref("XMLHttpRequest.getResponseHeader()")}} and {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} now also return empty headers by default. This can be controlled via the preference <code>network.http.keep_empty_response_headers_as_empty_string</code> ({{bug(918721)}}).</li>
 <li>The <code>only-if-cached</code> option has been added to <code><a href="/en-US/docs/Web/API/Request/cache">Request.cache</a></code> ({{bug(1272436)}}).</li>
</ul>

<h3 id="DOM">DOM</h3>

<ul>
 <li>The <code>once</code>&nbsp;option for {{domxref("EventTarget.addEventListener()")}} is now supported ({{bug(1287706)}}).</li>
 <li>The interface {{domxref("NodeList")}} are now iterable and the methods {{domxref("NodeList.forEach()", "forEach()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.entries()")}} and {{domxref("NodeList.keys()")}} are now available ({{bug(1290636)}}).</li>
 <li>The interface {{domxref("DOMTokenList")}} are now iterable and the methods {{domxref("DOMTokenList.forEach()", "forEach()")}}, {{domxref("DOMTokenList.values()", "values()")}}, {{domxref("DOMTokenList.entries()")}} and {{domxref("DOMTokenList.keys()")}} are now available ({{bug(1290636)}}).</li>
 <li>The methods {{domxref("Document.createElement()")}} and {{domxref("Document.createElementNS()")}} now have an optional <code>options</code> parameter for creating <a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom elements</a> ({{bug(1276579)}}).</li>
</ul>

<h3 id="SVG">SVG</h3>

<ul>
 <li>The <code>allowReorder</code> attribute has been dropped and the behavior it was setting is now the default for SVG {{SVGElement("switch")}} elements ({{bug(1279690)}}).</li>
 <li>The <code>defer</code> keyword for the {{SVGAttr("preserveAspectRatio")}} attribute on SVG {{SVGElement("image")}} elements has been removed to follow the latest SVG2 specification ({{bug(1280425)}}).</li>
</ul>

<h3 id="Drag_and_Drop_API">Drag and Drop API</h3>

<ul>
 <li>The {{domxref("DataTransfer.items")}} property has been implemented, allowing access to multiple items being dragged and dropped using the HTML Drag and Drop API. To allow this, the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces are now supported as well ({{bug(906420)}}). This is enabled by default.</li>
 <li>The old, obsolete Firefox specific drag and drop API events <code>dragdrop</code> and <code>draggesture</code> are no longer supported. Be sure to update any code still using them to use the <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML drag and drop API</a> ({{bug(1162050)}}.</li>
</ul>

<h3 id="Pointer_Lock_API">Pointer Lock API</h3>

<ul>
 <li>The <a href="/en-US/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> is now unprefixed ({{bug(991899)}}).</li>
 <li>Before Firefox 50, <code><a href="/en-US/docs/Web/API/Element/requestPointerLock">requestPointerLock()</a></code> asked for permission using a doorhanger, and pointer lock would not be enabled until the user granted permission. From Firefox 50, pointer lock is like the <a href="/en-US/docs/Web/API/Fullscreen_API">fullscreen API</a>: it's granted immediately, but a notification is displayed explaining to the user how to exit ({{bug(1273351)}}).</li>
</ul>

<h3 id="IndexedDB">IndexedDB</h3>

<ul>
 <li>A {{event("close")}} event is now sent to the {{domxref("IDBDatabase")}} object when the corresponding database is unexpectedly closed ({{bug(1151017)}}).</li>
</ul>

<h3 id="Service_Workers">Service Workers</h3>

<ul>
 <li>The {{domxref("WindowClient.navigate()")}} method has been implemented. This method lets you open a specified URL into a client window which is being controlled by the service worker ({{bug(1218148)}}).</li>
</ul>

<h3 id="WebGL">WebGL</h3>

<ul>
 <li>The {{domxref("EXT_shader_texture_lod")}} WebGL extension has been implemented ({{bug(1111689)}}).</li>
 <li>The texImage methods have been updated for <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> to implement PBOs (<code>PIXEL_UNPACK_BUFFER</code>) ({{bug(1280499)}}).</li>
</ul>

<h3 id="WebRTC">WebRTC</h3>

<ul>
 <li>Adding a track to a {{domxref("MediaStream")}} now generates the {{event("addtrack")}} event as described in the specification. The event is of type {{domxref("MediaStreamTrackEvent")}} and is fired on the stream to which the track was added. You can use either {{domxref("EventTarget.addEventListener", "MediaStream.addEventListener('addtrack', ...)")}} or the {{domxref("MediaStream.onaddtrack")}} property to handle <code>"addtrack"</code> events.</li>
 <li>The {{domxref("MediaStreamTrack")}} interface now supports the {{event("ended")}} event and the {{domxref("MediaStreamTrack.onended")}} event handler.</li>
 <li>Firefox now supports the {{domxref("MediaStreamTrack.readyState")}} property, which indicates whether the track is live or permanently ended.</li>
 <li>The {{domxref("MediaStreamTrack")}} methods {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} and {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} have been implemented; these let you get the most recently applied set of customized property constraints and the actual values of all of the track's constrainable properties, respectively. The accompanying data types have been documented as well.</li>
 <li>The {{domxref("RTCDataChannel.stream")}} property has been removed. This was replaced with {{domxref("RTCDataChannel.id")}} in <a href="/en-US/docs/Mozilla/Firefox/Releases/24">Firefox 24</a>, but was supported for backward compatibility. Please be sure to update your code to use the <code>id</code> property if you haven't done so yet.</li>
</ul>

<h3 id="Web_Audio_API">Web Audio API</h3>

<ul>
 <li>The {{domxref("PannerNode")}} interface now supports the 3D Cartesian space properties for the position ({{domxref("PannerNode.positionX")}}, {{domxref("PannerNode.positionY")}}, and {{domxref("PannerNode.positionZ")}}) and directionality ({{domxref("PannerNode.orientationX")}}, {{domxref("PannerNode.orientationY")}}, {{domxref("PannerNode.orientationZ")}}) of an audio source.</li>
 <li>The interface {{domxref("IIRFilterNode")}}, which implements&nbsp;a general {{interwiki("wikipedia", "infinite impulse response")}} (IIR) filter, has been implemented.</li>
 <li>Throttling in background tabs of timers created by {{domxref("WindowTimers.setInterval", "Window.setInterval()")}} and {{domxref("WindowTimers.setTimeout", "Window.setTimeout()")}} no longer occurs if a <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ({{bug(1181073)}}).</li>
</ul>

<h3 id="AudioVideo">Audio/Video</h3>

<ul>
 <li>The <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly previously included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected ({{bug(1276130)}}).</li>
 <li>The non-standard and experimental method {{domxref("HTMLMediaElement.seekToNextFrame()")}} now seeks to the next frame in the media asynchronously, rather than synchronously, and returns a {{jsxref("Promise")}} which resolves once the seek is complete.</li>
 <li>The implementation of {{domxref("HTMLTrackElement")}} has been corrected to allow {{HTMLElement("track")}} elements to load resources even if not in a document ({{bug(871747)}}).</li>
</ul>

<h3 id="Battery_API">Battery API</h3>

<ul>
 <li>The {{domxref("navigator.battery")}} property, which has been deprecated since Firefox 43, is now obsolete and has been removed. Use the {{domxref("navigator.getBattery()")}} method instead to get a battery {{jsxref("Promise")}}, which will resolve when the {{domxref("BatteryManager")}} is available for use; the {{domxref("BatteryManager")}} is passed into the fulfillment handler for the promise ({{bug(12593355)}}).</li>
</ul>

<h3 id="Files_and_directories">Files and directories</h3>

<ul>
 <li>A subset of the <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a> has been implemented, to improve compatibility with sites that were previously only compatible with Google Chrome ({{bug(1265767)}}).

  <ul>
   <li>The asynchronous API interfaces have been implemented, with the caveat that only reading of files is supported; for example, the {{domxref("FileSystemFileEntry.createWriter()")}} method is a no-op.</li>
   <li>These interfaces have been implemented:
    <ul>
     <li>{{domxref("FileSystem")}}</li>
     <li>{{domxref("FileSystemEntry")}} (properties only; the methods have not been implemented)</li>
     <li>{{domxref("FileSystemFileEntry")}} (except for {{domxref("FileSystemFileEntry.createWriter", "createWriter()")}})</li>
     <li>{{domxref("FileSystemDirectoryEntry")}} (except for {{domxref("FileSystemDirectoryEntry.removeRecursively", "removeRecursively()")}})</li>
     <li>{{domxref("FileSystemDirectoryReader")}}</li>
    </ul>
   </li>
   <li>{{domxref("HTMLInputElement.webkitdirectory")}} as well as the {{HTMLattrxref("webkitdirectory", "input")}} attribute of the {{HTMLElement("input")}} element have been implemented; this lets you configure a file input to accept directories instead of files ({{bug(1258489)}}).</li>
   <li>{{domxref("HTMLInputElement.webkitEntries")}} has been implemented; this returns an array of {{domxref("FileSystemEntry")}}-based objects representing the selected items.</li>
   <li>{{domxref("File.webkitRelativePath")}} has been implemented; this contains the path of the file relative to the root of the containing {{domxref("FileSystemDirectoryEntry")}} that was among the items in the list returned by {{domxref("HTMLInputElement.webkitGetEntries()")}}.</li>
   <li>See <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a> for details about what we do and do not support in this API.</li>
   <li>These APIs are now enabled by default; some were previously available but only behind a preference ({{bug(1288683)}}).</li>
  </ul>
 </li>
 <li>We've implemented {{domxref("DataTransferItem.webkitGetAsEntry()")}} as part of the <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a>; this lets you obtain a {{domxref("FileSystemEntry")}} representing a dropped file ({{bug(1289255)}}). This is enabled by default.</li>
 <li>The <code>HTMLInputElement.directory</code> property, part of the <a href="https://wicg.github.io/directory-upload/proposal.html">Directory Upload API</a> proposal, has been renamed to <code>allowdirs</code> ({{bug(1288681)}}). This property is hidden behind a preference.</li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="https://www.fxsitecompat.com/en-US/versions/50">Site Compatibility for Firefox 50</a></li>
</ul>

<h2 id="Older_versions">Older versions</h2>

<p>{{Firefox_for_developers(49)}}</p>