This is a regression issue broken in ‘M-70’ and below is the bisect info:
Good Build : 69.0.3500.0 (Revision : 577101)
Bad Build : 69.0.3501.0 (Revision : 577393)

(Unable to narrow down the range using per-revision bisect, hence providing bisect using old script)

Narrow bisect URL :
https://chromium.googlesource.com/chromium/src/+log/092314fbfea259e1bf334380483b54864d73461f..05d77a1fbd1e5c3aa15468e0c4ea833fe67a9b9a

Suspecting : r577360 ?

Oriol Brufau@ : Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.

Note : Issue is also observed in Linux(14.04 LTS) and Mac(10.12.6, 10.13.1, 10.14, 10.13.6) OS using latest Canary #69.0.3501.0 

Thank You..!

Deleted: Actual_result.mp4 1.1 MB

	Actual_result.mp4 1.1 MB View Download

Deleted: Expected_Result.mp4 568 KB

	Expected_Result.mp4 568 KB View Download

#Correction in Manual regression range given in Comment #1:

This is a regression issue broken in ‘M-70’ and below is the manual regression range :

Good Build : 70.0.3500.0 (Revision : 577101)
Bad Build : 70.0.3501.0 (Revision : 577393)

Shouldn't have happened, the webkit properties are aliases of the standard ones, so replacing them should have no effect. But maybe some merge conflict was solved incorrectly or something like this. I will take a look.

I can't reproduce these issues using a locally compiled Chromium 70.0.3502.0 on Linux (Lubuntu 18.04 LTS). I will try Windows next.

OK, I think the problem was that previously the code was
https://chromium.googlesource.com/chromium/src/+blame/092314fbfea259e1bf334380483b54864d73461f/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html#60

      :host ::slotted([slot=body]) {
        -webkit-padding-end: 20px;
        -webkit-padding-start: 20px;
        color: var(--cr-secondary-text-color);
        padding-bottom: 0;
        padding-top: 0;
        @apply --cr-dialog-body;
      }

Where --cr-dialog-body is
https://chromium.googlesource.com/chromium/src/+blame/092314fbfea259e1bf334380483b54864d73461f/chrome/browser/resources/md_extensions/options_dialog.html#31

        --cr-dialog-body: {
          -webkit-padding-end: 0;
          -webkit-padding-start: 0;
          height: 100%;
          padding-bottom: 0;
          padding-top: 0;
        };

This generated this output:
https://chromium.googlesource.com/chromium/src/out/+blame/0b5b964c28bb24330a38cd27b43f4030300f65f5/Debug/gen/chrome/browser/resources/md_extensions/vulcanized.html#2686

:host ::content> [slot=body] {
  -webkit-padding-end: 20px;
        -webkit-padding-start: 20px;
        color: var(--cr-secondary-text-color);
        padding-bottom: 0;
        padding-top: 0;
        -webkit-padding-end: var(--cr-dialog-body_-_-webkit-padding-end, 20px); -webkit-padding-start: var(--cr-dialog-body_-_-webkit-padding-start, 20px); height: var(--cr-dialog-body_-_height); padding-bottom: var(--cr-dialog-body_-_padding-bottom, 0); padding-top: var(--cr-dialog-body_-_padding-top, 0);
}

I guess the preprocessor detected that the paddings were defined as 20px, so this was used as the fallback value.

But my patch only replaced uses in ui/webui, not in chrome/browser. So now cr_dialog.html uses padding-inline-start and padding-inline-end, but --cr-dialog-body still uses the prefixed properties.

So I guess the preprocessor can't handle this properly, and the output is

https://chromium.googlesource.com/chromium/src/out/+blame/5dfceda2e805f9a2c9938cecc5a992af5ed6f68e/Debug/gen/chrome/browser/resources/md_extensions/vulcanized.html#2851

:host ::content> [slot=body] {
  color: var(--cr-secondary-text-color);
        padding-bottom: 0;
        padding-inline-end: 20px;
        padding-inline-start: 20px;
        padding-top: 0;
        -webkit-padding-end: var(--cr-dialog-body_-_-webkit-padding-end); -webkit-padding-start: var(--cr-dialog-body_-_-webkit-padding-start); height: var(--cr-dialog-body_-_height); padding-bottom: var(--cr-dialog-body_-_padding-bottom, 0); padding-top: var(--cr-dialog-body_-_padding-top, 0);
}

Can you update cr-dialog accordingly, so that padding values are not using both the non-prefixed and prefixed properties?

> Can you update cr-dialog accordingly, so that padding values are not using both the non-prefixed and prefixed properties?

Or even better (?), maybe update options_dialog.html to use the new non-prefixed versions, which IIUC should fix the issue.

Yes, in fact I had a single patch with all the changes. But it was huge, so I thought that splitting it into smaller parts would make reviewing and landing more easy. Sadly it has caused this problem. I will try to land the chrome part soon.

If you think landing a huge part for all of chrome/browser/resources might be too hard (many conflicts), perhaps we can land a CL that only fixes all usages of cr-dialog-body? See usages below.

[1] https://cs.chromium.org/search/?q=cr-dialog-body+-file:third_party+-file:infra+-file:out/Debug+-file:out/chromium-android/Debug+-file:out/android-Debug+-file:src/v8+-file:src/native_client-sdk&type=cs

OK. But for some reason I can't reproduce the issue with my local build, so I won't know if a smaller patch fixes the issue

In fact cr-dialog-body is not the only problem, I guess things like cr-checkbox-label-container are probably affected too. So I think replacing all uses in chrome will be a more complete solution.

Are you using optimize_webui=true in your GN args? It is required to reproduce (I was able to repro locally).

I could reproduce with optimize_webui=true, and checked that https://chromium-review.googlesource.com/c/chromium/src/+/1148579 fixes this.