Export (mostly anchor positioning related) tests from WebKit

tuankiet65 · tuankiet65 · commit 6ee4340a397d · 2025-02-24T10:30:57.000-08:00
* css/css-anchor-position/try-tactic-basic-anchor.html: add new position-try-fallbacks test * css/css-typed-om/the-stylepropertymap/properties/anchor-scope.html: fix case when anchor-scope value is a single identifier. Following the reification rules of CSSStyleValue (https://drafts.css-houdini.org/css-typed-om-1/#reify-stylevalue), a list should be reified as the first iteration of the list. * web-animations/animation-model/animation-types/property-list.js: Add properties previously untested.
diff --git a/css/css-anchor-position/try-tactic-basic-anchor.html b/css/css-anchor-position/try-tactic-basic-anchor.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: simple try-tactic with anchor</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-try-tactic">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+  }
+  #anchor {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 50px;
+    height: 50px;
+    background-color:red;
+    anchor-name: --anchor;
+  }
+  #target1 {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    /* Does not fit ... */
+    left: anchor(--anchor left);
+    top: anchor(--anchor bottom);
+    /* flip-block fits */
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    background-color: coral;
+  }
+  #target2 {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    /* Does not fit ... */
+    left: anchor(--anchor right);
+    top: anchor(--anchor top);
+    /* flip-inline fits */
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    background-color: blue;
+  }
+  #target3 {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    /* Does not fit ... */
+    left: anchor(--anchor right);
+    top: anchor(--anchor bottom);
+    /* flip-block flip-inline fits */
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    background-color: green;
+  }
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=target1></div>
+  <div id=target2></div>
+  <div id=target3></div>
+</div>
+<script>
+  test(() => {
+    let cs = getComputedStyle(target1);
+    assert_equals(cs.left, '100px');
+    assert_equals(cs.top, '0px');
+  }, 'Uses flip-block');
+  test(() => {
+    let cs = getComputedStyle(target2);
+    assert_equals(cs.left, '0px');
+    assert_equals(cs.top, '100px');
+  }, 'Uses flip-inline');
+  test(() => {
+    let cs = getComputedStyle(target3);
+    assert_equals(cs.left, '0px');
+    assert_equals(cs.top, '0px');
+  }, 'Uses flip-block flip-inline');
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/anchor-scope.html b/css/css-typed-om/the-stylepropertymap/properties/anchor-scope.html
@@ -13,10 +13,11 @@
 runPropertyTests('anchor-scope', [
   { syntax: 'none' },
   { syntax: 'all' },
+  { syntax: '--a' },
 ]);
 
 runUnsupportedPropertyTests('anchor-scope', [
-  '--a', '--a, --b'
+  '--a, --b'
 ]);
 
 </script>
diff --git a/web-animations/animation-model/animation-types/property-list.js b/web-animations/animation-model/animation-types/property-list.js
@@ -25,6 +25,12 @@ const gCSSProperties1 = {
       { type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] }
     ]
   },
+  'anchor-scope': {
+    // https://drafts.csswg.org/css-anchor-position-1/#anchor-scope
+    types: [
+      { type: 'discrete', options: [ [ 'none', 'all' ] ] }
+    ]
+  },
   'appearance': {
     // https://drafts.csswg.org/css-ui/#appearance-switching
     types: [
@@ -570,6 +576,10 @@ const gCSSProperties1 = {
       { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
     ]
   },
+  'font-width': {
+    // https://drafts.csswg.org/css-fonts-4/#propdef-font-width
+    types: [ 'percentage' ]
+  },
   'float': {
     // https://drafts.csswg.org/css-page-floats/#propdef-float
     types: [
