Verified Commit cba67382 authored by Pier Angelo Vendrame's avatar Pier Angelo Vendrame 🎃 Committed by ma1
Browse files

Bug 2039206 - Wire WindowDevicePixelRatio to image-set.... 

Bug 2039206 - Wire WindowDevicePixelRatio to image-set. r=firefox-style-system-reviewers,emilio,layout-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D300449
parent 4c56e263

dom/base/ResponsiveImageSelector.cpp

+0 −4
Original line number Diff line number Diff line
@@ -351,10 +351,6 @@ bool ResponsiveImageSelector::SelectImage(bool aReselect) { 
  if (overrideDPPX > 0) {

    displayDensity = overrideDPPX;

  }

  if (doc->ShouldResistFingerprinting(RFPTarget::WindowDevicePixelRatio)) {

    displayDensity =

        nsRFPService::GetDevicePixelRatioAtZoom(pctx->GetFullZoom());

  }



  // Per spec, "In a UA-specific manner, choose one image source"

  // - For now, select the lowest density greater than displayDensity, otherwise

layout/base/nsPresContext.cpp

+4 −0
Original line number Diff line number Diff line
@@ -978,8 +978,12 @@ void nsPresContext::RecomputeBrowsingContextDependentData() { 
    auto systemZoom = LookAndFeel::SystemZoomSettings();

    SetFullZoom(browsingContext->FullZoom() * systemZoom.mFullZoom);

    SetTextZoom(browsingContext->TextZoom() * systemZoom.mTextZoom);

    if (doc->ShouldResistFingerprinting(RFPTarget::WindowDevicePixelRatio)) {

      SetOverrideDPPX(nsRFPService::GetDevicePixelRatioAtZoom(GetFullZoom()));

    } else {

      SetOverrideDPPX(browsingContext->OverrideDPPX());

    }

  }



  auto* top = browsingContext->Top();

  SetColorSchemeOverride([&] {

toolkit/components/resistfingerprinting/tests/browser/browser_srcset.js

+31 −4
Original line number Diff line number Diff line
@@ -4,8 +4,20 @@ 


"use strict";



async function precacheAssets(tab, zoom) {

  await SpecialPowers.spawn(tab.linkedBrowser, [zoom], async zoom => {

    const { Layout } = ChromeUtils.importESModule(

      "chrome://mochitests/content/browser/accessible/tests/browser/Layout.sys.mjs"

    );

    Layout.zoomDocument(content.document, zoom);

    const { promise, resolve } = Promise.withResolvers();

    content.requestAnimationFrame(resolve);

    await promise;

  });

}



async function runForZoomLevel(tab, zoom) {

  const [dpr, scale] = await SpecialPowers.spawn(

  const [dpr, scale, cssScale] = await SpecialPowers.spawn(

    tab.linkedBrowser,

    [zoom],

    async zoom => {
@@ -28,9 +40,16 @@ async function runForZoomLevel(tab, zoom) { 
      // Workaround: content.devicePixelRatio has the unspoofed value.

      const dpr = content.wrappedJSObject.devicePixelRatio;

      const current = img.currentSrc;

      const scale =

        current.substring(current.length - 6, current.length - 4) / 10;

      return [dpr, scale];

      const scale = parseFloat(current.match(/.*\/([0-9\.]+)\.png$/)[1]);



      const height = content.document

        .getElementById("imgset")

        .getBoundingClientRect().height;

      // The images have been crafted so that it is possible to reverse their

      // measured size (altered by the zoom) and find the scale.

      const cssScale = Math.round((height * dpr - 50) / 10) / 10 + 0.3;



      return [dpr, scale, cssScale];

    }

  );
@@ -39,6 +58,11 @@ async function runForZoomLevel(tab, zoom) { 
    true,

    `Image scale (${scale}) is within DPR (${dpr})`

  );

  is(

    Math.abs(dpr - cssScale) < 0.1,

    true,

    `CSS scale (${cssScale}) is within DPR (${dpr})`

  );

}



add_task(async () => {
@@ -53,6 +77,9 @@ add_task(async () => { 
    ) + "srcset.html";

  const tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, testPage);



  for (let zoom = 0.3; zoom < 2.09; zoom += 0.1) {

    await precacheAssets(tab, zoom);

  }

  for (let zoom = 0.3; zoom < 2.09; zoom += 0.1) {

    await runForZoomLevel(tab, zoom);

  }

toolkit/components/resistfingerprinting/tests/browser/srcset.html

+50 −5
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html>

  <head>

    <style>

#imgset {

  content: image-set(

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"></svg>') 0.3x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"></svg>') 0.4x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70"></svg>') 0.5x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"></svg>') 0.6x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"></svg>') 0.7x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"></svg>') 0.8x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110"></svg>') 0.9x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"></svg>') 1.0x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="130" height="130"></svg>') 1.1x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"></svg>') 1.2x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"></svg>') 1.3x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"></svg>') 1.4x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="170" height="170"></svg>') 1.5x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"></svg>') 1.6x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="190" height="190"></svg>') 1.7x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"></svg>') 1.8x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="210" height="210"></svg>') 1.9x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"></svg>') 2.0x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230"></svg>') 2.1x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"></svg>') 2.2x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"></svg>') 2.3x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"></svg>') 2.4x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="270" height="270"></svg>') 2.5x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280"></svg>') 2.6x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="290" height="290"></svg>') 2.7x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"></svg>') 2.8x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="310" height="310"></svg>') 2.9x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"></svg>') 3.0x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330"></svg>') 3.1x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="340" height="340"></svg>') 3.2x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"></svg>') 3.3x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360"></svg>') 3.4x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="370" height="370"></svg>') 3.5x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="380" height="380"></svg>') 3.6x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="390" height="390"></svg>') 3.7x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"></svg>') 3.8x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="410" height="410"></svg>') 3.9x,

      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420"></svg>') 4.0x

    );

}

    </style>

  </head>

  <body>

    <img id="srcset" srcset="

        03.png 0.3x, 04.png 0.4x, 05.png 0.5x, 06.png 0.6x, 07.png 0.7x, 08.png 0.8x, 09.png 0.9x,

        10.png 1x, 11.png 1.1x, 12.png 1.2x, 13.png 1.3x, 14.png 1.4x, 15.png 1.5x, 16.png 1.6x, 17.png 1.7x, 18.png 1.8x, 19.png 1.9x,

        20.png 2x, 21.png 2.1x, 22.png 2.2x, 23.png 2.3x, 24.png 2.4x, 25.png 2.5x, 26.png 2.6x, 27.png 2.7x, 28.png 2.8x, 29.png 2.9x,

        30.png 3x, 31.png 3.1x, 32.png 3.2x, 33.png 3.3x, 34.png 3.4x, 35.png 3.5x, 36.png 3.6x, 37.png 3.7x, 38.png 3.8x, 39.png 3.9x,

        40.png 4x

        0.65.png 0.65x, 0.85.png 0.85x, 1.05.png 1.05x, 1.25.png 1.25x, 1.45.png 1.45x, 1.65.png 1.65x, 1.85.png 1.85x,

        2.05.png 2.05x, 2.25.png 2.25x, 2.45.png 2.45x, 2.65.png 2.65x, 2.9.png 2.9x, 3.0.png 3.0x, 3.2.png 3.2x,

        3.4.png 3.4x, 3.6.png 3.6x, 3.8.png 3.8x, 4.0.png 4.0x

      ">

    <div id="imgset"></div>

  </body>

</html>