[@container] Change order of container shorthand

Adjust ConsumeContainerName so that we don't fail parsing completely
whenever we encounter something unexpected.

Since the initial value of container-type is an open issue [1],
I'm leaving that as-is for now.

Fixed: 1305128

[1] w3c/csswg-drafts#7202

Change-Id: I156a8da9a79d2108935958f3418b16aeb83d490e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3575938
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#990367}

css/css-contain/container-queries/container-computed.html

@@ -14,16 +14,16 @@
 test_computed_value('container', 'initial', 'none');
 test_computed_value('container', 'inherit', 'none');
 test_computed_value('container', 'unset', 'none');
-test_computed_value('container', 'inline-size');
-test_computed_value('container', 'size');
+test_computed_value('container', 'none / inline-size');
+test_computed_value('container', 'none / size');
 test_computed_value('container', 'inline-size / inline-size');
-test_computed_value('container', 'size / block-size');
-test_computed_value('container', 'size style / name', 'style size / name');
-test_computed_value('container', 'inline-size style/ name', 'style inline-size / name');
-test_computed_value('container', 'inline-size / foo');
-test_computed_value('container', 'inline-size /foo', 'inline-size / foo');
-test_computed_value('container', 'inline-size/ foo', 'inline-size / foo');
-test_computed_value('container', 'inline-size/foo', 'inline-size / foo');
-test_computed_value('container', 'size / FoO', 'size / FoO');
-test_computed_value('container', 'size / foo bar', 'size / foo bar');
+test_computed_value('container', 'block-size / size');
+test_computed_value('container', 'name / size style', 'name / style size');
+test_computed_value('container', 'name /inline-size style', 'name / style inline-size');
+test_computed_value('container', 'foo / inline-size');
+test_computed_value('container', 'foo /inline-size', 'foo / inline-size');
+test_computed_value('container', 'foo/ inline-size', 'foo / inline-size');
+test_computed_value('container', 'foo/inline-size', 'foo / inline-size');
+test_computed_value('container', 'FoO / size');
+test_computed_value('container', 'foo bar / size', 'foo bar / size');
 </script>

css/css-contain/container-queries/container-parsing.html

@@ -18,35 +18,40 @@
 test_valid_value('container', 'none');
 test_valid_value('container', 'none / none', 'none');
 test_valid_value('container', 'inline-size');
-test_valid_value('container', 'inline-size / none', 'inline-size');
+test_valid_value('container', 'none / inline-size', 'none / inline-size');
 test_valid_value('container', 'size');
-test_valid_value('container', 'size / block-size');
+test_valid_value('container', 'block-size / size');
 test_valid_value('container', 'inline-size / inline-size');
 test_valid_value('container', 'size / size');
-test_valid_value('container', 'size style / none', 'style size');
-test_valid_value('container', 'size / foo');
-test_valid_value('container', 'size / foo bar');
+test_valid_value('container', 'none / size style', 'none / style size');
+test_valid_value('container', 'foo');
+test_valid_value('container', 'foo / none', 'foo');
+test_valid_value('container', 'foo bar / size');
+test_valid_value('container', 'foo bar / none', 'foo bar');
+test_valid_value('container', 'FOO / size');
+test_valid_value('container', 'FOO/size', 'FOO / size');
+test_valid_value('container', '  FOO  /size', 'FOO / size');
 
 test_invalid_value('container', 'none none');
 test_invalid_value('container', 'none inline-size');
-test_invalid_value('container', 'inline-size none');
-test_invalid_value('container', 'inline-size inline-size');
-test_invalid_value('container', 'inline-size block-size unknown');
-test_invalid_value('container', 'inline-size block-size');
-test_invalid_value('container', 'size block-size');
+test_invalid_value('container', 'none / inline-size none');
+test_invalid_value('container', 'none / inline-size inline-size');
+test_invalid_value('container', 'none / inline-size block-size unknown');
+test_invalid_value('container', 'none / inline-size block-size');
+test_invalid_value('container', 'none / size block-size');
 test_invalid_value('container', 'none, none');
-test_invalid_value('container', 'foo');
-test_invalid_value('container', 'foo, bar');
+test_invalid_value('container', 'none / foo');
+test_invalid_value('container', 'none / foo, bar');
 test_invalid_value('container', '#fff');
 test_invalid_value('container', '1px');
 test_invalid_value('container', 'default');
-test_invalid_value('container', 'inline-size / 10px');
-test_invalid_value('container', 'inline-size / #fefefe');
-test_invalid_value('container', 'inline-size / calc(3px)');
+test_invalid_value('container', '10px / inline-size');
+test_invalid_value('container', '#fefefe / inline-size');
+test_invalid_value('container', 'calc(3px) / inline-size');
 test_invalid_value('container', 'size 1 / name');
-test_invalid_value('container', 'block-size');
-test_invalid_value('container', 'block-size / name');
-test_invalid_value('container', 'block-size /  NAME', 'block-size / NAME');
-test_invalid_value('container', 'block-size/NAME','block-size / NAME');
+test_invalid_value('container', 'none / block-size');
+test_invalid_value('container', 'name / block-size');
+test_invalid_value('container', ' NAME  / block-size', 'NAME / block-size');
+test_invalid_value('container', 'NAME/block-size','NAME / block-size');
 test_invalid_value('container', 'block-size / block-size');
 </script>

css/css-contain/container-queries/container-selection.html

@@ -24,13 +24,13 @@
   .inline { container-type: inline-size; }
   .size { container-type: size; }
 
-  .a-inline { container:  inline-size / a; }
-  .a-size { container:  size / a; }
+  .a-inline { container: a / inline-size; }
+  .a-size { container: a / size; }
 
-  .b-size { container:  inline-size / b; }
-  .b-size { container:  size / b; }
+  .b-size { container: inline- b / size; }
+  .b-size { container: b / size; }
 
-  .ab-size { container: size / a b; }
+  .ab-size { container: a b / size; }
 
   .a { container-name: a; contain: strict; }
 

css/css-contain/container-queries/crashtests/canvas-as-container-crash.html

@@ -3,7 +3,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
 <link rel="help" href="https://crbug.com/1289850">
 <p>Pass if there is no crash.</p>
-<canvas id="canv" style="display:block;position:absolute;container:inline-size"></canvas>
+<canvas id="canv" style="display:block;position:absolute;container-type:inline-size"></canvas>
 <script>
   canv.offsetTop;
   canv.appendChild(document.createElement("span"));

css/css-contain/container-queries/crashtests/chrome-bug-1289718-000-crash.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289718">
-<div style="container:inline-size;">
+<div style="container-type:inline-size;">
   <span style="columns:2;"></span>
 </div>

css/css-contain/container-queries/crashtests/chrome-bug-1289718-001-crash.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289718">
-<div style="container:inline-size;">
+<div style="container-type:inline-size;">
   <video style="columns:2;"></video>
 </div>