From f8f02316011317aac6f709f258e24be97b1f1c40 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 15 Feb 2023 16:31:43 -0800
Subject: [PATCH] Implement CSSTransitionDiscrete which enables transitions on
 discrete properties.

This feature enables transitioning discrete properties.

This is based on the resolved CSSWG issue:
- Transition discrete properties: https://github.com/w3c/csswg-drafts/issues/4441

You can test display transitions with this CL on:
https://output.jsbin.com/buquher/quiet

Original patch: http://crrev.com/c/4182089

Bug: 1399631, 1413556
Change-Id: Icf5364b970233186794fa9faaa016e0e6542ec2b
---
 .../discrete-no-interpolation.tentative.html  | 967 ++++++++++++++++++
 .../display-none-no-animations.html           |  28 +
 2 files changed, 995 insertions(+)
 create mode 100644 css/css-transitions/discrete-no-interpolation.tentative.html
 create mode 100644 css/css-transitions/display-none-no-animations.html
diff --git a/css/css-transitions/discrete-no-interpolation.tentative.html b/css/css-transitions/discrete-no-interpolation.tentative.html
new file mode 100644
index 000000000000000..98bc65973a0beb3
--- /dev/null
+++ b/css/css-transitions/discrete-no-interpolation.tentative.html
@@ -0,0 +1,967 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+<meta name=timeout content=long>
+
+<body>
+<script>
+  test_no_interpolation({
+    property: 'align-content',
+    from: 'initial',
+    to: 'baseline'
+  });
+
+  test_no_interpolation({
+    property: 'align-items',
+    from: 'initial',
+    to: 'baseline'
+  });
+  test_no_interpolation({
+    property: 'align-self',
+    from: 'initial',
+    to: 'baseline'
+  });
+
+  test_no_interpolation({
+    property: 'alignment-baseline',
+    from: 'initial',
+    to: 'central'
+  });
+
+  test_no_interpolation({
+    property: 'anchor-name',
+    from: 'initial',
+    to: '--a1'
+  });
+
+  test_no_interpolation({
+    property: 'anchor-scroll',
+    from: 'initial',
+    to: '--a1'
+  });
+
+  test_no_interpolation({
+    property: 'appearance',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'app-region',
+    from: 'initial',
+    to: 'drag'
+  });
+
+  test_no_interpolation({
+    property: 'backface-visibility',
+    from: 'initial',
+    to: 'hidden'
+  });
+
+  test_no_interpolation({
+    property: 'background-attachment',
+    from: 'initial',
+    to: 'fixed'
+  });
+
+  test_no_interpolation({
+    property: 'background-blend-mode',
+    from: 'initial',
+    to: 'overlay'
+  });
+
+  test_no_interpolation({
+    property: 'background-clip',
+    from: 'initial',
+    to: 'content-box'
+  });
+
+  test_no_interpolation({
+    property: 'background-origin',
+    from: 'initial',
+    to: 'border-box'
+  });
+
+  test_no_interpolation({
+    property: 'background-repeat',
+    from: 'initial',
+    to: 'round'
+  });
+
+  test_no_interpolation({
+    property: 'baseline-source',
+    from: 'initial',
+    to: 'last'
+  });
+
+  test_no_interpolation({
+    property: 'border-bottom-style',
+    from: 'initial',
+    to: 'dotted'
+  });
+
+  test_no_interpolation({
+    property: 'border-collapse',
+    from: 'initial',
+    to: 'collapse'
+  });
+
+  test_no_interpolation({
+    property: 'border-image-repeat',
+    from: 'initial',
+    to: 'round'
+  });
+
+  test_no_interpolation({
+    property: 'border-left-style',
+    from: 'initial',
+    to: 'dotted'
+  });
+
+  test_no_interpolation({
+    property: 'border-right-style',
+    from: 'initial',
+    to: 'dotted'
+  });
+
+  test_no_interpolation({
+    property: 'border-top-style',
+    from: 'initial',
+    to: 'dotted'
+  });
+
+  test_no_interpolation({
+    property: 'box-sizing',
+    from: 'initial',
+    to: 'border-box'
+  });
+
+  test_no_interpolation({
+    property: 'break-after',
+    from: 'initial',
+    to: 'avoid'
+  });
+
+  test_no_interpolation({
+    property: 'break-before',
+    from: 'initial',
+    to: 'avoid'
+  });
+
+  test_no_interpolation({
+    property: 'break-inside',
+    from: 'initial',
+    to: 'avoid'
+  });
+
+  test_no_interpolation({
+    property: 'buffered-rendering',
+    from: 'initial',
+    to: 'static'
+  });
+
+  test_no_interpolation({
+    property: 'caption-side',
+    from: 'initial',
+    to: 'bottom'
+  });
+
+  test_no_interpolation({
+    property: 'clear',
+    from: 'initial',
+    to: 'both'
+  });
+
+  test_no_interpolation({
+    property: 'clip-rule',
+    from: 'initial',
+    to: 'evenodd'
+  });
+
+  test_no_interpolation({
+    property: 'color-interpolation',
+    from: 'initial',
+    to: 'auto'
+  });
+
+  test_no_interpolation({
+    property: 'color-interpolation-filters',
+    from: 'initial',
+    to: 'auto'
+  });
+
+  test_no_interpolation({
+    property: 'color-rendering',
+    from: 'initial',
+    to: 'optimizespeed'
+  });
+
+  test_no_interpolation({
+    property: 'color-scheme',
+    from: 'initial',
+    to: 'dark'
+  });
+
+  test_no_interpolation({
+    property: 'column-fill',
+    from: 'initial',
+    to: 'auto'
+  });
+
+  test_no_interpolation({
+    property: 'column-rule-style',
+    from: 'initial',
+    to: 'dashed'
+  });
+
+  test_no_interpolation({
+    property: 'column-span',
+    from: 'initial',
+    to: 'all'
+  });
+
+  test_no_interpolation({
+    property: 'content',
+    from: 'initial',
+    to: '"b"'
+  });
+
+  test_no_interpolation({
+    property: 'counter-increment',
+    from: 'initial',
+    to: 'add 123'
+  });
+
+  test_no_interpolation({
+    property: 'counter-reset',
+    from: 'initial',
+    to: 'add 123'
+  });
+
+  test_no_interpolation({
+    property: 'counter-set',
+    from: 'initial',
+    to: 'add 123'
+  });
+
+  test_no_interpolation({
+    property: 'cursor',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'display',
+    from: 'initial',
+    to: 'flow-root'
+  });
+
+  test_no_interpolation({
+    property: 'dominant-baseline',
+    from: 'initial',
+    to: 'middle'
+  });
+
+  test_no_interpolation({
+    property: 'empty-cells',
+    from: 'initial',
+    to: 'hide'
+  });
+
+  test_no_interpolation({
+    property: 'fill-rule',
+    from: 'initial',
+    to: 'evenodd'
+  });
+
+  test_no_interpolation({
+    property: 'flex-direction',
+    from: 'initial',
+    to: 'column'
+  });
+
+  test_no_interpolation({
+    property: 'flex-wrap',
+    from: 'initial',
+    to: 'wrap'
+  });
+
+  test_no_interpolation({
+    property: 'float',
+    from: 'initial',
+    to: 'right'
+  });
+
+  test_no_interpolation({
+    property: 'font-family',
+    from: 'initial',
+    to: 'c'
+  });
+
+  test_no_interpolation({
+    property: 'font-kerning',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'font-optical-sizing',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'font-palette',
+    from: 'initial',
+    to: 'dark'
+  });
+
+  test_no_interpolation({
+    property: 'font-feature-settings',
+    from: 'initial',
+    to: '"smcp"'
+  });
+
+  test_no_interpolation({
+    property: 'font-synthesis-small-caps',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'font-synthesis-style',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'font-synthesis-weight',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'font-variant-alternates',
+    from: 'initial',
+    to: 'historical-forms'
+  });
+
+  test_no_interpolation({
+    property: 'font-variant-caps',
+    from: 'initial',
+    to: 'small-caps'
+  });
+
+  test_no_interpolation({
+    property: 'font-variant-east-asian',
+    from: 'initial',
+    to: 'full-width'
+  });
+
+  test_no_interpolation({
+    property: 'font-variant-numeric',
+    from: 'initial',
+    to: 'tabular-nums'
+  });
+
+  test_no_interpolation({
+    property: 'font-variant-position',
+    from: 'initial',
+    to: 'super'
+  });
+
+  test_no_interpolation({
+    property: 'forced-color-adjust',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'grid-auto-columns',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'grid-auto-flow',
+    from: 'initial',
+    to: 'column'
+  });
+
+  test_no_interpolation({
+    property: 'grid-auto-rows',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'grid-column-end',
+    from: 'initial',
+    to: '123'
+  });
+
+  test_no_interpolation({
+    property: 'grid-column-start',
+    from: 'initial',
+    to: '123'
+  });
+
+  test_no_interpolation({
+    property: 'grid-row-end',
+    from: 'initial',
+    to: '123'
+  });
+
+  test_no_interpolation({
+    property: 'grid-row-start',
+    from: 'initial',
+    to: '123'
+  });
+
+  test_no_interpolation({
+    property: 'grid-template-areas',
+    from: 'initial',
+    to: '"."'
+  });
+
+  test_no_interpolation({
+    property: 'hyphenate-character',
+    from: 'initial',
+    to: '"e"'
+  });
+
+  test_no_interpolation({
+    property: 'hyphenate-limit-chars',
+    from: 'initial',
+    to: '10'
+  });
+
+  test_no_interpolation({
+    property: 'hyphens',
+    from: 'initial',
+    to: 'auto'
+  });
+
+  test_no_interpolation({
+    property: 'image-orientation',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'image-rendering',
+    from: 'initial',
+    to: 'pixelated'
+  });
+
+  test_no_interpolation({
+    property: 'initial-letter',
+    from: 'initial',
+    to: '123'
+  });
+
+  test_no_interpolation({
+    property: 'isolation',
+    from: 'initial',
+    to: 'isolate'
+  });
+
+  test_no_interpolation({
+    property: 'justify-content',
+    from: 'initial',
+    to: 'center'
+  });
+
+  test_no_interpolation({
+    property: 'justify-items',
+    from: 'initial',
+    to: 'baseline'
+  });
+
+  test_no_interpolation({
+    property: 'justify-self',
+    from: 'initial',
+    to: 'baseline'
+  });
+
+  test_no_interpolation({
+    property: 'line-break',
+    from: 'initial',
+    to: 'anywhere'
+  });
+
+  test_no_interpolation({
+    property: 'list-style-position',
+    from: 'initial',
+    to: 'inside'
+  });
+
+  test_no_interpolation({
+    property: 'list-style-type',
+    from: 'initial',
+    to: 'square'
+  });
+
+  test_no_interpolation({
+    property: 'marker-end',
+    from: 'initial',
+    to: 'url("#ref")'
+  });
+
+  test_no_interpolation({
+    property: 'marker-mid',
+    from: 'initial',
+    to: 'url("#ref")'
+  });
+
+  test_no_interpolation({
+    property: 'marker-start',
+    from: 'initial',
+    to: 'url("#ref")'
+  });
+
+  test_no_interpolation({
+    property: 'mask-type',
+    from: 'initial',
+    to: 'alpha'
+  });
+
+  test_no_interpolation({
+    property: 'math-shift',
+    from: 'initial',
+    to: 'compact'
+  });
+
+  test_no_interpolation({
+    property: 'math-style',
+    from: 'initial',
+    to: 'compact'
+  });
+
+  test_no_interpolation({
+    property: 'mix-blend-mode',
+    from: 'initial',
+    to: 'overlay'
+  });
+
+  test_no_interpolation({
+    property: 'object-fit',
+    from: 'initial',
+    to: 'contain'
+  });
+
+  test_no_interpolation({
+    property: 'outline-style',
+    from: 'initial',
+    to: 'auto'
+  });
+
+  test_no_interpolation({
+    property: 'overflow-anchor',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'overflow-clip-margin',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'overflow-wrap',
+    from: 'initial',
+    to: 'anywhere'
+  });
+
+  test_no_interpolation({
+    property: 'overflow-x',
+    from: 'initial',
+    to: 'auto'
+  });
+
+  test_no_interpolation({
+    property: 'overflow-y',
+    from: 'initial',
+    to: 'hidden'
+  });
+
+  test_no_interpolation({
+    property: 'overscroll-behavior-x',
+    from: 'initial',
+    to: 'contain'
+  });
+
+  test_no_interpolation({
+    property: 'overscroll-behavior-y',
+    from: 'initial',
+    to: 'contain'
+  });
+
+  test_no_interpolation({
+    property: 'paint-order',
+    from: 'initial',
+    to: 'fill'
+  });
+
+  test_no_interpolation({
+    property: 'pointer-events',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'position',
+    from: 'initial',
+    to: 'relative'
+  });
+
+  test_no_interpolation({
+    property: 'position-fallback',
+    from: 'initial',
+    to: '--pf'
+  });
+
+  test_no_interpolation({
+    property: 'quotes',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'resize',
+    from: 'initial',
+    to: 'both'
+  });
+
+  test_no_interpolation({
+    property: 'ruby-position',
+    from: 'initial',
+    to: 'under'
+  });
+
+  test_no_interpolation({
+    property: 'scrollbar-gutter',
+    from: 'initial',
+    to: 'stable'
+  });
+
+  test_no_interpolation({
+    property: 'scrollbar-width',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-behavior',
+    from: 'initial',
+    to: 'smooth'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-margin-bottom',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-margin-left',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-margin-right',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-margin-top',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-padding-bottom',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-padding-left',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-padding-right',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-padding-top',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-snap-align',
+    from: 'initial',
+    to: 'center'
+  });
+
+  test_no_interpolation({
+    property: 'scroll-snap-type',
+    from: 'initial',
+    to: 'both'
+  });
+
+  test_no_interpolation({
+    property: 'shape-rendering',
+    from: 'initial',
+    to: 'optimizespeed'
+  });
+
+  // TODO this is failing for some reason
+  // Maybe it has to be used in conjunction with other properties?
+  /*test_no_interpolation({
+    property: 'size-adjust',
+    from: 'initial',
+    to: '90%'
+  });*/
+
+  test_no_interpolation({
+    property: 'speak',
+    from: 'initial',
+    to: 'spell-out'
+  });
+
+  test_no_interpolation({
+    property: 'stroke-linecap',
+    from: 'initial',
+    to: 'round'
+  });
+
+  test_no_interpolation({
+    property: 'stroke-linejoin',
+    from: 'initial',
+    to: 'round'
+  });
+
+  test_no_interpolation({
+    property: 'table-layout',
+    from: 'initial',
+    to: 'fixed'
+  });
+
+  test_no_interpolation({
+    property: 'text-align',
+    from: 'initial',
+    to: 'center'
+  });
+
+  test_no_interpolation({
+    property: 'text-align-last',
+    from: 'initial',
+    to: 'center'
+  });
+
+  test_no_interpolation({
+    property: 'text-anchor',
+    from: 'initial',
+    to: 'middle'
+  });
+
+  test_no_interpolation({
+    property: 'text-decoration-line',
+    from: 'initial',
+    to: 'underline'
+  });
+
+  test_no_interpolation({
+    property: 'text-decoration-style',
+    from: 'initial',
+    to: 'dashed'
+  });
+
+  test_no_interpolation({
+    property: 'text-decoration-thickness',
+    from: 'initial',
+    to: '123px'
+  });
+
+  test_no_interpolation({
+    property: 'text-emphasis-position',
+    from: 'initial',
+    to: 'under right'
+  });
+
+  test_no_interpolation({
+    property: 'text-emphasis-style',
+    from: 'initial',
+    to: 'dot'
+  });
+
+  test_no_interpolation({
+    property: 'text-overflow',
+    from: 'initial',
+    to: 'ellipsis'
+  });
+
+  test_no_interpolation({
+    property: 'text-rendering',
+    from: 'initial',
+    to: 'optimizespeed'
+  });
+
+  test_no_interpolation({
+    property: 'text-transform',
+    from: 'initial',
+    to: 'lowercase'
+  });
+
+  test_no_interpolation({
+    property: 'text-underline-position',
+    from: 'initial',
+    to: 'under'
+  });
+
+  test_no_interpolation({
+    property: 'toggle-visibility',
+    from: 'initial',
+    to: 'toggle t'
+  });
+
+  test_no_interpolation({
+    property: 'top-layer',
+    from: 'initial',
+    to: 'browser'
+  });
+
+  test_no_interpolation({
+    property: 'touch-action',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'transform-box',
+    from: 'initial',
+    to: 'fill-box'
+  });
+
+  test_no_interpolation({
+    property: 'transform-style',
+    from: 'initial',
+    to: 'preserve-3d'
+  });
+
+  test_no_interpolation({
+    property: 'user-select',
+    from: 'initial',
+    to: 'none'
+  });
+
+  test_no_interpolation({
+    property: 'vector-effect',
+    from: 'initial',
+    to: 'non-scaling-stroke'
+  });
+
+  test_no_interpolation({
+    property: 'view-transition-name',
+    from: 'initial',
+    to: 'target'
+  });
+
+  // TODO maybe these -webkit prefixed properties shouldn't be included since this is a WPT...?
+
+  // TODO this doesn't work
+  /*test_no_interpolation({
+    property: '-webkit-font-smoothing',
+    from: 'initial',
+    to: 'none'
+  });*/
+
+  test_no_interpolation({
+    property: '-webkit-highlight',
+    from: 'initial',
+    to: 'none'
+  });
+
+  // TODO this doesn't work
+  /*test_no_interpolation({
+    property: '-webkit-locale',
+    from: 'initial',
+    to: '\'en\''
+  });*/
+
+  test_no_interpolation({
+    property: '-webkit-mask-clip',
+    from: 'initial',
+    to: 'border-box'
+  });
+
+  test_no_interpolation({
+    property: '-webkit-mask-origin',
+    from: 'initial',
+    to: 'border-box'
+  });
+
+  // TODO this doesn't work
+  /*test_no_interpolation({
+    property: '-webkit-mask-repeat-x',
+    from: 'initial',
+    to: 'repeat'
+  });*/
+
+  // TODO this doesn't work
+  /*test_no_interpolation({
+    property: '-webkit-mask-repeat-y',
+    from: 'initial',
+    to: 'repeat'
+  });*/
+
+  // TODO this doesn't work
+  /*test_no_interpolation({
+    property: '-webkit-text-fill-color',
+    from: 'initial',
+    to: 'green'
+  });*/
+
+  // TODO this doesn't work
+  /*test_no_interpolation({
+    property: '-webkit-text-orientation',
+    from: 'initial',
+    to: 'sideways'
+  });*/
+
+  // TODO this doesn't work
+  /*test_no_interpolation({
+    property: '-webkit-text-stroke-width',
+    from: 'initial',
+    to: '123px'
+  });*/
+
+  test_no_interpolation({
+    property: 'white-space',
+    from: 'initial',
+    to: 'nowrap'
+  });
+
+  test_no_interpolation({
+    property: 'word-break',
+    from: 'initial',
+    to: 'break-word'
+  });
+
+  test_no_interpolation({
+    property: 'zoom',
+    from: 'initial',
+    to: '123'
+  });
+</script>
diff --git a/css/css-transitions/display-none-no-animations.html b/css/css-transitions/display-none-no-animations.html
new file mode 100644
index 000000000000000..32535baf9c7b1a2
--- /dev/null
+++ b/css/css-transitions/display-none-no-animations.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel=help href="mailto:jarhar@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=target>target</div>
+<style>
+#target {
+  display: none;
+  transition: 1s;
+  color: red;
+}
+#target.animated {
+  transition: 1s;
+  color: green;
+}
+</style>
+
+<script>
+test(() => {
+  target.addEventListener('transitionstart', () => {
+    assert_unreached('transitionstart should not be fired.');
+  });
+  target.classList.add('animated');
+  assert_equals(target.getAnimations().length, 0,
+    'There should not be any animations running.');
+}, 'Transitions and animations should not occur on display:none elements.');
+</script>
