🚀 Baseline Autopilot Scan Report

5
Files Scanned
11
Issues Found

Scan Insights

basic.css

Before
1
/* basic.css */
2
/* Your tool should NOT find any issues in this file. */
3
4
body {
5
  margin: 0;
6
  padding: 0;
7
  font-family: sans-serif;
8
  color: #333;
9
}
After
1
/* basic.css */
2
/* Your tool should NOT find any issues in this file. */
3
4
body {
5
  margin: 0;
6
  padding: 0;
7
  font-family: sans-serif;
8
  color: #333;
9
}

demo1.css

Before
1
/* comprehensive-unsafe.css */
2
3
/* Feature: Container Queries */
4
@container (min-width: 800px) {
5
  .widget {
6
    font-size: 1.2rem;
7
  }
8
}
9
10
/* Feature: :has() selector */
11
article:has(h2.special) {
12
  border: 2px solid purple;
13
}
14
15
/* Feature: aspect-ratio */
16
.responsive-video {
17
  aspect-ratio: 16 / 9;
18
  width: 100%;
19
}
20
21
/* Feature: position: sticky */
22
nav.main-nav {
23
  position: sticky;
24
  top: 0;
25
  background: #fff;
26
}
27
28
/* Feature: :focus-visible */
29
a:focus-visible {
30
  outline: 3px solid skyblue;
31
}
After
1
/* comprehensive-unsafe.css */
2
3
/* Feature: Container Queries */
4
/* fallback for @container */
5
@media (min-width: 800px) {
6
  .widget {
7
    font-size: 1.2rem;
8
  }
9
}
10
11
/* Feature: :has() selector */
12
/* fallback for :has() */
13
article.has-h2special {
14
  border: 2px solid purple;
15
}
16
17
/* Feature: aspect-ratio */
18
.responsive-video {
19
  padding-top: 56.25%;
20
  height: 0;
21
  position: relative;
22
  width: 100%;
23
}
24
25
/* Feature: position: sticky */
26
nav.main-nav {
27
  position: sticky;
28
  top: 0;
29
  background: #fff;
30
}
31
32
/* Feature: :focus-visible */
33
a:focus {
34
  outline: 3px solid skyblue;
35
}

comprehensive-unsafe.js

Before
1
// A complex script that uses multiple non-baseline features together.
2
3
async function processAndCloneData() {
4
  // 1. AbortController is used to set a timeout for our API calls.
5
  const controller = new AbortController();
6
  const timeoutId = setTimeout(() => controller.abort(), 800);
7
8
  console.log('Racing two API endpoints...');
9
10
  try {
11
    // 2. Promise.any races two fetch requests.
12
    const firstSuccessfulResponse = await Promise.any([
13
      fetch('/api/fast-endpoint', { signal: controller.signal }),
14
      fetch('/api/slow-endpoint', { signal: controller.signal })
15
    ]);
16
17
    clearTimeout(timeoutId); // Clear the timeout since a promise succeeded.
18
19
    const originalData = await firstSuccessfulResponse.json();
20
    console.log('Received original data:', originalData);
21
22
    // 3. structuredClone is used to create a true deep copy of the complex data.
23
    const clonedData = structuredClone(originalData);
24
    clonedData.meta.processed = true;
25
26
    console.log('Successfully cloned and modified data:', clonedData);
27
    return clonedData;
28
29
  } catch (error) {
30
    if (error instanceof AggregateError) {
31
      console.error('Both API calls failed:', error.errors);
32
    } else {
33
      console.error('An error occurred:', error.name);
34
    }
35
  }
36
}
37
38
processAndCloneData();
After
1
async function processAndCloneData() {
2
    const controller = new ManualAbortController();
3
    const timeoutId = setTimeout(() => controller.abort(), 800);
4
    console.log('Racing two API endpoints...');
5
    try {
6
        const firstSuccessfulResponse = await Promise.any([
7
            fetch('/api/fast-endpoint', { signal: controller.signal }),
8
            fetch('/api/slow-endpoint', { signal: controller.signal })
9
        ]);
10
        clearTimeout(timeoutId);
11
        const originalData = await firstSuccessfulResponse.json();
12
        console.log('Received original data:', originalData);
13
        const clonedData = structuredClone(originalData);
14
        clonedData.meta.processed = true;
15
        console.log('Successfully cloned and modified data:', clonedData);
16
        return clonedData;
17
    } catch (error) {
18
        if (error instanceof AggregateError) {
19
            console.error('Both API calls failed:', error.errors);
20
        } else {
21
            console.error('An error occurred:', error.name);
22
        }
23
    }
24
}
25
processAndCloneData();

demo1.js

Before
1
// A complex script that uses multiple non-baseline features together.
2
3
async function processAndCloneData() {
4
  // 1. AbortController is used to set a timeout for our API calls.
5
  const controller = new AbortController();
6
  const timeoutId = setTimeout(() => controller.abort(), 800);
7
8
  console.log('Racing two API endpoints...');
9
10
  try {
11
    // 2. Promise.any races two fetch requests.
12
    const firstSuccessfulResponse = await Promise.any([
13
      fetch('/api/fast-endpoint', { signal: controller.signal }),
14
      fetch('/api/slow-endpoint', { signal: controller.signal })
15
    ]);
16
17
    clearTimeout(timeoutId); // Clear the timeout since a promise succeeded.
18
19
    const originalData = await firstSuccessfulResponse.json();
20
    console.log('Received original data:', originalData);
21
22
    // 3. structuredClone is used to create a true deep copy of the complex data.
23
    const clonedData = structuredClone(originalData);
24
    clonedData.meta.processed = true;
25
26
    console.log('Successfully cloned and modified data:', clonedData);
27
    return clonedData;
28
29
  } catch (error) {
30
    if (error instanceof AggregateError) {
31
      console.error('Both API calls failed:', error.errors);
32
    } else {
33
      console.error('An error occurred:', error.name);
34
    }
35
  }
36
}
37
38
processAndCloneData();
After
1
async function processAndCloneData() {
2
    const controller = new ManualAbortController();
3
    const timeoutId = setTimeout(() => controller.abort(), 800);
4
    console.log('Racing two API endpoints...');
5
    try {
6
        const firstSuccessfulResponse = await Promise.any([
7
            fetch('/api/fast-endpoint', { signal: controller.signal }),
8
            fetch('/api/slow-endpoint', { signal: controller.signal })
9
        ]);
10
        clearTimeout(timeoutId);
11
        const originalData = await firstSuccessfulResponse.json();
12
        console.log('Received original data:', originalData);
13
        const clonedData = structuredClone(originalData);
14
        clonedData.meta.processed = true;
15
        console.log('Successfully cloned and modified data:', clonedData);
16
        return clonedData;
17
    } catch (error) {
18
        if (error instanceof AggregateError) {
19
            console.error('Both API calls failed:', error.errors);
20
        } else {
21
            console.error('An error occurred:', error.name);
22
        }
23
    }
24
}
25
processAndCloneData();

demo2.js

Before
1
// modern-but-safe.js
2
// Your tool should NOT find any issues in this file.
3
4
const getUserProfile = async (id) => {
5
  const response = await fetch(`https://api.example.com/users/${id}`);
6
  const user = await response.json();
7
8
  // These are modern but baseline-supported features
9
  const street = user?.address?.street ?? 'No street provided';
10
  return `User ${user.name} lives on ${street}.`;
11
};
12
13
getUserProfile(1);
After
1
const getUserProfile = async id => {
2
    const response = await fetch(`https://api.example.com/users/${ id }`);
3
    const user = await response.json();
4
    const street = user?.address?.street ?? 'No street provided';
5
    return `User ${ user.name } lives on ${ street }.`;
6
};
7
getUserProfile(1);