@operato/styles 10.23.0 → 10.29.9

package/test/page-ground.test.ts

@@ -0,0 +1,180 @@
+import { expect, fixture, html } from '@open-wc/testing'
+import { css, LitElement } from 'lit'
+
+import { ButtonContainerStyles } from '../src/button-container-styles.js'
+import { ButtonStyles } from '../src/button-styles.js'
+import { FormFieldStyles } from '../src/form-field-styles.js'
+import { DocumentPageStyles, WorkSurfacePageStyles } from '../src/page-frame-styles.js'
+
+/*
+ * The ground the page frames lay, and the button and field sizes (operato-application/design/ui/page-standard.md).
+ *
+ * What these stand on: a screen that forgot to set a value used to fall to the browser default -
+ * 16px body text, rgb(0 0 238) links, Korean broken mid-word, cards wider than their header. The
+ * frame now lays the value; a screen that says otherwise still wins. Measured on rendered elements,
+ * not on the stylesheet text.
+ *
+ * The tokens are defined here because a test page has no shell theme.
+ */
+const TOKENS = css`
+  :host {
+    --ui-t-body: 13px;
+    --ui-ink: rgb(27, 27, 27);
+    --ui-accent: rgb(0, 114, 126);
+    --ui-gutter: 16px;
+    --context-action-height: 32px;
+    --cell-action-height: 26px;
+    --form-element-height-medium: 32px;
+    --form-element-height-small: 26px;
+    --md-sys-color-primary: rgb(0, 114, 126);
+    --md-sys-color-surface-container-lowest: rgb(255, 255, 255);
+  }
+`
+
+class DocumentProbe extends LitElement {
+  static styles = [DocumentPageStyles, ButtonStyles, FormFieldStyles, TOKENS]
+  render() {
+    return html`
+      <div class="page">
+        <section class="page-section">
+          <p class="page-section-note">note</p>
+          <div class="page-card" id="card" style="width: 300px; padding: 16px">card</div>
+          <span id="text">text</span>
+          <a id="thing" href="#a">LOT-1</a>
+          <a id="go" class="page-nav-link" href="#b">go</a>
+          <div style="display: grid; grid-template-columns: 400px">
+            <button id="plain">add</button>
+          </div>
+          <button id="raised" raised>save</button>
+          <button id="small" small>hold</button>
+          <input id="field" />
+          <input id="small-field" small />
+          <textarea id="area"></textarea>
+        </section>
+      </div>
+    `
+  }
+}
+customElements.define('document-probe', DocumentProbe)
+
+class SurfaceProbe extends LitElement {
+  static styles = [WorkSurfacePageStyles, TOKENS]
+  render() {
+    return html`<div class="page-headroom"><span>range</span></div>`
+  }
+}
+customElements.define('surface-probe', SurfaceProbe)
+
+class OwnRuleProbe extends LitElement {
+  static styles = [
+    DocumentPageStyles,
+    ButtonStyles,
+    TOKENS,
+    css`
+      :host {
+        font-size: 15px;
+      }
+      button {
+        height: 48px;
+      }
+      a {
+        color: rgb(255, 0, 0);
+      }
+    `
+  ]
+  render() {
+    return html`<span id="text">t</span><button id="own">x</button><a id="a" href="#">a</a>`
+  }
+}
+customElements.define('own-rule-probe', OwnRuleProbe)
+
+const style = (el: Element) => getComputedStyle(el)
+
+describe('page frame ground', () => {
+  it('body text is the body token, not the browser 16px', async () => {
+    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe
+    expect(style(el.shadowRoot!.querySelector('#text')!).fontSize).to.equal('13px')
+  })
+
+  it('a link to a thing reads as text; a link to a screen takes the accent; neither underlines at rest', async () => {
+    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe
+    const thing = style(el.shadowRoot!.querySelector('#thing')!)
+    const go = style(el.shadowRoot!.querySelector('#go')!)
+    expect(thing.color).to.equal('rgb(27, 27, 27)')
+    expect(thing.textDecorationLine).to.equal('none')
+    expect(go.color).to.equal('rgb(0, 114, 126)')
+  })
+
+  it('Korean wraps at words, and a word with no break point still breaks', async () => {
+    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe
+    const text = style(el.shadowRoot!.querySelector('#text')!)
+    expect(text.wordBreak).to.equal('keep-all')
+    expect(text.overflowWrap).to.equal('anywhere')
+  })
+
+  it('padding stays inside the width (a card is not wider than it was told)', async () => {
+    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe
+    expect(el.shadowRoot!.querySelector('#card')!.getBoundingClientRect().width).to.equal(300)
+  })
+
+  it('the document column is not held to 1080px, and its side gutters are equal', async () => {
+    const el = (await fixture(html`<document-probe style="display: block; width: 1600px"></document-probe>`)) as DocumentProbe
+    const page = el.shadowRoot!.querySelector('.page')!
+    expect(style(page).maxWidth).to.equal('none')
+    expect(page.getBoundingClientRect().width).to.equal(1600)
+    expect(style(page).paddingLeft).to.equal('16px')
+    expect(style(page).paddingRight).to.equal('16px')
+  })
+
+  it('the work surface headroom uses the same gutter', async () => {
+    const el = (await fixture(html`<surface-probe></surface-probe>`)) as SurfaceProbe
+    expect(style(el.shadowRoot!.querySelector('.page-headroom')!).paddingLeft).to.equal('16px')
+  })
+
+  it("a screen's own rule still wins over the ground", async () => {
+    const el = (await fixture(html`<own-rule-probe></own-rule-probe>`)) as OwnRuleProbe
+    expect(style(el.shadowRoot!.querySelector('#text')!).fontSize).to.equal('15px')
+    expect(style(el.shadowRoot!.querySelector('#own')!).height).to.equal('48px')
+    expect(style(el.shadowRoot!.querySelector('#a')!).color).to.equal('rgb(255, 0, 0)')
+  })
+})
+
+describe('buttons and fields', () => {
+  it('a button is as tall as its place and as wide as its label - it does not stretch to a grid track', async () => {
+    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe
+    const plain = el.shadowRoot!.querySelector('#plain')!
+    expect(style(plain).height).to.equal('32px')
+    expect(style(plain).fontSize).to.equal('13px')
+    expect(style(plain).fontWeight).to.equal('600')
+    expect(plain.getBoundingClientRect().width).to.be.below(100)
+    expect(style(el.shadowRoot!.querySelector('#small')!).height).to.equal('26px')
+  })
+
+  it('a raised button is filled, a plain one is not', async () => {
+    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe
+    const raised = style(el.shadowRoot!.querySelector('#raised')!).backgroundColor
+    const plain = style(el.shadowRoot!.querySelector('#plain')!).backgroundColor
+    expect(raised).to.not.equal(plain)
+  })
+
+  it('one-line fields take the form height; a small one the cell height; a textarea keeps its own', async () => {
+    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe
+    expect(style(el.shadowRoot!.querySelector('#field')!).height).to.equal('32px')
+    expect(style(el.shadowRoot!.querySelector('#small-field')!).height).to.equal('26px')
+    expect(style(el.shadowRoot!.querySelector('#area')!).height).to.not.equal('32px')
+  })
+})
+
+describe('ButtonContainerStyles', () => {
+  /*
+   * dssp draws 26 of its own pages with this block. ButtonStyles was taken out next to it, not out of
+   * it: the CSS this block emits must stay byte for byte what 10.29.1 published.
+   * sha-256 of ButtonContainerStyles.cssText in the published 10.29.1 (2026-10-05).
+   */
+  it('emits the same CSS as the published 10.29.1', async () => {
+    const bytes = new TextEncoder().encode(ButtonContainerStyles.cssText)
+    const digest = await crypto.subtle.digest('SHA-256', bytes)
+    const hex = [...new Uint8Array(digest)].map(b => b.toString(16).padStart(2, '0')).join('')
+    expect(hex).to.equal('bcab002afc1a4521cd7da312cacba2bcd594cfe0e3dcd6c1d62a388adfd25203')
+  })
+})