web-platform-tests · chromium-wpt-export-bot · Dec 14, 2024 · Dec 14, 2024
diff --git a/html/semantics/forms/the-select-element/customizable-select/border-rendering-ref.html b/html/semantics/forms/the-select-element/customizable-select/border-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button>
+  <span class=customizable-select-selectedcontent>Option 1</span>
+</div>
+
+<style>
+.customizable-select-button {
+  border: 7px solid cornflowerblue;
+}
+</style>
diff --git a/html/semantics/forms/the-select-element/customizable-select/border-rendering.tentative.html b/html/semantics/forms/the-select-element/customizable-select/border-rendering.tentative.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta name=fuzzy content="maxDifference=0-56;totalPixels=0-9">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=match href="border-rendering-ref.html">
+
+<style>
+select {
+  appearance: base-select;
+  border: 7px solid cornflowerblue;
+}
+</style>
+
+<select>
+  <option>Option 1</option>
+</select>
diff --git a/...ntics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div-ref.html b/...ntics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <option>one</option>
+  <hr>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  document.activeElement.blur();
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/...forms/the-select-element/customizable-select/native-popup-with-wrapper-div.tentative.html b/...forms/the-select-element/customizable-select/native-popup-with-wrapper-div.tentative.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=match href="native-popup-with-wrapper-div-ref.html">
+<link rel=assert title="The native popup of a select should show options descending from a wrapper div">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <div>
+    <option>one</option>
+    <hr>
+    <option>two</option>
+  </div>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  document.activeElement.blur();
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted-ref.html b/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+select::picker(select) {
+  border: thick solid blue;
+  background: lime;
+  color: maroon;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+
+(async () => {
+  await test_driver.bless();
+  document.querySelector('select').showPicker();
+  document.documentElement.classList.remove('reftest-wait');
+})();
+
+</script>
diff --git a/.../semantics/forms/the-select-element/customizable-select/picker-and-slotted.tentative.html b/.../semantics/forms/the-select-element/customizable-select/picker-and-slotted.tentative.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=match href="picker-and-slotted-ref.html">
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<div id="host">
+  <select>
+    <option>one</option>
+    <option>two</option>
+  </select>
+</div>
+
+<script>
+
+let host = document.getElementById("host");
+let shadow = host.attachShadow({mode: "open"});
+shadow.innerHTML = `
+  <style>
+    #myslot::slotted(select), #myslot::slotted(select)::picker(select) {
+      appearance: base-select;
+    }
+    #myslot::slotted(select)::picker(select) {
+      border: thick solid blue;
+      background: lime;
+      color: maroon;
+    }
+  </style>
+  <slot id="myslot"></slot>
+`;
+
+
+(async () => {
+  await test_driver.bless();
+  document.querySelector('select').showPicker();
+  document.documentElement.classList.remove('reftest-wait');
+})();
+
+</script>
diff --git a/...ics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/...ics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -0,0 +1,82 @@
+/* These are UA styles for select and customizable select. */
+/* TODO(crbug.com/41483940): These rules will probably change here:
+ * https://github.com/w3c/csswg-drafts/issues/10857 */
+
+.customizable-select-button, .customizable-select-popover {
+  box-sizing: border-box;
+}
+
+.customizable-select-popover {
+  box-sizing: border-box;
+  border: 1px solid;
+  padding: 0;
+  color: CanvasText;
+  background-color: Canvas;
+  margin: 0;
+  inset: auto;
+  min-inline-size: anchor-size(self-inline);
+  min-block-size: 1lh;
+  max-block-size: -webkit-fill-available; /* Can be removed when stretch ships */
+  max-block-size: stretch;
+  overflow: auto;
+  position-area: block-end span-inline-end;
+  position-try-order: most-block-size;
+  position-try-fallbacks:
+    block-start span-inline-end,
+    block-end span-inline-start,
+    block-start span-inline-start;
+}
+
+.customizable-select-option {
+  min-inline-size: 24px;
+  min-block-size: max(24px, 1lh);
+  padding-inline: 0.5em;
+  padding-block-end: 0;
+  display: flex;
+  place-items: center;
+  gap: 0.5em;
+  white-space: nowrap;
+}
+
+.customizable-select-option.disabled {
+  color: color-mix(in lab, currentColor 50%, transparent);
+}
+
+.customizable-select-option::before {
+  content: '\2713' / '';
+}
+.customizable-select-option:not(.selected)::before {
+  visibility: hidden;
+}
+
+.customizable-select-button {
+  color: inherit;
+  background-color: color-mix(in lab, currentColor 10%, transparent);
+  appearance: none;
+  padding-block: 0.25em;
+  padding-inline: 0.5em;
+  border: 1px solid currentColor;
+  border-radius: 0.25em;
+  cursor: default;
+  text-align: inherit;
+  /* TODO(crbug.com/41483940): Make display match the UA stylesheet. */
+  display: inline-flex;
+  gap: 0.5em;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
+   * https://github.com/openui/open-ui/issues/1026
+   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
+  min-inline-size: 24px;
+  min-block-size: max(24px, 1lh);
+}
+
+.customizable-select-button::after {
+  content: counter(fake-counter-name, disclosure-open);
+}
+
+.customizable-select-legend {
+  font-weight: bolder;
+  padding-inline: 0.5em;
+  min-block-size: 1lh;
+}
diff --git a/...ntics/forms/the-select-element/customizable-select/resources/customizable-select-utils.js b/...ntics/forms/the-select-element/customizable-select/resources/customizable-select-utils.js
@@ -0,0 +1,8 @@
+function populateFallbackButtonIcon() {
+  document.querySelectorAll('.customizable-select-button-icon').forEach(element => {
+    element.innerHTML =
+      `<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 6 L10 12 L 16 6"></path>
+      </svg>`;
+  });
+}
diff --git a/html/semantics/forms/the-select-element/customizable-select/resources/fallback-helper.js b/html/semantics/forms/the-select-element/customizable-select/resources/fallback-helper.js
@@ -0,0 +1,102 @@
+const testSelectOptionText = `Long options, wider than select`;
+const frameWidth = 500;
+const frameHeight = 300;
+
+async function createFrameWithContent(content) {
+  const frame = document.createElement('iframe');
+  frame.width = frameWidth;
+  frame.height = frameHeight;
+  frame.srcdoc = content;
+  const loaded = new Promise(resolve => frame.addEventListener('load',resolve));
+  document.body.appendChild(frame);
+  await loaded;
+  return frame.contentDocument;
+}
+
+async function wait2Frames(doc) {
+  await new Promise(resolve => doc.defaultView.requestAnimationFrame(resolve));
+  await new Promise(resolve => doc.defaultView.requestAnimationFrame(resolve));
+}
+
+async function scroll(doc,x,y) {
+  await wait2Frames(doc);
+  doc.defaultView.scrollTo({left: x, top: y, behavior: "instant"});
+  await wait2Frames(doc);
+}
+
+async function capture(doc) {
+  await wait2Frames(doc);
+  document.documentElement.classList.remove('reftest-wait');
+}
+
+const commonStyleBlock = `
+  html {
+    scrollbar-width: none;
+  }
+  body {
+    width: 2000px;
+    height: 2000px;
+    /* Workaround for crbug.com/364669904. Shouldn't negatively affect other
+       implementations or the validity of this test. */
+    background: white;
+  }
+  .select {
+    position: relative;
+    top: 1000px;
+    left: 600px;
+  }
+  .select,::picker(select) {
+    appearance:base-select;
+  }
+`;
+
+async function generateTestFrame(numOptions,initialx,initialy) {
+  const singleOption = `<option>${testSelectOptionText}</option>`
+  const options = Array(numOptions).fill(singleOption).join('\n');
+  const content = `
+    <!DOCTYPE html>
+    <head>
+      <style>
+        ${commonStyleBlock}
+      </style>
+    </head>
+
+    <select class="select">
+      <option value="" selected>Select</option>
+      ${options}
+    </select>
+  `;
+  const doc = await createFrameWithContent(content);
+
+  await scroll(doc,initialx,initialy);
+  await test_driver.bless();
+  doc.querySelector('select').showPicker();
+  await capture(doc);
+}
+
+async function generateReferenceFrame(numOptions,initialx,initialy,extraStyleRules) {
+  const singleOption = `<div tabindex=0 class="customizable-select-option">${testSelectOptionText}</div>`
+  const options = Array(numOptions).fill(singleOption).join('\n');
+  const content = `
+    <!DOCTYPE html>
+    <head>
+      <link rel=stylesheet href="resources/customizable-select-styles.css">
+      <style>
+        ${commonStyleBlock}
+        ${extraStyleRules}
+      </style>
+    </head>
+
+    <div class="select customizable-select-button" id=button style="anchor-name:--button">
+      <span class=customizable-select-selectedoption>Select</span>
+    </div>
+    <div id=popover popover=auto anchor=button class=customizable-select-popover style="position-anchor:--button">
+      <div tabindex=0 autofocus class="customizable-select-option selected">Select</div>
+      ${options}
+    </div>
+  `;
+  const doc = await createFrameWithContent(content);
+  await scroll(doc,initialx,initialy);
+  doc.getElementById('popover').showPopover();
+  await capture(doc);
+}
diff --git a/.../semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html b/.../semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedoption>option</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div class="customizable-select-option selected">option</div>
+</div>
+
+<style>
+.customizable-select-button {
+  background-color: color-mix(in lab, currentColor 30%, transparent);
+}
+</style>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/...tics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html b/...tics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-29;totalPixels=0-1">
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10909">
+<link rel=match href="select-appearance-active-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>option</option>
+</select>
+
+<script>
+(async () => {
+  const select = document.querySelector('select');
+  await (new test_driver.Actions()
+    .pointerMove(1, 1, {origin: select})
+    .pointerDown())
+    .send();
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>