summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/custom-elements/form-associated/form-disabled-callback.html
blob: 954c3f3f6eecc95b12ffb235ffe287675f734429 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<title>formDisabledCallback, and :disabled :enabled pseudo classes</title>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/semantics/forms/form-submission-0/resources/targetted-form.js"></script>
<script>
class MyControl extends HTMLElement {
  static get formAssociated() { return true; }

  constructor() {
    super();
    this.internals_ = this.attachInternals();
    this.internals_.setFormValue('my-control-value');
    this.disabledHistory_ = [];
  }

  formDisabledCallback(isDisabled) {
    this.disabledHistory_.push(isDisabled);
  }
  disabledHistory() {
    return this.disabledHistory_;
  }
}
customElements.define('my-control', MyControl);

test(() => {
  const control = new MyControl();
  assert_true(control.matches(':enabled'));
  assert_false(control.matches(':disabled'));

  control.setAttribute('disabled', '');
  assert_false(control.matches(':enabled'));
  assert_true(control.matches(':disabled'));

  control.removeAttribute('disabled', '');
  assert_true(control.matches(':enabled'));
  assert_false(control.matches(':disabled'));

  assert_array_equals(control.disabledHistory(), [true, false]);
}, 'Adding/removing disabled content attribute');

test(() => {
  const container = document.createElement('fieldset');
  container.innerHTML = '<fieldset><fieldset><my-control></my-control></fieldset></fieldset>';
  const middleFieldset = container.firstChild;
  const control = container.querySelector('my-control');

  assert_true(control.matches(':enabled'));
  assert_false(control.matches(':disabled'));

  middleFieldset.disabled = true;
  assert_false(control.matches(':enabled'));
  assert_true(control.matches(':disabled'));

  middleFieldset.disabled = false;
  assert_true(control.matches(':enabled'));
  assert_false(control.matches(':disabled'));

  container.disabled = true;
  assert_false(control.matches(':enabled'));
  assert_true(control.matches(':disabled'));
  control.remove();
  assert_true(control.matches(':enabled'));
  assert_false(control.matches(':disabled'));

  middleFieldset.appendChild(control);
  assert_false(control.matches(':enabled'));
  assert_true(control.matches(':disabled'));

  assert_array_equals(control.disabledHistory(), [true, false, true, false, true]);
}, 'Relationship with FIELDSET');

test(() => {
  const form = document.createElement('form');
  document.body.appendChild(form);
  form.innerHTML = '<my-control name="n1" disabled></my-control><input name="n2">'
  const formData = new FormData(form);
  assert_equals(formData.get('n1'), null);
}, 'A disabled form-associated custom element should not provide an entry for it');

promise_test(async t => {
  let form = populateForm('<my-control name=d disabled></my-control>' +
      '<my-control name=e></my-control>');
  let query = await submitPromise(form, form.previousSibling);
  assert_equals(query.indexOf('d=my-control-value'), -1);
  assert_not_equals(query.indexOf('e=my-control-value'), -1);
}, 'A disabled form-associated custom element should not submit an entry for it');

test(() => {
  const control = new MyControl();
  document.body.appendChild(control);
  control.setAttribute('tabindex', '0');
  control.setAttribute('disabled', '');
  control.focus();
  assert_not_equals(document.activeElement, control);

  control.removeAttribute('disabled');
  control.focus();
  assert_equals(document.activeElement, control);
}, 'Disabled attribute affects focus-capability');

test(() => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  // inneHTML upgrades my-control at its CEReacions timing.
  container.innerHTML = '<my-control disabled>';
  assert_array_equals(container.firstChild.disabledHistory(), [true]);

  container.innerHTML = '<fieldset disabled><my-control>';
  assert_array_equals(container.querySelector('my-control').disabledHistory(), [true]);
}, 'Upgrading an element with disabled content attribute');
</script>
</body>