Update experiments with #73 and #75.

experiment/Conclusions.md

@@ -22,8 +22,10 @@ Platforms tested:
 |`getData()` in listener shows if `setData()` worked|✅|✅|⚠️ ²|❌ ³|✅|
 |Copies all types set with `setData()`|✅|✅|✅|❌ ⁴|✅|
 |`exec` reports success correctly|✅|✅|⚠️ ²|❌ ⁵|✅|
-|`contenteditable` does not break document seleciton|❌|❌|❌|✅|✅|
+|`contenteditable` does not break document selection|❌|❌|❌|✅|✅|
+|`user-select: none` does not break document selection|✅(Cr 64)|❌|❌|✅(Edge 16)|✅ (FF 57)|
 |Can construct `new DataTransfer()`|✅|❌|❌|❌|❌|
+|Writes `CF_HTML` on Windows|✅|N/A|N/A|❌|✅|
 
 † Here, we are only specifically interested in the case where the handler is called directly in response to a user gesture. I didn't test for behaviour when there is no user gesture.
 
@@ -32,6 +34,7 @@ Platforms tested:
 - ³ [Edge Bug #14110451](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14110451/)
 - ⁴ [Edge Bug #14080506](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14080506/)
 - ⁵ [Edge Bug #14080262](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14080262/)
+- ⁵ [Edge Bug #14372529](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14372529/), [GitHub issue #73](https://github.com/lgarron/clipboard-polyfill/issues/73)
 
 ## `supported` always returns true
 
@@ -116,6 +119,20 @@ This fails in Chrome and Safari if the last content in the DOM is the following:
 
     <div contenteditable="true" class="editable"></div>
 
+## `user-select: none` does not break document selection
+
+In Safari, the DOM selection API does not allow Javascript to select parts of the DOM that are not selectable by the user due to `-webkit-user-select: none`.
+
+Reported at https://github.com/lgarron/clipboard-polyfill/issues/75
+
+As a workaround for Safari, it is possible to select an element nested unside an unselectable element that explicitly uses `-webkit-user-select: text` to enable selection. It seems that this [is the specced behaviour](https://drafts.csswg.org/css-ui-4/#valdef-user-select-none), although e.g. [Firefox <21](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) had a different behaviour.
+
+## Writes `CF_HTML` on Windows
+
+In Edge 16 and earlier, `clipboardData.setData("text/html", data)` does not properly write HTML to the clipbard in the Windows `CF_HTML` clipboard format.
+
+Reported at https://github.com/lgarron/clipboard-polyfill/issues/73
+
 ## Can construct `new DataTransfer()` (see issue 6 below)
 
 The new asynchronous clipboard API takes a `DataTranfer` input. However, you can only call the DataTransfer constructor in Chrome right now. (The constructor was made publicly callable specifically for the async clipboard API.)

experiment/experiment.html

@@ -48,6 +48,14 @@ <h2>Test</h2>
 <div contenteditable="true" class="editable"></div>
 <br>
 
+<button onclick='new Test["SelectTempElemUserSelectNone"]().run()'>SelectTempElemUserSelectNone</button>
+<div contenteditable="true" class="editable"></div>
+<br>
+
+<button onclick='new Test["SelectTempElemUserSelectNoneNested"]().run()'>SelectTempElemUserSelectNoneNested</button>
+<div contenteditable="true" class="editable"></div>
+<br>
+
 <button onclick='new Test["CopyTempElem"]().run()'>CopyTempElem</button>
 <div contenteditable="true" class="editable"></div>
 <br>

experiment/experiment.ts

@@ -143,6 +143,66 @@ export class SelectTempElem extends Test {
   }
 }
 
+export class SelectTempElemUserSelectNone extends Test {
+  private tempElem: HTMLElement;
+  setup() {
+    this.tempElem = document.createElement("pre");
+    this.tempElem.style["user-select"] = "none";
+    this.tempElem.style["-webkit-user-select"] = "none";
+    this.tempElem.style["-moz-user-select"] = "none";
+    this.tempElem.style["-ms-user-select"] = "none";
+    this.tempElem.textContent = "SelectTempElemUserSelectNone";
+    document.body.appendChild(this.tempElem);
+    this.select(this.tempElem);
+  }
+  copyListener(e: ClipboardEvent) {
+    console.log("copyListener", "SelectTempElemUserSelectNone");
+    this.results["pre_setData.text_plain"] = e.clipboardData.getData("text/plain");
+    e.clipboardData.setData("text/plain", "SelectTempElemUserSelectNone");
+    this.results["post_setData.text_plain"] = e.clipboardData.getData("text/plain");
+    e.preventDefault();
+  }
+  teardown() {
+    this.clearSelection();
+    document.body.removeChild(this.tempElem);
+  }
+}
+
+export class SelectTempElemUserSelectNoneNested extends Test {
+  private tempElem: HTMLElement;
+  private tempElem2: HTMLElement;
+  setup() {
+
+    this.tempElem2 = document.createElement("pre");
+    this.tempElem2.style["user-select"] = "text";
+    this.tempElem2.style["-webkit-user-select"] = "text";
+    this.tempElem2.style["-moz-user-select"] = "text";
+    this.tempElem2.style["-ms-user-select"] = "text";
+    this.tempElem2.textContent = "SelectTempElemUserSelectNoneNested";
+
+    this.tempElem = document.createElement("pre");
+    this.tempElem.style["user-select"] = "none";
+    this.tempElem.style["-webkit-user-select"] = "none";
+    this.tempElem.style["-moz-user-select"] = "none";
+    this.tempElem.style["-ms-user-select"] = "none";
+    this.tempElem.appendChild(this.tempElem2);
+    document.body.appendChild(this.tempElem);
+
+    this.select(this.tempElem2);
+  }
+  copyListener(e: ClipboardEvent) {
+    console.log("copyListener", "SelectTempElemUserSelectNoneNested");
+    this.results["pre_setData.text_plain"] = e.clipboardData.getData("text/plain");
+    e.clipboardData.setData("text/plain", "SelectTempElemUserSelectNoneNested");
+    this.results["post_setData.text_plain"] = e.clipboardData.getData("text/plain");
+    e.preventDefault();
+  }
+  teardown() {
+    this.clearSelection();
+    document.body.removeChild(this.tempElem);
+  }
+}
+
 export class CopyTempElem extends Test {
   private tempElem: Element;
   setup() {