Skip to content

Commit

Permalink
Update experiments with #73 and #75.
Browse files Browse the repository at this point in the history
  • Loading branch information
lgarron committed Feb 9, 2018
1 parent 23bb29e commit 43567bc
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 1 deletion.
19 changes: 18 additions & 1 deletion experiment/Conclusions.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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

Expand Down Expand Up @@ -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.)
Expand Down
8 changes: 8 additions & 0 deletions experiment/experiment.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
59 changes: 59 additions & 0 deletions experiment/experiment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,65 @@ export class SelectTempElem extends Test {
}
}

export class SelectTempElemUserSelectNone extends Test {
private tempElem: Element;
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: Element;
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() {
Expand Down

0 comments on commit 43567bc

Please sign in to comment.