tor-browser

commit f3376c3e464b4dbf49e5fed853582dc3bda71c80
parent 7bbef440d4af603e2493d767f8db66f53d658079
Author: moonira <moonira@google.com>
Date:   Tue, 16 Dec 2025 08:49:10 +0000

Bug 2006116 [wpt PR 56740] - Pass property info to CSS random() function, a=testonly

Automatic update from web-platform-tests
Pass property info to CSS random() function

When CSS random() function lacks identifier in <random-value-sharing>
argument we need to create random caching key [0] using the name of the
property the random function is used in (before shorthand expansion),
and the index of the random function among other random functions in
the same property value. For that after we got parsee CSSValue, we check
if that CSSValue has random function in it that requires property info.

Note: Test "Maximum random: 'random(a, b)'" still fails due to the
all elements created with "document.createElement" currently have one
blink Element object associated with them hence they all will have same
element id for random caching key. This is not related to this CL
changes, to be fixed separately.

[0] https://drafts.csswg.org/css-values-5/#random-caching-key

Bug: 413385732
Change-Id: Iac762bcc895b9156e0ddce9490d0e9a8ac4ce0da
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7218288
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Munira Tursunova <moonira@google.com>
Cr-Commit-Position: refs/heads/main@{#1558727}

--

wpt-commits: 84dbc85744aa3f1ac669ffd129998cbe045bd85d
wpt-pr: 56740

Diffstat:
M
testing/web-platform/tests/css/css-values/random-computed.tentative.html
 | 
72
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1 file changed, 72 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-values/random-computed.tentative.html b/testing/web-platform/tests/css/css-values/random-computed.tentative.html
@@ -9,12 +9,24 @@
   <div id="target"></div>
 </div>
 <style>
+  @property --x {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 3;
+  }
+  @property --y {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 3;
+  }
   .randomNoIdentifier {
     width: random(0px, 100px);
     height: random(0px, 100px);
     left: random(0px, 100000px);
     right: random(0px, 100000px);
     margin: random(0px, 100000px) random(0px, 100000px);
+    --x: random(0, 100);
+    --y: random(0, 100);
   }
   .randomMatchElement {
     width: random(element-shared, 0px, 100px);
@@ -23,6 +35,7 @@
     right: random(element-shared, 0px, 100000px);
     margin: random(element-shared 0px, 100000px) random(element-shared 0px, 100000px);
     translate: random(10%, 30%);
+    scale: random(element-shared, 1, 3) random(element-shared, 3, 9);
   }
   .randomIdentifier {
     width: random(--identifier, 0px, 100px);
@@ -338,23 +351,82 @@ test(() => {
 
   try {
     var allHaveSameMarginTopAndMarginLeft = true;
+    var allHaveSameMarginTopAndMarginBottom = true;
     for (i = 0; i < iterations; ++i) {
       const other = document.createElement('div');
       other.className = 'randomNoIdentifier';
       holder.appendChild(other);
       const otherComputedMarginLeft = getComputedStyle(other)['margin-left'];
       const otherComputedMarginTop = getComputedStyle(other)['margin-top'];
+      const otherComputedMarginBottom = getComputedStyle(other)['margin-bottom'];
       if (otherComputedMarginLeft != otherComputedMarginTop) {
         allHaveSameMarginTopAndMarginLeft = false;
       }
+      if (otherComputedMarginBottom != otherComputedMarginTop) {
+        allHaveSameMarginTopAndMarginBottom = false;
+      }
     }
 
     assert_false(allHaveSameMarginTopAndMarginLeft);
+    assert_true(allHaveSameMarginTopAndMarginBottom);
   } finally {
     document.body.removeChild(holder);
   }
 }, `Maximum random - shorthand: random(a, b)`);
 
+
+test(() => {
+  const holder = document.createElement('div');
+  document.body.appendChild(holder);
+
+  try {
+    const el = document.createElement('div');
+    el.className = 'randomMatchElement';
+    holder.appendChild(el);
+    const elScale = getComputedStyle(el)['scale'];
+
+    var allHaveSameScaleXAndScaleY = true;
+    var allSame = true;
+    for (i = 0; i < iterations; ++i) {
+      const other = document.createElement('div');
+      other.className = 'randomMatchElement';
+      holder.appendChild(other);
+      const otherScale = getComputedStyle(other)['scale'];
+      if (elScale != otherScale) {
+        allSame = false;
+      }
+      let [scaleX, scaleY] = otherScale.split(' ');
+      if (scaleX != scaleY) {
+        allHaveSameScaleXAndScaleY = false;
+      }
+    }
+
+    assert_false(allHaveSameScaleXAndScaleY);
+    assert_true(allSame);
+  } finally {
+    document.body.removeChild(holder);
+  }
+}, `Maximum random - list: random(a, b)`);
+
+test(() => {
+  const holder = document.createElement('div');
+  document.body.appendChild(holder);
+
+  try {
+    for (i = 0; i < iterations; ++i) {
+      const el = document.createElement('div');
+      el.className = 'randomNoIdentifier';
+      holder.appendChild(el);
+      const elComputedX = getComputedStyle(el).getPropertyValue('--x');
+      const elComputedY = getComputedStyle(el).getPropertyValue('--y');
+      assert_false(elComputedX == elComputedY,
+                   "Different custom properties on the same element should not have equal values");
+    }
+  } finally {
+    document.body.removeChild(holder);
+  }
+}, `Maximum random custom property: 'random(a, b)'`);
+
 test(() => {
   const holder = document.createElement('div');
   document.body.appendChild(holder);